From 849eac68eda5966998d3768d9073bff75476b9c5 Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Thu, 29 Oct 2026 23:50:32 +0100
Subject: [PATCH] feat: add opt-in extensions from a terminal desktop app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extensions found while using WireLayer in a desktop terminal app (Tauri,
Vue). All opt-in except the positioner fix: without the new props,
defaults, DOM, ARIA and keyboard stay as they were.

- Fix: popups with a positioner stay above dialogs – the theme gives
  Ark's positioners z-index: var(--z-index); Vue patched Ark's inline
  z-index away on every render
- Values that are never empty: RadioGroup and SegmentedControl with
  required, NativeSelect without placeholder, NumberInput emptyFallback
  ('min' | 'previous'), Select emptyValue (e.g. "") – narrower v-model /
  onValueChange types
- Focus: data-autoselect in Dialog, focusFirst() (DialogContent in Vue,
  a helper for React), Wizard focusOnStepChange
- Wizard and Stepper: finishLabel; validate may return a text that is
  shown as the step's error
- Progress status 'neutral', Avatar initials, Card size 'sm', Code in
  the main package (InlineCode's look without shiki)
- resolveTokens(), watchTokens() and useResolvedTokens() for canvas
  libraries
- ContextMenu before-open: second argument { source, focused }
- Tabs: TabsTrigger controls, null value with the first tab reachable
- Vite plugin: imports added while vite dev runs reach Tailwind (a file
  in Vite's cache folder)
- rounded-card and rounded-panel count as radii for tailwind-merge
- Docs: migration guide, implementation notes, regenerated MCP data

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/compact-display.md                 |  19 +
 .changeset/context-menu-keyboard.md           |  10 +
 .changeset/dialog-focus.md                    |  15 +
 .changeset/non-empty-values.md                |  13 +
 .changeset/number-input-empty-fallback.md     |  11 +
 .changeset/positioner-z-index.md              |   9 +
 .changeset/resolve-tokens.md                  |  10 +
 .changeset/select-empty-value.md              |   8 +
 .changeset/tabs-panels-elsewhere.md           |  10 +
 .changeset/vite-plugin-dev-imports.md         |   8 +
 .changeset/wizard-texts.md                    |   8 +
 apps/storybook/src/Migration.mdx              |  16 +
 docs/implementation-notes.md                  |  18 +
 packages/mcp/data/components.json             | 276 +++++++++++--
 .../src/components/Avatar/Avatar.stories.tsx  |  12 +
 .../native/src/components/Avatar/Avatar.tsx   |  17 +-
 .../components/Progress/Progress.stories.tsx  |   1 +
 .../src/components/Progress/Progress.tsx      |   7 +-
 .../src/components/RadioGroup/RadioGroup.tsx  |  25 +-
 packages/parity/e2e/navigation.spec.ts        |  12 +
 packages/parity/e2e/overlays.spec.ts          |  22 +
 .../native-data-avatar--own-initials.png      | Bin 0 -> 6291 bytes
 .../native-feedback-progress--compact.png     | Bin 7082 -> 7871 bytes
 .../react-data-avatar--own-initials.png       | Bin 0 -> 6425 bytes
 .../react-data-card--small.png                | Bin 0 -> 16281 bytes
 .../react-data-code--playground.png           | Bin 0 -> 10893 bytes
 .../react-feedback-progress--compact.png      | Bin 11436 -> 13165 bytes
 ...eact-forms-numberinput--empty-fallback.png | Bin 0 -> 11750 bytes
 ...react-forms-select--empty-string-value.png | Bin 0 -> 7116 bytes
 .../react-forms-wizard--own-texts.png         | Bin 0 -> 12100 bytes
 ...eact-navigation-tabs--panels-elsewhere.png | Bin 0 -> 10389 bytes
 .../react-overlays-dialog--own-steps.png      | Bin 0 -> 6243 bytes
 ...eact-overlays-dialog--selected-on-open.png | Bin 0 -> 6681 bytes
 ...react-utilities-hooks--resolved-tokens.png | Bin 0 -> 23728 bytes
 packages/parity/src/app-extensions.test.ts    | 389 ++++++++++++++++++
 packages/parity/src/cases.ts                  |  42 ++
 packages/parity/src/desktop.test.ts           |   2 +-
 packages/parity/src/hooks.test.ts             |  14 +
 packages/parity/src/vite-plugin.test.ts       |  39 ++
 .../src/components/Avatar/Avatar.stories.tsx  |  12 +
 .../react/src/components/Avatar/Avatar.tsx    |   5 +-
 .../src/components/Card/Card.stories.tsx      |  26 ++
 packages/react/src/components/Card/Card.tsx   |   7 +-
 .../src/components/Code/Code.stories.tsx      |  19 +
 packages/react/src/components/Code/Code.tsx   |  20 +
 .../ContextMenu/ContextMenu.stories.tsx       |   7 +-
 .../components/ContextMenu/ContextMenu.tsx    |  17 +-
 .../src/components/Dialog/Dialog.stories.tsx  |  91 +++-
 .../react/src/components/Dialog/Dialog.tsx    |  30 +-
 .../NativeSelect/NativeSelect.stories.tsx     |   4 +-
 .../components/NativeSelect/NativeSelect.tsx  |  29 +-
 .../NumberInput/NumberInput.stories.tsx       |  35 +-
 .../components/NumberInput/NumberInput.tsx    |  40 +-
 .../components/Progress/Progress.stories.tsx  |   3 +-
 .../src/components/Progress/Progress.tsx      |   9 +-
 .../src/components/RadioGroup/RadioGroup.tsx  |  32 +-
 .../SegmentedControl/SegmentedControl.tsx     |  27 +-
 .../src/components/Select/Select.stories.tsx  |  29 ++
 .../react/src/components/Select/Select.tsx    |  28 +-
 .../react/src/components/Stepper/Stepper.tsx  |   5 +-
 .../src/components/Tabs/Tabs.stories.tsx      |  40 ++
 packages/react/src/components/Tabs/Tabs.tsx   |  62 ++-
 .../src/components/Wizard/Wizard.stories.tsx  |  55 +++
 .../react/src/components/Wizard/Wizard.tsx    |  37 +-
 packages/react/src/hooks/Hooks.stories.tsx    |  25 +-
 packages/react/src/hooks/index.ts             |   8 +-
 packages/react/src/hooks/media.ts             |  17 +-
 packages/react/src/index.ts                   |  17 +-
 packages/react/typecheck/NonEmptyValues.tsx   |  44 ++
 packages/recipes/src/a11y.ts                  |  46 +++
 packages/recipes/src/card.ts                  |  20 +
 packages/recipes/src/config.ts                |   4 +
 packages/recipes/src/index.ts                 |   4 +
 packages/recipes/src/native/data.ts           |   2 +
 packages/recipes/src/native/display.ts        |   2 +
 packages/recipes/src/navigation.ts            |   9 +-
 packages/recipes/src/tv.ts                    |   4 +-
 packages/recipes/src/utils.ts                 |  29 ++
 packages/recipes/src/vite.ts                  |  21 +-
 packages/tokens/scripts/build-theme.ts        |   6 +
 packages/tokens/src/index.ts                  |   1 +
 packages/tokens/src/resolve.ts                |  59 +++
 packages/tokens/test/theme.test.ts            |   9 +
 .../src/components/Avatar/Avatar.stories.ts   |  14 +
 packages/vue/src/components/Avatar/Avatar.vue |   4 +-
 .../vue/src/components/Card/Card.stories.ts   |  25 ++
 packages/vue/src/components/Card/Card.vue     |   8 +-
 .../vue/src/components/Code/Code.stories.ts   |  22 +
 packages/vue/src/components/Code/Code.vue     |  24 ++
 .../ContextMenu/ContextMenu.stories.ts        |   8 +-
 .../components/ContextMenu/ContextMenu.vue    |  15 +-
 .../src/components/Dialog/Dialog.stories.ts   |  55 ++-
 packages/vue/src/components/Dialog/Dialog.vue |  14 +-
 .../src/components/Dialog/DialogContent.vue   |  23 +-
 packages/vue/src/components/Dialog/context.ts |   5 +-
 .../components/NativeSelect/NativeSelect.vue  |  22 +-
 .../NumberInput/NumberInput.stories.ts        |  29 +-
 .../components/NumberInput/NumberInput.vue    |  36 +-
 .../components/Progress/Progress.stories.ts   |   6 +-
 .../vue/src/components/Progress/Progress.vue  |   9 +-
 .../src/components/RadioGroup/RadioGroup.vue  |  26 +-
 .../SegmentedControl/SegmentedControl.vue     |  28 +-
 .../src/components/Select/Select.stories.ts   |  26 ++
 packages/vue/src/components/Select/Select.vue |  27 +-
 .../vue/src/components/Stepper/Stepper.vue    |   4 +-
 .../vue/src/components/Tabs/Tabs.stories.ts   |  34 ++
 packages/vue/src/components/Tabs/Tabs.vue     |  18 +-
 .../vue/src/components/Tabs/TabsTrigger.vue   |  47 ++-
 packages/vue/src/components/Tabs/context.ts   |   4 +
 .../src/components/Wizard/Wizard.stories.ts   |  42 ++
 packages/vue/src/components/Wizard/Wizard.vue |  45 +-
 packages/vue/src/composables/Hooks.stories.ts |  23 +-
 packages/vue/src/composables/index.ts         |   8 +-
 packages/vue/src/composables/media.ts         |  30 +-
 packages/vue/src/index.ts                     |  17 +-
 packages/vue/typecheck/NonEmptyValues.vue     |  51 +++
 116 files changed, 2517 insertions(+), 241 deletions(-)
 create mode 100644 .changeset/compact-display.md
 create mode 100644 .changeset/context-menu-keyboard.md
 create mode 100644 .changeset/dialog-focus.md
 create mode 100644 .changeset/non-empty-values.md
 create mode 100644 .changeset/number-input-empty-fallback.md
 create mode 100644 .changeset/positioner-z-index.md
 create mode 100644 .changeset/resolve-tokens.md
 create mode 100644 .changeset/select-empty-value.md
 create mode 100644 .changeset/tabs-panels-elsewhere.md
 create mode 100644 .changeset/vite-plugin-dev-imports.md
 create mode 100644 .changeset/wizard-texts.md
 create mode 100644 packages/parity/e2e/visual/__screenshots__/native-data-avatar--own-initials.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-data-avatar--own-initials.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-data-card--small.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-data-code--playground.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-forms-numberinput--empty-fallback.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-forms-select--empty-string-value.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-forms-wizard--own-texts.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-navigation-tabs--panels-elsewhere.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--own-steps.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--selected-on-open.png
 create mode 100644 packages/parity/e2e/visual/__screenshots__/react-utilities-hooks--resolved-tokens.png
 create mode 100644 packages/parity/src/app-extensions.test.ts
 create mode 100644 packages/react/src/components/Code/Code.stories.tsx
 create mode 100644 packages/react/src/components/Code/Code.tsx
 create mode 100644 packages/react/typecheck/NonEmptyValues.tsx
 create mode 100644 packages/tokens/src/resolve.ts
 create mode 100644 packages/vue/src/components/Code/Code.stories.ts
 create mode 100644 packages/vue/src/components/Code/Code.vue
 create mode 100644 packages/vue/src/components/Tabs/context.ts
 create mode 100644 packages/vue/typecheck/NonEmptyValues.vue

diff --git a/.changeset/compact-display.md b/.changeset/compact-display.md
new file mode 100644
index 0000000..ded9e8c
--- /dev/null
+++ b/.changeset/compact-display.md
@@ -0,0 +1,19 @@
+---
+'@wirecore/wirelayer-recipes': minor
+'@wirecore/wirelayer-css': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+'@wirecore/wirelayer-native': minor
+---
+
+Display parts for dense desktop UIs, all opt-in:
+
+- `Progress status="neutral"`: a grey fill, e.g. for a cancelled transfer (also React Native)
+- `Avatar initials`: own initials instead of the ones from `name` ("MS" for "my-server"; also React Native)
+- `Card size="sm"`: smaller radius, padding and title, for lists of cards inside a dialog (`wc-card-sm` in HTML);
+  `ConfigProvider size` leaves cards alone
+- `Code` in the main package: code in a sentence with the look of `InlineCode`, without syntax colours and without the
+  optional `shiki`
+
+`rounded-card` and `rounded-panel` now count as radii for tailwind-merge (like `rounded-popup`): another radius in
+`class`/`classes` replaces them instead of both classes ending up on the element.
diff --git a/.changeset/context-menu-keyboard.md b/.changeset/context-menu-keyboard.md
new file mode 100644
index 0000000..89336ea
--- /dev/null
+++ b/.changeset/context-menu-keyboard.md
@@ -0,0 +1,10 @@
+---
+'@wirecore/wirelayer-recipes': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+`ContextMenu`'s `before-open` / `onBeforeOpen` gets a second argument `{ source: 'pointer' | 'keyboard', focused }`:
+opened with Shift+F10 or the menu key, `focused` is the element with the focus – a list can tell a row from its empty
+space even when the browser fires the event on the whole area. The first argument stays as it was.
+`createContextMenuSource()` in the recipes tells the two apart.
diff --git a/.changeset/dialog-focus.md b/.changeset/dialog-focus.md
new file mode 100644
index 0000000..1c8e07c
--- /dev/null
+++ b/.changeset/dialog-focus.md
@@ -0,0 +1,15 @@
+---
+'@wirecore/wirelayer-recipes': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+Focus for dialogs and wizards whose content changes:
+
+- `data-autoselect` on a field in a `Dialog`: it gets the focus when the dialog opens, with its text selected (e.g. a
+  prefilled name). Without it Ark's choice stays (an alertdialog's close button, `data-autofocus`, the first element)
+- `focusFirst(container)` (also from the component packages) focuses like opening does – `data-autoselect`,
+  `data-autofocus`/`autofocus`, otherwise the first field; Vue's `DialogContent` exposes it as `focusFirst()`
+- `Wizard focusOnStepChange` moves the focus into each new step the same way (not after a failed check: the invalid
+  field keeps it)
+- `autoselectElement(content)` in the recipes for a dialog's own initial focus
diff --git a/.changeset/non-empty-values.md b/.changeset/non-empty-values.md
new file mode 100644
index 0000000..0894963
--- /dev/null
+++ b/.changeset/non-empty-values.md
@@ -0,0 +1,13 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+'@wirecore/wirelayer-native': minor
+---
+
+Choices that cannot be empty give their value type without the empty value – no `$event && …` guard for a model that
+is never empty. Only the types change, unless noted:
+
+- `RadioGroup` and `SegmentedControl` with `required`: v-model / `onValueChange` get `V`, not `V | null`. A form reset
+  back to an empty start (the only way Ark empties the group) is no longer passed on for a required group.
+  `SegmentedControl` takes `required` now (`aria-required` on the group); React Native's `RadioGroup` is typed the same
+- `NativeSelect` without `placeholder`: `V`, not `V | ''` (only the placeholder option gives `''`)
diff --git a/.changeset/number-input-empty-fallback.md b/.changeset/number-input-empty-fallback.md
new file mode 100644
index 0000000..b898776
--- /dev/null
+++ b/.changeset/number-input-empty-fallback.md
@@ -0,0 +1,11 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+`NumberInput` with `emptyFallback`, for fields that always need a number (e.g. a port): an emptied field keeps its value
+while it is empty and falls back to `min` (or 0) or to the last valid number (`previous`) when it is left or Enter is
+pressed. v-model / `onValueChange` is then typed `number`. Without it an emptied field still reports null.
+
+Note for type code around the components: `NumberInput` (Vue) is generic now, so `InstanceType<typeof NumberInput>` and
+Storybook's `Meta<typeof NumberInput>` need a cast (as for Select).
diff --git a/.changeset/positioner-z-index.md b/.changeset/positioner-z-index.md
new file mode 100644
index 0000000..9851f4c
--- /dev/null
+++ b/.changeset/positioner-z-index.md
@@ -0,0 +1,9 @@
+---
+'@wirecore/wirelayer-tokens': patch
+'@wirecore/wirelayer-vue': patch
+'@wirecore/wirelayer-react': patch
+---
+
+Popups with a positioner (Select, Combobox, Menu, Popover …) stay above a dialog: the theme gives Ark's positioners
+`z-index: var(--z-index)` (in the base layer). Ark sets the z-index inline, but Vue removed it again whenever the popup
+rendered anew – the list then lay behind the dialog, looked closed and the pointer hit the dialog.
diff --git a/.changeset/resolve-tokens.md b/.changeset/resolve-tokens.md
new file mode 100644
index 0000000..e505032
--- /dev/null
+++ b/.changeset/resolve-tokens.md
@@ -0,0 +1,10 @@
+---
+'@wirecore/wirelayer-tokens': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+Token colours as fixed values for canvas libraries (xterm.js, charts) that cannot read CSS variables:
+`resolveTokens(element?)` gives the colours that apply right now (mode, theme and own overrides) as hex – `#rrggbbaa` for
+the translucent ones – and `watchTokens(onChange)` reports a change of mode, theme or system colour scheme. The
+composable/hook `useResolvedTokens()` keeps them up to date.
diff --git a/.changeset/select-empty-value.md b/.changeset/select-empty-value.md
new file mode 100644
index 0000000..a3a70fa
--- /dev/null
+++ b/.changeset/select-empty-value.md
@@ -0,0 +1,8 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+`Select` with `emptyValue`, e.g. `""` for a model that uses an empty string for "nothing chosen": the value counts as
+null – the placeholder shows, no development warning about an unknown value – and clearing gives it back instead of null
+(typed `V | E`). Without it `""` is still an unknown value shown as text.
diff --git a/.changeset/tabs-panels-elsewhere.md b/.changeset/tabs-panels-elsewhere.md
new file mode 100644
index 0000000..a38c9b7
--- /dev/null
+++ b/.changeset/tabs-panels-elsewhere.md
@@ -0,0 +1,10 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+`Tabs` for panels that live elsewhere (editor or terminal tabs, panes shown with `v-show`):
+
+- `TabsTrigger controls="pane-id"` points `aria-controls` at that element; `null` removes it (tabs without panels)
+- `Tabs` takes `null` as its value: no tab selected. The first enabled tab then stays reachable with Tab (Ark takes
+  every tab out of the Tab order without a selection); Tabs without a value stay as they were
diff --git a/.changeset/vite-plugin-dev-imports.md b/.changeset/vite-plugin-dev-imports.md
new file mode 100644
index 0000000..145fbed
--- /dev/null
+++ b/.changeset/vite-plugin-dev-imports.md
@@ -0,0 +1,8 @@
+---
+'@wirecore/wirelayer-recipes': patch
+---
+
+Vite plugin: a component imported for the first time while `vite dev` runs gets its classes right away. The plugin added
+its sources file to the CSS, but Tailwind's Vite plugin only builds a CSS file again when a file it imports changes on
+disk – the classes were missing until a restart (cards without padding, tiny avatars). In the dev server the imports now
+live in a file in Vite's cache folder; the build is unchanged.
diff --git a/.changeset/wizard-texts.md b/.changeset/wizard-texts.md
new file mode 100644
index 0000000..81ebf1b
--- /dev/null
+++ b/.changeset/wizard-texts.md
@@ -0,0 +1,8 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+Own texts in `Wizard` (and `Stepper`): `finishLabel` names the last button (default "Finish"), and a step's `validate`
+may return a text (also async) – it keeps the step open and is shown as its error instead of "Please check the entries
+in this step".
diff --git a/apps/storybook/src/Migration.mdx b/apps/storybook/src/Migration.mdx
index 3c96cff..1ea8bb0 100644
--- a/apps/storybook/src/Migration.mdx
+++ b/apps/storybook/src/Migration.mdx
@@ -74,3 +74,19 @@ by side, then the places where the two behave differently. The React package has
   numbers); `Checkbox` with a boolean model gives booleans.
 - **Compact parts:** `Progress size="xs"` with `hide-label`, `bar-text` and `status`; `Alert #actions`; `mono` on text
   fields; `DialogContent title-position="header"` puts the title next to the close button.
+- **Values that are never empty:** with `required`, `RadioGroup` and `SegmentedControl` give v-model `V` instead of
+  `V | null`; `NativeSelect` without `placeholder` gives `V` instead of `V | ''`; `NumberInput empty-fallback="min"` or
+  `"previous"` refills an emptied field when it is left (typed `number`). `Select empty-value=""` treats an empty string
+  like null – the placeholder shows, clearing gives `""` back.
+- **Focus in dialogs and wizards:** `data-autoselect` focuses a field and selects its text when the dialog opens (e.g. a
+  prefilled name). For content that changes while it is open, `DialogContent` exposes `focusFirst()` (React:
+  `focusFirst(element)`), and `Wizard focus-on-step-change` moves the focus into each new step. `Wizard finish-label`
+  names the last button; `validate` may return a text, shown as the step's error.
+- **Panels elsewhere:** `TabsTrigger controls="pane-id"` points a tab at a pane outside the Tabs (`:controls="null"`
+  for none); `Tabs` takes `null` for "no tab selected" – the first tab stays reachable with Tab.
+- **Context menus by keyboard:** `@before-open` gets a second argument `{ source: 'pointer' | 'keyboard', focused }` –
+  with Shift+F10 or the menu key `focused` is the element with the focus (e.g. the list row).
+- **Canvas libraries** (xterm.js, charts): `resolveTokens()` gives the token colours of the current mode and theme as hex;
+  `useResolvedTokens()` updates when the mode, the theme or the system colour scheme changes.
+- **More compact parts:** `Card size="sm"` for lists in dialogs, `Progress status="neutral"` for cancelled work,
+  `Avatar initials="MS"`, and `Code` for code in a sentence without shiki (the look of `InlineCode` from `/code`).
diff --git a/docs/implementation-notes.md b/docs/implementation-notes.md
index 4e1f659..3540757 100644
--- a/docs/implementation-notes.md
+++ b/docs/implementation-notes.md
@@ -152,6 +152,24 @@ Worth reading before changing the affected areas.
   or an effect (and React's `autoFocus`, which only calls `focus()`) is overridden. The trap looks for
   `[data-autofocus]`/`[autofocus]`; an `alertdialog` starts on its close button. In jsdom no field counts as focusable
   (no layout), so the test runs in the browser.
+- **Positioner z-index in Vue:** Ark copies the z-index of a popup's content to its positioner as an inline style
+  (`z-index: var(--z-index)`), after the render. Vue patches the positioner's `style` object on every render and clears
+  keys that are null there – `zIndex` is one of them, so the inline z-index was gone after the first update and the list
+  lay behind a dialog. The theme sets the same z-index for `[data-scope][data-part='positioner']` in the base layer
+  (a z-index utility on a positioner still wins).
+- **`data-autoselect` and the alertdialog:** the Dialog passes its own `initialFocusEl` to find the marked field – that
+  replaces Ark's default, which starts an `alertdialog` on its close button, so the Dialog takes the close button itself
+  for an alertdialog without a marked field.
+- **Tabs without a selected tab:** Ark makes only the selected tab tabbable – with the value null no tab is in the Tab
+  order. When the value is null on purpose, the first enabled tab gets `tabIndex` 0 (found in the DOM after rendering);
+  Tabs without a value (uncontrolled, no default) stay as they were.
+- **Tailwind's Vite plugin and added imports:** `@tailwindcss/vite` keeps the compiled CSS of a file until one of the
+  files it imports changes on disk – imports that a plugin adds to the code alone are ignored. In the dev server the
+  WireLayer plugin therefore writes them to a file in Vite's cache folder and imports that file.
+- **Narrower emit types:** `required` (RadioGroup, SegmentedControl), the placeholder (NativeSelect), `emptyFallback`
+  (NumberInput) and `emptyValue` (Select) are extra generics that only change the type of v-model/onValueChange.
+  `emptyValue` is `NoInfer` in the value types – otherwise the bound value would be taken as `E` and remove null from
+  the type even without `emptyValue`.
 - **Controlled form elements:** Vue additionally writes the value of a `<select>` as the attribute `value` (which
   `<select>` does not know), React only sets the property – the DOM comparison ignores this attribute. For `<textarea>`,
   React writes the value as text content and Ark Vue's factory additionally as an attribute – the passed value is
diff --git a/packages/mcp/data/components.json b/packages/mcp/data/components.json
index 4ea8150..23a2969 100644
--- a/packages/mcp/data/components.json
+++ b/packages/mcp/data/components.json
@@ -1911,6 +1911,12 @@
                     "optional": true,
                     "description": "Person or organisation – accessible name of the avatar and source of the initials"
                 },
+                {
+                    "name": "initials",
+                    "type": "string",
+                    "optional": true,
+                    "description": "Own initials instead of the ones taken from `name`, e.g. \"MS\" for \"my-server\""
+                },
                 {
                     "name": "src",
                     "type": "string",
@@ -1968,6 +1974,12 @@
                         "optional": true,
                         "description": "Person or organisation – accessible name of the avatar and source of the initials"
                     },
+                    {
+                        "name": "initials",
+                        "type": "string",
+                        "optional": true,
+                        "description": "Own initials instead of the ones taken from `name`, e.g. \"MS\" for \"my-server\""
+                    },
                     {
                         "name": "src",
                         "type": "string",
@@ -3729,6 +3741,12 @@
                     "optional": true,
                     "description": "`horizontal`: media at the start, the content beside it"
                 },
+                {
+                    "name": "size",
+                    "type": "'sm' | 'md'",
+                    "optional": true,
+                    "description": "`sm`: smaller radius, padding and title, e.g. for cards in a list inside a dialog"
+                },
                 {
                     "name": "media",
                     "type": "ReactNode",
@@ -3792,6 +3810,12 @@
                         "optional": true,
                         "description": "`horizontal`: media at the start, the content beside it"
                     },
+                    {
+                        "name": "size",
+                        "type": "'sm' | 'md'",
+                        "optional": true,
+                        "description": "`sm`: smaller radius, padding and title, e.g. for cards in a list inside a dialog"
+                    },
                     {
                         "name": "classes",
                         "type": "RecipeClasses<typeof cardRecipe> & RecipeClasses<typeof cardPartsRecipe>",
@@ -6011,6 +6035,46 @@
                 ]
             }
         },
+        {
+            "name": "Code",
+            "subpath": "",
+            "description": "Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki",
+            "category": "Data",
+            "story": "data-code--playground",
+            "extends": "ComponentProps<'code'>",
+            "props": [
+                {
+                    "name": "code",
+                    "type": "string",
+                    "optional": true,
+                    "description": "The code (one line) – or pass it as the content"
+                },
+                {
+                    "name": "classes",
+                    "type": "RecipeClasses<typeof inlineCodeRecipe>",
+                    "optional": true,
+                    "description": "Extra classes of the recipe (see the recipe inlineCode)"
+                }
+            ],
+            "vue": {
+                "props": [
+                    {
+                        "name": "code",
+                        "type": "string",
+                        "optional": true,
+                        "description": "The code (one line) – or pass it as the content"
+                    },
+                    {
+                        "name": "classes",
+                        "type": "RecipeClasses<typeof inlineCodeRecipe>",
+                        "optional": true,
+                        "description": "Extra classes of the recipe (see the recipe inlineCode)"
+                    }
+                ],
+                "slots": [],
+                "events": []
+            }
+        },
         {
             "name": "CodeHighlight",
             "subpath": "/code",
@@ -8461,9 +8525,9 @@
                 },
                 {
                     "name": "onBeforeOpen",
-                    "type": "(target: Element) => void",
+                    "type": "(target: Element, details: ContextMenuOpenDetails) => void",
                     "optional": true,
-                    "description": "A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer – select it before the menu shows)"
+                    "description": "A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer – select it before the menu shows); `details.source` tells pointer from keyboard, with the keyboard `details.focused` is the focused element (e.g. the row with the focus)"
                 },
                 {
                     "name": "ref",
@@ -8576,8 +8640,8 @@
                     },
                     {
                         "name": "before-open",
-                        "payload": "target: Element",
-                        "description": "A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer – select it before the menu shows)"
+                        "payload": "target: Element, details: ContextMenuOpenDetails",
+                        "description": "A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer – select it before the menu shows); `details.source` tells pointer from keyboard, with the keyboard `details.focused` is the focused element (e.g. the row with the focus)"
                     }
                 ]
             }
@@ -21827,7 +21891,7 @@
             "description": "The browser's select: its own keyboard and mobile pickers; inside a Field it is labelled and described",
             "category": "Forms",
             "story": "forms-nativeselect--playground",
-            "extends": "Omit<\n    ComponentProps<'select'>,\n    'size' | 'onChange'\n>",
+            "extends": "Omit<ComponentProps<'select'>, 'size' | 'onChange'>",
             "props": [
                 {
                     "name": "items",
@@ -21837,15 +21901,15 @@
                 },
                 {
                     "name": "onValueChange",
-                    "type": "(value: V | '') => void",
+                    "type": "(value: P extends string ? V | '' : V) => void",
                     "optional": true,
                     "description": "The chosen option's value with its type; the placeholder option gives an empty string"
                 },
                 {
                     "name": "placeholder",
-                    "type": "string",
+                    "type": "P",
                     "optional": true,
-                    "description": "First, empty option, e.g. \"Please choose\""
+                    "description": "First, empty option, e.g. \"Please choose\" – without it onValueChange only gets values (typed `V`, not `V | ''`)"
                 },
                 {
                     "name": "size",
@@ -21882,9 +21946,9 @@
                     },
                     {
                         "name": "placeholder",
-                        "type": "string",
+                        "type": "P",
                         "optional": true,
-                        "description": "First, empty option, e.g. \"Please choose\""
+                        "description": "First, empty option, e.g. \"Please choose\" – without it v-model only gets values (typed `V`, not `V | ''`)"
                     },
                     {
                         "name": "size",
@@ -21915,7 +21979,7 @@
                 "events": [
                     {
                         "name": "update:modelValue",
-                        "payload": "value: V | ''",
+                        "payload": "value: P extends string ? V | '' : V",
                         "description": ""
                     }
                 ]
@@ -22339,7 +22403,7 @@
                 },
                 {
                     "name": "onValueChange",
-                    "type": "(value: number | null) => void",
+                    "type": "(value: F extends string ? number : number | null) => void",
                     "optional": true,
                     "description": ""
                 },
@@ -22463,6 +22527,12 @@
                     "optional": true,
                     "description": "Out of min/max: `blur` corrects the value when the field is left (default), `strict` does not let it leave the range, `none` keeps it (mark it invalid yourself)"
                 },
