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 0000000..431eb08
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/native-data-avatar--own-initials.png differ
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 36f3f8a..7a13c41 100644
Binary files a/packages/parity/e2e/visual/__screenshots__/native-feedback-progress--compact.png and b/packages/parity/e2e/visual/__screenshots__/native-feedback-progress--compact.png differ
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 0000000..d9ab4f4
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-data-avatar--own-initials.png differ
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 0000000..0a38efd
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-data-card--small.png differ
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 0000000..c3e98d2
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-data-code--playground.png differ
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 8d74469..d7a0fc2 100644
Binary files a/packages/parity/e2e/visual/__screenshots__/react-feedback-progress--compact.png and b/packages/parity/e2e/visual/__screenshots__/react-feedback-progress--compact.png differ
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 0000000..a6f5250
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-forms-numberinput--empty-fallback.png differ
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 0000000..f0c3baa
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-forms-select--empty-string-value.png differ
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 0000000..90cb09f
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-forms-wizard--own-texts.png differ
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 0000000..8e2b5f8
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-navigation-tabs--panels-elsewhere.png differ
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 0000000..49583f5
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--own-steps.png differ
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 0000000..29d16ad
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-overlays-dialog--selected-on-open.png differ
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 0000000..5868c84
Binary files /dev/null and b/packages/parity/e2e/visual/__screenshots__/react-utilities-hooks--resolved-tokens.png differ
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>