+                {
+                    "name": "emptyFallback",
+                    "type": "F",
+                    "optional": true,
+                    "description": "A number is always set: an emptied field falls back to `min` (or 0) or to the last valid number (`previous`) when it is left or Enter is pressed – onValueChange then only gets numbers (typed `number`, not `number | null`)"
+                },
                 {
                     "name": "selectOnFocus",
                     "type": "boolean",
@@ -22628,6 +22698,12 @@
                         "optional": true,
                         "description": "Out of min/max: `blur` corrects the value when the field is left (default), `strict` does not let it leave the range, `none` keeps it (mark it invalid yourself)"
                     },
+                    {
+                        "name": "emptyFallback",
+                        "type": "F",
+                        "optional": true,
+                        "description": "A number is always set: an emptied field falls back to `min` (or 0) or to the last valid number (`previous`) when it is left or Enter is pressed – v-model then only gets numbers (typed `number`, not `number | null`)"
+                    },
                     {
                         "name": "selectOnFocus",
                         "type": "boolean",
@@ -22669,7 +22745,7 @@
                 "events": [
                     {
                         "name": "update:modelValue",
-                        "payload": "value: number | null",
+                        "payload": "value: F extends string ? number : number | null",
                         "description": ""
                     }
                 ]
@@ -25555,9 +25631,9 @@
                 },
                 {
                     "name": "status",
-                    "type": "'info' | 'success' | 'warn' | 'danger'",
+                    "type": "'info' | 'success' | 'warn' | 'danger' | 'neutral'",
                     "optional": true,
-                    "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer"
+                    "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled one"
                 },
                 {
                     "name": "hideLabel",
@@ -25648,9 +25724,9 @@
                     },
                     {
                         "name": "status",
-                        "type": "'info' | 'success' | 'warn' | 'danger'",
+                        "type": "'info' | 'success' | 'warn' | 'danger' | 'neutral'",
                         "optional": true,
-                        "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer"
+                        "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled one"
                     },
                     {
                         "name": "hideLabel",
@@ -26335,7 +26411,7 @@
                 },
                 {
                     "name": "onValueChange",
-                    "type": "(value: V | null) => void",
+                    "type": "(value: R extends true ? V : V | null) => void",
                     "optional": true,
                     "description": ""
                 },
@@ -26371,9 +26447,9 @@
                 },
                 {
                     "name": "required",
-                    "type": "boolean",
+                    "type": "R",
                     "optional": true,
-                    "description": ""
+                    "description": "A choice is required (aria-required). onValueChange then only gets values (typed `V`, not `V | null`): a form reset back to an empty start is not passed on"
                 },
                 {
                     "name": "name",
@@ -26434,9 +26510,9 @@
                     },
                     {
                         "name": "required",
-                        "type": "boolean",
+                        "type": "R & boolean",
                         "optional": true,
-                        "description": ""
+                        "description": "A choice is required (aria-required). v-model then only gets values (typed `V`, not `V | null`): a form reset back to an empty start is not passed on"
                     },
                     {
                         "name": "name",
@@ -26455,7 +26531,7 @@
                 "events": [
                     {
                         "name": "update:modelValue",
-                        "payload": "value: V | null",
+                        "payload": "value: R extends true ? V : V | null",
                         "description": ""
                     }
                 ]
@@ -28309,7 +28385,7 @@
                 },
                 {
                     "name": "onValueChange",
-                    "type": "(value: V | null) => void",
+                    "type": "(value: R extends true ? V : V | null) => void",
                     "optional": true,
                     "description": ""
                 },
@@ -28331,6 +28407,12 @@
                     "optional": true,
                     "description": ""
                 },
+                {
+                    "name": "required",
+                    "type": "R",
+                    "optional": true,
+                    "description": "A value is required (aria-required). onValueChange then only gets values (typed `V`, not `V | null`): a form reset back to an empty start is not passed on"
+                },
                 {
                     "name": "name",
                     "type": "string",
@@ -28376,6 +28458,12 @@
                         "optional": true,
                         "description": ""
                     },
+                    {
+                        "name": "required",
+                        "type": "R & boolean",
+                        "optional": true,
+                        "description": "A value is required (aria-required). v-model then only gets values (typed `V`, not `V | null`): a form reset back to an empty start is not passed on"
+                    },
                     {
                         "name": "name",
                         "type": "string",
@@ -28393,7 +28481,7 @@
                 "events": [
                     {
                         "name": "update:modelValue",
-                        "payload": "value: V | null",
+                        "payload": "value: R extends true ? V : V | null",
                         "description": ""
                     }
                 ]
@@ -28479,22 +28567,28 @@
                 },
                 {
                     "name": "value",
-                    "type": "V | null",
+                    "type": "V | NoInfer<E> | null",
                     "optional": true,
                     "description": "Selected value; any type (string, number, boolean, object)"
                 },
                 {
                     "name": "defaultValue",
-                    "type": "V | null",
+                    "type": "V | NoInfer<E> | null",
                     "optional": true,
                     "description": ""
                 },
                 {
                     "name": "onValueChange",
-                    "type": "(value: V | null) => void",
+                    "type": "(value: V | NoInfer<E>) => void",
                     "optional": true,
                     "description": ""
                 },
+                {
+                    "name": "emptyValue",
+                    "type": "E",
+                    "optional": true,
+                    "description": "The value that means \"nothing chosen\" instead of null, e.g. `\"\"`: it shows the placeholder, and clearing gives it back (onValueChange is then typed `V | E`, without null)"
+                },
                 {
                     "name": "placeholder",
                     "type": "string",
@@ -28686,16 +28780,22 @@
                     },
                     {
                         "name": "modelValue",
-                        "type": "V | null",
+                        "type": "V | NoInfer<E> | null",
                         "optional": true,
                         "description": "Selected value – use with v-model; any type (string, number, boolean, object)"
                     },
                     {
                         "name": "defaultValue",
-                        "type": "V | null",
+                        "type": "V | NoInfer<E> | null",
                         "optional": true,
                         "description": ""
                     },
+                    {
+                        "name": "emptyValue",
+                        "type": "E",
+                        "optional": true,
+                        "description": "The value that means \"nothing chosen\" instead of null, e.g. `\"\"`: it shows the placeholder, and clearing gives it back (v-model is then typed `V | E`, without null)"
+                    },
                     {
                         "name": "placeholder",
                         "type": "string",
@@ -28874,7 +28974,7 @@
                 "events": [
                     {
                         "name": "update:modelValue",
-                        "payload": "value: V | null",
+                        "payload": "value: V | NoInfer<E>",
                         "description": ""
                     },
                     {
@@ -31327,6 +31427,12 @@
                     "optional": true,
                     "description": "Label beside the number (default) or below it"
                 },
+                {
+                    "name": "finishLabel",
+                    "type": "string",
+                    "optional": true,
+                    "description": "Text of the last \"Next\" button, e.g. \"Create\" (default \"Finish\")"
+                },
                 {
                     "name": "children",
                     "type": "(index: number) => ReactNode",
@@ -31402,6 +31508,12 @@
                         "optional": true,
                         "description": "Label beside the number (default) or below it"
                     },
+                    {
+                        "name": "finishLabel",
+                        "type": "string",
+                        "optional": true,
+                        "description": "Text of the last \"Next\" button, e.g. \"Create\" (default \"Finish\")"
+                    },
                     {
                         "name": "classes",
                         "type": "RecipeClasses<typeof stepperRecipe>",
@@ -32018,9 +32130,9 @@
             "props": [
                 {
                     "name": "value",
-                    "type": "string",
+                    "type": "string | null",
                     "optional": true,
-                    "description": ""
+                    "description": "Selected tab; `null`: no tab selected (e.g. tabs of panels that live elsewhere – the first tab stays reachable with Tab)"
                 },
                 {
                     "name": "defaultValue",
@@ -32075,9 +32187,9 @@
                 "props": [
                     {
                         "name": "modelValue",
-                        "type": "string",
+                        "type": "string | null",
                         "optional": true,
-                        "description": "Selected tab – use with v-model"
+                        "description": "Selected tab – use with v-model; `null`: no tab selected (e.g. tabs of panels that live elsewhere – the first tab stays reachable with Tab)"
                     },
                     {
                         "name": "defaultValue",
@@ -32232,6 +32344,12 @@
                     "optional": true,
                     "description": ""
                 },
+                {
+                    "name": "controls",
+                    "type": "string | null",
+                    "optional": true,
+                    "description": "Id of the element the tab shows, when it is not a TabsContent of these Tabs (e.g. a pane elsewhere, hidden while not selected) – `null`: none (tabs without panels)"
+                },
                 {
                     "name": "classes",
                     "type": "RecipeClasses<typeof tabsRecipe>",
@@ -32265,6 +32383,12 @@
                         "optional": true,
                         "description": "Shows a close button (pointer) and closes with the Delete key; `close` reports it – remove the tab (and select another one) yourself. The focus moves to the neighbouring tab"
                     },
+                    {
+                        "name": "controls",
+                        "type": "string | null",
+                        "optional": true,
+                        "description": "Id of the element the tab shows, when it is not a TabsContent of these Tabs (e.g. a pane elsewhere shown with v-show) – `null`: none (tabs without panels)"
+                    },
                     {
                         "name": "classes",
                         "type": "RecipeClasses<typeof tabsRecipe>",
@@ -36708,6 +36832,18 @@
                     "optional": true,
                     "description": "Steps listed top to bottom beside the content"
                 },
+                {
+                    "name": "finishLabel",
+                    "type": "string",
+                    "optional": true,
+                    "description": "Text of the last button, e.g. \"Create\" (default \"Finish\")"
+                },
+                {
+                    "name": "focusOnStepChange",
+                    "type": "boolean",
+                    "optional": true,
+                    "description": "Moves the focus into a new step when the step changes: to the element marked data-autoselect (text selected), data-autofocus or autofocus, otherwise to the step's first field"
+                },
                 {
                     "name": "classes",
                     "type": "RecipeClasses<typeof wizardRecipe>",
@@ -36747,6 +36883,18 @@
                         "optional": true,
                         "description": "Steps listed top to bottom beside the content"
                     },
+                    {
+                        "name": "finishLabel",
+                        "type": "string",
+                        "optional": true,
+                        "description": "Text of the last button, e.g. \"Create\" (default \"Finish\")"
+                    },
+                    {
+                        "name": "focusOnStepChange",
+                        "type": "boolean",
+                        "optional": true,
+                        "description": "Moves the focus into a new step when the step changes: to the element marked data-autoselect (text selected), data-autofocus or autofocus, otherwise to the step's first field"
+                    },
                     {
                         "name": "classes",
                         "type": "RecipeClasses<typeof wizardRecipe>",
@@ -37152,6 +37300,11 @@
             "subpath": "/form",
             "description": "First readable message of TanStack Form errors (strings or Standard Schema issues)."
         },
+        {
+            "name": "focusFirst",
+            "subpath": "",
+            "description": ""
+        },
         {
             "name": "formatColor",
             "subpath": "",
@@ -37307,6 +37460,11 @@
             "subpath": "",
             "description": ""
         },
+        {
+            "name": "resolveTokens",
+            "subpath": "",
+            "description": ""
+        },
         {
             "name": "rowsToDataSource",
             "subpath": "/data-table",
@@ -37492,6 +37650,11 @@
             "subpath": "",
             "description": "The content box of an element as it changes (pass `ref` to it)"
         },
+        {
+            "name": "useResolvedTokens",
+            "subpath": "",
+            "description": "The token colours as fixed values (hex, see resolveTokens) – for canvas libraries like xterm.js that cannot read CSS variables; new values when the mode, the theme or the system colour scheme changes. On the server: the light base colours as written"
+        },
         {
             "name": "useScrollSpy",
             "subpath": "",
@@ -37546,6 +37709,11 @@
             "name": "virtualRows",
             "subpath": "/virtual",
             "description": "DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable features={[virtualRows]} virtual>`"
+        },
+        {
+            "name": "watchTokens",
+            "subpath": "",
+            "description": ""
         }
     ],
     "guides": [
@@ -37662,7 +37830,7 @@
         {
             "id": "migration-desktop-apps-dense-ui-many-dialogs",
             "title": "Desktop apps (dense UI, many dialogs)",
-            "text": "- **Focus from code:** the text fields expose `focus()`, `select()`, `setSelectionRange()` and the native input\n  (`element`) through a template ref – no `$el.querySelector('input')`. In a dialog, mark the first field with\n  `data-autofocus`: a `focus()` in `onMounted` is overridden by the dialog's focus trap.\n- **Window shortcuts in dialogs:** Enter/Escape listeners on `window` also get the keys of an open list. `Select` and\n  `Combobox` take `stop-key-propagation` and report `v-model:open`; `ContextMenu` reports `v-model:open` and the\n  right-clicked element (`@before-open`).\n- **Menus at a point:** `close-on-scroll`, `close-on-resize`, `close-on-blur`, and `highlight-first` so Enter takes the\n  first item.\n- **Closable tabs** are built in: `TabsTrigger closable @close` – the close button is not nested in the tab, Delete\n  closes the focused tab and the focus moves to its neighbour.\n- **Typed values:** `RadioGroup`, `SegmentedControl` and `NativeSelect` keep the type of the bound value (unions,\n  numbers); `Checkbox` with a boolean model gives booleans.\n- **Compact parts:** `Progress size=\"xs\"` with `hide-label`, `bar-text` and `status`; `Alert #actions`; `mono` on text\n  fields; `DialogContent title-position=\"header\"` puts the title next to the close button."
+            "text": "- **Focus from code:** the text fields expose `focus()`, `select()`, `setSelectionRange()` and the native input\n  (`element`) through a template ref – no `$el.querySelector('input')`. In a dialog, mark the first field with\n  `data-autofocus`: a `focus()` in `onMounted` is overridden by the dialog's focus trap.\n- **Window shortcuts in dialogs:** Enter/Escape listeners on `window` also get the keys of an open list. `Select` and\n  `Combobox` take `stop-key-propagation` and report `v-model:open`; `ContextMenu` reports `v-model:open` and the\n  right-clicked element (`@before-open`).\n- **Menus at a point:** `close-on-scroll`, `close-on-resize`, `close-on-blur`, and `highlight-first` so Enter takes the\n  first item.\n- **Closable tabs** are built in: `TabsTrigger closable @close` – the close button is not nested in the tab, Delete\n  closes the focused tab and the focus moves to its neighbour.\n- **Typed values:** `RadioGroup`, `SegmentedControl` and `NativeSelect` keep the type of the bound value (unions,\n  numbers); `Checkbox` with a boolean model gives booleans.\n- **Compact parts:** `Progress size=\"xs\"` with `hide-label`, `bar-text` and `status`; `Alert #actions`; `mono` on text\n  fields; `DialogContent title-position=\"header\"` puts the title next to the close button.\n- **Values that are never empty:** with `required`, `RadioGroup` and `SegmentedControl` give v-model `V` instead of\n  `V | null`; `NativeSelect` without `placeholder` gives `V` instead of `V | ''`; `NumberInput empty-fallback=\"min\"` or\n  `\"previous\"` refills an emptied field when it is left (typed `number`). `Select empty-value=\"\"` treats an empty string\n  like null – the placeholder shows, clearing gives `\"\"` back.\n- **Focus in dialogs and wizards:** `data-autoselect` focuses a field and selects its text when the dialog opens (e.g. a\n  prefilled name). For content that changes while it is open, `DialogContent` exposes `focusFirst()` (React:\n  `focusFirst(element)`), and `Wizard focus-on-step-change` moves the focus into each new step. `Wizard finish-label`\n  names the last button; `validate` may return a text, shown as the step's error.\n- **Panels elsewhere:** `TabsTrigger controls=\"pane-id\"` points a tab at a pane outside the Tabs (`:controls=\"null\"`\n  for none); `Tabs` takes `null` for \"no tab selected\" – the first tab stays reachable with Tab.\n- **Context menus by keyboard:** `@before-open` gets a second argument `{ source: 'pointer' | 'keyboard', focused }` –\n  with Shift+F10 or the menu key `focused` is the element with the focus (e.g. the list row).\n- **Canvas libraries** (xterm.js, charts): `resolveTokens()` gives the token colours of the current mode and theme as hex;\n  `useResolvedTokens()` updates when the mode, the theme or the system colour scheme changes.\n- **More compact parts:** `Card size=\"sm\"` for lists in dialogs, `Progress status=\"neutral\"` for cancelled work,\n  `Avatar initials=\"MS\"`, and `Code` for code in a sentence without shiki (the look of `InlineCode` from `/code`)."
         },
         {
             "id": "themes-custom-theme",
@@ -38233,6 +38401,12 @@
                         "optional": true,
                         "description": "Person or organisation – accessible name of the avatar and source of the initials"
                     },
+                    {
+                        "name": "initials",
+                        "type": "string",
+                        "optional": true,
+                        "description": "Own initials instead of the ones taken from `name`, e.g. \"MS\" for \"my-server\""
+                    },
                     {
                         "name": "src",
                         "type": "string",
@@ -47100,9 +47274,9 @@
                     },
                     {
                         "name": "status",
-                        "type": "'info' | 'success' | 'warn' | 'danger'",
+                        "type": "'info' | 'success' | 'warn' | 'danger' | 'neutral'",
                         "optional": true,
-                        "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer"
+                        "description": "Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled one"
                     },
                     {
                         "name": "hideLabel",
@@ -47448,7 +47622,7 @@
                     },
                     {
                         "name": "onValueChange",
-                        "type": "(value: V | null) => void",
+                        "type": "(value: R extends true ? V : V | null) => void",
                         "optional": true,
                         "description": ""
                     },
@@ -47484,9 +47658,9 @@
                     },
                     {
                         "name": "required",
-                        "type": "boolean",
+                        "type": "R",
                         "optional": true,
-                        "description": "Shows the required mark after the label"
+                        "description": "Shows the required mark after the label; onValueChange is then typed `V` (a choice is never undone)"
                     },
                     {
                         "name": "children",
@@ -51647,6 +51821,11 @@
                 "subpath": "/form",
                 "description": "First readable message of TanStack Form errors (strings or Standard Schema issues)."
             },
+            {
+                "name": "focusFirst",
+                "subpath": "",
+                "description": ""
+            },
             {
                 "name": "formatColor",
                 "subpath": "",
@@ -51807,6 +51986,11 @@
                 "subpath": "",
                 "description": ""
             },
+            {
+                "name": "resolveTokens",
+                "subpath": "",
+                "description": ""
+            },
             {
                 "name": "rowsToDataSource",
                 "subpath": "/data-table",
@@ -51992,6 +52176,11 @@
                 "subpath": "",
                 "description": "The content box of an element as it changes (bind `ref` to it)"
             },
+            {
+                "name": "useResolvedTokens",
+                "subpath": "",
+                "description": "The token colours as fixed values (hex, see resolveTokens) – for canvas libraries like xterm.js that cannot read CSS variables; new values when the mode, the theme or the system colour scheme changes. On the server: the light base colours as written"
+            },
             {
                 "name": "useScrollSpy",
                 "subpath": "",
@@ -52046,6 +52235,11 @@
                 "name": "virtualRows",
                 "subpath": "/virtual",
                 "description": "DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable :features=\"[virtualRows]\" virtual>`"
+            },
+            {
+                "name": "watchTokens",
+                "subpath": "",
+                "description": ""
             }
         ]
     }
diff --git a/packages/native/src/components/Avatar/Avatar.stories.tsx b/packages/native/src/components/Avatar/Avatar.stories.tsx
index 2b3b74c..8891ea6 100644
--- a/packages/native/src/components/Avatar/Avatar.stories.tsx
+++ b/packages/native/src/components/Avatar/Avatar.stories.tsx
@@ -52,3 +52,15 @@ export const SizesAndColors: Story = {
         </View>
     ),
 };
+
+/** `initials`: own initials instead of the ones from `name` (which takes the first letters of the words) */
+export const OwnInitials: Story = {
+    name: 'Own initials',
+    render: () => (
+        <View className="flex-row items-center gap-2">
+            <Avatar name="my-server" color="auto" />
+            <Avatar name="my-server" initials="MS" color="auto" />
+            <Avatar name="db_primary" initials="DB" color="info" shape="square" />
+        </View>
+    ),
+};
diff --git a/packages/native/src/components/Avatar/Avatar.tsx b/packages/native/src/components/Avatar/Avatar.tsx
index 0f817a7..d88d202 100644
--- a/packages/native/src/components/Avatar/Avatar.tsx
+++ b/packages/native/src/components/Avatar/Avatar.tsx
@@ -15,6 +15,8 @@ import { Icon, type IconComponent } from '../../utils/Icon.js';
 export interface AvatarProps extends Omit<ViewProps, 'children'> {
     /** Person or organisation – accessible name of the avatar and source of the initials */
     name?: string;
+    /** Own initials instead of the ones taken from `name`, e.g. "MS" for "my-server" */
+    initials?: string;
     /** Image URL; initials (or the icon) are shown while it loads or if it fails */
     src?: string;
     /** Icon shown when there is neither an image nor a name (default: user icon) */
@@ -27,13 +29,24 @@ export interface AvatarProps extends Omit<ViewProps, 'children'> {
 }
 
 /** Image, initials (from the name) or an icon – one image named by `name` for screen readers */
-export function Avatar({ name, src, icon = User, variant, size, shape, color, className, ...props }: AvatarProps) {
+export function Avatar({
+    name,
+    initials: ownInitials,
+    src,
+    icon = User,
+    variant,
+    size,
+    shape,
+    color,
+    className,
+    ...props
+}: AvatarProps) {
     const tint = color === 'auto' ? (name ? avatarColor(name) : undefined) : color;
     const styles = avatar({ variant, size, shape, color: tint });
     const [loaded, setLoaded] = useState(false);
     // A failed image falls back to the initials (or the icon) – also when the source changes later
     const [failed, setFailed] = useState<string | undefined>(undefined);
-    const initials = name ? getInitials(name) : '';
+    const initials = ownInitials ?? (name ? getInitials(name) : '');
 
     // With a name the avatar is one image for assistive tech; without it is decorative
     return (
diff --git a/packages/native/src/components/Progress/Progress.stories.tsx b/packages/native/src/components/Progress/Progress.stories.tsx
index 1c8fbd6..1d5bdce 100644
--- a/packages/native/src/components/Progress/Progress.stories.tsx
+++ b/packages/native/src/components/Progress/Progress.stories.tsx
@@ -47,6 +47,7 @@ export const Compact: Story = {
             <Progress value={42} label="backup.tar.gz" hideLabel showValue={false} barText="42 %" />
             <Progress value={0} label="logs.zip" hideLabel showValue={false} barText="waiting" />
             <Progress value={77} label="db.dump" hideLabel showValue={false} barText="failed" status="danger" />
+            <Progress value={30} label="media.tar" hideLabel showValue={false} barText="cancelled" status="neutral" />
             <Progress value={81} label="Disk" size="xs" status="warn" />
         </View>
     ),
diff --git a/packages/native/src/components/Progress/Progress.tsx b/packages/native/src/components/Progress/Progress.tsx
index fdc65fd..4f7ff05 100644
--- a/packages/native/src/components/Progress/Progress.tsx
+++ b/packages/native/src/components/Progress/Progress.tsx
@@ -35,8 +35,11 @@ export interface ProgressProps extends ViewProps {
     orientation?: 'horizontal' | 'vertical';
     /** `xs`: a thin bar with small text, e.g. in a list or a status bar */
     size?: 'xs' | 'md';
-    /** Colour of the filled part by its state, e.g. `danger` for a failed transfer */
-    status?: 'info' | 'success' | 'warn' | 'danger';
+    /**
+     * Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled
+     * one
+     */
+    status?: 'info' | 'success' | 'warn' | 'danger' | 'neutral';
     /** The label only for screen readers – it still names the progress bar */
     hideLabel?: boolean;
     /**
diff --git a/packages/native/src/components/RadioGroup/RadioGroup.tsx b/packages/native/src/components/RadioGroup/RadioGroup.tsx
index aa598f8..593ebd0 100644
--- a/packages/native/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/native/src/components/RadioGroup/RadioGroup.tsx
@@ -23,12 +23,15 @@ const RadioGroupContext = createContext<RadioGroupContextValue>({
 /** The surrounding RadioGroup (RadioCard) */
 export const useRadioGroup = () => useContext(RadioGroupContext);
 
-/** `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string) */
-export interface RadioGroupProps<V extends string | number = string> extends ViewProps {
+/**
+ * `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string); `R`: whether `required` is
+ * set (then onValueChange is typed `V`, not `V | null`)
+ */
+export interface RadioGroupProps<V extends string | number = string, R extends boolean = false> extends ViewProps {
     /** Selected value; numbers when the items have number values */
     value?: V | null;
     defaultValue?: V | null;
-    onValueChange?: (value: V | null) => void;
+    onValueChange?: (value: R extends true ? V : V | null) => void;
     /** Visible label, also the group's accessible name */
     label?: string;
     orientation?: RadioGroupOrientation;
@@ -36,13 +39,13 @@ export interface RadioGroupProps<V extends string | number = string> extends Vie
     columns?: number;
     disabled?: boolean;
     invalid?: boolean;
-    /** Shows the required mark after the label */
-    required?: boolean;
+    /** Shows the required mark after the label; onValueChange is then typed `V` (a choice is never undone) */
+    required?: R;
     children?: ReactNode;
 }
 
 /** One choice out of several (role radiogroup) named by its label; RadioGroupItem or RadioCard inside, cards in `columns` */
-export function RadioGroup<V extends string | number = string>({
+export function RadioGroup<V extends string | number = string, R extends boolean = false>({
     value,
     defaultValue = null,
     onValueChange,
@@ -51,12 +54,16 @@ export function RadioGroup<V extends string | number = string>({
     columns,
     disabled = false,
     invalid = false,
-    required = false,
+    required,
     className,
     children,
     ...props
-}: RadioGroupProps<V>) {
-    const [current, setCurrent] = useControllable(value, defaultValue, onValueChange);
+}: RadioGroupProps<V, R>) {
+    const [current, setCurrent] = useControllable(
+        value,
+        defaultValue,
+        onValueChange as ((value: V | null) => void) | undefined
+    );
     const labelId = `${useId()}label`;
     const styles = radioGroup({ orientation });
 
diff --git a/packages/parity/e2e/navigation.spec.ts b/packages/parity/e2e/navigation.spec.ts
index b9de441..c5267cb 100644
--- a/packages/parity/e2e/navigation.spec.ts
+++ b/packages/parity/e2e/navigation.spec.ts
@@ -22,6 +22,18 @@ test.describe('Select', () => {
         await expect(trigger).toHaveText('Cloud & DevOps');
     });
 
+    test('keeps the list above other popups and dialogs while it updates', async ({ page }) => {
+        await openStory(page, 'forms-select--playground');
+        await page.getByRole('combobox', { name: 'Service' }).focus();
+        await page.keyboard.press('Enter');
+        await expect(page.getByRole('listbox')).toBeVisible();
+        // A new highlight renders the Select again – in Vue that patched Ark's inline z-index away
+        await page.keyboard.press('ArrowDown');
+        await expect(page.getByRole('option', { name: 'Cloud & DevOps' })).toHaveAttribute('data-highlighted', '');
+        const positioner = page.locator('[data-scope=select][data-part=positioner]');
+        await expect.poll(() => positioner.evaluate((el) => getComputedStyle(el).zIndex)).toBe('50');
+    });
+
     test('closes with Escape without changing the value and skips disabled options', async ({ page }) => {
         await openStory(page, 'forms-select--playground');
         const trigger = page.getByRole('combobox', { name: 'Service' });
diff --git a/packages/parity/e2e/overlays.spec.ts b/packages/parity/e2e/overlays.spec.ts
index 118e202..0575c4c 100644
--- a/packages/parity/e2e/overlays.spec.ts
+++ b/packages/parity/e2e/overlays.spec.ts
@@ -31,6 +31,28 @@ test.describe('Menu', () => {
 });
 
 test.describe('Dialog', () => {
+    test('a field marked data-autoselect gets the focus with its text selected', async ({ page }) => {
+        await openStory(page, 'overlays-dialog--selected-on-open');
+        await page.getByRole('button', { name: 'Duplicate connection' }).click();
+        const name = page.getByRole('textbox', { name: 'Name' });
+        await expect(name).toBeFocused();
+        await expect
+            .poll(() => name.evaluate((el: HTMLInputElement) => [el.selectionStart, el.selectionEnd]))
+            .toEqual([0, 'web-01 (copy)'.length]);
+    });
+
+    test('focusFirst() focuses the new step of the content like opening does', async ({ page }) => {
+        await openStory(page, 'overlays-dialog--own-steps');
+        await page.getByRole('button', { name: 'New connection' }).click();
+        await expect(page.getByRole('textbox', { name: 'Host' })).toBeFocused();
+        await page.getByRole('button', { name: 'Next' }).click();
+        const user = page.getByRole('textbox', { name: 'User' });
+        await expect(user).toBeFocused();
+        await expect
+            .poll(() => user.evaluate((el: HTMLInputElement) => [el.selectionStart, el.selectionEnd]))
+            .toEqual([0, 4]);
+    });
+
     test('a field marked data-autofocus gets the focus when the dialog opens', async ({ page }) => {
         await openStory(page, 'overlays-dialog--initial-focus');
         await page.getByRole('button', { name: 'Rename connection' }).click();
diff --git a/packages/parity/e2e/visual/__screenshots__/native-data-avatar--own-initials.png b/packages/parity/e2e/visual/__screenshots__/native-data-avatar--own-initials.png
new file mode 100644
index 0000000000000000000000000000000000000000..431eb088d940910212ae3578e1d6cdb4c8a53ec1
GIT binary patch
literal 6291
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
Z3H(6zb_Mx&Yp4<6qPzFG`ZG6v`5)KztH%HU

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/native-feedback-progress--compact.png b/packages/parity/e2e/visual/__screenshots__/native-feedback-progress--compact.png
index 36f3f8ab8c4173ea50e59ad2939a8e92c47ee667..7a13c419beec9dd52cea11254117182960831dd6 100644
GIT binary patch
literal 7871
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
A)&Kwi

literal 7082
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
VII(bfNm&6-yPiK;dE)B5{{Wz8gf##F

diff --git a/packages/parity/e2e/visual/__screenshots__/react-data-avatar--own-initials.png b/packages/parity/e2e/visual/__screenshots__/react-data-avatar--own-initials.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9ab4f4936b2e16a9675ab23a0cafdf676daefb8
GIT binary patch
literal 6425
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

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-data-card--small.png b/packages/parity/e2e/visual/__screenshots__/react-data-card--small.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a38efd020123d95c721f01dc055a39187d82763
GIT binary patch
literal 16281
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
DG8UG2

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-data-code--playground.png b/packages/parity/e2e/visual/__screenshots__/react-data-code--playground.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3e98d2227c3ab6b5f1f443a3d330e8859a80dbd
GIT binary patch
literal 10893
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
B&3*s?

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-feedback-progress--compact.png b/packages/parity/e2e/visual/__screenshots__/react-feedback-progress--compact.png
index 8d744691afe0578ef1b665afaa9509bb2b70dbfd..d7a0fc254517b4ac0eb35ce262edf4d37ad54d71 100644
GIT binary patch
literal 13165
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
b2_k?v?oJ>L_wJ<d48X|1T)*<ydk_B&vcHD?

literal 11436
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

diff --git a/packages/parity/e2e/visual/__screenshots__/react-forms-numberinput--empty-fallback.png b/packages/parity/e2e/visual/__screenshots__/react-forms-numberinput--empty-fallback.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6f52506fa6545d123714a2bec04c153d4431b22
GIT binary patch
literal 11750
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
b?F2NQ(oIIi7zPVl05`7PHmtbf^!z^nmjS2w

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-forms-select--empty-string-value.png b/packages/parity/e2e/visual/__screenshots__/react-forms-select--empty-string-value.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0c3baab7a90bc08c61099313deb7ee0e73fce32
GIT binary patch
literal 7116
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

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-forms-wizard--own-texts.png b/packages/parity/e2e/visual/__screenshots__/react-forms-wizard--own-texts.png
new file mode 100644
index 0000000000000000000000000000000000000000..90cb09fe2a3a97b240b773228e56e057a71f98bd
GIT binary patch
literal 12100
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
ZpglX-THf*N9)c&3#aY|m@xNWY^KW82vm*ci

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-navigation-tabs--panels-elsewhere.png b/packages/parity/e2e/visual/__screenshots__/react-navigation-tabs--panels-elsewhere.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e2b5f8d9557cdcf258eab0ed40c0afef65f9669
GIT binary patch
literal 10389
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
aH9*@uEOC4G!I<g_;PM5h-w5Y!|M72!4${B?

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--own-steps.png b/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--own-steps.png
new file mode 100644
index 0000000000000000000000000000000000000000..49583f549eed0306495b7c518f5a5f6db563742d
GIT binary patch
literal 6243
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
DCQO-|

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--selected-on-open.png b/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--selected-on-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..29d16add4257b884540cf40566557b40e9a29760
GIT binary patch
literal 6681
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
R4@5xMF1ubLUby|szX8mbq=End

literal 0
HcmV?d00001

diff --git a/packages/parity/e2e/visual/__screenshots__/react-utilities-hooks--resolved-tokens.png b/packages/parity/e2e/visual/__screenshots__/react-utilities-hooks--resolved-tokens.png
new file mode 100644
index 0000000000000000000000000000000000000000..5868c84927050673e7cdf8a1f3f02aa59f4197b3
GIT binary patch
literal 23728
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

literal 0
HcmV?d00001

diff --git a/packages/parity/src/app-extensions.test.ts b/packages/parity/src/app-extensions.test.ts
new file mode 100644
index 0000000..edda79d
--- /dev/null
+++ b/packages/parity/src/app-extensions.test.ts
@@ -0,0 +1,389 @@
+import { fireEvent, screen, waitFor, within } from '@testing-library/dom';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { autoselectElement, focusFirst } from '@wirecore/wirelayer-recipes';
+import { resolveTokens, watchTokens } from '@wirecore/wirelayer-tokens';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { el, frameworks, render } from './harness.js';
+
+// Extensions from a second desktop app (a terminal: canvas colours, dense lists in dialogs, wizards). All opt-in –
+// without the new props the components behave as before
+describe.each(frameworks)('%s', (framework) => {
+    const onValue = framework === 'vue' ? 'onUpdate:modelValue' : 'onValueChange';
+    const valueProp = framework === 'vue' ? 'modelValue' : 'value';
+
+    describe('choices without an empty value', () => {
+        const resetForm = () => act(() => document.querySelector('form')!.reset());
+
+        it.each([
+            ['RadioGroup', 'RadioGroupItem'],
+            ['SegmentedControl', 'SegmentedControlItem'],
+        ])('%s: a form reset back to no value reports it – with required it does not', async (group, item) => {
+            const onChange = vi.fn();
+            const onRequiredChange = vi.fn();
+            const choices = (props: Record<string, unknown>) =>
+                el(
+                    group as 'RadioGroup',
+                    props,
+                    el(item as 'RadioGroupItem', { value: 'ssh' }, 'SSH'),
+                    el(item as 'RadioGroupItem', { value: 'sftp' }, 'SFTP')
+                );
+            await render(
+                framework,
+                el(
+                    'form',
+                    {},
+                    choices({ label: 'Protocol', [onValue]: onChange }),
+                    choices({ label: 'Fallback', required: true, [onValue]: onRequiredChange })
+                )
+            );
+            await userEvent.click(within(screen.getByRole('radiogroup', { name: 'Protocol' })).getByText('SFTP'));
+            await userEvent.click(within(screen.getByRole('radiogroup', { name: 'Fallback' })).getByText('SFTP'));
+            expect(onChange).toHaveBeenLastCalledWith('sftp');
+            expect(onRequiredChange).toHaveBeenLastCalledWith('sftp');
+            await resetForm();
+            // Ark reports the empty start: undefined (uncontrolled without a default) – a required group does not
+            await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2));
+            expect(onChange.mock.lastCall?.[0] ?? null).toBeNull();
+            expect(onRequiredChange).toHaveBeenCalledTimes(1);
+            expect(screen.getByRole('radiogroup', { name: 'Fallback' })).toHaveAttribute('aria-required', 'true');
+        });
+    });
+
+    describe('NumberInput emptyFallback', () => {
+        const field = () => screen.getByRole('spinbutton', { name: 'Port' });
+
+        it('previous: an emptied field keeps its value and shows it again when it is left', async () => {
+            const onChange = vi.fn();
+            await render(
+                framework,
+                el('NumberInput', {
+                    'aria-label': 'Port',
+                    defaultValue: 22,
+                    emptyFallback: 'previous',
+                    [onValue]: onChange,
+                })
+            );
+            await userEvent.clear(field());
+            expect(onChange).not.toHaveBeenCalledWith(null);
+            await userEvent.tab();
+            await waitFor(() => expect(field()).toHaveValue('22'));
+            expect(onChange).not.toHaveBeenCalledWith(null);
+        });
+
+        it('previous: the last valid number, also after typing another one', async () => {
+            const onChange = vi.fn();
+            await render(
+                framework,
+                el('NumberInput', {
+                    'aria-label': 'Port',
+                    defaultValue: 22,
+                    emptyFallback: 'previous',
+                    [onValue]: onChange,
+                })
+            );
+            await userEvent.clear(field());
+            await userEvent.type(field(), '2222');
+            expect(onChange).toHaveBeenLastCalledWith(2222);
+            await userEvent.clear(field());
+            await userEvent.keyboard('{Enter}');
+            await waitFor(() => expect(field()).toHaveValue('2,222'));
+            expect(onChange).toHaveBeenLastCalledWith(2222);
+        });
+
+        it('min: an emptied field becomes the minimum when it is left', async () => {
+            const onChange = vi.fn();
+            await render(
+                framework,
+                el('NumberInput', {
+                    'aria-label': 'Port',
+                    [valueProp]: 22,
+                    min: 1,
+                    emptyFallback: 'min',
+                    [onValue]: onChange,
+                })
+            );
+            await userEvent.clear(field());
+            await userEvent.tab();
+            await waitFor(() => expect(onChange).toHaveBeenLastCalledWith(1));
+            expect(onChange).not.toHaveBeenCalledWith(null);
+        });
+
+        it('without it an emptied field reports null (default)', async () => {
+            const onChange = vi.fn();
+            await render(framework, el('NumberInput', { 'aria-label': 'Port', defaultValue: 22, [onValue]: onChange }));
+            await userEvent.clear(field());
+            expect(onChange).toHaveBeenLastCalledWith(null);
+            await userEvent.tab();
+            expect(field()).toHaveValue('');
+        });
+    });
+
+    describe('Select emptyValue', () => {
+        const items = [
+            { value: 'ssh', label: 'SSH' },
+            { value: 'sftp', label: 'SFTP' },
+        ];
+        afterEach(() => vi.restoreAllMocks());
+
+        it('the empty string counts as nothing chosen: placeholder, no warning, clearing gives it back', async () => {
+            const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+            const onChange = vi.fn();
+            await render(
+                framework,
+                el('Select', {
+                    'aria-label': 'Protocol',
+                    items,
+                    placeholder: 'Choose',
+                    defaultValue: '',
+                    emptyValue: '',
+                    clearable: true,
+                    [onValue]: onChange,
+                })
+            );
+            const trigger = screen.getByRole('combobox', { name: 'Protocol' });
+            expect(trigger).toHaveTextContent('Choose');
+            await userEvent.click(trigger);
+            await userEvent.click(await screen.findByRole('option', { name: 'SFTP' }));
+            expect(onChange).toHaveBeenLastCalledWith('sftp');
+            await userEvent.click(screen.getByRole('button', { name: /clear/i }));
+            expect(onChange).toHaveBeenLastCalledWith('');
+            expect(warn.mock.calls.flat().join(' ')).not.toContain('not among its items');
+        });
+
+        it('without it clearing gives null (default)', async () => {
+            const onChange = vi.fn();
+            await render(
+                framework,
+                el('Select', {
+                    'aria-label': 'Protocol',
+                    items,
+                    defaultValue: 'ssh',
+                    clearable: true,
+                    [onValue]: onChange,
+                })
+            );
+            await userEvent.click(screen.getByRole('button', { name: /clear/i }));
+            expect(onChange).toHaveBeenLastCalledWith(null);
+        });
+    });
+
+    describe('Dialog focusFirst', () => {
+        it('focuses the field marked data-autoselect and selects its text', async () => {
+            let handle: { focusFirst(): HTMLElement | null } | HTMLElement | null = null;
+            await render(
+                framework,
+                el(
+                    'Dialog',
+                    { defaultOpen: true },
+                    el(
+                        'DialogContent',
+                        {
+                            title: 'Rename',
+                            ref: (value: typeof handle) => {
+                                if (value) handle = value;
+                            },
+                        },
+                        el('input', { 'aria-label': 'Host' }),
+                        el('input', { 'aria-label': 'Name', defaultValue: 'my-server', 'data-autoselect': '' })
+                    )
+                )
+            );
+            const name = await screen.findByRole<HTMLInputElement>('textbox', { name: 'Name' });
+            // Vue exposes focusFirst() on the content, React's ref is the element for the shared helper
+            act(() => {
+                if (framework === 'vue') (handle as { focusFirst(): HTMLElement | null }).focusFirst();
+                else focusFirst(handle as HTMLElement);
+            });
+            expect(name).toHaveFocus();
+            expect([name.selectionStart, name.selectionEnd]).toEqual([0, 'my-server'.length]);
+        });
+    });
+
+    describe('Wizard', () => {
+        const steps = [{ label: 'Host' }, { label: 'Login', validate: () => 'Sign-in was cancelled' }];
+        const stepField = (index: number) =>
+            index === 0
+                ? el('input', { 'aria-label': 'Host' })
+                : el('div', {}, el('button', { type: 'button' }, 'Help'), el('input', { 'aria-label': 'User' }));
+        const renderStep = {
+            $scoped: {
+                step: {
+                    react: 'renderStep',
+                    args: (index: number) => ({ index }),
+                    render: ({ index }: { index: number }) => stepField(index),
+                },
+            },
+        };
+
+        it('focusOnStepChange: Next moves the focus to the first field of the new step', async () => {
+            await render(framework, el('Wizard', { steps, focusOnStepChange: true, ...renderStep }));
+            await userEvent.click(screen.getByRole('button', { name: 'Next' }));
+            await waitFor(() => expect(screen.getByRole('textbox', { name: 'User' })).toHaveFocus());
+        });
+
+        it('finishLabel names the last button; a text from validate is the error of the step', async () => {
+            await render(framework, el('Wizard', { steps, defaultStep: 1, finishLabel: 'Create', ...renderStep }));
+            await userEvent.click(screen.getByRole('button', { name: 'Create' }));
+            expect(await screen.findByRole('alert')).toHaveTextContent('Sign-in was cancelled');
+        });
+
+        it('without them: "Finish", the general error and the focus stays on the button (default)', async () => {
+            const plain = [{ label: 'Host' }, { label: 'Login', validate: () => false }];
+            await render(framework, el('Wizard', { steps: plain, ...renderStep }));
+            const next = screen.getByRole('button', { name: 'Next' });
+            await userEvent.click(next);
+            await screen.findByRole('textbox', { name: 'User' });
+            expect(next).toHaveFocus();
+            await userEvent.click(screen.getByRole('button', { name: 'Finish' }));
+            expect(await screen.findByRole('alert')).not.toHaveTextContent('Sign-in');
+        });
+    });
+
+    describe('ContextMenu opened by keyboard', () => {
+        const items = [{ value: 'rename', label: 'Rename' }];
+
+        it('before-open tells the keyboard (with the focused element) from the pointer', async () => {
+            const onBeforeOpen = vi.fn();
+            await render(
+                framework,
+                el(
+                    'ContextMenu',
+                    { items, onBeforeOpen },
+                    el('ul', {}, el('li', { tabIndex: 0 }, 'host-1'), el('li', { tabIndex: 0 }, 'host-2'))
+                )
+            );
+            const row = screen.getByText('host-2');
+            const list = row.parentElement!;
+            act(() => row.focus());
+            fireEvent.keyDown(row, { key: 'F10', shiftKey: true });
+            // Some browsers fire the keyboard's contextmenu on the area, not on the focused row
+            fireEvent.contextMenu(list);
+            expect(onBeforeOpen).toHaveBeenLastCalledWith(list, { source: 'keyboard', focused: row });
+            await screen.findByRole('menu');
+            await userEvent.keyboard('{Escape}');
+            fireEvent.pointerDown(row, { pointerType: 'mouse', button: 2 });
+            fireEvent.contextMenu(row, { clientX: 40, clientY: 40 });
+            expect(onBeforeOpen).toHaveBeenLastCalledWith(row, { source: 'pointer', focused: null });
+        });
+    });
+
+    describe('Tabs with panels elsewhere', () => {
+        const tabs = (props: Record<string, unknown>) =>
+            el(
+                'Tabs',
+                { label: 'Sessions', ...props },
+                el(
+                    'TabsList',
+                    {},
+                    el('TabsTrigger', { value: 'one', controls: 'pane-one' }, 'One'),
+                    el('TabsTrigger', { value: 'two', controls: null }, 'Two'),
+                    el('TabsTrigger', { value: 'three' }, 'Three')
+                )
+            );
+
+        it('controls points a tab at its own element, null at none', async () => {
+            await render(framework, tabs({ defaultValue: 'two' }));
+            expect(screen.getByRole('tab', { name: 'One' })).toHaveAttribute('aria-controls', 'pane-one');
+            expect(screen.getByRole('tab', { name: 'Two' })).not.toHaveAttribute('aria-controls');
+        });
+
+        it('a null value selects no tab; the first one stays reachable with Tab, the arrow keys move on', async () => {
+            await render(framework, tabs({ [valueProp]: null }));
+            const all = screen.getAllByRole('tab');
+            await waitFor(() => expect(all.map((tab) => tab.tabIndex)).toEqual([0, -1, -1]));
+            expect(all.every((tab) => tab.getAttribute('aria-selected') === 'false')).toBe(true);
+            await userEvent.tab();
+            expect(all[0]).toHaveFocus();
+            await userEvent.keyboard('{ArrowRight}');
+            await waitFor(() => expect(all[1]).toHaveFocus());
+        });
+
+        it('without a value no tab is in the Tab order (default)', async () => {
+            await render(framework, tabs({}));
+            expect(screen.getAllByRole('tab').map((tab) => tab.tabIndex)).toEqual([-1, -1, -1]);
+        });
+    });
+
+    describe('display', () => {
+        it('Progress status neutral: a grey fill', async () => {
+            const container = await render(
+                framework,
+                el('Progress', { value: 40, label: 'Upload', status: 'neutral', barText: 'cancelled' })
+            );
+            expect(container.querySelector('[data-part=range]')).toHaveClass('bg-muted');
+        });
+
+        it('Avatar initials instead of the ones from the name', async () => {
+            await render(framework, el('Avatar', { name: 'my-server', initials: 'MS' }));
+            expect(screen.getByRole('img', { name: 'my-server' })).toHaveTextContent('MS');
+        });
+
+        it('Card size sm: smaller radius and padding', async () => {
+            await render(framework, el('Card', { size: 'sm', title: 'host-1', 'data-testid': 'card' }, 'Linux'));
+            expect(screen.getByTestId('card')).toHaveClass('rounded-xl', 'p-[var(--wc-card-p,0.75rem)]');
+            expect(screen.getByTestId('card')).not.toHaveClass('rounded-card');
+        });
+
+        it('Code: the look of InlineCode, from the prop or the content', async () => {
+            await render(framework, el('p', {}, el('Code', { code: 'npm i' }), el('Code', {}, 'pnpm add')));
+            expect(screen.getByText('npm i').tagName).toBe('CODE');
+            expect(screen.getByText('pnpm add')).toHaveClass('font-mono', 'bg-bg-2');
+        });
+    });
+});
+
+describe('focusFirst and autoselectElement', () => {
+    afterEach(() => document.body.replaceChildren());
+    const mount = (html: string) => {
+        document.body.innerHTML = html;
+        return document.body.firstElementChild as HTMLElement;
+    };
+
+    it('takes the marked element (selecting with data-autoselect), otherwise the first field', () => {
+        const box = mount(
+            '<div><button>Help</button><input aria-label="A"><span data-autoselect><input aria-label="B" value="abc"></span></div>'
+        );
+        const b = box.querySelector<HTMLInputElement>('[aria-label=B]')!;
+        expect(focusFirst(box)).toBe(b);
+        expect([b.selectionStart, b.selectionEnd]).toEqual([0, 3]);
+        const plain = mount('<div><button>Help</button><input aria-label="A" disabled><input aria-label="C"></div>');
+        expect(focusFirst(plain)).toBe(plain.querySelector('[aria-label=C]'));
+        expect(focusFirst(mount('<div><button>Only a button</button></div>'))).toBeNull();
+    });
+
+    it('autoselectElement: the element for a dialog to focus, selected once it has the focus', () => {
+        const box = mount('<div><input aria-label="A"><input aria-label="B" value="abc" data-autoselect></div>');
+        const b = autoselectElement(box)!;
+        expect(b).toBe(box.querySelector('[aria-label=B]'));
+        b.focus();
+        expect([(b as HTMLInputElement).selectionStart, (b as HTMLInputElement).selectionEnd]).toEqual([0, 3]);
+        expect(autoselectElement(mount('<div><input></div>'))).toBeUndefined();
+    });
+});
+
+describe('resolveTokens and watchTokens', () => {
+    const root = document.documentElement;
+    afterEach(() => {
+        root.removeAttribute('style');
+        root.removeAttribute('data-mode');
+    });
+
+    it('gives the token colours as hex – translucent ones with alpha', () => {
+        root.style.setProperty('--wc-bg', '#112233');
+        root.style.setProperty('--wc-line', 'rgba(0, 0, 0, 0.5)');
+        root.style.setProperty('--wc-primary', 'oklch(0.5 0 0)');
+        const tokens = resolveTokens();
+        expect(tokens.bg).toBe('#112233');
+        expect(tokens.line).toBe('#00000080');
+        expect(tokens.primary).toMatch(/^#([0-9a-f]{2})\1\1$/);
+    });
+
+    it('reports another mode on the page', async () => {
+        const onChange = vi.fn();
+        const stop = watchTokens(onChange);
+        root.dataset.mode = 'dark';
+        await waitFor(() => expect(onChange).toHaveBeenCalled());
+        stop();
+    });
+});
diff --git a/packages/parity/src/cases.ts b/packages/parity/src/cases.ts
index 38d322e..0083be4 100644
--- a/packages/parity/src/cases.ts
+++ b/packages/parity/src/cases.ts
@@ -407,6 +407,7 @@ export const cases: [string, El][] = [
     ['Avatar auto colour without name', el('Avatar', { size: 'xl', color: 'auto' })],
     ['Avatar as button', el('Avatar', { name: 'Julia Klein', as: 'button', size: 'sm' })],
     ['Avatar as button, own label', el('Avatar', { name: 'Julia Klein', as: 'button', 'aria-label': 'Account' })],
+    ['Avatar own initials', el('Avatar', { name: 'my-server', initials: 'MS' })],
     [
         'Menu with an Avatar trigger, arrow and placement',
         el(
@@ -528,6 +529,15 @@ export const cases: [string, El][] = [
             el('SegmentedControlItem', { value: 'en' }, 'EN')
         ),
     ],
+    [
+        'SegmentedControl required',
+        el(
+            'SegmentedControl',
+            { label: 'Protocol', required: true, defaultValue: 'ssh' },
+            el('SegmentedControlItem', { value: 'ssh' }, 'SSH'),
+            el('SegmentedControlItem', { value: 'sftp' }, 'SFTP')
+        ),
+    ],
 
     [
         'SegmentedControl, RadioGroup and ChipGroup in Field',
@@ -581,6 +591,16 @@ export const cases: [string, El][] = [
         el('Select', { items: selectItems, 'aria-label': 'Service', defaultValue: 'web', clearable: true }),
     ],
     ['Select clearable empty', el('Select', { items: selectItems, 'aria-label': 'Service', clearable: true })],
+    [
+        'Select empty string as no value',
+        el('Select', {
+            items: selectItems,
+            'aria-label': 'Service',
+            placeholder: 'Choose',
+            emptyValue: '',
+            defaultValue: '',
+        }),
+    ],
     ['Select loading', el('Select', { items: [], 'aria-label': 'Service', loading: true })],
     ...['sm', 'lg'].map((size): [string, El] => [
         `Select ${size}`,
@@ -632,6 +652,25 @@ export const cases: [string, El][] = [
 
     ['Tabs', tabsExample()],
     ['Tabs second selected', tabsExample({ defaultValue: 'services' })],
+    [
+        'Tabs with panels elsewhere',
+        el(
+            'div',
+            {},
+            el(
+                'Tabs',
+                { label: 'Sessions', defaultValue: 'one' },
+                el(
+                    'TabsList',
+                    {},
+                    el('TabsTrigger', { value: 'one', controls: 'pane-one' }, 'host-1'),
+                    el('TabsTrigger', { value: 'two', controls: 'pane-two' }, 'host-2')
+                )
+            ),
+            el('div', { id: 'pane-one' }, 'Terminal of host-1'),
+            el('div', { id: 'pane-two', hidden: true }, 'Terminal of host-2')
+        ),
+    ],
     [
         'Tabs vertical, manual, lazy',
         tabsExample({ orientation: 'vertical', activationMode: 'manual', lazyMount: true, unmountOnExit: true }),
@@ -716,6 +755,7 @@ export const cases: [string, El][] = [
         }),
     ],
     ['Progress text in the bar', el('Progress', { value: 42, label: 'Upload', barText: '42 %', status: 'success' })],
+    ['Progress neutral', el('Progress', { value: 42, label: 'Upload', barText: 'cancelled', status: 'neutral' })],
 
     ['Menu closed', el('Menu', { items: menuItems }, el('IconButton', { icon: icon('Ellipsis'), label: 'Actions' }))],
     ['ContextMenu closed', el('ContextMenu', { items: menuItems }, el('div', {}, 'Area'))],
@@ -2065,6 +2105,7 @@ export const cases: [string, El][] = [
     ],
     ['HoverCard without trigger', el('div', {}, el('HoverCard', { $slots: { content: 'Card' }, content: 'Card' }))],
     ['Kbd', el('p', {}, el('Kbd', {}, 'Ctrl'), ' + ', el('Kbd', {}, 'K'))],
+    ['Code', el('p', {}, 'Run ', el('Code', { code: 'npm i' }), ' or ', el('Code', {}, 'pnpm add'))],
     ['MonthPicker', el('Field', { label: 'Month' }, el('MonthPicker', { defaultValue: '2026-10' }))],
     ['Calendar', el('Calendar', { selectionMode: 'multiple', defaultValue: ['2026-10-20', '2026-10-22'] })],
     [
@@ -3136,6 +3177,7 @@ export const cases: [string, El][] = [
     ['Spinner label', el('Spinner', { label: 'Loading servers' })],
 
     ['Card', el('Card', {}, el('h3', {}, 'Software & Web'))],
+    ['Card sm', el('Card', { size: 'sm', title: 'host-1', subtitle: 'Linux · SSH' }, 'Last login today')],
     ['Card interactive asChild', el('Card', { interactive: true, asChild: true }, el('a', { href: '#' }, 'Hosting'))],
     [
         'Card title, media, header and footer',
diff --git a/packages/parity/src/desktop.test.ts b/packages/parity/src/desktop.test.ts
index bbac487..815a5d6 100644
--- a/packages/parity/src/desktop.test.ts
+++ b/packages/parity/src/desktop.test.ts
@@ -264,7 +264,7 @@ describe.each(frameworks)('%s', (framework) => {
             );
             const row = screen.getByText('host-2');
             fireEvent.contextMenu(row, { clientX: 40, clientY: 40 });
-            expect(onBeforeOpen).toHaveBeenCalledWith(row);
+            expect(onBeforeOpen).toHaveBeenCalledWith(row, { source: 'pointer', focused: null });
             const menu = await screen.findByRole('menu');
             expect(onOpenChange).toHaveBeenLastCalledWith(true);
             await waitFor(() =>
diff --git a/packages/parity/src/hooks.test.ts b/packages/parity/src/hooks.test.ts
index c171295..0e543da 100644
--- a/packages/parity/src/hooks.test.ts
+++ b/packages/parity/src/hooks.test.ts
@@ -120,6 +120,20 @@ describe.each(frameworks)('%s', (framework) => {
         }
     });
 
+    it('useResolvedTokens: the token colours as hex, new ones when the page changes', async () => {
+        const root = document.documentElement;
+        root.style.setProperty('--wc-bg', '#ffffff');
+        try {
+            const hook = await mountHook(framework, (l) => l.useResolvedTokens());
+            expect(read(hook.current()).bg).toBe('#ffffff');
+            await act(async () => root.style.setProperty('--wc-bg', '#0a0a0a'));
+            await waitFor(() => expect(read(hook.current()).bg).toBe('#0a0a0a'));
+            hook.unmount();
+        } finally {
+            root.removeAttribute('style');
+        }
+    });
+
     it('useClipboard: copies, reports copied for a while, keeps errors', async () => {
         const writeText = vi.fn().mockResolvedValue(undefined);
         Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
diff --git a/packages/parity/src/vite-plugin.test.ts b/packages/parity/src/vite-plugin.test.ts
index 6ce7d07..a5414da 100644
--- a/packages/parity/src/vite-plugin.test.ts
+++ b/packages/parity/src/vite-plugin.test.ts
@@ -97,3 +97,42 @@ describe('wirelayer()', () => {
         );
     });
 });
+
+describe('wirelayer() in the dev server', () => {
+    // @tailwindcss/vite only builds a CSS file again when a file it imports changed on disk: an import added while the
+    // dev server runs has to reach such a file, or its classes are missing until a restart
+    it('keeps the imports in a file of its own and rewrites it when a new import appears', async () => {
+        const cacheDir = join(app, 'node_modules/.vite');
+        const file = join(cacheDir, 'wirelayer-sources.css');
+        const handlers = new Map<string, (path: string) => void>();
+        const reloaded: unknown[] = [];
+        const server = {
+            watcher: { on: (event: string, handler: (path: string) => void) => handlers.set(event, handler) },
+            moduleGraph: { getModuleById: (id: string) => ({ id }) },
+            reloadModule: async (module: unknown) => void reloaded.push(module),
+        };
+        const plugin = wirelayer();
+        (plugin.configResolved as (config: { root: string; cacheDir: string }) => void)({ root: app, cacheDir });
+        (plugin.configureServer as unknown as (devServer: typeof server) => void)(server);
+        (plugin.buildStart as () => void)();
+        const code = (plugin.transform as (code: string, id: string) => { code: string })(
+            readFileSync(styles, 'utf8'),
+            styles
+        ).code;
+        expect(code).toContain(`@import '${file}';`);
+        expect(code).not.toContain('/sources/');
+        expect(readFileSync(file, 'utf8')).toContain('/sources/Card.css');
+        expect(readFileSync(file, 'utf8')).not.toContain('/sources/Avatar.css');
+
+        const added = join(app, 'src/Added.ts');
+        writeFileSync(added, "import { Avatar } from '@wirecore/wirelayer-react';\n");
+        try {
+            handlers.get('add')!(added);
+        } finally {
+            rmSync(added);
+        }
+        expect(readFileSync(file, 'utf8')).toContain('/sources/Avatar.css');
+        expect(reloaded).toEqual([{ id: styles }]);
+        expect(await build(code)).toContain('--wc-recipe-avatar');
+    });
+});
diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx
index 7335e23..e628ce0 100644
--- a/packages/react/src/components/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/components/Avatar/Avatar.stories.tsx
@@ -64,3 +64,15 @@ export const Colors: Story = {
         </div>
     ),
 };
+
+/** `initials`: own initials instead of the ones from `name` (which takes the first letters of the words) */
+export const OwnInitials: Story = {
+    name: 'Own initials',
+    render: () => (
+        <div className="flex items-center gap-2.5">
+            <Avatar name="my-server" color="auto" />
+            <Avatar name="my-server" initials="MS" color="auto" />
+            <Avatar name="db_primary" initials="DB" color="info" shape="square" />
+        </div>
+    ),
+};
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index d44036c..f0e172e 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -18,6 +18,8 @@ import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 export interface AvatarProps extends Omit<ComponentProps<'div'>, 'children'> {
     /** Person or organisation – accessible name of the avatar and source of the initials */
     name?: string;
+    /** Own initials instead of the ones taken from `name`, e.g. "MS" for "my-server" */
+    initials?: string;
     /** Image URL; initials (or the icon) are shown while it loads or if it fails */
     src?: string;
     /** Icon shown when there is neither an image nor a name (default: user icon) */
@@ -41,6 +43,7 @@ export interface AvatarProps extends Omit<ComponentProps<'div'>, 'children'> {
 export function Avatar({
     classes,
     name,
+    initials: ownInitials,
     src,
     icon: Icon = User,
     variant,
@@ -61,7 +64,7 @@ export function Avatar({
         grouped: groupSize !== null,
         interactive: Tag === 'button',
     });
-    const initials = name ? getInitials(name) : '';
+    const initials = ownInitials ?? (name ? getInitials(name) : '');
 
     const content = (
         <>
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index 07f8f72..bf560ce 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -92,3 +92,29 @@ export const Horizontal: Story = {
         </Card>
     ),
 };
+
+const hosts = [
+    { name: 'web-01', detail: 'Ubuntu 24.04 · SSH', state: 'Online' },
+    { name: 'db-primary', detail: 'Debian 12 · SSH', state: 'Online' },
+    { name: 'backup', detail: 'FreeBSD 14 · SFTP', state: 'Offline' },
+];
+
+/** `size="sm"`: smaller radius, padding and title – for lists of cards, e.g. inside a dialog */
+export const Small: Story = {
+    name: 'Small',
+    render: () => (
+        <ul className="flex w-80 flex-col gap-2">
+            {hosts.map((host) => (
+                <li key={host.name}>
+                    <Card
+                        size="sm"
+                        title={host.name}
+                        subtitle={host.detail}
+                        titleTag="p"
+                        header={<Badge variant={host.state === 'Online' ? 'success' : 'outline'}>{host.state}</Badge>}
+                    />
+                </li>
+            ))}
+        </ul>
+    ),
+};
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index de47dc9..c51b2f8 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -19,6 +19,8 @@ export interface CardProps extends Omit<ComponentProps<'div'>, 'title'> {
     titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
     /** `horizontal`: media at the start, the content beside it */
     orientation?: 'vertical' | 'horizontal';
+    /** `sm`: smaller radius, padding and title, e.g. for cards in a list inside a dialog */
+    size?: 'sm' | 'md';
     /** Image or video above the content (beside it when horizontal) */
     media?: ReactNode;
     /** Extra content in the header, after the title (e.g. a badge or a menu) */
@@ -38,6 +40,7 @@ export function Card({
     subtitle,
     titleTag: TitleTag = 'h3',
     orientation = 'vertical',
+    size,
     media,
     header,
     footer,
@@ -48,7 +51,7 @@ export function Card({
     const card = useRecipe('card', cardRecipe, classes);
     const cardParts = useRecipe('cardParts', cardPartsRecipe, classes);
     const horizontal = orientation === 'horizontal';
-    const base = card({ interactive, horizontal: horizontal || undefined, class: className });
+    const base = card({ interactive, horizontal: horizontal || undefined, size, class: className });
     const hasTitle = !!title || !!subtitle;
     // Without title, media, header or footer the card renders its content as before
     if (asChild || !(hasTitle || media || header || footer)) {
@@ -58,7 +61,7 @@ export function Card({
             </ark.div>
         );
     }
-    const parts = cardParts({ horizontal });
+    const parts = cardParts({ horizontal, size });
     return (
         <div {...props} className={base}>
             {media && <div className={parts.media()}>{media}</div>}
diff --git a/packages/react/src/components/Code/Code.stories.tsx b/packages/react/src/components/Code/Code.stories.tsx
new file mode 100644
index 0000000..5a39a8b
--- /dev/null
+++ b/packages/react/src/components/Code/Code.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Code } from './Code.js';
+
+const meta = {
+    title: 'Data/Code',
+    component: Code,
+    args: { code: 'data-theme' },
+    render: (args) => (
+        <p className="max-w-md text-sm">
+            Set the theme with <Code {...args} /> on the <Code>{'<html>'}</Code> element – the look of InlineCode,
+            without syntax colours and without shiki.
+        </p>
+    ),
+} satisfies Meta<typeof Code>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx
new file mode 100644
index 0000000..a74c9ac
--- /dev/null
+++ b/packages/react/src/components/Code/Code.tsx
@@ -0,0 +1,20 @@
+import { inlineCode as inlineCodeRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
+import type { ComponentProps } from 'react';
+import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
+
+export interface CodeProps extends ComponentProps<'code'> {
+    /** The code (one line) – or pass it as the content */
+    code?: string;
+    /** Extra classes of the recipe (see the recipe inlineCode) */
+    classes?: RecipeClasses<typeof inlineCodeRecipe>;
+}
+
+/** Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki */
+export function Code({ code, classes, className, children, ...props }: CodeProps) {
+    const inlineCode = useRecipe('inlineCode', inlineCodeRecipe, classes);
+    return (
+        <code {...props} className={inlineCode({ class: className })}>
+            {children ?? code}
+        </code>
+    );
+}
diff --git a/packages/react/src/components/ContextMenu/ContextMenu.stories.tsx b/packages/react/src/components/ContextMenu/ContextMenu.stories.tsx
index 78a13a9..4e082c5 100644
--- a/packages/react/src/components/ContextMenu/ContextMenu.stories.tsx
+++ b/packages/react/src/components/ContextMenu/ContextMenu.stories.tsx
@@ -91,8 +91,8 @@ function DesktopListDemo() {
                 closeOnScroll
                 closeOnResize
                 closeOnBlur
-                onBeforeOpen={(target) => {
-                    const row = target.closest<HTMLElement>('[data-host]');
+                onBeforeOpen={(target, details) => {
+                    const row = (details.focused ?? target).closest<HTMLElement>('[data-host]');
                     if (row) setCurrent(row.dataset.host!);
                 }}
             >
@@ -118,7 +118,8 @@ function DesktopListDemo() {
 }
 
 /**
- * A list as in a desktop app: `onBeforeOpen` gets the right-clicked element – select its row before the menu shows;
+ * A list as in a desktop app: `onBeforeOpen` gets the right-clicked element – select its row before the menu shows
+ * (with Shift+F10 or the menu key its second argument has `source: 'keyboard'` and the `focused` element);
  * `open`/`onOpenChange` tell whether the menu is open (e.g. to pause Delete or F2 on the list). `highlightFirst` and
  * the close props as on Menu
  */
diff --git a/packages/react/src/components/ContextMenu/ContextMenu.tsx b/packages/react/src/components/ContextMenu/ContextMenu.tsx
index 11d2eeb..1d44521 100644
--- a/packages/react/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/react/src/components/ContextMenu/ContextMenu.tsx
@@ -1,12 +1,14 @@
 import { Menu as ArkMenu } from '@ark-ui/react/menu';
 import { Portal } from '@ark-ui/react/portal';
 import {
+    createContextMenuSource,
     createLongPress,
     menu as menuRecipe,
+    type ContextMenuOpenDetails,
     type OverlayHandle,
     type RecipeClasses,
 } from '@wirecore/wirelayer-recipes';
-import { useEffect, useRef, type ReactElement, type Ref } from 'react';
+import { useEffect, useRef, useState, type ReactElement, type Ref } from 'react';
 import {
     MenuEntries,
     MenuStateProvider,
@@ -29,9 +31,10 @@ export interface ContextMenuProps extends MenuItemOptions, MenuBehaviorOptions {
     onOpenChange?: (open: boolean) => void;
     /**
      * A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer –
-     * select it before the menu shows)
+     * select it before the menu shows); `details.source` tells pointer from keyboard, with the keyboard
+     * `details.focused` is the focused element (e.g. the row with the focus)
      */
-    onBeforeOpen?: (target: Element) => void;
+    onBeforeOpen?: (target: Element, details: ContextMenuOpenDetails) => void;
     /** open(anchor), close(), toggle(anchor) – e.g. open(event) from your own handler */
     ref?: Ref<OverlayHandle>;
     /** The area that opens the menu */
@@ -76,6 +79,8 @@ export function ContextMenu({
     // Touch and pen: holding still for half a second opens the menu at the finger (open() only uses state setters);
     // one per press, which knows the pressed element
     const longPress = useRef<ReturnType<typeof createLongPress>>(null);
+    // Shift+F10 and the menu key open it as well (the browser's contextmenu event)
+    const [source] = useState(createContextMenuSource);
     useEffect(() => {
         const press = longPress;
         return () => press.current?.cancel();
@@ -102,14 +107,16 @@ export function ContextMenu({
                     asChild
                     onPointerDown={(event) => {
                         const target = event.target as Element;
+                        source.pointerdown();
                         longPress.current?.cancel();
                         longPress.current = createLongPress((point) => {
-                            onBeforeOpen?.(target);
+                            onBeforeOpen?.(target, { source: 'pointer', focused: null });
                             state.handle.open(point);
                         });
                         longPress.current.down(event);
                     }}
-                    onContextMenu={(event) => onBeforeOpen?.(event.target as Element)}
+                    onKeyDown={(event) => source.keydown(event)}
+                    onContextMenu={(event) => onBeforeOpen?.(event.target as Element, source.contextmenu())}
                     onPointerMove={(event) => longPress.current?.move(event)}
                     onPointerUp={() => longPress.current?.cancel()}
                     onPointerCancel={() => longPress.current?.cancel()}
diff --git a/packages/react/src/components/Dialog/Dialog.stories.tsx b/packages/react/src/components/Dialog/Dialog.stories.tsx
index e3bf562..3c874e3 100644
--- a/packages/react/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/components/Dialog/Dialog.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Trash2 } from 'lucide-react';
-import { useState, type CSSProperties } from 'react';
+import { focusFirst } from '@wirecore/wirelayer-recipes';
+import { useEffect, useRef, useState, type CSSProperties } from 'react';
 import { Button } from '../Button/Button.js';
 import { Field } from '../Field/Field.js';
 import { Input } from '../Input/Input.js';
@@ -277,6 +278,94 @@ export const InitialFocus: Story = {
     ),
 };
 
+/** `data-autoselect`: the field gets the focus with its text selected – typing replaces the prefilled name */
+export const SelectedOnOpen: Story = {
+    name: 'Selected on open',
+    render: () => (
+        <Dialog>
+            <DialogTrigger>
+                <Button variant="outline">Duplicate connection</Button>
+            </DialogTrigger>
+            <DialogContent
+                title="Duplicate connection"
+                size="sm"
+                footer={
+                    <>
+                        <DialogClose>
+                            <Button variant="outline" size="sm">
+                                Cancel
+                            </Button>
+                        </DialogClose>
+                        <DialogClose>
+                            <Button size="sm">Duplicate</Button>
+                        </DialogClose>
+                    </>
+                }
+            >
+                <Field label="Name">
+                    <Input defaultValue="web-01 (copy)" data-autoselect />
+                </Field>
+            </DialogContent>
+        </Dialog>
+    ),
+};
+
+function OwnStepsDemo() {
+    const [step, setStep] = useState(1);
+    const content = useRef<HTMLDivElement>(null);
+    // The new step gets the focus the way opening does
+    useEffect(() => {
+        if (step === 2) focusFirst(content.current);
+    }, [step]);
+    return (
+        <Dialog onOpenChange={(open) => open || setStep(1)}>
+            <DialogTrigger>
+                <Button variant="outline">New connection</Button>
+            </DialogTrigger>
+            <DialogContent
+                ref={content}
+                title="New connection"
+                description={`Step ${step} of 2`}
+                size="sm"
+                footer={
+                    <>
+                        <DialogClose>
+                            <Button variant="outline" size="sm">
+                                Cancel
+                            </Button>
+                        </DialogClose>
+                        {step === 1 ? (
+                            <Button size="sm" onClick={() => setStep(2)}>
+                                Next
+                            </Button>
+                        ) : (
+                            <DialogClose>
+                                <Button size="sm">Create</Button>
+                            </DialogClose>
+                        )}
+                    </>
+                }
+            >
+                {step === 1 ? (
+                    <Field label="Host">
+                        <Input mono data-autofocus />
+                    </Field>
+                ) : (
+                    <Field label="User">
+                        <Input defaultValue="root" data-autoselect />
+                    </Field>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+/**
+ * Own steps in one dialog: `focusFirst(element)` on the content focuses the new step the way opening does
+ * (data-autoselect, data-autofocus, otherwise the first field)
+ */
+export const OwnSteps: Story = { name: 'Own steps', render: () => <OwnStepsDemo /> };
+
 /** `titlePosition="header"`: the title in the row of the close button, after a smaller icon (as on the Drawer) */
 export const TitleInTheHeader: Story = {
     name: 'Title in the header',
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index 0c1ac6b..5717c8b 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -1,6 +1,7 @@
 import { Dialog as ArkDialog, useDialogContext } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import {
+    autoselectElement,
     clampDialogOffset,
     dialog as dialogRecipe,
     dialogMoveForKey,
@@ -21,13 +22,19 @@ import {
     type PointerEvent,
     type ReactElement,
     type ReactNode,
+    type RefObject,
 } from 'react';
 import type { IconComponent } from '../../types.js';
 import { useTranslations } from '../LocaleProvider/LocaleProvider.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 
-/** Settings of the surrounding Dialog/Drawer that its content needs (no backdrop when non-modal) */
-export const DialogRootContext = createContext<{ modal: boolean }>({ modal: true });
+/**
+ * Settings of the surrounding Dialog/Drawer that its content needs (no backdrop when non-modal); the Dialog's initial
+ * focus looks for `data-autoselect` in `contentRef`
+ */
+export const DialogRootContext = createContext<{ modal: boolean; contentRef?: RefObject<HTMLElement | null> }>({
+    modal: true,
+});
 
 export interface DialogProps {
     open?: boolean;
@@ -58,8 +65,15 @@ export function Dialog({
     closeOnInteractOutside,
     children,
 }: DialogProps) {
+    const contentRef = useRef<HTMLElement | null>(null);
+    // A field marked data-autoselect gets the focus with its text selected; otherwise Ark's own choice (an
+    // alertdialog's close button, data-autofocus, the first tabbable element)
+    const initialFocus = () =>
+        autoselectElement(contentRef.current) ??
+        (role === 'alertdialog' ? contentRef.current?.querySelector<HTMLElement>('[data-part=close-trigger]') : null) ??
+        null;
     return (
-        <DialogRootContext.Provider value={{ modal }}>
+        <DialogRootContext.Provider value={{ modal, contentRef }}>
             <ArkDialog.Root
                 open={open}
                 defaultOpen={defaultOpen}
@@ -68,6 +82,7 @@ export function Dialog({
                 modal={modal}
                 closeOnEscape={closeOnEscape}
                 closeOnInteractOutside={closeOnInteractOutside}
+                initialFocusEl={initialFocus}
                 lazyMount
                 unmountOnExit
             >
@@ -229,11 +244,12 @@ export function DialogContent({
     style,
     onKeyDown,
     children,
+    ref,
     ...props
 }: DialogContentProps) {
     const dialog = useRecipe('dialog', dialogRecipe, classes);
     const translations = useTranslations();
-    const { modal } = useContext(DialogRootContext);
+    const { modal, contentRef } = useContext(DialogRootContext);
     const context = useDialogContext();
     const [internalMaximized, setInternalMaximized] = useState(defaultMaximized ?? false);
     const isMaximized = maximized ?? internalMaximized;
@@ -264,6 +280,12 @@ export function DialogContent({
             <ArkDialog.Positioner className={styles.positioner()}>
                 <ArkDialog.Content
                     {...props}
+                    ref={(element: HTMLDivElement | null) => {
+                        // The Dialog looks for data-autoselect in the content when it opens
+                        if (contentRef) contentRef.current = element;
+                        if (typeof ref === 'function') return ref(element);
+                        if (ref) ref.current = element;
+                    }}
                     {...(draggable ? { 'aria-keyshortcuts': dialogMoveKeys } : {})}
                     className={styles.content({ class: className })}
                     style={drag.style ? { ...style, ...drag.style } : style}
diff --git a/packages/react/src/components/NativeSelect/NativeSelect.stories.tsx b/packages/react/src/components/NativeSelect/NativeSelect.stories.tsx
index ea7695e..9546897 100644
--- a/packages/react/src/components/NativeSelect/NativeSelect.stories.tsx
+++ b/packages/react/src/components/NativeSelect/NativeSelect.stories.tsx
@@ -9,7 +9,7 @@ const items = [
     { value: 'vie', label: 'Vienna', disabled: true },
 ];
 
-function Demo(args: NativeSelectProps) {
+function Demo(args: NativeSelectProps<string, string>) {
     const [value, setValue] = useState('nue');
     return (
         <div className="flex w-64 flex-col gap-3">
@@ -27,7 +27,7 @@ const meta = {
     args: { items, placeholder: 'Select', size: 'md', disabled: false, invalid: false },
     argTypes: { items: { control: false }, size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] } },
     render: (args) => <Demo {...args} />,
-} satisfies Meta<typeof NativeSelect<string>>;
+} satisfies Meta<typeof NativeSelect<string, string>>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
diff --git a/packages/react/src/components/NativeSelect/NativeSelect.tsx b/packages/react/src/components/NativeSelect/NativeSelect.tsx
index a4ac4a0..a6f4df9 100644
--- a/packages/react/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/react/src/components/NativeSelect/NativeSelect.tsx
@@ -11,16 +11,19 @@ export interface NativeSelectOption<V extends string | number = string> {
     disabled?: boolean;
 }
 
-/** `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string) */
-export interface NativeSelectProps<V extends string | number = string> extends Omit<
-    ComponentProps<'select'>,
-    'size' | 'onChange'
-> {
+/**
+ * `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string); `P`: the placeholder's type
+ * (without a placeholder onValueChange only gets values, never '')
+ */
+export interface NativeSelectProps<
+    V extends string | number = string,
+    P extends string | undefined = undefined,
+> extends Omit<ComponentProps<'select'>, 'size' | 'onChange'> {
     items: readonly NativeSelectOption<V>[];
     /** The chosen option's value with its type; the placeholder option gives an empty string */
-    onValueChange?: (value: V | '') => void;
-    /** First, empty option, e.g. "Please choose" */
-    placeholder?: string;
+    onValueChange?: (value: P extends string ? V | '' : V) => void;
+    /** First, empty option, e.g. "Please choose" – without it onValueChange only gets values (typed `V`, not `V | ''`) */
+    placeholder?: P;
     size?: Size;
     invalid?: boolean;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
@@ -28,7 +31,7 @@ export interface NativeSelectProps<V extends string | number = string> extends O
 }
 
 /** The browser's select: its own keyboard and mobile pickers; inside a Field it is labelled and described */
-export function NativeSelect<V extends string | number = string>({
+export function NativeSelect<V extends string | number = string, P extends string | undefined = undefined>({
     classes,
     items,
     onValueChange,
@@ -39,7 +42,7 @@ export function NativeSelect<V extends string | number = string>({
     className,
     style,
     ...props
-}: NativeSelectProps<V>) {
+}: NativeSelectProps<V, P>) {
     const nativeSelect = useRecipe('nativeSelect', nativeSelectRecipe, classes);
     const field = useFieldContext();
     const styles = nativeSelect({ size });
@@ -53,7 +56,11 @@ export function NativeSelect<V extends string | number = string>({
                 onChange={(event) => {
                     // The option's value with its type (a number stays a number); the placeholder gives ''
                     const text = event.target.value;
-                    onValueChange?.(items.find((item) => String(item.value) === text)?.value ?? (text as V | ''));
+                    onValueChange?.(
+                        (items.find((item) => String(item.value) === text)?.value ?? text) as P extends string
+                            ? V | ''
+                            : V
+                    );
                 }}
             >
                 {placeholder && <option value="">{placeholder}</option>}
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.tsx b/packages/react/src/components/NumberInput/NumberInput.stories.tsx
index c42827a..813a1cf 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.tsx
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Field } from '../Field/Field.js';
-import { NumberInput, type NumberInputProps } from './NumberInput.js';
+import { NumberInput, type NumberInputEmptyFallback, type NumberInputProps } from './NumberInput.js';
 
-function Demo(args: NumberInputProps) {
+function Demo(args: NumberInputProps<NumberInputEmptyFallback | undefined>) {
     const [value, setValue] = useState<number | null>(8);
     return (
         <Field label="Number of servers" helperText="Between 0 and 100" className="w-60">
@@ -74,3 +74,34 @@ function OptionsDemo() {
  * "," both type the decimal separator; pasted numbers are read in either notation
  */
 export const Options: Story = { name: 'Options', render: () => <OptionsDemo /> };
+
+function EmptyFallbackDemo() {
+    const [port, setPort] = useState(22);
+    const [retries, setRetries] = useState(3);
+    return (
+        <div className="flex w-60 flex-col gap-4">
+            <Field label="Port" helperText="Empty: back to the last port">
+                <NumberInput
+                    value={port}
+                    onValueChange={setPort}
+                    min={1}
+                    max={65535}
+                    stepper={false}
+                    emptyFallback="previous"
+                />
+            </Field>
+            <Field label="Retries" helperText="Empty: the minimum">
+                <NumberInput value={retries} onValueChange={setRetries} min={1} max={10} emptyFallback="min" />
+            </Field>
+            <span className="text-xs text-muted">
+                Port {port} · retries {retries}
+            </span>
+        </div>
+    );
+}
+
+/**
+ * A field that is never empty: `emptyFallback="previous"` puts the last valid number back when an emptied field is
+ * left (or Enter is pressed), `"min"` the minimum – onValueChange is then typed `number`
+ */
+export const EmptyFallback: Story = { name: 'Empty fallback', render: () => <EmptyFallbackDemo /> };
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
index e7b5431..5ec0cd4 100644
--- a/packages/react/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -19,13 +19,17 @@ import { InputStatus } from '../Input/InputStatus.js';
 import { useLocale, useTranslations } from '../LocaleProvider/LocaleProvider.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 
-export interface NumberInputProps extends Omit<
+/** What an emptied field becomes when it is left: `min` (or 0) or the last valid number */
+export type NumberInputEmptyFallback = 'min' | 'previous';
+
+/** `F`: the type of `emptyFallback` (with it onValueChange only gets numbers, never null) */
+export interface NumberInputProps<F extends NumberInputEmptyFallback | undefined = undefined> extends Omit<
     ComponentProps<'input'>,
     'value' | 'defaultValue' | 'size' | 'min' | 'max' | 'step' | 'onChange' | 'prefix'
 > {
     value?: number | null;
     defaultValue?: number | null;
-    onValueChange?: (value: number | null) => void;
+    onValueChange?: (value: F extends string ? number : number | null) => void;
     min?: number;
     max?: number;
     step?: number;
@@ -59,6 +63,11 @@ export interface NumberInputProps extends Omit<
      * range, `none` keeps it (mark it invalid yourself)
      */
     clampBehavior?: 'blur' | 'strict' | 'none';
+    /**
+     * A number is always set: an emptied field falls back to `min` (or 0) or to the last valid number (`previous`)
+     * when it is left or Enter is pressed – onValueChange then only gets numbers (typed `number`, not `number | null`)
+     */
+    emptyFallback?: F;
     /** Selects the whole number when the field gets the focus */
     selectOnFocus?: boolean;
     /** Shows a spinner in the field and marks it busy (aria-busy) */
@@ -72,7 +81,7 @@ export interface NumberInputProps extends Omit<
 }
 
 /** Number field with − / + buttons, arrow keys and locale formatting ("1,234.5"); `ref` reaches the native input */
-export function NumberInput({
+export function NumberInput<F extends NumberInputEmptyFallback | undefined = undefined>({
     classes,
     value,
     defaultValue,
@@ -97,6 +106,7 @@ export function NumberInput({
     allowDecimal = true,
     decimals,
     clampBehavior = 'blur',
+    emptyFallback,
     selectOnFocus = false,
     loading = false,
     clearable = false,
@@ -108,7 +118,7 @@ export function NumberInput({
     onPaste,
     onFocus,
     ...props
-}: NumberInputProps) {
+}: NumberInputProps<F>) {
     const numberInput = useRecipe('numberInput', numberInputRecipe, classes);
     const localeContext = useLocale();
     const locale = localeProp ?? localeContext.locale;
@@ -128,10 +138,16 @@ export function NumberInput({
     const min = allowNegative ? minProp : Math.max(minProp ?? 0, 0);
     // The text as typed ("12." while entering 12.5) – formatting the number again would swallow the separator
     const [typed, setTyped] = useState<{ text: string; number: number | null } | null>(null);
+    // The last valid number typed – an emptied field with emptyFallback="previous" goes back to it (or to `value`)
+    const previous = useRef(defaultValue ?? null);
     const controlled =
         value === undefined
-            ? undefined
-            : typed && typed.number === value
+            ? // Uncontrolled with a fallback: the typed text, so the fallback number can be put back
+              emptyFallback
+                ? typed?.text
+                : undefined
+            : // With a fallback an emptied field keeps its value until it is left
+              typed && (typed.number === value || (!!emptyFallback && typed.number === null))
               ? typed.text
               : toNumberInputValue(value, locale, format);
     const text = controlled ?? typed?.text ?? toNumberInputValue(defaultValue, locale, format) ?? '';
@@ -163,7 +179,17 @@ export function NumberInput({
             onValueChange={(details) => {
                 const number = Number.isNaN(details.valueAsNumber) ? null : details.valueAsNumber;
                 setTyped({ text: details.value, number });
-                onValueChange?.(number);
+                if (number === null && emptyFallback) return;
+                if (number !== null) previous.current = number;
+                onValueChange?.(number as F extends string ? number : number | null);
+            }}
+            onValueCommit={(details) => {
+                // Leaving the field (or Enter) with an empty text: the fallback number
+                if (!emptyFallback || !Number.isNaN(details.valueAsNumber)) return;
+                const last = value ?? previous.current;
+                const number = emptyFallback === 'previous' && last !== null ? last : (min ?? 0);
+                setTyped({ text: toNumberInputValue(number, locale, format) ?? '', number });
+                onValueChange?.(number as F extends string ? number : number | null);
             }}
             min={min}
             max={max}
diff --git a/packages/react/src/components/Progress/Progress.stories.tsx b/packages/react/src/components/Progress/Progress.stories.tsx
index 5e9e331..c57b66d 100644
--- a/packages/react/src/components/Progress/Progress.stories.tsx
+++ b/packages/react/src/components/Progress/Progress.stories.tsx
@@ -55,11 +55,12 @@ const transfers = [
     { name: 'logs.zip', value: 0, text: 'waiting' },
     { name: 'db.dump', value: 77, text: 'failed', status: 'danger' as const },
     { name: 'site.zip', value: 100, text: 'done', status: 'success' as const },
+    { name: 'media.tar', value: 30, text: 'cancelled', status: 'neutral' as const },
 ];
 
 /**
  * Compact bars for lists and status bars: `size="xs"`, `hideLabel` (the label still names the bar for screen readers),
- * `barText` in the bar and `status` for the colour
+ * `barText` in the bar and `status` for the colour – `neutral` (grey) for a cancelled transfer
  */
 export const Compact: Story = {
     name: 'Compact',
diff --git a/packages/react/src/components/Progress/Progress.tsx b/packages/react/src/components/Progress/Progress.tsx
index 0e4676e..29d3d45 100644
--- a/packages/react/src/components/Progress/Progress.tsx
+++ b/packages/react/src/components/Progress/Progress.tsx
@@ -33,8 +33,11 @@ export interface ProgressProps extends Omit<ComponentProps<'div'>, 'defaultValue
     orientation?: 'horizontal' | 'vertical';
     /** `xs`: a thin bar with small text, e.g. in a list or a status bar */
     size?: 'xs' | 'md';
-    /** Colour of the filled part by its state, e.g. `danger` for a failed transfer */
-    status?: 'info' | 'success' | 'warn' | 'danger';
+    /**
+     * Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled
+     * one
+     */
+    status?: 'info' | 'success' | 'warn' | 'danger' | 'neutral';
     /** The label only for screen readers – it still names the progress bar */
     hideLabel?: boolean;
     /**
@@ -77,7 +80,7 @@ export function Progress({
         animated,
         stepped: !!steps && !segments,
         size,
-        color: status,
+        color: status === 'neutral' ? 'muted' : status,
         hideLabel,
         hasText: showBarText,
     });
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
index d5c0a6c..996f7e2 100644
--- a/packages/react/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -11,15 +11,18 @@ import { useFieldStatus } from '../Field/context.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 import { useLabelForWarning } from '../../utils/label-for.js';
 
-/** `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string) */
-export interface RadioGroupProps<V extends string | number = string> extends Omit<
+/**
+ * `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string); `R`: whether `required` is
+ * set (then onValueChange only gets values, never null)
+ */
+export interface RadioGroupProps<V extends string | number = string, R extends boolean = false> extends Omit<
     ComponentProps<'div'>,
     'defaultValue' | 'dir'
 > {
     /** Selected value; numbers when the items have number values */
     value?: V | null;
     defaultValue?: V | null;
-    onValueChange?: (value: V | null) => void;
+    onValueChange?: (value: R extends true ? V : V | null) => void;
     /** Visible group label (otherwise pass aria-label – or place the group in a Field with a label) */
     label?: string;
     orientation?: RadioGroupOrientation;
@@ -27,14 +30,18 @@ export interface RadioGroupProps<V extends string | number = string> extends Omi
     columns?: number;
     disabled?: boolean;
     invalid?: boolean;
-    required?: boolean;
+    /**
+     * A choice is required (aria-required). onValueChange then only gets values (typed `V`, not `V | null`): a form
+     * reset back to an empty start is not passed on
+     */
+    required?: R;
     name?: string;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof radioGroupRecipe>;
 }
 
 /** One choice out of several (role="radiogroup", arrow keys), horizontal or vertical */
-export function RadioGroup<V extends string | number = string>({
+export function RadioGroup<V extends string | number = string, R extends boolean = false>({
     classes,
     value,
     defaultValue,
@@ -49,7 +56,7 @@ export function RadioGroup<V extends string | number = string>({
     className,
     children,
     ...props
-}: RadioGroupProps<V>) {
+}: RadioGroupProps<V, R>) {
     useLabelForWarning('RadioGroup', props.id);
     const radioGroup = useRecipe('radioGroup', radioGroupRecipe, classes);
     const styles = radioGroup({ orientation, grid: columns !== undefined });
@@ -71,11 +78,16 @@ export function RadioGroup<V extends string | number = string>({
                 {...(fieldLabelled ? { ids: { label: field.ids.label } } : {})}
                 value={toText(value)}
                 defaultValue={toText(defaultValue)}
-                onValueChange={(details) =>
+                onValueChange={(details) => {
+                    // A required group never reports an empty value (Ark does on a form reset to an empty start:
+                    // null or undefined)
+                    if (details.value == null && required) return;
                     onValueChange?.(
-                        (details.value === null ? null : (values.get(details.value) ?? details.value)) as V | null
-                    )
-                }
+                        (details.value === null ? null : (values.get(details.value) ?? details.value)) as R extends true
+                            ? V
+                            : V | null
+                    );
+                }}
                 orientation={orientation}
                 disabled={disabled ?? field?.disabled}
                 invalid={invalid ?? field?.invalid}
diff --git a/packages/react/src/components/SegmentedControl/SegmentedControl.tsx b/packages/react/src/components/SegmentedControl/SegmentedControl.tsx
index d2dae48..85da05e 100644
--- a/packages/react/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/components/SegmentedControl/SegmentedControl.tsx
@@ -12,25 +12,33 @@ import { useFieldStatus } from '../Field/context.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 import { useLabelForWarning } from '../../utils/label-for.js';
 
-/** `V`: the type of the values, e.g. a union like `'ssh' | 'sftp'` (default string) */
-export interface SegmentedControlProps<V extends string = string> extends Omit<
+/**
+ * `V`: the type of the values, e.g. a union like `'ssh' | 'sftp'` (default string); `R`: whether `required` is set
+ * (then onValueChange only gets values, never null)
+ */
+export interface SegmentedControlProps<V extends string = string, R extends boolean = false> extends Omit<
     ComponentProps<'div'>,
     'defaultValue' | 'dir'
 > {
     value?: V | null;
     defaultValue?: V;
-    onValueChange?: (value: V | null) => void;
+    onValueChange?: (value: R extends true ? V : V | null) => void;
     /** Accessible name of the group (visually hidden) – inside a Field with a label, the Field's label names it */
     label?: string;
     size?: SegmentedControlSize;
     disabled?: boolean;
+    /**
+     * A value is required (aria-required). onValueChange then only gets values (typed `V`, not `V | null`): a form
+     * reset back to an empty start is not passed on
+     */
+    required?: R;
     name?: string;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof segmentedControlRecipe>;
 }
 
 /** Few exclusive options as a segmented switch (radio group) */
-export function SegmentedControl<V extends string = string>({
+export function SegmentedControl<V extends string = string, R extends boolean = false>({
     classes,
     value,
     defaultValue,
@@ -38,11 +46,12 @@ export function SegmentedControl<V extends string = string>({
     label,
     size = 'md',
     disabled,
+    required,
     name,
     className,
     children,
     ...props
-}: SegmentedControlProps<V>) {
+}: SegmentedControlProps<V, R>) {
     useLabelForWarning('SegmentedControl', props.id);
     const segmentedControl = useRecipe('segmentedControl', segmentedControlRecipe, classes);
     const styles = segmentedControl({ size });
@@ -62,12 +71,18 @@ export function SegmentedControl<V extends string = string>({
         <SegmentedControlContext value={size}>
             <SegmentGroup.Root
                 aria-describedby={field?.ariaDescribedby}
+                {...(required ? { 'aria-required': true } : {})}
                 {...props}
                 className={styles.base({ class: className })}
                 ids={fieldLabelled ? { label: field.ids.label } : undefined}
                 value={value}
                 defaultValue={defaultValue}
-                onValueChange={(details) => onValueChange?.(details.value as V | null)}
+                onValueChange={(details) => {
+                    // A required control never reports an empty value (Ark does on a form reset to an empty start:
+                    // null or undefined)
+                    if (details.value == null && required) return;
+                    onValueChange?.(details.value as R extends true ? V : V | null);
+                }}
                 orientation="horizontal"
                 disabled={disabled ?? field?.disabled}
                 name={name}
diff --git a/packages/react/src/components/Select/Select.stories.tsx b/packages/react/src/components/Select/Select.stories.tsx
index ea31b6b..586bfce 100644
--- a/packages/react/src/components/Select/Select.stories.tsx
+++ b/packages/react/src/components/Select/Select.stories.tsx
@@ -355,3 +355,32 @@ function KeysInADialogDemo() {
  * `open`/`onOpenChange` report whether the list is open
  */
 export const KeysInADialog: Story = { name: 'Keys in a dialog', render: () => <KeysInADialogDemo /> };
+
+function EmptyStringValueDemo() {
+    const [jumpHost, setJumpHost] = useState('');
+    const hosts = [
+        { value: 'bastion-1', label: 'bastion-1' },
+        { value: 'bastion-2', label: 'bastion-2' },
+    ];
+    return (
+        <div className="flex w-[380px] flex-col gap-3.5">
+            <Field label="Jump host">
+                <Select
+                    value={jumpHost}
+                    onValueChange={setJumpHost}
+                    items={hosts}
+                    placeholder="None"
+                    emptyValue=""
+                    clearable
+                />
+            </Field>
+            <span className="text-xs text-muted">Value: {JSON.stringify(jumpHost)}</span>
+        </div>
+    );
+}
+
+/**
+ * A model that uses `""` for "nothing chosen" (e.g. from a form or an API): `emptyValue=""` shows the placeholder for
+ * it, and clearing gives `""` back instead of null
+ */
+export const EmptyStringValue: Story = { name: 'Empty string as no value', render: () => <EmptyStringValueDemo /> };
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index 045e595..c1210cb 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -46,16 +46,22 @@ export interface SelectItem<V = string> {
     keywords?: readonly string[];
 }
 
-export interface SelectProps<T = SelectItem, V = ItemValueOf<T>> extends Omit<
+/** `T`: the items, `V`: their values, `E`: the type of `emptyValue` (default null) */
+export interface SelectProps<T = SelectItem, V = ItemValueOf<T>, E = null> extends Omit<
     ComponentProps<'button'>,
     'value' | 'defaultValue'
 > {
     /** Options: SelectItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled/itemGroup */
     items: readonly T[];
     /** Selected value; any type (string, number, boolean, object) */
-    value?: V | null;
-    defaultValue?: V | null;
-    onValueChange?: (value: V | null) => void;
+    value?: V | NoInfer<E> | null;
+    defaultValue?: V | NoInfer<E> | null;
+    onValueChange?: (value: V | NoInfer<E>) => void;
+    /**
+     * The value that means "nothing chosen" instead of null, e.g. `""`: it shows the placeholder, and clearing gives it
+     * back (onValueChange is then typed `V | E`, without null)
+     */
+    emptyValue?: E;
     placeholder?: string;
     invalid?: boolean;
     required?: boolean;
@@ -131,12 +137,13 @@ interface Api {
 }
 
 /** Dropdown list for one option: arrow keys, typeahead, Escape; native select hidden for forms */
-export function Select<T = SelectItem, V = ItemValueOf<T>>({
+export function Select<T = SelectItem, V = ItemValueOf<T>, E = null>({
     classes,
     items,
     value,
     defaultValue,
     onValueChange,
+    emptyValue,
     placeholder,
     disabled,
     invalid,
@@ -172,7 +179,7 @@ export function Select<T = SelectItem, V = ItemValueOf<T>>({
     style,
     onKeyDown,
     ...props
-}: SelectProps<T, V>) {
+}: SelectProps<T, V, E>) {
     const select = useRecipe('select', selectRecipe, classes);
     const styles = select({ size, clearable });
     // An own id goes to the trigger through Ark (it finds the trigger by its id)
@@ -188,13 +195,16 @@ export function Select<T = SelectItem, V = ItemValueOf<T>>({
         filter && !manualFilter && !dataSource ? query : ''
     );
     const known = useMemo(() => [...options, ...source.resolvedOptions], [options, source.resolvedOptions]);
+    // emptyValue (e.g. "") counts as null: nothing chosen, the placeholder shows
+    const withoutEmpty = (current: unknown) => (emptyValue !== undefined && current === emptyValue ? null : current);
     const { selected, keys, commit, commitKeys } = useListSelection<T>({
         multiple: false,
-        value,
-        defaultValue,
+        value: withoutEmpty(value),
+        defaultValue: withoutEmpty(defaultValue),
         accessors,
         items: known,
-        onChange: onValueChange,
+        onChange:
+            onValueChange && ((next: unknown) => onValueChange((next === null ? (emptyValue ?? null) : next) as V | E)),
         // Without a data source and loaded: a value outside the items warns in development
         check: { component: 'Select', ready: !dataSource && !loading && items.length > 0 },
     });
diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx
index f14eff4..6244da4 100644
--- a/packages/react/src/components/Stepper/Stepper.tsx
+++ b/packages/react/src/components/Stepper/Stepper.tsx
@@ -27,6 +27,8 @@ export interface StepperProps {
     orientation?: 'horizontal' | 'vertical';
     /** Label beside the number (default) or below it */
     labelPlacement?: 'end' | 'bottom';
+    /** Text of the last "Next" button, e.g. "Create" (default "Finish") */
+    finishLabel?: string;
     /** Content of a step */
     children: (index: number) => ReactNode;
     /** Shown after the last step */
@@ -51,6 +53,7 @@ export function Stepper({
     isStepValid,
     orientation = 'horizontal',
     labelPlacement = 'end',
+    finishLabel,
     children,
     completed,
     className,
@@ -121,7 +124,7 @@ export function Stepper({
                             {/* With linear, an invalid step blocks going on – shown as a disabled button */}
                             <Steps.NextTrigger asChild>
                                 <Button disabled={linear && !api.isStepValid(api.value)}>
-                                    {api.value === api.count - 1 ? t.finish : t.next}
+                                    {api.value === api.count - 1 ? (finishLabel ?? t.finish) : t.next}
                                 </Button>
                             </Steps.NextTrigger>
                         </div>
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
index 82c75b0..7887e53 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { GitCommitHorizontal, Layers, LayoutDashboard } from 'lucide-react';
 import { useState } from 'react';
+import { Button } from '../Button/Button.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs.js';
 
 const meta = {
@@ -98,3 +99,42 @@ export const VerticalManual: Story = {
         </Tabs>
     ),
 };
+
+const sessions = ['web-01', 'db-primary', 'backup'];
+
+function PanelsElsewhereDemo() {
+    const [active, setActive] = useState<string | null>('web-01');
+    return (
+        <div className="flex w-[420px] flex-col gap-2">
+            <Tabs value={active} onValueChange={setActive} label="Sessions">
+                <TabsList>
+                    {sessions.map((name) => (
+                        <TabsTrigger key={name} value={name} controls={`pane-${name}`}>
+                            {name}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+            </Tabs>
+            {sessions.map((name) => (
+                <div
+                    key={name}
+                    id={`pane-${name}`}
+                    hidden={active !== name}
+                    className="rounded-lg border border-line bg-bg-2 p-3 font-mono text-xs"
+                >
+                    {name}:~$
+                </div>
+            ))}
+            {active === null && <p className="text-sm text-muted">No session selected.</p>}
+            <Button size="sm" variant="outline" className="self-start" onClick={() => setActive(null)}>
+                Select none
+            </Button>
+        </div>
+    );
+}
+
+/**
+ * Tabs that switch panes living elsewhere (e.g. terminal sessions kept alive while hidden): `controls` points each tab
+ * at its pane, and the value may be null – no tab selected, the first tab stays reachable with Tab
+ */
+export const PanelsElsewhere: Story = { name: 'Panels elsewhere', render: () => <PanelsElsewhereDemo /> };
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index c77de4c..fd97467 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1,12 +1,21 @@
 import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
 import { closeTab, scrollEdges, tabs as tabsRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
 import { ChevronLeft, ChevronRight, X } from 'lucide-react';
-import { useEffect, useRef, useState, type ComponentProps } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, type ComponentProps } from 'react';
 import type { IconComponent } from '../../types.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
 
+const useBrowserLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+/** The Tabs' value is null on purpose (no tab selected): the first tab stays reachable with Tab */
+const TabsNoneSelectedContext = createContext(false);
+
 export interface TabsProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'dir'> {
-    value?: string;
+    /**
+     * Selected tab; `null`: no tab selected (e.g. tabs of panels that live elsewhere – the first tab stays reachable
+     * with Tab)
+     */
+    value?: string | null;
     defaultValue?: string;
     onValueChange?: (value: string | null) => void;
     /** Accessible name of the tab list */
@@ -40,18 +49,20 @@ export function Tabs({
     const tabs = useRecipe('tabs', tabsRecipe, classes);
     const styles = tabs();
     return (
-        <ArkTabs.Root
-            {...props}
-            className={styles.base({ class: className })}
-            value={value}
-            defaultValue={defaultValue}
-            onValueChange={(details) => onValueChange?.(details.value)}
-            orientation={orientation}
-            activationMode={activationMode}
-            lazyMount={lazyMount}
-            unmountOnExit={unmountOnExit}
-            translations={label ? { listLabel: label } : undefined}
-        />
+        <TabsNoneSelectedContext value={value === null}>
+            <ArkTabs.Root
+                {...props}
+                className={styles.base({ class: className })}
+                value={value}
+                defaultValue={defaultValue}
+                onValueChange={(details) => onValueChange?.(details.value)}
+                orientation={orientation}
+                activationMode={activationMode}
+                lazyMount={lazyMount}
+                unmountOnExit={unmountOnExit}
+                translations={label ? { listLabel: label } : undefined}
+            />
+        </TabsNoneSelectedContext>
     );
 }
 
@@ -144,6 +155,11 @@ export interface TabsTriggerProps extends Omit<ComponentProps<'button'>, 'value'
      */
     closable?: boolean;
     onClose?: (value: string) => void;
+    /**
+     * Id of the element the tab shows, when it is not a TabsContent of these Tabs (e.g. a pane elsewhere, hidden
+     * while not selected) – `null`: none (tabs without panels)
+     */
+    controls?: string | null;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof tabsRecipe>;
 }
@@ -156,16 +172,34 @@ export function TabsTrigger({
     disabled,
     closable = false,
     onClose,
+    controls,
     className,
     children,
     onKeyDown,
+    ref,
     ...props
 }: TabsTriggerProps) {
     const tabs = useRecipe('tabs', tabsRecipe, classes);
     const styles = tabs({ closable });
+    // No tab selected (Tabs value null): Ark takes every tab out of the Tab order – the first enabled one stays in it
+    const noneSelected = useContext(TabsNoneSelectedContext);
+    const element = useRef<HTMLButtonElement | null>(null);
+    const [first, setFirst] = useState(false);
+    useBrowserLayoutEffect(() => {
+        const own = element.current;
+        setFirst(!!own && own.closest('[role=tablist]')?.querySelector('[role=tab]:not([disabled])') === own);
+    });
     const trigger = (
         <ArkTabs.Trigger
             {...props}
+            ref={(node: HTMLButtonElement | null) => {
+                element.current = node;
+                if (typeof ref === 'function') return ref(node);
+                if (ref) ref.current = node;
+            }}
+            // null removes Ark's aria-controls (undefined would keep it)
+            {...(controls !== undefined ? { 'aria-controls': controls as string } : {})}
+            {...(noneSelected && first ? { tabIndex: 0 } : {})}
             className={styles.trigger({ class: className })}
             value={value}
             disabled={disabled}
diff --git a/packages/react/src/components/Wizard/Wizard.stories.tsx b/packages/react/src/components/Wizard/Wizard.stories.tsx
index a8b85d6..705b2c0 100644
--- a/packages/react/src/components/Wizard/Wizard.stories.tsx
+++ b/packages/react/src/components/Wizard/Wizard.stories.tsx
@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useForm, useStore } from '@tanstack/react-form';
+import { useState } from 'react';
 import { bindInput } from '../../form/bind.js';
 import { FormField } from '../../form/FormField.js';
 import { useValidators, validateFields } from '../../form/validators.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 import { DataList, DataListItem } from '../DataList/DataList.js';
+import { Field } from '../Field/Field.js';
 import { Input } from '../Input/Input.js';
 import { Result } from '../Result/Result.js';
 import { Wizard } from './Wizard.js';
@@ -90,3 +93,55 @@ type Story = StoryObj<typeof meta>;
  * summary before finishing
  */
 export const Playground: Story = {};
+
+function OwnTextsDemo() {
+    const [signIn, setSignIn] = useState(false);
+    // New steps on every render: the check reads the current state
+    const steps = [
+        { label: 'Server' },
+        {
+            label: 'Sign-in',
+            validate: async () => {
+                await new Promise((done) => setTimeout(done, 400));
+                return signIn || 'Sign-in was cancelled – try again';
+            },
+        },
+    ];
+    return (
+        <Wizard
+            steps={steps}
+            finishLabel="Create"
+            focusOnStepChange
+            className="max-w-2xl"
+            renderStep={(index) =>
+                index === 0 ? (
+                    <div className="flex flex-col gap-3">
+                        <Field label="Host">
+                            <Input mono />
+                        </Field>
+                        <Field label="Port">
+                            <Input defaultValue="22" mono />
+                        </Field>
+                    </div>
+                ) : (
+                    <div className="flex flex-col gap-3">
+                        <Field label="User">
+                            <Input defaultValue="root" data-autoselect />
+                        </Field>
+                        <Checkbox checked={signIn} onCheckedChange={setSignIn}>
+                            Sign-in succeeds
+                        </Checkbox>
+                    </div>
+                )
+            }
+            completed={<p className="text-sm">Connection created.</p>}
+        />
+    );
+}
+
+/**
+ * `finishLabel` names the last button, `focusOnStepChange` moves the focus into each new step (here: the user name,
+ * selected with data-autoselect), and `validate` returns a text – shown as the error of the step instead of the
+ * general one
+ */
+export const OwnTexts: Story = { name: 'Own texts and focus', render: () => <OwnTextsDemo /> };
diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx
index 307e9fb..f45ee4b 100644
--- a/packages/react/src/components/Wizard/Wizard.tsx
+++ b/packages/react/src/components/Wizard/Wizard.tsx
@@ -1,4 +1,4 @@
-import { wizard as wizardRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
+import { focusFirst, wizard as wizardRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
 import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
 import { useTranslations } from '../LocaleProvider/LocaleProvider.js';
 import { useRecipe } from '../RecipesProvider/RecipesProvider.js';
@@ -9,9 +9,10 @@ export interface WizardStep {
     description?: string;
     /**
      * Checks the step before going on ("Next"): false keeps it open (e.g. `() => validateFields(form, ['name'])`
-     * from the form subpath); may be async – the step shows a spinner meanwhile. Going back never checks
+     * from the form subpath), a text keeps it open and shows the text as the step's error (e.g. "Sign-in was
+     * cancelled"); may be async – the step shows a spinner meanwhile. Going back never checks
      */
-    validate?: () => boolean | Promise<boolean>;
+    validate?: () => boolean | string | Promise<boolean | string>;
 }
 
 export interface WizardProps extends Omit<ComponentProps<'div'>, 'children'> {
@@ -32,6 +33,13 @@ export interface WizardProps extends Omit<ComponentProps<'div'>, 'children'> {
     completed?: ReactNode;
     /** Steps listed top to bottom beside the content */
     orientation?: 'horizontal' | 'vertical';
+    /** Text of the last button, e.g. "Create" (default "Finish") */
+    finishLabel?: string;
+    /**
+     * Moves the focus into a new step when the step changes: to the element marked data-autoselect (text selected),
+     * data-autofocus or autofocus, otherwise to the step's first field
+     */
+    focusOnStepChange?: boolean;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof wizardRecipe>;
 }
@@ -52,6 +60,8 @@ export function Wizard({
     summaryLabel,
     completed,
     orientation = 'horizontal',
+    finishLabel,
+    focusOnStepChange = false,
     className,
     ...props
 }: WizardProps) {
@@ -62,6 +72,8 @@ export function Wizard({
     const current = step ?? internal;
     const [checking, setChecking] = useState<number | null>(null);
     const [invalidAt, setInvalidAt] = useState<number | null>(null);
+    // The text a step's check gave instead of false
+    const [invalidText, setInvalidText] = useState<string | null>(null);
     const root = useRef<HTMLDivElement>(null);
     // After a failed check: the first invalid control of the step gets the focus
     const focusInvalid = useRef(false);
@@ -70,6 +82,14 @@ export function Wizard({
         focusInvalid.current = false;
         root.current?.querySelector<HTMLElement>('[role=tabpanel]:not([hidden]) [aria-invalid=true]')?.focus();
     });
+    // The new step's field gets the focus (not after a failed check: then its invalid field has it)
+    const shownStep = useRef(current);
+    useEffect(() => {
+        if (shownStep.current === current) return;
+        shownStep.current = current;
+        if (focusOnStepChange && invalidAt === null)
+            focusFirst(root.current?.querySelector('[role=tabpanel]:not([hidden])'));
+    }, [current, focusOnStepChange, invalidAt]);
     const items = [
         ...steps.map((entry, index) => ({
             label: entry.label,
@@ -87,19 +107,21 @@ export function Wizard({
     const change = async (next: number) => {
         if (checking !== null) return;
         setInvalidAt(null);
+        setInvalidText(null);
         for (let index = current; index < next; index++) {
             const validate = steps[index]?.validate;
             if (!validate) continue;
             setChecking(index);
-            let valid: boolean;
+            let result: boolean | string;
             try {
-                valid = await validate();
+                result = await validate();
             } finally {
                 setChecking(null);
             }
-            if (!valid) {
+            if (!result || typeof result === 'string') {
                 if (index !== current) set(index);
                 setInvalidAt(index);
+                setInvalidText(typeof result === 'string' && result ? result : null);
                 focusInvalid.current = true;
                 return;
             }
@@ -113,6 +135,7 @@ export function Wizard({
                 step={current}
                 linear
                 orientation={orientation}
+                finishLabel={finishLabel}
                 onStepChange={(next) => void change(next)}
                 completed={completed}
             >
@@ -120,7 +143,7 @@ export function Wizard({
                     <>
                         {invalidAt === index && (
                             <p className={styles.error()} role="alert">
-                                {translations.wizard.invalid}
+                                {invalidText ?? translations.wizard.invalid}
                             </p>
                         )}
                         {index === steps.length ? (
diff --git a/packages/react/src/hooks/Hooks.stories.tsx b/packages/react/src/hooks/Hooks.stories.tsx
index 0b5bedb..a98ffea 100644
--- a/packages/react/src/hooks/Hooks.stories.tsx
+++ b/packages/react/src/hooks/Hooks.stories.tsx
@@ -3,7 +3,7 @@ import { Badge } from '../components/Badge/Badge.js';
 import { Button } from '../components/Button/Button.js';
 import { Input } from '../components/Input/Input.js';
 import { useClipboard, useNetwork } from './browser.js';
-import { useColorScheme, useMediaQuery, useReducedMotion } from './media.js';
+import { useColorScheme, useMediaQuery, useReducedMotion, useResolvedTokens } from './media.js';
 import { useDisclosure, useStateHistory } from './state.js';
 import { useLocalStorage } from './storage.js';
 import { useDebouncedValue, useIdle } from './timing.js';
@@ -87,3 +87,26 @@ type Story = StoryObj<typeof meta>;
  * and more (useHotkeys, useFocusTrap, useIntersection, useScrollSpy …)
  */
 export const Playground: Story = {};
+
+function ResolvedTokensDemo() {
+    const tokens = useResolvedTokens();
+    return (
+        <dl className="m-0 grid w-[min(560px,92vw)] gap-x-6 gap-y-1.5 font-mono text-xs sm:grid-cols-2">
+            {Object.entries(tokens).map(([name, value]) => (
+                <div key={name} className="flex items-center gap-2">
+                    <dt className="flex items-center gap-2 text-muted">
+                        <span className="size-4 shrink-0 rounded border border-line" style={{ background: value }} />
+                        {name}
+                    </dt>
+                    <dd className="m-0 ms-auto text-fg">{value}</dd>
+                </div>
+            ))}
+        </dl>
+    );
+}
+
+/**
+ * `useResolvedTokens()`: the token colours as hex, for canvas libraries like xterm.js that cannot read CSS variables –
+ * they change with the mode and the theme (`resolveTokens()` reads them once)
+ */
+export const ResolvedTokens: Story = { name: 'Resolved tokens', render: () => <ResolvedTokensDemo /> };
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index b7b0921..9628ff4 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -18,7 +18,13 @@ export {
     type HotkeyItem,
     type UseHotkeysOptions,
 } from './hotkeys.js';
-export { useColorScheme, useMediaQuery, useReducedMotion, type UseMediaQueryOptions } from './media.js';
+export {
+    useColorScheme,
+    useMediaQuery,
+    useReducedMotion,
+    useResolvedTokens,
+    type UseMediaQueryOptions,
+} from './media.js';
 export {
     useElementSize,
     useHeadroom,
diff --git a/packages/react/src/hooks/media.ts b/packages/react/src/hooks/media.ts
index d4d41b7..b13c2f1 100644
--- a/packages/react/src/hooks/media.ts
+++ b/packages/react/src/hooks/media.ts
@@ -1,5 +1,6 @@
 import { matchesMedia, watchMedia } from '@wirecore/wirelayer-recipes';
-import { useCallback, useSyncExternalStore } from 'react';
+import { colors, resolveTokens, watchTokens, type ColorSet } from '@wirecore/wirelayer-tokens';
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 
 export interface UseMediaQueryOptions {
     /** Value on the server and during hydration (default false) */
@@ -26,3 +27,17 @@ export function useReducedMotion(): boolean {
 export function useColorScheme(initialValue: 'light' | 'dark' = 'light'): 'light' | 'dark' {
     return useMediaQuery('(prefers-color-scheme: dark)', { initialValue: initialValue === 'dark' }) ? 'dark' : 'light';
 }
+
+/**
+ * The token colours as fixed values (hex, see resolveTokens) – for canvas libraries like xterm.js that cannot read CSS
+ * variables; new values when the mode, the theme or the system colour scheme changes. On the server: the light base
+ * colours as written
+ */
+export function useResolvedTokens(): ColorSet {
+    const [tokens, setTokens] = useState(() => (typeof document === 'undefined' ? colors.light : resolveTokens()));
+    useEffect(() => {
+        setTokens(resolveTokens());
+        return watchTokens(() => setTokens(resolveTokens()));
+    }, []);
+    return tokens;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index d69893e..d962405 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -126,7 +126,11 @@ export { DatePicker, type DatePickerProps, type DatePickerValue } from './compon
 export type { RenderDay } from './components/DatePicker/DatePickerBase.js';
 export { FileUpload, type FileUploadHandle, type FileUploadProps } from './components/FileUpload/FileUpload.js';
 export { MultiSelect, type MultiSelectProps } from './components/MultiSelect/MultiSelect.js';
-export { NumberInput, type NumberInputProps } from './components/NumberInput/NumberInput.js';
+export {
+    NumberInput,
+    type NumberInputEmptyFallback,
+    type NumberInputProps,
+} from './components/NumberInput/NumberInput.js';
 export { PasswordInput, type PasswordInputProps } from './components/PasswordInput/PasswordInput.js';
 export { Slider, type SliderMark, type SliderProps } from './components/Slider/Slider.js';
 export { ColorPicker, type ColorPickerProps } from './components/ColorPicker/ColorPicker.js';
@@ -219,6 +223,7 @@ export {
 export { CopyButton, type CopyButtonProps } from './components/CopyButton/CopyButton.js';
 export { HoverCard, type HoverCardProps } from './components/HoverCard/HoverCard.js';
 export { Kbd, type KbdProps } from './components/Kbd/Kbd.js';
+export { Code, type CodeProps } from './components/Code/Code.js';
 export { MonthPicker, type MonthPickerProps } from './components/MonthPicker/MonthPicker.js';
 export { TagsInput, type TagsInputProps } from './components/TagsInput/TagsInput.js';
 export { Highlight, type HighlightProps } from './components/Highlight/Highlight.js';
@@ -337,7 +342,12 @@ export {
     type MegaMenuLink,
     type MegaMenuProps,
 } from './components/MegaMenu/MegaMenu.js';
-export type { OverlayAnchor, OverlayHandle, SaveStatusState } from '@wirecore/wirelayer-recipes';
+export type {
+    ContextMenuOpenDetails,
+    OverlayAnchor,
+    OverlayHandle,
+    SaveStatusState,
+} from '@wirecore/wirelayer-recipes';
 export type { AnchorProp } from './overlay.js';
 export { Statistic, type StatisticProps } from './components/Statistic/Statistic.js';
 export { Truncate, type TruncateProps } from './components/Truncate/Truncate.js';
@@ -354,7 +364,8 @@ export { SwitchGroup, type SwitchGroupProps } from './components/SwitchGroup/Swi
 export { VisuallyHidden, type VisuallyHiddenProps } from './components/VisuallyHidden/VisuallyHidden.js';
 export { LiveAnnouncer, type LiveAnnouncerProps } from './components/LiveAnnouncer/LiveAnnouncer.js';
 /** Announces a text to screen readers through the page's live regions (a LiveAnnouncer or regions on <body>) */
-export { announce, type AnnounceOptions, type Politeness } from '@wirecore/wirelayer-recipes';
+export { announce, focusFirst, type AnnounceOptions, type Politeness } from '@wirecore/wirelayer-recipes';
+export { resolveTokens, watchTokens, type ColorSet } from '@wirecore/wirelayer-tokens';
 export {
     LandmarkNavigation,
     type LandmarkNavigationProps,
diff --git a/packages/react/typecheck/NonEmptyValues.tsx b/packages/react/typecheck/NonEmptyValues.tsx
new file mode 100644
index 0000000..ae6f1e2
--- /dev/null
+++ b/packages/react/typecheck/NonEmptyValues.tsx
@@ -0,0 +1,44 @@
+// Type test, checked by tsc in `pnpm typecheck` (not part of the package): choices that cannot be empty (required, no
+// placeholder, emptyFallback, emptyValue) give onValueChange their value type without null or ''
+import { useState } from 'react';
+import { NativeSelect } from '../src/components/NativeSelect/NativeSelect.js';
+import { NumberInput } from '../src/components/NumberInput/NumberInput.js';
+import { RadioGroup } from '../src/components/RadioGroup/RadioGroup.js';
+import { SegmentedControl } from '../src/components/SegmentedControl/SegmentedControl.js';
+import { Select } from '../src/components/Select/Select.js';
+
+type Protocol = 'ssh' | 'sftp';
+const protocols: { value: Protocol; label: string }[] = [
+    { value: 'ssh', label: 'SSH' },
+    { value: 'sftp', label: 'SFTP' },
+];
+
+export function NonEmptyValues() {
+    const [protocol, setProtocol] = useState<Protocol>('ssh');
+    const [port, setPort] = useState(22);
+    const [service, setService] = useState('');
+    return (
+        <>
+            <RadioGroup required label="Protocol" value={protocol} onValueChange={setProtocol} />
+            <SegmentedControl required label="Protocol" value={protocol} onValueChange={setProtocol} />
+            <NativeSelect aria-label="Protocol" items={protocols} value={protocol} onValueChange={setProtocol} />
+            <NumberInput aria-label="Port" emptyFallback="previous" value={port} onValueChange={setPort} />
+            <Select
+                aria-label="Service"
+                items={['web', 'mail']}
+                emptyValue=""
+                value={service}
+                onValueChange={setService}
+            />
+            {/* Without the opt-ins the empty value stays in the type */}
+            {/* @ts-expect-error null is not a Protocol */}
+            <RadioGroup label="Protocol" value={protocol} onValueChange={setProtocol} />
+            {/* @ts-expect-error '' is not a Protocol */}
+            <NativeSelect placeholder="Choose" items={protocols} value={protocol} onValueChange={setProtocol} />
+            {/* @ts-expect-error null is not a number */}
+            <NumberInput aria-label="Port" value={port} onValueChange={setPort} />
+            {/* @ts-expect-error null is not a string */}
+            <Select aria-label="Service" items={['web', 'mail']} value={service} onValueChange={setService} />
+        </>
+    );
+}
diff --git a/packages/recipes/src/a11y.ts b/packages/recipes/src/a11y.ts
index 85ba66c..1f843ac 100644
--- a/packages/recipes/src/a11y.ts
+++ b/packages/recipes/src/a11y.ts
@@ -225,6 +225,52 @@ export function tabbableElements(container: ParentNode): HTMLElement[] {
     );
 }
 
+const FIELDS = [
+    'input:not([type=hidden], [type=button], [type=submit], [type=reset], [type=image])',
+    'select',
+    'textarea',
+    '[contenteditable]:not([contenteditable=false])',
+    '[role=combobox]',
+    '[role=textbox]',
+    '[role=spinbutton]',
+].join(', ');
+
+/**
+ * Moves the focus into `container` like a dialog does when it opens – for content that changes while it is open
+ * (wizard steps, own multi-step dialogs): the first element marked `data-autoselect` (focused, its text selected),
+ * `data-autofocus` or `autofocus`, otherwise the first field. Returns the focused element, or null. Browser only.
+ */
+export function focusFirst(container: ParentNode | null | undefined): HTMLElement | null {
+    if (!container) return null;
+    const tabbable = tabbableElements(container);
+    const marked = container.querySelector<HTMLElement>('[data-autoselect], [data-autofocus], [autofocus]');
+    const markedOne = marked ? markedTarget(marked, tabbable) : undefined;
+    const target = markedOne ?? tabbable.find((element) => element.matches(FIELDS));
+    if (!target) return null;
+    target.focus();
+    if (markedOne && marked!.hasAttribute('data-autoselect')) selectText(target);
+    return target;
+}
+
+/**
+ * For a dialog's initial focus: the element marked `data-autoselect` in `content` – its text gets selected when it
+ * gets the focus. Undefined without one (Ark then takes `data-autofocus` or the first tabbable element). Browser only.
+ */
+export function autoselectElement(content: ParentNode | null | undefined): HTMLElement | undefined {
+    const marked = content?.querySelector<HTMLElement>('[data-autoselect]');
+    const target = marked ? markedTarget(marked, tabbableElements(content!)) : undefined;
+    target?.addEventListener('focus', () => selectText(target), { once: true });
+    return target;
+}
+
+// The mark may sit on a wrapper (e.g. a component's root): then its first tabbable element
+const markedTarget = (marked: HTMLElement, tabbable: HTMLElement[]) =>
+    tabbable.includes(marked) ? marked : tabbable.find((element) => marked.contains(element));
+
+const selectText = (element: Element) => {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) element.select();
+};
+
 /**
  * Keeps Tab and Shift+Tab inside `container` and focuses its first element (or `initialFocus`). Returns the function
  * that releases it.
diff --git a/packages/recipes/src/card.ts b/packages/recipes/src/card.ts
index 7f2adc6..cd51c6c 100644
--- a/packages/recipes/src/card.ts
+++ b/packages/recipes/src/card.ts
@@ -13,7 +13,14 @@ export const card = tv({
         horizontal: {
             true: 'flex-row items-stretch gap-5',
         },
+        /** `sm`: smaller radius and padding, e.g. for cards in a list inside a dialog */
+        size: {
+            sm: 'gap-1.5 rounded-xl p-[var(--wc-card-p,0.75rem)]',
+            md: '',
+        },
     },
+    compoundVariants: [{ horizontal: true, size: 'sm', class: 'gap-3' }],
+    defaultVariants: { size: 'md' },
 });
 
 /**
@@ -37,5 +44,18 @@ export const cardParts = tv({
         horizontal: {
             true: { media: 'w-2/5 max-w-64 shrink-0 self-stretch' },
         },
+        /** `sm`: the denser card of the `card` recipe */
+        size: {
+            sm: {
+                media: 'rounded-lg',
+                content: 'gap-1.5',
+                header: 'gap-2',
+                title: 'text-sm',
+                subtitle: 'text-xs',
+                footer: 'pt-1',
+            },
+            md: {},
+        },
     },
+    defaultVariants: { size: 'md' },
 });
diff --git a/packages/recipes/src/config.ts b/packages/recipes/src/config.ts
index 76f11a1..b3b8675 100644
--- a/packages/recipes/src/config.ts
+++ b/packages/recipes/src/config.ts
@@ -1,6 +1,9 @@
 import * as Recipes from './index.js';
 import type { RecipeOverrides } from './overrides.js';
 
+/** Recipes whose `size` is the density of a surface, not the size of a control – a small Card stays opt-in */
+const densities = new Set(['card', 'cardParts']);
+
 /**
  * Default `size` for every recipe that has that size (ConfigProvider `size`): `sizeOverrides('sm')` makes buttons,
  * inputs, selects … small unless a component sets its own size. Recipes without the size are left alone.
@@ -8,6 +11,7 @@ import type { RecipeOverrides } from './overrides.js';
 export function sizeOverrides(size: string): RecipeOverrides {
     const overrides: RecipeOverrides = {};
     for (const [name, recipe] of Object.entries(Recipes)) {
+        if (densities.has(name)) continue;
         const sizes = (recipe as { variants?: { size?: Record<string, unknown> } } | null)?.variants?.size;
         if (typeof recipe === 'function' && sizes && Object.hasOwn(sizes, size))
             overrides[name] = { defaultVariants: { size } };
diff --git a/packages/recipes/src/index.ts b/packages/recipes/src/index.ts
index f28ba09..df229d0 100644
--- a/packages/recipes/src/index.ts
+++ b/packages/recipes/src/index.ts
@@ -356,6 +356,7 @@ export {
     clampDialogOffset,
     closeMenuOnPageEvents,
     closeTab,
+    createContextMenuSource,
     createLongPress,
     dialogMoveForKey,
     dialogMoveKeys,
@@ -398,6 +399,7 @@ export {
     unmaskValue,
     type AnchorBox,
     type ColorMode,
+    type ContextMenuOpenDetails,
     type HighlightChunk,
     type LongPress,
     type OverlayAnchor,
@@ -863,7 +865,9 @@ export {
     ANNOUNCE_DELAY,
     Announcer,
     announcer,
+    autoselectElement,
     findLandmarks,
+    focusFirst,
     focusLandmark,
     LANDMARK_SELECTOR,
     liveRegionAttributes,
diff --git a/packages/recipes/src/native/data.ts b/packages/recipes/src/native/data.ts
index 271c810..8d11284 100644
--- a/packages/recipes/src/native/data.ts
+++ b/packages/recipes/src/native/data.ts
@@ -304,6 +304,7 @@ export const progressParts = tv({
             success: { verticalRange: 'bg-success' },
             warn: { verticalRange: 'bg-warn' },
             danger: { verticalRange: 'bg-danger' },
+            neutral: { verticalRange: 'bg-muted' },
         },
         /** Text in the bar: a taller track */
         hasText: {
@@ -315,6 +316,7 @@ export const progressParts = tv({
         { filled: true, status: 'success', class: { step: 'bg-success' } },
         { filled: true, status: 'warn', class: { step: 'bg-warn' } },
         { filled: true, status: 'danger', class: { step: 'bg-danger' } },
+        { filled: true, status: 'neutral', class: { step: 'bg-muted' } },
         { size: 'xs', hasText: true, class: { track: 'h-3.5' } },
     ],
 });
diff --git a/packages/recipes/src/native/display.ts b/packages/recipes/src/native/display.ts
index b2328b5..7459568 100644
--- a/packages/recipes/src/native/display.ts
+++ b/packages/recipes/src/native/display.ts
@@ -247,6 +247,8 @@ export const progress = tv({
             success: { range: 'bg-success', barTextFillLabel: 'text-on-success' },
             warn: { range: 'bg-warn', barTextFillLabel: 'text-on-warn' },
             danger: { range: 'bg-danger', barTextFillLabel: 'text-on-danger' },
+            /** Grey, e.g. a cancelled transfer */
+            neutral: { range: 'bg-muted', barTextFillLabel: 'text-bg' },
         },
         /** The label only names the bar; the value stays at the end */
         hideLabel: {
diff --git a/packages/recipes/src/navigation.ts b/packages/recipes/src/navigation.ts
index b27003c..ecbe4d4 100644
--- a/packages/recipes/src/navigation.ts
+++ b/packages/recipes/src/navigation.ts
@@ -326,7 +326,14 @@ export const progress = tv({
                 step: 'data-[state=complete]:bg-danger',
                 barTextFill: 'text-on-danger',
             },
-            muted: { segment: 'bg-muted', swatch: 'bg-muted' },
+            /** Also the fill of `status: 'neutral'` (e.g. a cancelled transfer) */
+            muted: {
+                segment: 'bg-muted',
+                swatch: 'bg-muted',
+                range: 'bg-muted',
+                step: 'data-[state=complete]:bg-muted',
+                barTextFill: 'text-bg',
+            },
         },
     },
     compoundVariants: [
diff --git a/packages/recipes/src/tv.ts b/packages/recipes/src/tv.ts
index ef2680e..eac8d07 100644
--- a/packages/recipes/src/tv.ts
+++ b/packages/recipes/src/tv.ts
@@ -3,8 +3,8 @@ import { createTV } from 'tailwind-variants';
 /** tailwind-merge knows the custom WireLayer utilities (also used by the @wirecore/wirelayer-css generator). */
 export const twMergeConfig = {
     extend: {
-        // rounded-popup is a radius, so `classes` like rounded-none replace it
-        theme: { radius: ['popup'] },
+        // rounded-popup, -card and -panel are radii, so `classes` like rounded-none (or a Card's size) replace them
+        theme: { radius: ['popup', 'card', 'panel'] },
         classGroups: {
             'bg-image': ['bg-glow'],
             'text-gradient': ['text-gradient'],
diff --git a/packages/recipes/src/utils.ts b/packages/recipes/src/utils.ts
index a07d782..ceb1641 100644
--- a/packages/recipes/src/utils.ts
+++ b/packages/recipes/src/utils.ts
@@ -665,6 +665,35 @@ export function createLongPress(
     };
 }
 
+/** How a context menu is being opened – the second argument of ContextMenu's before-open */
+export interface ContextMenuOpenDetails {
+    /** `pointer`: right click or long press; `keyboard`: Shift+F10 or the menu key */
+    source: 'pointer' | 'keyboard';
+    /** With the keyboard: the element that has the focus (e.g. a row of a list) – null with the pointer */
+    focused: Element | null;
+}
+
+/**
+ * Tells the contextmenu events of the keyboard (Shift+F10, the menu key) from those of the pointer: give it the
+ * keydown and pointerdown events of the area, and ask it on contextmenu. Browser only.
+ */
+export function createContextMenuSource() {
+    let keyboard = false;
+    return {
+        keydown(event: { key: string; shiftKey: boolean }) {
+            if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) keyboard = true;
+        },
+        pointerdown() {
+            keyboard = false;
+        },
+        contextmenu(): ContextMenuOpenDetails {
+            const source = keyboard ? 'keyboard' : 'pointer';
+            keyboard = false;
+            return { source, focused: source === 'keyboard' ? document.activeElement : null };
+        },
+    };
+}
+
 /** A toast swiped sideways by `distance` pixels closes once it moved 80 pixels or 40 % of its width */
 export function isSwipeDismiss(distance: number, width: number): boolean {
     return Math.abs(distance) >= Math.min(80, width * 0.4);
diff --git a/packages/recipes/src/vite.ts b/packages/recipes/src/vite.ts
index 283168c..e38f75f 100644
--- a/packages/recipes/src/vite.ts
+++ b/packages/recipes/src/vite.ts
@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { dirname, extname, join, relative } from 'node:path';
 import type { Plugin, ViteDevServer } from 'vite';
@@ -95,6 +95,18 @@ export function wirelayer(options: WireLayerSourcesOptions = {}): Plugin {
     const perFile = new Map<string, Map<string, Set<string>>>();
     let imports = '';
     const entries = new Set<string>();
+    let cacheDir = join(root, 'node_modules/.vite');
+    /**
+     * In the dev server the imports live in a file of their own: Tailwind's Vite plugin only builds a CSS file again
+     * when one of the files it imports changed on disk – imports added to the code alone would be ignored until a
+     * restart
+     */
+    let devFile: string | undefined;
+    const writeDevFile = () => {
+        if (!devFile) return;
+        mkdirSync(dirname(devFile), { recursive: true });
+        writeFileSync(devFile, `${imports}\n`);
+    };
 
     const read = (file: string) => {
         try {
@@ -126,9 +138,11 @@ export function wirelayer(options: WireLayerSourcesOptions = {}): Plugin {
         enforce: 'pre',
         configResolved(config) {
             root = config.root;
+            cacheDir = config.cacheDir ?? join(root, 'node_modules/.vite');
         },
         buildStart() {
             scan();
+            writeDevFile();
         },
         transform(code, id) {
             const entry = id.split('?')[0]!.endsWith('.css') ? ENTRY.exec(code) : null;
@@ -136,12 +150,14 @@ export function wirelayer(options: WireLayerSourcesOptions = {}): Plugin {
             entries.add(id);
             // Right after the theme import – @import rules come before all others
             const end = code.indexOf(';', entry.index) + 1;
+            const added = devFile ? `@import '${devFile.replaceAll('\\', '/')}';` : imports;
             return {
-                code: `${code.slice(0, end)}\n/* added by wirelayer() */\n${imports}\n${code.slice(end)}`,
+                code: `${code.slice(0, end)}\n/* added by wirelayer() */\n${added}\n${code.slice(end)}`,
                 map: null,
             };
         },
         configureServer(server: ViteDevServer) {
+            devFile = join(cacheDir, 'wirelayer-sources.css');
             // A new or changed import adds its sources file: the CSS is built again
             const update = (file: string) => {
                 if (!SOURCE_FILES.has(extname(file)) || relative(root, file).startsWith('..')) return;
@@ -150,6 +166,7 @@ export function wirelayer(options: WireLayerSourcesOptions = {}): Plugin {
                 const next = collect();
                 if (next === imports) return;
                 imports = next;
+                writeDevFile();
                 for (const id of entries) {
                     const module = server.moduleGraph.getModuleById(id);
                     if (module) void server.reloadModule(module);
diff --git a/packages/tokens/scripts/build-theme.ts b/packages/tokens/scripts/build-theme.ts
index eb942ee..fa1f3df 100644
--- a/packages/tokens/scripts/build-theme.ts
+++ b/packages/tokens/scripts/build-theme.ts
@@ -220,6 +220,12 @@ ${Object.entries(radius)
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
+    /* Popups positioned by Ark (Select, Menu, Popover …): Ark copies the z-index of the content to the positioner as
+       an inline style – Vue removes it again when it patches the positioner's style, which drops a list behind a
+       dialog. In the base layer, so a z-index utility on a positioner still wins */
+    [data-scope][data-part='positioner'] {
+        z-index: var(--z-index);
+    }
 }
 `;
 
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index 74927ec..bf701b7 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -11,3 +11,4 @@ export {
 export { colorDeclarations, themeToCss } from './css.js';
 export { nativeExtraThemes, nativeFonts, nativeThemeName, themeToNativeCss } from './native.js';
 export { contrast, inGamut, luminance, oklchToRgb, over, parse, rgbToOklch, toHex, type Rgba } from './color.js';
+export { resolveTokens, watchTokens } from './resolve.js';
diff --git a/packages/tokens/src/resolve.ts b/packages/tokens/src/resolve.ts
new file mode 100644
index 0000000..6b19ea5
--- /dev/null
+++ b/packages/tokens/src/resolve.ts
@@ -0,0 +1,59 @@
+// The colour tokens as fixed values at runtime – for canvas libraries (xterm.js, charts) that cannot read CSS
+// variables. Browser only.
+import { parse, toHex } from './color.js';
+import { colorTokens, type ColorSet } from './tokens.js';
+
+/**
+ * The colours of the tokens as they apply to `element` right now (mode, theme and own overrides included): hex,
+ * `#rrggbbaa` for translucent ones (line, glow). A value the browser cannot paint stays as written.
+ */
+export function resolveTokens(element: Element = document.documentElement): ColorSet {
+    const style = getComputedStyle(element);
+    return Object.fromEntries(
+        colorTokens.map((token) => [token, toFixedColor(style.getPropertyValue(`--wc-${token}`).trim())])
+    ) as ColorSet;
+}
+
+/**
+ * Calls `onChange` whenever the token colours may have changed: another mode or theme on the page (`data-mode`,
+ * `data-theme`, `class`, `style` of <html> and <body>) or another system colour scheme. Returns the function that
+ * stops it. Browser only.
+ */
+export function watchTokens(onChange: () => void): () => void {
+    const observer = new MutationObserver(onChange);
+    const attributeFilter = ['data-mode', 'data-theme', 'class', 'style'];
+    observer.observe(document.documentElement, { attributes: true, attributeFilter });
+    if (document.body) observer.observe(document.body, { attributes: true, attributeFilter });
+    const scheme = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : undefined;
+    scheme?.addEventListener?.('change', onChange);
+    return () => {
+        observer.disconnect();
+        scheme?.removeEventListener?.('change', onChange);
+    };
+}
+
+function toFixedColor(value: string): string {
+    if (!value) return value;
+    try {
+        const color = parse(value);
+        const alpha = Math.round(color.a * 255);
+        return alpha < 255 ? `${toHex(color)}${alpha.toString(16).padStart(2, '0')}` : toHex(color);
+    } catch {
+        return paintedColor(value) ?? value;
+    }
+}
+
+let canvas: CanvasRenderingContext2D | null | undefined;
+
+/** Other notations (hsl, color-mix …): painted onto a pixel and read back */
+function paintedColor(value: string): string | undefined {
+    if (typeof CSS === 'undefined' || !CSS.supports?.('color', value)) return undefined;
+    canvas ??= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    if (!canvas) return undefined;
+    canvas.clearRect(0, 0, 1, 1);
+    canvas.fillStyle = value;
+    canvas.fillRect(0, 0, 1, 1);
+    const [r = 0, g = 0, b = 0, a = 0] = canvas.getImageData(0, 0, 1, 1).data;
+    const hex = (channel: number) => channel.toString(16).padStart(2, '0');
+    return `#${hex(r)}${hex(g)}${hex(b)}${a < 255 ? hex(a) : ''}`;
+}
diff --git a/packages/tokens/test/theme.test.ts b/packages/tokens/test/theme.test.ts
index a2aea89..dd7c7f3 100644
--- a/packages/tokens/test/theme.test.ts
+++ b/packages/tokens/test/theme.test.ts
@@ -32,6 +32,15 @@ describe('animation theme variables', () => {
     });
 });
 
+describe('popup positioners', () => {
+    // Vue patches Ark's inline z-index of a positioner away when it renders again – the stylesheet keeps it
+    it('gives every Ark positioner the z-index Ark copied from its content, in the base layer', () => {
+        expect(css).toMatch(
+            /@layer base \{[^@]*\[data-scope\]\[data-part='positioner'\] \{\s*z-index: var\(--z-index\);/
+        );
+    });
+});
+
 describe('light and dark', () => {
     // Without data-mode the page follows the system; data-mode="light"|"dark" forces a mode (checked in the browser
     // as well – this keeps the generated rules from getting lost)
diff --git a/packages/vue/src/components/Avatar/Avatar.stories.ts b/packages/vue/src/components/Avatar/Avatar.stories.ts
index 25351d2..35cdbc9 100644
--- a/packages/vue/src/components/Avatar/Avatar.stories.ts
+++ b/packages/vue/src/components/Avatar/Avatar.stories.ts
@@ -70,3 +70,17 @@ export const Colors: Story = {
             </div>`,
     }),
 };
+
+/** `initials`: own initials instead of the ones from `name` (which takes the first letters of the words) */
+export const OwnInitials: Story = {
+    name: 'Own initials',
+    render: () => ({
+        components: { Avatar },
+        template: `
+            <div class="flex items-center gap-2.5">
+                <Avatar name="my-server" color="auto" />
+                <Avatar name="my-server" initials="MS" color="auto" />
+                <Avatar name="db_primary" initials="DB" color="info" shape="square" />
+            </div>`,
+    }),
+};
diff --git a/packages/vue/src/components/Avatar/Avatar.vue b/packages/vue/src/components/Avatar/Avatar.vue
index 6385321..9982576 100644
--- a/packages/vue/src/components/Avatar/Avatar.vue
+++ b/packages/vue/src/components/Avatar/Avatar.vue
@@ -18,6 +18,8 @@ import { useRecipe } from '../../recipes.js';
 export interface AvatarProps {
     /** Person or organisation – accessible name of the avatar and source of the initials */
     name?: string;
+    /** Own initials instead of the ones taken from `name`, e.g. "MS" for "my-server" */
+    initials?: string;
     /** Image URL; initials (or the icon) are shown while it loads or if it fails */
     src?: string;
     /** Icon shown when there is neither an image nor a name (default: user icon) */
@@ -53,7 +55,7 @@ const styles = computed(() =>
         interactive: props.as === 'button',
     })
 );
-const initials = computed(() => (props.name ? getInitials(props.name) : ''));
+const initials = computed(() => props.initials ?? (props.name ? getInitials(props.name) : ''));
 </script>
 
 <template>
diff --git a/packages/vue/src/components/Card/Card.stories.ts b/packages/vue/src/components/Card/Card.stories.ts
index a1f9bc3..d31a84f 100644
--- a/packages/vue/src/components/Card/Card.stories.ts
+++ b/packages/vue/src/components/Card/Card.stories.ts
@@ -84,3 +84,28 @@ export const Horizontal: Story = {
             </Card>`,
     }),
 };
+
+/** `size="sm"`: smaller radius, padding and title – for lists of cards, e.g. inside a dialog */
+export const Small: Story = {
+    name: 'Small',
+    render: () => ({
+        components: { Badge, Card },
+        setup: () => ({
+            hosts: [
+                { name: 'web-01', detail: 'Ubuntu 24.04 · SSH', state: 'Online' },
+                { name: 'db-primary', detail: 'Debian 12 · SSH', state: 'Online' },
+                { name: 'backup', detail: 'FreeBSD 14 · SFTP', state: 'Offline' },
+            ],
+        }),
+        template: `
+            <ul class="flex w-80 flex-col gap-2">
+                <li v-for="host in hosts" :key="host.name">
+                    <Card size="sm" :title="host.name" :subtitle="host.detail" title-tag="p">
+                        <template #header>
+                            <Badge :variant="host.state === 'Online' ? 'success' : 'outline'">{{ host.state }}</Badge>
+                        </template>
+                    </Card>
+                </li>
+            </ul>`,
+    }),
+};
diff --git a/packages/vue/src/components/Card/Card.vue b/packages/vue/src/components/Card/Card.vue
index d71ab30..5bd3db7 100644
--- a/packages/vue/src/components/Card/Card.vue
+++ b/packages/vue/src/components/Card/Card.vue
@@ -20,6 +20,8 @@ export interface CardProps {
     titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
     /** `horizontal`: media at the start, the content beside it */
     orientation?: 'vertical' | 'horizontal';
+    /** `sm`: smaller radius, padding and title, e.g. for cards in a list inside a dialog */
+    size?: 'sm' | 'md';
     /** Extra classes per part of the component, e.g. { base: "…", title: "…" } (see the recipes card and cardParts) */
     classes?: RecipeClasses<typeof cardRecipe> & RecipeClasses<typeof cardPartsRecipe>;
 }
@@ -41,7 +43,7 @@ const card = useRecipe('card', cardRecipe, () => props.classes);
 const cardParts = useRecipe('cardParts', cardPartsRecipe, () => props.classes);
 const attrs = useAttrs();
 const horizontal = computed(() => props.orientation === 'horizontal');
-const parts = computed(() => cardParts({ horizontal: horizontal.value }));
+const parts = computed(() => cardParts({ horizontal: horizontal.value, size: props.size }));
 const hasTitle = computed(() => !!props.title || !!slots.title || !!props.subtitle || !!slots.subtitle);
 // Without title, media, header or footer the card renders its content as before
 const hasParts = computed(
@@ -54,7 +56,7 @@ const hasParts = computed(
         v-if="!hasParts"
         v-bind="{
             ...attrs,
-            class: card({ interactive, horizontal: horizontal || undefined, class: normalizeClass(attrs.class) }),
+            class: card({ interactive, horizontal: horizontal || undefined, size, class: normalizeClass(attrs.class) }),
         }"
         :as-child="asChild"
     >
@@ -64,7 +66,7 @@ const hasParts = computed(
         v-else
         v-bind="{
             ...attrs,
-            class: card({ interactive, horizontal: horizontal || undefined, class: normalizeClass(attrs.class) }),
+            class: card({ interactive, horizontal: horizontal || undefined, size, class: normalizeClass(attrs.class) }),
         }"
     >
         <div v-if="slots.media" :class="parts.media()"><slot name="media" /></div>
diff --git a/packages/vue/src/components/Code/Code.stories.ts b/packages/vue/src/components/Code/Code.stories.ts
new file mode 100644
index 0000000..00f89e9
--- /dev/null
+++ b/packages/vue/src/components/Code/Code.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Code from './Code.vue';
+
+const meta = {
+    title: 'Data/Code',
+    component: Code,
+    args: { code: 'data-theme' },
+    render: (args) => ({
+        components: { Code },
+        setup: () => ({ args }),
+        template: `
+            <p class="max-w-md text-sm">
+                Set the theme with <Code v-bind="args" /> on the <Code>&lt;html&gt;</Code> element – the look of
+                InlineCode, without syntax colours and without shiki.
+            </p>`,
+    }),
+} satisfies Meta<typeof Code>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
diff --git a/packages/vue/src/components/Code/Code.vue b/packages/vue/src/components/Code/Code.vue
new file mode 100644
index 0000000..8a89060
--- /dev/null
+++ b/packages/vue/src/components/Code/Code.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inlineCode as inlineCodeRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
+import { normalizeClass, useAttrs } from 'vue';
+import { useRecipe } from '../../recipes.js';
+
+export interface CodeProps {
+    /** The code (one line) – or pass it as the content */
+    code?: string;
+    /** Extra classes of the recipe (see the recipe inlineCode) */
+    classes?: RecipeClasses<typeof inlineCodeRecipe>;
+}
+
+defineOptions({ inheritAttrs: false });
+const props = defineProps<CodeProps>();
+const inlineCode = useRecipe('inlineCode', inlineCodeRecipe, () => props.classes);
+const attrs = useAttrs();
+</script>
+
+<template>
+    <!-- Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki -->
+    <code v-bind="{ ...attrs, class: inlineCode({ class: normalizeClass(attrs.class) }) }"
+        ><slot>{{ code }}</slot></code
+    >
+</template>
diff --git a/packages/vue/src/components/ContextMenu/ContextMenu.stories.ts b/packages/vue/src/components/ContextMenu/ContextMenu.stories.ts
index 44d2fd8..e0bccd1 100644
--- a/packages/vue/src/components/ContextMenu/ContextMenu.stories.ts
+++ b/packages/vue/src/components/ContextMenu/ContextMenu.stories.ts
@@ -1,5 +1,6 @@
 import { ClipboardPaste, Copy, Scissors } from '@lucide/vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ContextMenuOpenDetails } from '@wirecore/wirelayer-recipes';
 import { ref } from 'vue';
 import ContextMenu from './ContextMenu.vue';
 
@@ -65,7 +66,8 @@ export const ItemTypes: Story = {
 };
 
 /**
- * A list as in a desktop app: `before-open` gets the right-clicked element – select its row before the menu shows;
+ * A list as in a desktop app: `before-open` gets the right-clicked element – select its row before the menu shows (with
+ * Shift+F10 or the menu key its second argument has `source: 'keyboard'` and the `focused` element);
  * `v-model:open` tells whether the menu is open (e.g. to pause Delete or F2 on the list). `highlight-first` and the
  * close props as on Menu
  */
@@ -77,8 +79,8 @@ export const DesktopList: Story = {
             const hosts = ['web-01', 'web-02', 'db-01'];
             const current = ref('web-01');
             const open = ref(false);
-            const select = (target: Element) => {
-                const row = target.closest<HTMLElement>('[data-host]');
+            const select = (target: Element, details: ContextMenuOpenDetails) => {
+                const row = (details.focused ?? target).closest<HTMLElement>('[data-host]');
                 if (row) current.value = row.dataset.host!;
             };
             return {
diff --git a/packages/vue/src/components/ContextMenu/ContextMenu.vue b/packages/vue/src/components/ContextMenu/ContextMenu.vue
index c68002f..58494fc 100644
--- a/packages/vue/src/components/ContextMenu/ContextMenu.vue
+++ b/packages/vue/src/components/ContextMenu/ContextMenu.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { Menu } from '@ark-ui/vue/menu';
 import {
+    createContextMenuSource,
     createLongPress,
     menu as menuRecipe,
+    type ContextMenuOpenDetails,
     type OverlayHandle,
     type RecipeClasses,
 } from '@wirecore/wirelayer-recipes';
@@ -45,9 +47,10 @@ const emit = defineEmits<{
     'update:open': [open: boolean];
     /**
      * A right click, long press or the menu key is opening the menu, on this element (e.g. the row under the pointer –
-     * select it before the menu shows)
+     * select it before the menu shows); `details.source` tells pointer from keyboard, with the keyboard
+     * `details.focused` is the focused element (e.g. the row with the focus)
      */
-    'before-open': [target: Element];
+    'before-open': [target: Element, details: ContextMenuOpenDetails];
 }>();
 defineSlots<{
     /** The area that opens the menu */
@@ -83,11 +86,14 @@ const highlight = useMenuBehavior({
 // Touch and pen: holding still for half a second opens the menu at the finger
 let pressed: Element | null = null;
 const longPress = createLongPress((point) => {
-    if (pressed) emit('before-open', pressed);
+    if (pressed) emit('before-open', pressed, { source: 'pointer', focused: null });
     overlay.handle.open(point);
 });
+// Shift+F10 and the menu key open it as well (the browser's contextmenu event)
+const source = createContextMenuSource();
 function onPointerDown(event: PointerEvent) {
     pressed = event.target as Element | null;
+    source.pointerdown();
     longPress.down(event);
 }
 onBeforeUnmount(longPress.cancel);
@@ -113,7 +119,8 @@ const positioning = computed(() => overlay.positioning({}));
         <Menu.ContextTrigger
             as-child
             @pointerdown="onPointerDown"
-            @contextmenu="emit('before-open', $event.target as Element)"
+            @keydown="source.keydown($event)"
+            @contextmenu="emit('before-open', $event.target as Element, source.contextmenu())"
             @pointermove="longPress.move($event)"
             @pointerup="longPress.cancel()"
             @pointercancel="longPress.cancel()"
diff --git a/packages/vue/src/components/Dialog/Dialog.stories.ts b/packages/vue/src/components/Dialog/Dialog.stories.ts
index 4be8466..97ae118 100644
--- a/packages/vue/src/components/Dialog/Dialog.stories.ts
+++ b/packages/vue/src/components/Dialog/Dialog.stories.ts
@@ -1,6 +1,6 @@
 import { Trash2 } from '@lucide/vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import Button from '../Button/Button.vue';
 import Field from '../Field/Field.vue';
 import Input from '../Input/Input.vue';
@@ -213,6 +213,59 @@ export const InitialFocus: Story = {
     }),
 };
 
+/** `data-autoselect`: the field gets the focus with its text selected – typing replaces the prefilled name */
+export const SelectedOnOpen: Story = {
+    name: 'Selected on open',
+    render: () => ({
+        components: { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Field, Input },
+        template: `
+            <Dialog>
+                <DialogTrigger><Button variant="outline">Duplicate connection</Button></DialogTrigger>
+                <DialogContent title="Duplicate connection" size="sm">
+                    <Field label="Name"><Input model-value="web-01 (copy)" data-autoselect /></Field>
+                    <template #footer>
+                        <DialogClose><Button variant="outline" size="sm">Cancel</Button></DialogClose>
+                        <DialogClose><Button size="sm">Duplicate</Button></DialogClose>
+                    </template>
+                </DialogContent>
+            </Dialog>`,
+    }),
+};
+
+/**
+ * Own steps in one dialog: `focusFirst()` on the content focuses the new step the way opening does (data-autoselect,
+ * data-autofocus, otherwise the first field)
+ */
+export const OwnSteps: Story = {
+    name: 'Own steps',
+    render: () => ({
+        components: { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Field, Input },
+        setup() {
+            const step = ref(1);
+            const content = ref<{ focusFirst(): HTMLElement | null } | null>(null);
+            const next = async () => {
+                step.value = 2;
+                await nextTick();
+                content.value?.focusFirst();
+            };
+            return { step, content, next };
+        },
+        template: `
+            <Dialog @update:open="(open) => open || (step = 1)">
+                <DialogTrigger><Button variant="outline">New connection</Button></DialogTrigger>
+                <DialogContent ref="content" title="New connection" :description="'Step ' + step + ' of 2'" size="sm">
+                    <Field v-if="step === 1" label="Host"><Input mono data-autofocus /></Field>
+                    <Field v-else label="User"><Input model-value="root" data-autoselect /></Field>
+                    <template #footer>
+                        <DialogClose><Button variant="outline" size="sm">Cancel</Button></DialogClose>
+                        <Button v-if="step === 1" size="sm" @click="next">Next</Button>
+                        <DialogClose v-else><Button size="sm">Create</Button></DialogClose>
+                    </template>
+                </DialogContent>
+            </Dialog>`,
+    }),
+};
+
 /** `title-position="header"`: the title in the row of the close button, after a smaller icon (as on the Drawer) */
 export const TitleInTheHeader: Story = {
     name: 'Title in the header',
diff --git a/packages/vue/src/components/Dialog/Dialog.vue b/packages/vue/src/components/Dialog/Dialog.vue
index 75f505c..7c8a87b 100644
--- a/packages/vue/src/components/Dialog/Dialog.vue
+++ b/packages/vue/src/components/Dialog/Dialog.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Dialog } from '@ark-ui/vue/dialog';
-import { computed, provide } from 'vue';
-import { dialogRootKey } from './context.js';
+import { autoselectElement } from '@wirecore/wirelayer-recipes';
+import { computed, provide, shallowRef } from 'vue';
+import { dialogContentKey, dialogRootKey } from './context.js';
 
 export interface DialogProps {
     /** Controlled state – use with v-model:open */
@@ -33,6 +34,14 @@ provide(
     dialogRootKey,
     computed(() => ({ modal: props.modal }))
 );
+// A field marked data-autoselect gets the focus with its text selected; otherwise Ark's own choice (an alertdialog's
+// close button, data-autofocus, the first tabbable element)
+const content = shallowRef<HTMLElement | null>(null);
+provide(dialogContentKey, content);
+const initialFocus = () =>
+    autoselectElement(content.value) ??
+    (props.role === 'alertdialog' ? content.value?.querySelector<HTMLElement>('[data-part=close-trigger]') : null) ??
+    null;
 </script>
 
 <template>
@@ -44,6 +53,7 @@ provide(
         :modal="modal"
         :close-on-escape="closeOnEscape"
         :close-on-interact-outside="closeOnInteractOutside"
+        :initial-focus-el="initialFocus"
         lazy-mount
         unmount-on-exit
         @update:open="emit('update:open', $event)"
diff --git a/packages/vue/src/components/Dialog/DialogContent.vue b/packages/vue/src/components/Dialog/DialogContent.vue
index 774a75f..efb0194 100644
--- a/packages/vue/src/components/Dialog/DialogContent.vue
+++ b/packages/vue/src/components/Dialog/DialogContent.vue
@@ -4,13 +4,14 @@ import { Maximize2, Minimize2, X } from '@lucide/vue';
 import {
     dialog as dialogRecipe,
     dialogMoveKeys,
+    focusFirst,
     type DialogPosition,
     type DialogStatus,
     type OverlaySize,
     type RecipeClasses,
 } from '@wirecore/wirelayer-recipes';
-import { computed, inject, normalizeClass, ref, useAttrs, watch, type Component } from 'vue';
-import { dialogRootKey } from './context.js';
+import { computed, inject, normalizeClass, ref, useAttrs, useTemplateRef, watch, type Component } from 'vue';
+import { dialogContentKey, dialogRootKey } from './context.js';
 import { useDialogDrag } from './drag.js';
 import { useTranslations } from '../../locale.js';
 import { useRecipe } from '../../recipes.js';
@@ -81,6 +82,23 @@ const dialog = useRecipe('dialog', dialogRecipe, () => props.classes);
 const attrs = useAttrs();
 const root = inject(dialogRootKey, null);
 const modal = computed(() => root?.value.modal ?? true);
+// The Dialog looks for data-autoselect in the content when it opens
+const contentHolder = inject(dialogContentKey, null);
+const content = useTemplateRef<{ $el: HTMLElement }>('content');
+watch(
+    () => content.value?.$el ?? null,
+    (element) => {
+        if (contentHolder) contentHolder.value = element;
+    },
+    { immediate: true, flush: 'sync' }
+);
+defineExpose({
+    /**
+     * Focuses the content like opening does – for content that changes while the dialog is open (own steps): the
+     * element marked data-autoselect (text selected), data-autofocus or autofocus, otherwise the first field
+     */
+    focusFirst: () => focusFirst(content.value?.$el),
+});
 
 const internalMaximized = ref(props.defaultMaximized ?? false);
 const isMaximized = computed(() => props.maximized ?? internalMaximized.value);
@@ -119,6 +137,7 @@ const styles = computed(() =>
         <Dialog.Backdrop v-if="modal" :class="styles.backdrop()" />
         <Dialog.Positioner :class="styles.positioner()">
             <Dialog.Content
+                ref="content"
                 v-bind="{
                     ...attrs,
                     class: styles.content({ class: normalizeClass(attrs.class) }),
diff --git a/packages/vue/src/components/Dialog/context.ts b/packages/vue/src/components/Dialog/context.ts
index c7dfaa6..8b60df4 100644
--- a/packages/vue/src/components/Dialog/context.ts
+++ b/packages/vue/src/components/Dialog/context.ts
@@ -1,4 +1,7 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue';
 
 /** Settings of the surrounding Dialog/Drawer that its content needs (no backdrop when non-modal) */
 export const dialogRootKey: InjectionKey<ComputedRef<{ modal: boolean }>> = Symbol('wirecore-dialog-root');
+
+/** The content element of the surrounding Dialog – its initial focus looks for `data-autoselect` in it */
+export const dialogContentKey: InjectionKey<ShallowRef<HTMLElement | null>> = Symbol('wirecore-dialog-content');
diff --git a/packages/vue/src/components/NativeSelect/NativeSelect.vue b/packages/vue/src/components/NativeSelect/NativeSelect.vue
index e3b327f..e47f5a9 100644
--- a/packages/vue/src/components/NativeSelect/NativeSelect.vue
+++ b/packages/vue/src/components/NativeSelect/NativeSelect.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="V extends string | number = string">
+<script setup lang="ts" generic="V extends string | number = string, P extends string | undefined = undefined">
 import { Field, useFieldContext } from '@ark-ui/vue/field';
 import { ChevronDown } from '@lucide/vue';
 import { nativeSelect as nativeSelectRecipe, type RecipeClasses, type Size } from '@wirecore/wirelayer-recipes';
@@ -13,13 +13,16 @@ export interface NativeSelectOption<V extends string | number = string> {
     disabled?: boolean;
 }
 
-/** `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string) */
-export interface NativeSelectProps<V extends string | number = string> {
+/**
+ * `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string); `P`: the placeholder's type
+ * (without a placeholder v-model only gets values, never '')
+ */
+export interface NativeSelectProps<V extends string | number = string, P extends string | undefined = undefined> {
     items: readonly NativeSelectOption<V>[];
     /** Chosen value – use with v-model; the placeholder option gives an empty string */
     modelValue?: V | '';
-    /** First, empty option, e.g. "Please choose" */
-    placeholder?: string;
+    /** First, empty option, e.g. "Please choose" – without it v-model only gets values (typed `V`, not `V | ''`) */
+    placeholder?: P;
     size?: Size;
     invalid?: boolean;
     disabled?: boolean;
@@ -28,7 +31,7 @@ export interface NativeSelectProps<V extends string | number = string> {
 }
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<NativeSelectProps<V>>(), {
+const props = withDefaults(defineProps<NativeSelectProps<V, P>>(), {
     modelValue: undefined,
     placeholder: undefined,
     size: 'md',
@@ -36,7 +39,7 @@ const props = withDefaults(defineProps<NativeSelectProps<V>>(), {
     disabled: undefined,
 });
 const nativeSelect = useRecipe('nativeSelect', nativeSelectRecipe, () => props.classes);
-const emit = defineEmits<{ 'update:modelValue': [value: V | ''] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: P extends string ? V | '' : V] }>();
 const attrs = useAttrs();
 const split = computed(() => splitAttrs(attrs));
 const field = useFieldContext();
@@ -46,7 +49,10 @@ const noReadonly = null as unknown as undefined;
 // The option's value with its type (a number stays a number); the placeholder gives ''
 function onChange(event: Event) {
     const text = (event.target as HTMLSelectElement).value;
-    emit('update:modelValue', props.items.find((item) => String(item.value) === text)?.value ?? (text as V | ''));
+    emit(
+        'update:modelValue',
+        (props.items.find((item) => String(item.value) === text)?.value ?? text) as P extends string ? V | '' : V
+    );
 }
 </script>
 
diff --git a/packages/vue/src/components/NumberInput/NumberInput.stories.ts b/packages/vue/src/components/NumberInput/NumberInput.stories.ts
index 70cc93c..69c0fa5 100644
--- a/packages/vue/src/components/NumberInput/NumberInput.stories.ts
+++ b/packages/vue/src/components/NumberInput/NumberInput.stories.ts
@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { ref, type ConcreteComponent } from 'vue';
 import Field from '../Field/Field.vue';
-import NumberInput from './NumberInput.vue';
+import NumberInputComponent from './NumberInput.vue';
+
+// Generic component: Storybook's Vue types can't infer args here
+const NumberInput = NumberInputComponent as unknown as ConcreteComponent;
 
 const meta = {
     title: 'Forms/NumberInput',
@@ -63,3 +66,25 @@ export const Options: Story = {
             </div>`,
     }),
 };
+
+/**
+ * A field that is never empty: `empty-fallback="previous"` puts the last valid number back when an emptied field is
+ * left (or Enter is pressed), `"min"` the minimum – v-model is then typed `number`
+ */
+export const EmptyFallback: Story = {
+    name: 'Empty fallback',
+    render: () => ({
+        components: { Field, NumberInput },
+        setup: () => ({ port: ref(22), retries: ref(3) }),
+        template: `
+            <div class="flex w-60 flex-col gap-4">
+                <Field label="Port" helper-text="Empty: back to the last port">
+                    <NumberInput v-model="port" :min="1" :max="65535" :stepper="false" empty-fallback="previous" />
+                </Field>
+                <Field label="Retries" helper-text="Empty: the minimum">
+                    <NumberInput v-model="retries" :min="1" :max="10" empty-fallback="min" />
+                </Field>
+                <span class="text-xs text-muted">Port {{ port }} · retries {{ retries }}</span>
+            </div>`,
+    }),
+};
diff --git a/packages/vue/src/components/NumberInput/NumberInput.vue b/packages/vue/src/components/NumberInput/NumberInput.vue
index 02dd6a1..48c4a12 100644
--- a/packages/vue/src/components/NumberInput/NumberInput.vue
+++ b/packages/vue/src/components/NumberInput/NumberInput.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="F extends 'min' | 'previous' | undefined = undefined">
 import { useFieldContext } from '@ark-ui/vue/field';
 import { NumberInput, useNumberInput } from '@ark-ui/vue/number-input';
 import { ChevronDown, ChevronUp, Minus, Plus } from '@lucide/vue';
@@ -22,10 +22,11 @@ import { useFieldStatus } from '../Field/context.js';
 import InputStatus from '../Input/InputStatus.vue';
 import { textFieldHandle } from '../../utils/text-field.js';
 
-const localeContext = useLocale();
-const translations = useTranslations();
+/** What an emptied field becomes when it is left: `min` (or 0) or the last valid number */
+export type NumberInputEmptyFallback = 'min' | 'previous';
 
-export interface NumberInputProps {
+/** `F`: the type of `emptyFallback` (with it v-model only gets numbers, never null) */
+export interface NumberInputProps<F extends NumberInputEmptyFallback | undefined = undefined> {
     /** Number or null (empty) – use with v-model */
     modelValue?: number | null;
     defaultValue?: number | null;
@@ -62,6 +63,11 @@ export interface NumberInputProps {
      * range, `none` keeps it (mark it invalid yourself)
      */
     clampBehavior?: 'blur' | 'strict' | 'none';
+    /**
+     * A number is always set: an emptied field falls back to `min` (or 0) or to the last valid number (`previous`)
+     * when it is left or Enter is pressed – v-model then only gets numbers (typed `number`, not `number | null`)
+     */
+    emptyFallback?: F;
     /** Selects the whole number when the field gets the focus */
     selectOnFocus?: boolean;
     /** Shows a spinner in the field and marks it busy (aria-busy) */
@@ -77,7 +83,9 @@ export interface NumberInputProps {
 }
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<NumberInputProps>(), {
+const localeContext = useLocale();
+const translations = useTranslations();
+const props = withDefaults(defineProps<NumberInputProps<F>>(), {
     modelValue: undefined,
     defaultValue: undefined,
     formatOptions: () => defaultNumberFormat,
@@ -94,7 +102,7 @@ const props = withDefaults(defineProps<NumberInputProps>(), {
 });
 const numberInput = useRecipe('numberInput', numberInputRecipe, () => props.classes);
 const currentLocale = computed(() => props.locale ?? localeContext.value.locale);
-const emit = defineEmits<{ 'update:modelValue': [value: number | null] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: F extends string ? number : number | null] }>();
 const attrs = useAttrs();
 const split = computed(() => splitAttrs(attrs));
 const field = useFieldContext();
@@ -117,6 +125,8 @@ const min = computed(() => (props.allowNegative ? props.min : Math.max(props.min
 // Ark keeps the text as typed ("12." while entering 12.5). A controlled value would be written back before
 // Vue re-renders and swallow the separator – so only changes from outside are passed in, through the API.
 let emitted: number | null | undefined;
+// The last valid number – an emptied field with emptyFallback="previous" goes back to it
+let previous = props.modelValue ?? props.defaultValue ?? null;
 const initial = toNumberInputValue(props.modelValue ?? props.defaultValue, currentLocale.value, format.value);
 // Ark Vue binds the formatted value on every render, which removes a just typed comma – the input shows this text
 const text = ref(initial ?? '');
@@ -140,8 +150,17 @@ const api = useNumberInput(
         ...controlIds(props.id, 'input', { label: field?.value.ids.label, input: field?.value.ids.control }),
         onValueChange: (details: { value: string; valueAsNumber: number }) => {
             text.value = details.value;
-            emitted = Number.isNaN(details.valueAsNumber) ? null : details.valueAsNumber;
-            emit('update:modelValue', emitted);
+            const number = Number.isNaN(details.valueAsNumber) ? null : details.valueAsNumber;
+            // With a fallback the value stays until the field is left
+            if (number === null && props.emptyFallback) return;
+            if (number !== null) previous = number;
+            emitted = number;
+            emit('update:modelValue', number as F extends string ? number : number | null);
+        },
+        // Leaving the field (or Enter) with an empty text: the fallback number
+        onValueCommit: (details: { valueAsNumber: number }) => {
+            if (!props.emptyFallback || !Number.isNaN(details.valueAsNumber)) return;
+            api.value.setValue(props.emptyFallback === 'previous' && previous !== null ? previous : (min.value ?? 0));
         },
     }))
 );
@@ -149,6 +168,7 @@ watch(
     () => props.modelValue,
     (value) => {
         if (value === undefined || value === emitted) return;
+        if (value !== null) previous = value;
         if (value === null) api.value.clearValue();
         else api.value.setValue(value);
     }
diff --git a/packages/vue/src/components/Progress/Progress.stories.ts b/packages/vue/src/components/Progress/Progress.stories.ts
index ef5eb4c..4dd269a 100644
--- a/packages/vue/src/components/Progress/Progress.stories.ts
+++ b/packages/vue/src/components/Progress/Progress.stories.ts
@@ -59,7 +59,7 @@ export const Vertical: Story = {
 
 /**
  * Compact bars for lists and status bars: `size="xs"`, `hide-label` (the label still names the bar for screen readers),
- * `bar-text` in the bar and `status` for the colour
+ * `bar-text` in the bar and `status` for the colour – `neutral` (grey) for a cancelled transfer
  */
 export const Compact: Story = {
     name: 'Compact',
@@ -83,6 +83,10 @@ export const Compact: Story = {
                     <span class="w-28 truncate font-mono">site.zip</span>
                     <Progress :value="100" label="site.zip" hide-label :show-value="false" bar-text="done" status="success" />
                 </div>
+                <div class="flex items-center gap-3 text-xs">
+                    <span class="w-28 truncate font-mono">media.tar</span>
+                    <Progress :value="30" label="media.tar" hide-label :show-value="false" bar-text="cancelled" status="neutral" />
+                </div>
                 <Progress :value="81" label="Disk" size="xs" status="warn" class="w-40" />
             </div>`,
     }),
diff --git a/packages/vue/src/components/Progress/Progress.vue b/packages/vue/src/components/Progress/Progress.vue
index 857c2b8..36e6a2b 100644
--- a/packages/vue/src/components/Progress/Progress.vue
+++ b/packages/vue/src/components/Progress/Progress.vue
@@ -34,8 +34,11 @@ export interface ProgressProps {
     orientation?: 'horizontal' | 'vertical';
     /** `xs`: a thin bar with small text, e.g. in a list or a status bar */
     size?: 'xs' | 'md';
-    /** Colour of the filled part by its state, e.g. `danger` for a failed transfer */
-    status?: 'info' | 'success' | 'warn' | 'danger';
+    /**
+     * Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled
+     * one
+     */
+    status?: 'info' | 'success' | 'warn' | 'danger' | 'neutral';
     /** The label only for screen readers – it still names the progress bar */
     hideLabel?: boolean;
     /**
@@ -70,7 +73,7 @@ const styles = computed(() =>
         animated: props.animated,
         stepped: !!props.steps && !props.segments,
         size: props.size,
-        color: props.status,
+        color: props.status === 'neutral' ? 'muted' : props.status,
         hideLabel: props.hideLabel,
         hasText: showBarText.value,
     })
diff --git a/packages/vue/src/components/RadioGroup/RadioGroup.vue b/packages/vue/src/components/RadioGroup/RadioGroup.vue
index 4c75743..dd572ae 100644
--- a/packages/vue/src/components/RadioGroup/RadioGroup.vue
+++ b/packages/vue/src/components/RadioGroup/RadioGroup.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="V extends string | number = string">
+<script setup lang="ts" generic="V extends string | number = string, R extends boolean = false">
 import { useFieldContext } from '@ark-ui/vue/field';
 import { RadioGroup } from '@ark-ui/vue/radio-group';
 import {
@@ -12,8 +12,11 @@ import { useFieldStatus } from '../Field/context.js';
 import { useRecipe } from '../../recipes.js';
 import { useLabelForWarning } from '../../utils/label-for.js';
 
-/** `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string) */
-export interface RadioGroupProps<V extends string | number = string> {
+/**
+ * `V`: the type of the values – a union like `'ssh' | 'sftp'` or numbers (default string); `R`: whether `required` is
+ * set (then v-model only gets values, never null)
+ */
+export interface RadioGroupProps<V extends string | number = string, R extends boolean = false> {
     /** Selected value – use with v-model; numbers when the items have number values */
     modelValue?: V | null;
     defaultValue?: V | null;
@@ -24,14 +27,18 @@ export interface RadioGroupProps<V extends string | number = string> {
     columns?: number;
     disabled?: boolean;
     invalid?: boolean;
-    required?: boolean;
+    /**
+     * A choice is required (aria-required). v-model then only gets values (typed `V`, not `V | null`): a form reset
+     * back to an empty start is not passed on
+     */
+    required?: R & boolean;
     name?: string;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof radioGroupRecipe>;
 }
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<RadioGroupProps<V>>(), {
+const props = withDefaults(defineProps<RadioGroupProps<V, R>>(), {
     modelValue: undefined,
     defaultValue: undefined,
     orientation: 'horizontal',
@@ -40,7 +47,7 @@ const props = withDefaults(defineProps<RadioGroupProps<V>>(), {
     required: undefined,
 });
 const radioGroup = useRecipe('radioGroup', radioGroupRecipe, () => props.classes);
-const emit = defineEmits<{ 'update:modelValue': [value: V | null] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: R extends true ? V : V | null] }>();
 const attrs = useAttrs();
 useLabelForWarning('RadioGroup', () => attrs.id);
 const styles = computed(() => radioGroup({ orientation: props.orientation, grid: props.columns !== undefined }));
@@ -57,8 +64,11 @@ const ids = computed(() => (fieldLabelled.value ? { label: field!.value.ids.labe
 const values = new Map<string, string | number>();
 provide(radioGroupValuesKey, values);
 const toText = (value: V | null | undefined) => (value == null ? value : String(value));
-const onValueChange = (value: string | null) =>
-    emit('update:modelValue', (value === null ? null : (values.get(value) ?? value)) as V | null);
+// A required group never reports an empty value (Ark does on a form reset to an empty start: null or undefined)
+function onValueChange(value: string | null) {
+    if (value == null && props.required) return;
+    emit('update:modelValue', (value === null ? null : (values.get(value) ?? value)) as R extends true ? V : V | null);
+}
 </script>
 
 <template>
diff --git a/packages/vue/src/components/SegmentedControl/SegmentedControl.vue b/packages/vue/src/components/SegmentedControl/SegmentedControl.vue
index 98f796b..e320413 100644
--- a/packages/vue/src/components/SegmentedControl/SegmentedControl.vue
+++ b/packages/vue/src/components/SegmentedControl/SegmentedControl.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="V extends string = string">
+<script setup lang="ts" generic="V extends string = string, R extends boolean = false">
 import { useFieldContext } from '@ark-ui/vue/field';
 import { SegmentGroup } from '@ark-ui/vue/segment-group';
 import {
@@ -13,8 +13,11 @@ import { useFieldStatus } from '../Field/context.js';
 import { useRecipe } from '../../recipes.js';
 import { useLabelForWarning } from '../../utils/label-for.js';
 
-/** `V`: the type of the values, e.g. a union like `'ssh' | 'sftp'` (default string) */
-export interface SegmentedControlProps<V extends string = string> {
+/**
+ * `V`: the type of the values, e.g. a union like `'ssh' | 'sftp'` (default string); `R`: whether `required` is set
+ * (then v-model only gets values, never null)
+ */
+export interface SegmentedControlProps<V extends string = string, R extends boolean = false> {
     /** Selected value – use with v-model */
     modelValue?: V | null;
     defaultValue?: V;
@@ -22,20 +25,26 @@ export interface SegmentedControlProps<V extends string = string> {
     label?: string;
     size?: SegmentedControlSize;
     disabled?: boolean;
+    /**
+     * A value is required (aria-required). v-model then only gets values (typed `V`, not `V | null`): a form reset
+     * back to an empty start is not passed on
+     */
+    required?: R & boolean;
     name?: string;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof segmentedControlRecipe>;
 }
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<SegmentedControlProps<V>>(), {
+const props = withDefaults(defineProps<SegmentedControlProps<V, R>>(), {
     modelValue: undefined,
     defaultValue: undefined,
     size: 'md',
     disabled: undefined,
+    required: undefined,
 });
 const segmentedControl = useRecipe('segmentedControl', segmentedControlRecipe, () => props.classes);
-const emit = defineEmits<{ 'update:modelValue': [value: V | null] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: R extends true ? V : V | null] }>();
 const attrs = useAttrs();
 useLabelForWarning('SegmentedControl', () => attrs.id);
 const styles = computed(() => segmentedControl({ size: props.size }));
@@ -52,6 +61,12 @@ onMounted(() => {
         warnInDevelopment('SegmentedControl: pass `label` or place it in a Field with a label – the group has no name');
 });
 
+// A required control never reports an empty value (Ark does on a form reset to an empty start: null or undefined)
+function onValueChange(value: string | null) {
+    if (value == null && props.required) return;
+    emit('update:modelValue', value as R extends true ? V : V | null);
+}
+
 provide(
     segmentedControlKey,
     computed(() => props.size)
@@ -62,6 +77,7 @@ provide(
     <SegmentGroup.Root
         v-bind="{
             'aria-describedby': field?.ariaDescribedby,
+            ...(required ? { 'aria-required': 'true' } : {}),
             ...attrs,
             class: styles.base({ class: normalizeClass(attrs.class) }),
         }"
@@ -71,7 +87,7 @@ provide(
         orientation="horizontal"
         :disabled="disabled ?? field?.disabled"
         :name="name"
-        @update:model-value="emit('update:modelValue', $event as V | null)"
+        @update:model-value="onValueChange"
     >
         <SegmentGroup.Label v-if="!fieldLabelled" :class="styles.label()">{{ label }}</SegmentGroup.Label>
         <slot />
diff --git a/packages/vue/src/components/Select/Select.stories.ts b/packages/vue/src/components/Select/Select.stories.ts
index 8125c6c..f5490b7 100644
--- a/packages/vue/src/components/Select/Select.stories.ts
+++ b/packages/vue/src/components/Select/Select.stories.ts
@@ -310,3 +310,29 @@ export const KeysInADialog: Story = {
             </div>`,
     }),
 };
+
+/**
+ * A model that uses `""` for "nothing chosen" (e.g. from a form or an API): `empty-value=""` shows the placeholder for
+ * it, and clearing gives `""` back instead of null
+ */
+export const EmptyStringValue: Story = {
+    name: 'Empty string as no value',
+    render: () => ({
+        components: { Field, Select },
+        setup() {
+            const jumpHost = ref('');
+            const hosts = [
+                { value: 'bastion-1', label: 'bastion-1' },
+                { value: 'bastion-2', label: 'bastion-2' },
+            ];
+            return { jumpHost, hosts };
+        },
+        template: `
+            <div class="flex w-[380px] flex-col gap-3.5">
+                <Field label="Jump host">
+                    <Select v-model="jumpHost" :items="hosts" placeholder="None" empty-value="" clearable />
+                </Field>
+                <span class="text-xs text-muted">Value: {{ JSON.stringify(jumpHost) }}</span>
+            </div>`,
+    }),
+};
diff --git a/packages/vue/src/components/Select/Select.vue b/packages/vue/src/components/Select/Select.vue
index 53e6cc2..ef468a8 100644
--- a/packages/vue/src/components/Select/Select.vue
+++ b/packages/vue/src/components/Select/Select.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="T = SelectItem, V = ItemValueOf<T>">
+<script setup lang="ts" generic="T = SelectItem, V = ItemValueOf<T>, E = null">
 import { createListCollection } from '@ark-ui/vue/collection';
 import { useFieldContext } from '@ark-ui/vue/field';
 import { Select } from '@ark-ui/vue/select';
@@ -21,12 +21,18 @@ import { useRecipe } from '../../recipes.js';
 import ListOptions from './ListOptions.vue';
 import type { ListItemState, SelectItem, SelectSize } from './types.js';
 
-export interface SelectProps<T = SelectItem, V = ItemValueOf<T>> {
+/** `T`: the items, `V`: their values, `E`: the type of `emptyValue` (default null) */
+export interface SelectProps<T = SelectItem, V = ItemValueOf<T>, E = null> {
     /** Options: SelectItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled/itemGroup */
     items: readonly T[];
     /** Selected value – use with v-model; any type (string, number, boolean, object) */
-    modelValue?: V | null;
-    defaultValue?: V | null;
+    modelValue?: V | NoInfer<E> | null;
+    defaultValue?: V | NoInfer<E> | null;
+    /**
+     * The value that means "nothing chosen" instead of null, e.g. `""`: it shows the placeholder, and clearing gives it
+     * back (v-model is then typed `V | E`, without null)
+     */
+    emptyValue?: E;
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
@@ -89,17 +95,18 @@ export interface SelectProps<T = SelectItem, V = ItemValueOf<T>> {
 
 defineOptions({ inheritAttrs: false });
 const translations = useTranslations();
-const props = withDefaults(defineProps<SelectProps<T, V>>(), {
+const props = withDefaults(defineProps<SelectProps<T, V, E>>(), {
     modelValue: undefined,
     defaultValue: undefined,
     disabled: undefined,
     invalid: undefined,
     required: undefined,
     open: undefined,
+    emptyValue: undefined,
 });
 const select = useRecipe('select', selectRecipe, () => props.classes);
 const emit = defineEmits<{
-    'update:modelValue': [value: V | null];
+    'update:modelValue': [value: V | NoInfer<E>];
     /** Text of the search field (filter) – e.g. to load matching items from a server (manualFilter) */
     filterChange: [text: string];
     /** The end of the list was scrolled into view (hasMore) */
@@ -140,13 +147,15 @@ const { options, groups, ordered } = useListOptions(
     () => (props.filter && !props.manualFilter && !props.dataSource ? query.value : '')
 );
 const known = computed(() => [...options.value, ...source.resolvedOptions.value]);
+// emptyValue (e.g. "") counts as null: nothing chosen, the placeholder shows
+const withoutEmpty = (value: unknown) => (props.emptyValue !== undefined && value === props.emptyValue ? null : value);
 const { selected, keys, commit, commitKeys } = useListSelection<T>({
     multiple: false,
-    model: () => props.modelValue,
-    defaultValue: props.defaultValue,
+    model: () => withoutEmpty(props.modelValue),
+    defaultValue: withoutEmpty(props.defaultValue),
     accessors: () => accessors.value,
     items: known,
-    emit: (value) => emit('update:modelValue', value as V | null),
+    emit: (value) => emit('update:modelValue', (value === null ? (props.emptyValue ?? null) : value) as V | E),
     // Without a data source and loaded: a value outside the items warns in development
     check: { component: 'Select', ready: () => !props.dataSource && !props.loading && props.items.length > 0 },
 });
diff --git a/packages/vue/src/components/Stepper/Stepper.vue b/packages/vue/src/components/Stepper/Stepper.vue
index 3f9a559..d25cecc 100644
--- a/packages/vue/src/components/Stepper/Stepper.vue
+++ b/packages/vue/src/components/Stepper/Stepper.vue
@@ -29,6 +29,8 @@ export interface StepperProps {
     orientation?: 'horizontal' | 'vertical';
     /** Label beside the number (default) or below it */
     labelPlacement?: 'end' | 'bottom';
+    /** Text of the last "Next" button, e.g. "Create" (default "Finish") */
+    finishLabel?: string;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof stepperRecipe>;
 }
@@ -105,7 +107,7 @@ const noCurrent = null as unknown as undefined;
                 <!-- With linear, an invalid step blocks going on – shown as a disabled button -->
                 <Steps.NextTrigger as-child>
                     <Button :disabled="linear && !api.isStepValid(api.value)">{{
-                        api.value === api.count - 1 ? t.finish : t.next
+                        api.value === api.count - 1 ? (finishLabel ?? t.finish) : t.next
                     }}</Button>
                 </Steps.NextTrigger>
             </div>
diff --git a/packages/vue/src/components/Tabs/Tabs.stories.ts b/packages/vue/src/components/Tabs/Tabs.stories.ts
index ff337cc..7cdef71 100644
--- a/packages/vue/src/components/Tabs/Tabs.stories.ts
+++ b/packages/vue/src/components/Tabs/Tabs.stories.ts
@@ -1,6 +1,7 @@
 import { GitCommitHorizontal, Layers, LayoutDashboard } from '@lucide/vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
+import Button from '../Button/Button.vue';
 import Tabs from './Tabs.vue';
 import TabsContent from './TabsContent.vue';
 import TabsList from './TabsList.vue';
@@ -89,3 +90,36 @@ export const VerticalManual: Story = {
             </Tabs>`,
     }),
 };
+
+/**
+ * Tabs that switch panes living elsewhere (e.g. terminal sessions kept alive with v-show): `controls` points each tab
+ * at its pane, and the value may be null – no tab selected, the first tab stays reachable with Tab
+ */
+export const PanelsElsewhere: Story = {
+    name: 'Panels elsewhere',
+    render: () => ({
+        components: { Button, Tabs, TabsList, TabsTrigger },
+        setup: () => ({ sessions: ['web-01', 'db-primary', 'backup'], active: ref<string | null>('web-01') }),
+        template: `
+            <div class="flex w-[420px] flex-col gap-2">
+                <Tabs v-model="active" label="Sessions">
+                    <TabsList>
+                        <TabsTrigger v-for="name in sessions" :key="name" :value="name" :controls="'pane-' + name">
+                            {{ name }}
+                        </TabsTrigger>
+                    </TabsList>
+                </Tabs>
+                <div
+                    v-for="name in sessions"
+                    v-show="active === name"
+                    :id="'pane-' + name"
+                    :key="name"
+                    class="rounded-lg border border-line bg-bg-2 p-3 font-mono text-xs"
+                >
+                    {{ name }}:~$
+                </div>
+                <p v-if="active === null" class="text-sm text-muted">No session selected.</p>
+                <Button size="sm" variant="outline" class="self-start" @click="active = null">Select none</Button>
+            </div>`,
+    }),
+};
diff --git a/packages/vue/src/components/Tabs/Tabs.vue b/packages/vue/src/components/Tabs/Tabs.vue
index f4dcc6c..a2995b0 100644
--- a/packages/vue/src/components/Tabs/Tabs.vue
+++ b/packages/vue/src/components/Tabs/Tabs.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { Tabs } from '@ark-ui/vue/tabs';
 import { type RecipeClasses, tabs as tabsRecipe } from '@wirecore/wirelayer-recipes';
-import { normalizeClass, useAttrs } from 'vue';
+import { computed, normalizeClass, provide, useAttrs } from 'vue';
+import { tabsNoneSelectedKey } from './context.js';
 import { useRecipe } from '../../recipes.js';
 
 export interface TabsProps {
-    /** Selected tab – use with v-model */
-    modelValue?: string;
+    /**
+     * Selected tab – use with v-model; `null`: no tab selected (e.g. tabs of panels that live elsewhere – the first
+     * tab stays reachable with Tab)
+     */
+    modelValue?: string | null;
     defaultValue?: string;
     /** Accessible name of the tab list */
     label?: string;
@@ -35,12 +39,18 @@ const tabs = useRecipe('tabs', tabsRecipe, () => props.classes);
 const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>();
 const attrs = useAttrs();
 const styles = tabs();
+// null: no tab selected (Ark's type has no null, its machine takes it)
+const value = computed(() => props.modelValue as string | undefined);
+provide(
+    tabsNoneSelectedKey,
+    computed(() => props.modelValue === null)
+);
 </script>
 
 <template>
     <Tabs.Root
         v-bind="{ ...attrs, class: styles.base({ class: normalizeClass(attrs.class) }) }"
-        :model-value="modelValue"
+        :model-value="value"
         :default-value="defaultValue"
         :orientation="orientation"
         :activation-mode="activationMode"
diff --git a/packages/vue/src/components/Tabs/TabsTrigger.vue b/packages/vue/src/components/Tabs/TabsTrigger.vue
index 34363b8..0d01bdb 100644
--- a/packages/vue/src/components/Tabs/TabsTrigger.vue
+++ b/packages/vue/src/components/Tabs/TabsTrigger.vue
@@ -2,7 +2,18 @@
 import { Tabs } from '@ark-ui/vue/tabs';
 import { X } from '@lucide/vue';
 import { closeTab, type RecipeClasses, tabs as tabsRecipe } from '@wirecore/wirelayer-recipes';
-import { computed, normalizeClass, useAttrs, type Component } from 'vue';
+import {
+    computed,
+    inject,
+    normalizeClass,
+    onMounted,
+    onUpdated,
+    ref,
+    useAttrs,
+    useTemplateRef,
+    type Component,
+} from 'vue';
+import { tabsNoneSelectedKey } from './context.js';
 import { useRecipe } from '../../recipes.js';
 
 export interface TabsTriggerProps {
@@ -15,17 +26,43 @@ export interface TabsTriggerProps {
      * another one) yourself. The focus moves to the neighbouring tab
      */
     closable?: boolean;
+    /**
+     * Id of the element the tab shows, when it is not a TabsContent of these Tabs (e.g. a pane elsewhere shown with
+     * v-show) – `null`: none (tabs without panels)
+     */
+    controls?: string | null;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof tabsRecipe>;
 }
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<TabsTriggerProps>(), { disabled: undefined, closable: false });
+const props = withDefaults(defineProps<TabsTriggerProps>(), {
+    disabled: undefined,
+    closable: false,
+    controls: undefined,
+});
 const emit = defineEmits<{ close: [value: string] }>();
 const tabs = useRecipe('tabs', tabsRecipe, () => props.classes);
 const attrs = useAttrs();
 const styles = computed(() => tabs({ closable: props.closable }));
 
+// No tab selected (Tabs value null): Ark takes every tab out of the Tab order – the first enabled one stays in it
+const noneSelected = inject(tabsNoneSelectedKey, null);
+const trigger = useTemplateRef<{ $el: HTMLElement }>('trigger');
+const first = ref(false);
+const checkFirst = () => {
+    const element = trigger.value?.$el;
+    first.value =
+        !!element && element.closest('[role=tablist]')?.querySelector('[role=tab]:not([disabled])') === element;
+};
+onMounted(checkFirst);
+onUpdated(checkFirst);
+// null removes Ark's aria-controls (undefined would keep it)
+const own = computed(() => ({
+    ...(props.controls !== undefined ? { 'aria-controls': props.controls as string | undefined } : {}),
+    ...(noneSelected?.value && first.value ? { tabIndex: 0 } : {}),
+}));
+
 function onKeydown(event: KeyboardEvent) {
     if (!props.closable || event.key !== 'Delete' || event.defaultPrevented || props.disabled) return;
     event.preventDefault();
@@ -41,7 +78,8 @@ function onCloseClick(event: MouseEvent) {
     <!-- The close button is not part of the tab (no button in a button): pointer only, Delete closes by keyboard -->
     <span v-if="closable" role="presentation" :class="styles.tab()">
         <Tabs.Trigger
-            v-bind="{ ...attrs, class: styles.trigger({ class: normalizeClass(attrs.class) }) }"
+            ref="trigger"
+            v-bind="{ ...attrs, ...own, class: styles.trigger({ class: normalizeClass(attrs.class) }) }"
             :value="value"
             :disabled="disabled"
             aria-keyshortcuts="Delete"
@@ -63,7 +101,8 @@ function onCloseClick(event: MouseEvent) {
     </span>
     <Tabs.Trigger
         v-else
-        v-bind="{ ...attrs, class: styles.trigger({ class: normalizeClass(attrs.class) }) }"
+        ref="trigger"
+        v-bind="{ ...attrs, ...own, class: styles.trigger({ class: normalizeClass(attrs.class) }) }"
         :value="value"
         :disabled="disabled"
     >
diff --git a/packages/vue/src/components/Tabs/context.ts b/packages/vue/src/components/Tabs/context.ts
new file mode 100644
index 0000000..dbd2eaf
--- /dev/null
+++ b/packages/vue/src/components/Tabs/context.ts
@@ -0,0 +1,4 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+/** The Tabs' value is null on purpose (no tab selected): the first tab stays reachable with Tab */
+export const tabsNoneSelectedKey: InjectionKey<ComputedRef<boolean>> = Symbol('wirecore-tabs-none-selected');
diff --git a/packages/vue/src/components/Wizard/Wizard.stories.ts b/packages/vue/src/components/Wizard/Wizard.stories.ts
index e125a58..1da09ea 100644
--- a/packages/vue/src/components/Wizard/Wizard.stories.ts
+++ b/packages/vue/src/components/Wizard/Wizard.stories.ts
@@ -4,8 +4,10 @@ import { ref } from 'vue';
 import { bindInput } from '../../form/bind.js';
 import FormField from '../../form/FormField.vue';
 import { useValidators, validateFields } from '../../form/validators.js';
+import Checkbox from '../Checkbox/Checkbox.vue';
 import DataList from '../DataList/DataList.vue';
 import DataListItem from '../DataList/DataListItem.vue';
+import Field from '../Field/Field.vue';
 import Input from '../Input/Input.vue';
 import Result from '../Result/Result.vue';
 import Wizard from './Wizard.vue';
@@ -74,3 +76,43 @@ type Story = StoryObj<typeof meta>;
  * summary before finishing
  */
 export const Playground: Story = {};
+
+/**
+ * `finish-label` names the last button, `focus-on-step-change` moves the focus into each new step (here: the user
+ * name, selected with data-autoselect), and `validate` returns a text – shown as the error of the step instead of the
+ * general one
+ */
+export const OwnTexts: Story = {
+    name: 'Own texts and focus',
+    render: () => ({
+        components: { Checkbox, Field, Input, Wizard },
+        setup() {
+            const signIn = ref(false);
+            const steps = [
+                { label: 'Server' },
+                {
+                    label: 'Sign-in',
+                    validate: async () => {
+                        await new Promise((done) => setTimeout(done, 400));
+                        return signIn.value || 'Sign-in was cancelled – try again';
+                    },
+                },
+            ];
+            return { signIn, steps };
+        },
+        template: `
+            <Wizard :steps="steps" finish-label="Create" focus-on-step-change class="max-w-2xl">
+                <template #step="{ index }">
+                    <div v-if="index === 0" class="flex flex-col gap-3">
+                        <Field label="Host"><Input mono /></Field>
+                        <Field label="Port"><Input model-value="22" mono /></Field>
+                    </div>
+                    <div v-else class="flex flex-col gap-3">
+                        <Field label="User"><Input model-value="root" data-autoselect /></Field>
+                        <Checkbox v-model:checked="signIn">Sign-in succeeds</Checkbox>
+                    </div>
+                </template>
+                <template #completed><p class="text-sm">Connection created.</p></template>
+            </Wizard>`,
+    }),
+};
diff --git a/packages/vue/src/components/Wizard/Wizard.vue b/packages/vue/src/components/Wizard/Wizard.vue
index 2e1ec8e..d02f63f 100644
--- a/packages/vue/src/components/Wizard/Wizard.vue
+++ b/packages/vue/src/components/Wizard/Wizard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { wizard as wizardRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
-import { computed, nextTick, normalizeClass, ref, useAttrs, useTemplateRef } from 'vue';
+import { focusFirst, wizard as wizardRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
+import { computed, nextTick, normalizeClass, ref, useAttrs, useTemplateRef, watch } from 'vue';
 import Stepper from '../Stepper/Stepper.vue';
 import { useTranslations } from '../../locale.js';
 import { useRecipe } from '../../recipes.js';
@@ -10,9 +10,10 @@ export interface WizardStep {
     description?: string;
     /**
      * Checks the step before going on ("Next"): false keeps it open (e.g. `() => validateFields(form, ['name'])`
-     * from the form subpath); may be async – the step shows a spinner meanwhile. Going back never checks
+     * from the form subpath), a text keeps it open and shows the text as the step's error (e.g. "Sign-in was
+     * cancelled"); may be async – the step shows a spinner meanwhile. Going back never checks
      */
-    validate?: () => boolean | Promise<boolean>;
+    validate?: () => boolean | string | Promise<boolean | string>;
 }
 
 export interface WizardProps {
@@ -24,6 +25,13 @@ export interface WizardProps {
     summaryLabel?: string;
     /** Steps listed top to bottom beside the content */
     orientation?: 'horizontal' | 'vertical';
+    /** Text of the last button, e.g. "Create" (default "Finish") */
+    finishLabel?: string;
+    /**
+     * Moves the focus into a new step when the step changes: to the element marked data-autoselect (text selected),
+     * data-autofocus or autofocus, otherwise to the step's first field
+     */
+    focusOnStepChange?: boolean;
     /** Extra classes per part of the component, e.g. { base: "…" } (see the recipe) */
     classes?: RecipeClasses<typeof wizardRecipe>;
 }
@@ -52,6 +60,8 @@ const internal = ref(props.defaultStep);
 const current = computed(() => props.step ?? internal.value);
 const checking = ref<number | null>(null);
 const invalidAt = ref<number | null>(null);
+// The text a step's check gave instead of false
+const invalidText = ref<string | null>(null);
 const items = computed(() => [
     ...props.steps.map((step, index) => ({
         label: step.label,
@@ -70,19 +80,21 @@ function set(next: number) {
 async function onStepChange(next: number) {
     if (checking.value !== null) return;
     invalidAt.value = null;
+    invalidText.value = null;
     for (let index = current.value; index < next; index++) {
         const validate = props.steps[index]?.validate;
         if (!validate) continue;
         checking.value = index;
-        let valid: boolean;
+        let result: boolean | string;
         try {
-            valid = await validate();
+            result = await validate();
         } finally {
             checking.value = null;
         }
-        if (!valid) {
+        if (!result || typeof result === 'string') {
             if (index !== current.value) set(index);
             invalidAt.value = index;
+            invalidText.value = typeof result === 'string' && result ? result : null;
             // The first invalid control of the step gets the focus
             await nextTick();
             root.value?.querySelector<HTMLElement>('[role=tabpanel]:not([hidden]) [aria-invalid=true]')?.focus();
@@ -91,6 +103,12 @@ async function onStepChange(next: number) {
     }
     set(next);
 }
+// The new step's field gets the focus (not after a failed check: then its invalid field has it)
+watch(current, async () => {
+    if (!props.focusOnStepChange) return;
+    await nextTick();
+    if (invalidAt.value === null) focusFirst(root.value?.querySelector('[role=tabpanel]:not([hidden])'));
+});
 </script>
 
 <template>
@@ -99,9 +117,18 @@ async function onStepChange(next: number) {
         an optional summary step before finishing.
     -->
     <div ref="root" v-bind="{ ...attrs, class: styles.base({ class: normalizeClass(attrs.class) }) }">
-        <Stepper :items="items" :step="current" linear :orientation="orientation" @update:step="onStepChange">
+        <Stepper
+            :items="items"
+            :step="current"
+            linear
+            :orientation="orientation"
+            :finish-label="finishLabel"
+            @update:step="onStepChange"
+        >
             <template #step="{ index }">
-                <p v-if="invalidAt === index" :class="styles.error()" role="alert">{{ translations.wizard.invalid }}</p>
+                <p v-if="invalidAt === index" :class="styles.error()" role="alert">
+                    {{ invalidText ?? translations.wizard.invalid }}
+                </p>
                 <div v-if="index === steps.length" :class="styles.summary()"><slot name="summary" /></div>
                 <slot v-else name="step" :index="index" :step="steps[index]!" />
             </template>
diff --git a/packages/vue/src/composables/Hooks.stories.ts b/packages/vue/src/composables/Hooks.stories.ts
index 33f4a55..4568d47 100644
--- a/packages/vue/src/composables/Hooks.stories.ts
+++ b/packages/vue/src/composables/Hooks.stories.ts
@@ -3,7 +3,7 @@ import Badge from '../components/Badge/Badge.vue';
 import Button from '../components/Button/Button.vue';
 import Input from '../components/Input/Input.vue';
 import { useClipboard, useNetwork } from './browser.js';
-import { useColorScheme, useMediaQuery, useReducedMotion } from './media.js';
+import { useColorScheme, useMediaQuery, useReducedMotion, useResolvedTokens } from './media.js';
 import { useDisclosure, useStateHistory } from './state.js';
 import { useLocalStorage } from './storage.js';
 import { useDebouncedValue, useIdle } from './timing.js';
@@ -66,3 +66,24 @@ type Story = StoryObj<typeof meta>;
  * – and more (useHotkeys, useFocusTrap, useIntersection, useScrollSpy …), without VueUse
  */
 export const Playground: Story = {};
+
+/**
+ * `useResolvedTokens()`: the token colours as hex, for canvas libraries like xterm.js that cannot read CSS variables –
+ * they change with the mode and the theme (`resolveTokens()` reads them once)
+ */
+export const ResolvedTokens: Story = {
+    name: 'Resolved tokens',
+    render: () => ({
+        setup: () => ({ tokens: useResolvedTokens() }),
+        template: `
+            <dl class="m-0 grid w-[min(560px,92vw)] gap-x-6 gap-y-1.5 font-mono text-xs sm:grid-cols-2">
+                <div v-for="(value, name) in tokens" :key="name" class="flex items-center gap-2">
+                    <dt class="flex items-center gap-2 text-muted">
+                        <span class="size-4 shrink-0 rounded border border-line" :style="{ background: value }"></span>
+                        {{ name }}
+                    </dt>
+                    <dd class="m-0 ms-auto text-fg">{{ value }}</dd>
+                </div>
+            </dl>`,
+    }),
+};
diff --git a/packages/vue/src/composables/index.ts b/packages/vue/src/composables/index.ts
index 12c81d5..9c561d3 100644
--- a/packages/vue/src/composables/index.ts
+++ b/packages/vue/src/composables/index.ts
@@ -18,7 +18,13 @@ export {
     type HotkeyItem,
     type UseHotkeysOptions,
 } from './hotkeys.js';
-export { useColorScheme, useMediaQuery, useReducedMotion, type UseMediaQueryOptions } from './media.js';
+export {
+    useColorScheme,
+    useMediaQuery,
+    useReducedMotion,
+    useResolvedTokens,
+    type UseMediaQueryOptions,
+} from './media.js';
 export {
     useElementSize,
     useHeadroom,
diff --git a/packages/vue/src/composables/media.ts b/packages/vue/src/composables/media.ts
index 9b7eec2..f7d2c84 100644
--- a/packages/vue/src/composables/media.ts
+++ b/packages/vue/src/composables/media.ts
@@ -1,5 +1,17 @@
 import { matchesMedia, watchMedia } from '@wirecore/wirelayer-recipes';
-import { computed, onMounted, onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue';
+import { colors, resolveTokens, watchTokens, type ColorSet } from '@wirecore/wirelayer-tokens';
+import {
+    computed,
+    onMounted,
+    onScopeDispose,
+    ref,
+    shallowRef,
+    toValue,
+    watch,
+    type MaybeRefOrGetter,
+    type Ref,
+    type ShallowRef,
+} from 'vue';
 
 export interface UseMediaQueryOptions {
     /** Value on the server and before mounting (default false) */
@@ -34,3 +46,19 @@ export function useColorScheme(initialValue: 'light' | 'dark' = 'light') {
     const dark = useMediaQuery('(prefers-color-scheme: dark)', { initialValue: initialValue === 'dark' });
     return computed<'light' | 'dark'>(() => (dark.value ? 'dark' : 'light'));
 }
+
+/**
+ * The token colours as fixed values (hex, see resolveTokens) – for canvas libraries like xterm.js that cannot read CSS
+ * variables; new values when the mode, the theme or the system colour scheme changes. On the server: the light base
+ * colours as written
+ */
+export function useResolvedTokens(): Readonly<ShallowRef<ColorSet>> {
+    const tokens = shallowRef(typeof document === 'undefined' ? colors.light : resolveTokens());
+    let stop = () => {};
+    onMounted(() => {
+        tokens.value = resolveTokens();
+        stop = watchTokens(() => (tokens.value = resolveTokens()));
+    });
+    onScopeDispose(() => stop());
+    return tokens;
+}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index f4e4331..2e6f7b6 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -106,7 +106,11 @@ export {
 } from './components/DatePicker/DatePicker.vue';
 export { default as FileUpload, type FileUploadProps } from './components/FileUpload/FileUpload.vue';
 export { default as MultiSelect, type MultiSelectProps } from './components/MultiSelect/MultiSelect.vue';
-export { default as NumberInput, type NumberInputProps } from './components/NumberInput/NumberInput.vue';
+export {
+    default as NumberInput,
+    type NumberInputEmptyFallback,
+    type NumberInputProps,
+} from './components/NumberInput/NumberInput.vue';
 export { default as PasswordInput, type PasswordInputProps } from './components/PasswordInput/PasswordInput.vue';
 export { default as Slider, type SliderMark, type SliderProps } from './components/Slider/Slider.vue';
 export { default as ColorPicker, type ColorPickerProps } from './components/ColorPicker/ColorPicker.vue';
@@ -199,6 +203,7 @@ export {
 export { default as CopyButton, type CopyButtonProps } from './components/CopyButton/CopyButton.vue';
 export { default as HoverCard, type HoverCardProps } from './components/HoverCard/HoverCard.vue';
 export { default as Kbd, type KbdProps } from './components/Kbd/Kbd.vue';
+export { default as Code, type CodeProps } from './components/Code/Code.vue';
 export { default as MonthPicker, type MonthPickerProps } from './components/MonthPicker/MonthPicker.vue';
 export { default as TagsInput, type TagsInputProps } from './components/TagsInput/TagsInput.vue';
 export { default as Highlight, type HighlightProps } from './components/Highlight/Highlight.vue';
@@ -324,7 +329,12 @@ export type {
     MegaMenuItem,
     MegaMenuLink,
 } from './components/MegaMenu/types.js';
-export type { OverlayAnchor, OverlayHandle, SaveStatusState } from '@wirecore/wirelayer-recipes';
+export type {
+    ContextMenuOpenDetails,
+    OverlayAnchor,
+    OverlayHandle,
+    SaveStatusState,
+} from '@wirecore/wirelayer-recipes';
 export { default as Statistic, type StatisticProps } from './components/Statistic/Statistic.vue';
 export { default as Truncate, type TruncateProps } from './components/Truncate/Truncate.vue';
 export { default as OverflowList, type OverflowListProps } from './components/OverflowList/OverflowList.vue';
@@ -336,7 +346,8 @@ export { default as SwitchGroup, type SwitchGroupProps } from './components/Swit
 export { default as VisuallyHidden, type VisuallyHiddenProps } from './components/VisuallyHidden/VisuallyHidden.vue';
 export { default as LiveAnnouncer, type LiveAnnouncerProps } from './components/LiveAnnouncer/LiveAnnouncer.vue';
 /** Announces a text to screen readers through the page's live regions (a LiveAnnouncer or regions on <body>) */
-export { announce, type AnnounceOptions, type Politeness } from '@wirecore/wirelayer-recipes';
+export { announce, focusFirst, type AnnounceOptions, type Politeness } from '@wirecore/wirelayer-recipes';
+export { resolveTokens, watchTokens, type ColorSet } from '@wirecore/wirelayer-tokens';
 export {
     default as LandmarkNavigation,
     type LandmarkNavigationProps,
diff --git a/packages/vue/typecheck/NonEmptyValues.vue b/packages/vue/typecheck/NonEmptyValues.vue
new file mode 100644
index 0000000..e521989
--- /dev/null
+++ b/packages/vue/typecheck/NonEmptyValues.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// Type test, checked by vue-tsc in `pnpm typecheck` (not part of the package): choices that cannot be empty
+// (required, no placeholder, emptyFallback, emptyValue) give v-model their value type without null or ''
+import { ref } from 'vue';
+import NativeSelect from '../src/components/NativeSelect/NativeSelect.vue';
+import NumberInput from '../src/components/NumberInput/NumberInput.vue';
+import RadioGroup from '../src/components/RadioGroup/RadioGroup.vue';
+import RadioGroupItem from '../src/components/RadioGroup/RadioGroupItem.vue';
+import SegmentedControl from '../src/components/SegmentedControl/SegmentedControl.vue';
+import SegmentedControlItem from '../src/components/SegmentedControl/SegmentedControlItem.vue';
+import Select from '../src/components/Select/Select.vue';
+
+type Protocol = 'ssh' | 'sftp';
+const protocol = ref<Protocol>('ssh');
+const port = ref(22);
+const service = ref('');
+const protocols: { value: Protocol; label: string }[] = [
+    { value: 'ssh', label: 'SSH' },
+    { value: 'sftp', label: 'SFTP' },
+];
+const setProtocol = (value: Protocol) => (protocol.value = value);
+const setPort = (value: number) => (port.value = value);
+const setService = (value: string) => (service.value = value);
+</script>
+
+<template>
+    <RadioGroup required label="Protocol" :model-value="protocol" @update:model-value="setProtocol">
+        <RadioGroupItem value="ssh">SSH</RadioGroupItem>
+    </RadioGroup>
+    <SegmentedControl required label="Protocol" :model-value="protocol" @update:model-value="setProtocol">
+        <SegmentedControlItem value="ssh">SSH</SegmentedControlItem>
+    </SegmentedControl>
+    <NativeSelect aria-label="Protocol" :items="protocols" :model-value="protocol" @update:model-value="setProtocol" />
+    <NumberInput aria-label="Port" empty-fallback="previous" :model-value="port" @update:model-value="setPort" />
+    <Select
+        aria-label="Service"
+        :items="['web', 'mail']"
+        empty-value=""
+        :model-value="service"
+        @update:model-value="setService"
+    />
+    <!-- Without the opt-ins the empty value stays in the type -->
+    <!-- @vue-expect-error null is not a Protocol -->
+    <RadioGroup label="Protocol" :model-value="protocol" @update:model-value="setProtocol" />
+    <!-- @vue-expect-error '' is not a Protocol -->
+    <NativeSelect placeholder="Choose" :items="protocols" :model-value="protocol" @update:model-value="setProtocol" />
+    <!-- @vue-expect-error null is not a number -->
+    <NumberInput aria-label="Port" :model-value="port" @update:model-value="setPort" />
+    <!-- @vue-expect-error null is not a string -->
+    <Select aria-label="Service" :items="['web', 'mail']" :model-value="service" @update:model-value="setService" />
+</template>