@wirecore/wirelayer-vue 0.6.0 → 0.8.0

package/llms-full.txt

@@ -139,6 +139,10 @@ Message box with status colour, icon, title and text; role="alert" for errors an
 | --- | --- | --- |
 | @dismiss | – |  |
 
+| Slot | Slot props | Description |
+| --- | --- | --- |
+| #default | – | The message text |
+| #actions | – | Buttons in the message, e.g. "Unlock" or "Reconnect" – beside the text, below it when there is little room |
 
 ### AngleSlider
 
@@ -161,6 +165,7 @@ Dial for an angle: the needle is the slider (arrow keys, Home/End), drag anywher
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the angle slider, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof angleSliderRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -325,6 +330,7 @@ Free text with suggestions: type, arrow keys to pick a suggestion, Enter takes i
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -725,6 +731,7 @@ Region "carousel" with slides labelled "Image n of m". Previous/next buttons, on
 | loop? | `boolean` |  |
 | autoplay? | `boolean \| { delay: number }` | Turns pages by itself (default every 4 s) – always with a pause button (WCAG 2.2.2) |
 | indicators? | `boolean` | Dots below the slides, one per page |
+| controls-position? | `'bottom' \| 'sides'` | Previous and next: in the row below the slides (`bottom`, default) or beside them, vertically centred (`sides`) |
 | v-model:page? | `number` | Current page – use with v-model:page |
 | default-page? | `number` |  |
 | classes? | `RecipeClasses<typeof carouselRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -763,6 +770,7 @@ Select with cascading levels: a menu whose groups open to the side (arrow right/
 | size? | `'sm' \| 'md' \| 'lg'` | Height of the field: 32, 40 (default) or 48 px |
 | load-children? | `(option: CascadeOption<V>, request: { signal: AbortSignal }) => Promise<CascadeOption<V>[]>` | Loads the options of a level (`hasChildren: true`) when it opens; the signal aborts it |
 | data-source? | `DataSource<CascadeOption<V>>` | Source of the options of lazy levels (`getChildren`) |
+| id? | `string` | Id of the field (the trigger, with `filter` the search field), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof cascadeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -969,18 +977,19 @@ Checkbox with label (also indeterminate), works inside Field
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model:checked? | `CheckedState` | Controlled state – use with v-model:checked |
-| default-checked? | `CheckedState` |  |
+| v-model:checked? | `C` | Controlled state – use with v-model:checked |
+| default-checked? | `C` |  |
 | disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
 | value? | `string` |  |
+| id? | `string` | Id of the check box (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof checkboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model:checked | `checked: CheckedState` |  |
+| v-model:checked | `checked: C` |  |
 
 
 ### CheckboxCard
@@ -1006,6 +1015,7 @@ A large card that is one checkbox: title (name), description and price (descript
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the check box (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof selectionCardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1225,6 +1235,7 @@ Colour field: the button opens a panel with area, hue (and opacity) slider, hex
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the field (the button), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof colorPickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1299,6 +1310,9 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | data-source? | `DataSource<T>` | Loads the options for the typed text (after a typing pause, outdated answers dropped; pages while scrolling); `getItemsByKeys` gives the label of a chosen value that is not loaded |
 | min-search-length? | `number` | Fewest characters typed before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
+| v-model:open? | `boolean` | Whether the list is open – use with v-model:open, or listen to update:open |
+| stop-key-propagation? | `boolean` | Keeps the keys the open list handles itself (Enter choosing, Escape closing, Tab leaving) from bubbling up – e.g. in a dialog with window shortcuts for Enter (save) and Escape (cancel) |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1307,6 +1321,7 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | @input-value-change | `inputValue: string` | Every change of the text (typing, choosing, clearing) |
 | @filter-change | `text: string` | Typed text – e.g. to load matching items from a server (manualFilter) |
 | @load-more | – | The end of the list was scrolled into view (hasMore) |
+| v-model:open | `open: boolean` | The list opened or closed |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -1463,6 +1478,8 @@ Place once in the app; ask with `await confirm({ title, … })` or `await prompt
 | Prop | Type | Description |
 | --- | --- | --- |
 | close-label? | `string` | Accessible name of the close button |
+| confirm-button? | `ConfirmButtonOptions` | Look of the confirm button in every request (default: size sm, `primary`, `danger` for status danger) |
+| cancel-button? | `ConfirmButtonOptions` | Look of the cancel button in every request (default: size sm, `outline`) |
 | classes? | `RecipeClasses<typeof dialogRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -1512,13 +1529,18 @@ Opens at the pointer on right click, on touch screens with a long press (and wit
 - Import: `import { ContextMenu } from '@wirecore/wirelayer-vue'`
 - Category: Overlays
 - Example: https://wirecore.github.io/WireLayer/?path=/story/vue_overlays-contextmenu--playground
-- Also takes the props of: MenuItemOptions
+- Also takes the props of: MenuItemOptions, MenuBehaviorOptions
 
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly MenuEntry[]` | Items, groups, separators, checkbox items, radio groups and submenus – as in Menu |
 | label? | `string` | Accessible name of the menu – without it the menu is named by the area's content |
 | link-as? | `Component \| string` | Component for link items, e.g. RouterLink or NuxtLink (gets `to` for items with `to`, else `href`); default <a> |
+| v-model:open? | `boolean` | Whether the menu is open – use with v-model:open, or listen to update:open (e.g. to pause list shortcuts) |
+| close-on-scroll? | `boolean` | Closes when the page (or a container) scrolls |
+| close-on-resize? | `boolean` | Closes when the window is resized |
+| close-on-blur? | `boolean` | Closes when the window loses the focus (switching to another window) |
+| highlight-first? | `boolean` | Highlights the first item when the menu opens, so Enter takes it (as in desktop context menus) |
 | classes? | `RecipeClasses<typeof menuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1526,6 +1548,8 @@ Opens at the pointer on right click, on touch screens with a long press (and wit
 | @select | `value: string` |  |
 | @checked-change | `value: string, checked: boolean` | A checkbox item was switched |
 | @value-change | `name: string, value: string` | A radio group got a new value |
+| v-model:open | `open: boolean` |  |
+| @before-open | `target: Element` | 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) |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -1645,6 +1669,8 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:page? | `number` | Current page (1-based) – use with v-model:page |
 | v-model:first? | `number` | Index of the first row of the current page (0-based) – instead of `page`, use with v-model:first |
 | paginator-position? | `'top' \| 'bottom'` | Pagination below (default) or above the table |
+| paginator-edges? | `boolean` | Buttons to the first and the last page in the pagination |
+| paginator-align? | `DataTablePaginatorAlign` | Pagination row: rows per page at the start, pages at the end (`between`, default) – or both together |
 | v-model:sorting? | `DataTableSort \| DataTableSort[] \| null` | Current sorting – use with v-model:sorting; an array in the multiple mode |
 | default-sorting? | `DataTableSort \| DataTableSort[] \| null` | Sorting at the start, without v-model |
 | sort-mode? | `'single' \| 'multiple'` | `multiple`: Shift+click (or the column menu) sorts by further columns |
@@ -1670,6 +1696,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:expanded? | `string[]` | Expanded rows (ids) – use with v-model:expanded; also the rows with open details (#expansion) |
 | default-expanded? | `string[]` |  |
 | expand-label? | `(row: T, index: number) => string` | Names the expand button of a row |
+| row-expandable? | `(row: T) => boolean` | Whether a row has details (#expansion) – rows without get no expand button (default: all rows) |
 | advanced-filter? | `boolean \| ConditionField[]` | Advanced filter: the rows pass a condition tree (nested and/or rules; v-model:advanced-filter-value). `true` offers every column with a filter type; or pass the fields. A toolbar button opens the editor from the `#advancedFilter` slot above the table – usually `ConditionBuilder` from `@wirecore/wirelayer-blocks-vue`; without it there is no button (the tree still filters). A server filters instead: `dataSource` gets the tree as `condition`, with `manual` the parent applies it |
 | v-model:advanced-filter-value? | `ConditionGroup` | The condition tree of the advanced filter (controlled together with onAdvancedFilterValueChange) |
 | search? | `boolean` | Search field above the table: filters over all columns (v-model:global-filter) |
@@ -1710,6 +1737,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:size? | `'sm' \| 'md' \| 'lg'` | Row height – use with v-model:size (`densityToggle`) |
 | density-toggle? | `boolean` | Menu above the table to change the row height |
 | gridlines? | `boolean` | Lines between the columns |
+| bordered? | `boolean` | A border around the whole table |
 | striped? | `boolean` | Every other row tinted |
 | fullscreen-toggle? | `boolean` | Button above the table to show it on the whole screen |
 | scroll-height? | `string` | Fixed height (CSS length): the table scrolls inside, header and footer stay visible |
@@ -1855,6 +1883,7 @@ Date field: type the digits one after another (the separators come from the loca
 | time-zone? | `string` | IANA zone ("Europe/Berlin") of a date with time: shown and typed in the zone, the value gets its offset |
 | show-time-zone? | `boolean` | Short zone name after the time ("CEST") |
 | responsive? | `boolean` | On narrow screens the calendar opens as a sheet at the bottom |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1903,6 +1932,7 @@ Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar picks sta
 | time-zone? | `string` | IANA zone ("Europe/Berlin") with withTime: shown and typed in the zone, the values get its offset |
 | show-time-zone? | `boolean` | Short zone name after the times ("CEST") |
 | responsive? | `boolean` | On narrow screens the calendar opens as a sheet at the bottom |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1980,6 +2010,8 @@ The modal window of a Dialog: title, description, focus trap, Escape closes
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
+| hide-title? | `boolean` | The title only for screen readers – it still names the dialog (e.g. a video in a dialog) |
+| title-position? | `'body' \| 'header'` | `body` (default): the title below the header row; `header`: in the row of the close button, after a smaller icon, the header separated by a line (as on the Drawer) |
 | description? | `string` |  |
 | icon? | `Component` | Icon component in the coloured box at the top |
 | status? | `DialogStatus` |  |
@@ -2123,6 +2155,7 @@ The panel of a Drawer, sliding in from a side; title, focus trap, Escape closes
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
+| hide-title? | `boolean` | The title only for screen readers – it still names the drawer (e.g. a video in a dialog) |
 | description? | `string` |  |
 | placement? | `DrawerPlacement` |  |
 | size? | `OverlaySize` | Width (left/right: sm 320px, md 420px, lg 560px, xl 720px) or height (top/bottom: 30–85 % of the screen); `full` covers the whole screen. Without it 420px wide or as high as the content |
@@ -2169,6 +2202,7 @@ Duration field: hours and minutes (optional days and seconds) as spin buttons
 | name? | `string` |  |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field (the group of parts); a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the field (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -2593,6 +2627,7 @@ Label, helper text, error, aria-invalid and aria-describedby come from Field
 | required? | `boolean` |  |
 | optional? | `boolean` | "(optional)" after the label |
 | disabled? | `boolean` |  |
+| classes? | `RecipeClasses<typeof fieldRecipe>` | Extra classes per part of the Field, e.g. { label: "…" } (see the field recipe) |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -2867,6 +2902,7 @@ Button with only an icon; the label is its accessible name, optionally with a co
 | size? | `ButtonSize` | `xs` is 24px – the minimum target size (WCAG 2.5.8) |
 | shape? | `ButtonShape` | Corner shape: `pill` (round, default), `rounded` or `square` |
 | disabled? | `boolean` |  |
+| loading? | `boolean` | Shows a spinner instead of the icon and ignores clicks; stays focusable (aria-disabled + aria-busy) |
 | type? | `'button' \| 'submit' \| 'reset'` |  |
 | badge? | `number \| boolean` | Counter (number > 0) or dot (true) in the top-right corner |
 | badge-label? | `(count: string \| null) => string` | Appended to the accessible name while a badge is shown, e.g. "Notifications, 4 new". Receives the visible counter text ("4", "99+") or null for the dot – the visible text must stay part of the name (WCAG 2.5.3). |
@@ -2998,7 +3034,7 @@ Shows a value as a button; activating it swaps in the editor (Escape closes it)
 
 ### Input
 
-Text field with sizes, leading icon, prefix and suffix; works inside Field
+Text field with sizes, leading icon, prefix and suffix; works inside Field. `ref` reaches the native input (focus, select, setSelectionRange)
 
 - Import: `import { Input } from '@wirecore/wirelayer-vue'`
 
@@ -3017,6 +3053,7 @@ Text field with sizes, leading icon, prefix and suffix; works inside Field
 | leading-icon? | `Component` | Icon component rendered inside the field, before the text |
 | prefix? | `string` | Static text segment before the input, e.g. `https://` |
 | suffix? | `string` | Static text segment after the input, e.g. `.de` |
+| mono? | `boolean` | Monospace font of the theme (JetBrains Mono) – for paths, tokens, codes, URLs and keys |
 | classes? | `RecipeClasses<typeof inputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3189,6 +3226,7 @@ Dial (270°): a slider – arrow keys, Page Up/Down, Home/End, or drag around th
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the dial (the slider); a `<label for>` cannot name it, use `label`, a Field or aria-label |
 | classes? | `RecipeClasses<typeof knobRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3280,6 +3318,7 @@ Always visible list (role="listbox"): arrow keys move, Enter/Space choose, typin
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | draggable-items? | `boolean` | The options can be dragged (`draggable`, `data-value` is the key) – lists that exchange items (PickList) |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the list box, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof listboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3530,7 +3569,7 @@ The trigger is the slotted element (e.g. a Button or IconButton)
 - Import: `import { Menu } from '@wirecore/wirelayer-vue'`
 - Category: Overlays
 - Example: https://wirecore.github.io/WireLayer/?path=/story/vue_overlays-menu--playground
-- Also takes the props of: MenuItemOptions
+- Also takes the props of: MenuItemOptions, MenuBehaviorOptions
 
 | Prop | Type | Description |
 | --- | --- | --- |
@@ -3543,6 +3582,10 @@ The trigger is the slotted element (e.g. a Button or IconButton)
 | placement? | `PopoverPlacement` | Side of the trigger the menu opens on, e.g. `bottom-end` for a menu at the right edge (default bottom-start) |
 | arrow? | `boolean` | Arrow pointing at the trigger, as on the Popover |
 | link-as? | `Component \| string` | Component for link items, e.g. RouterLink or NuxtLink (gets `to` for items with `to`, else `href`); default <a> |
+| close-on-scroll? | `boolean` | Closes when the page (or a container) scrolls – e.g. for a menu opened at a point |
+| close-on-resize? | `boolean` | Closes when the window is resized |
+| close-on-blur? | `boolean` | Closes when the window loses the focus (switching to another window) |
+| highlight-first? | `boolean` | Highlights the first item also when the menu opens by pointer, so Enter takes it (as in desktop menus) |
 | classes? | `RecipeClasses<typeof menuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3677,6 +3720,7 @@ Month field ("10.2026"): type the digits in one go, or pick from the month grid;
 | placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -3726,6 +3770,7 @@ Select with several values: the list stays open while choosing, Space/Enter togg
 | data-source? | `DataSource<T>` | Loads the options when the list opens (pages while scrolling; with `filter` the search asks it, after a typing pause, outdated answers dropped); `getItemsByKeys` gives the labels of chosen values that are not loaded |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof multiSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3750,8 +3795,8 @@ The browser's select: its own keyboard and mobile pickers; inside a Field it is
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| items | `readonly NativeSelectOption[]` |  |
-| v-model? (modelValue) | `string` | Chosen value – use with v-model |
+| items | `readonly NativeSelectOption<V>[]` |  |
+| v-model? (modelValue) | `V \| ''` | Chosen value – use with v-model; the placeholder option gives an empty string |
 | placeholder? | `string` | First, empty option, e.g. "Please choose" |
 | size? | `Size` |  |
 | invalid? | `boolean` |  |
@@ -3760,7 +3805,7 @@ The browser's select: its own keyboard and mobile pickers; inside a Field it is
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: string` |  |
+| v-model | `value: V \| ''` |  |
 
 
 ### NavigationMenu
@@ -3847,7 +3892,7 @@ A number in the format of the locale ("€1,234.50")
 
 ### NumberInput
 
-Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
+Number field with − / + buttons, arrow keys and locale formatting ("1,234.5"); `ref` reaches the native input
 
 - Import: `import { NumberInput } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -3882,6 +3927,7 @@ Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
 | loading? | `boolean` | Shows a spinner in the field and marks it busy (aria-busy) |
 | clearable? | `boolean` | Shows a button that empties the field while it has a value |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof numberInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4086,7 +4132,7 @@ Card with a heading (and actions); toggleable: the heading holds a button with a
 
 ### PasswordInput
 
-Password field with a button that shows/hides the password (named "Show/Hide password")
+Password field with a button that shows/hides the password (named "Show/Hide password"); `ref` reaches the native input
 
 - Import: `import { PasswordInput } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -4105,13 +4151,15 @@ Password field with a button that shows/hides the password (named "Show/Hide pas
 | name? | `string` |  |
 | default-visible? | `boolean` | Initially show the password in plain text |
 | v-model:visible? | `boolean` | Whether the password is shown in plain text – use with v-model:visible |
-| autocomplete? | `'current-password' \| 'new-password'` |  |
+| autocomplete? | `'current-password' \| 'new-password' \| 'off' \| 'one-time-code'` | `current-password` (default) or `new-password` for the browser's password manager; `off` or `one-time-code` for secrets it should not offer to save (tokens, passphrases, master passwords, one-time codes) |
 | strength? | `boolean` | Strength meter below the field – for choosing a new password |
 | requirements? | `readonly PasswordRequirement[]` | Checklist below the field, updated while typing: each rule with its state (icon and text), linked to the input as its description |
 | loading? | `boolean` | Shows a spinner in the field and marks it busy (aria-busy) |
 | clearable? | `boolean` | Shows a button that empties the field while it has a value |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
 | default-value? | `string` | Initial value without v-model |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
+| mono? | `boolean` | Monospace font of the theme (JetBrains Mono) – for tokens, passphrases and keys |
 | classes? | `RecipeClasses<typeof passwordInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4291,6 +4339,7 @@ Code input (OTP, PIN): one box per character, typing moves on, pasting fills all
 | invalid? | `boolean` |  |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the PIN input, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof pinInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4380,6 +4429,10 @@ Ark names the progressbar after its value; the label is the name, the value its
 | striped? | `boolean` | Diagonal stripes on the filled part |
 | animated? | `boolean` | Moving stripes (only without reduced motion) |
 | orientation? | `'horizontal' \| 'vertical'` | Vertical bar (fills the height of its parent) |
+| size? | `'xs' \| 'md'` | `xs`: a thin bar with small text, e.g. in a list or a status bar |
+| status? | `'info' \| 'success' \| 'warn' \| 'danger'` | Colour of the filled part by its state, e.g. `danger` for a failed transfer |
+| hide-label? | `boolean` | The label only for screen readers – it still names the progress bar |
+| bar-text? | `string` | Short text in the bar, e.g. "42 %", "waiting" or "failed" (a taller bar; horizontal, without segments or steps) – screen readers get it after the value |
 | classes? | `RecipeClasses<typeof progressRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -4507,8 +4560,8 @@ One choice out of several (role="radiogroup", arrow keys), horizontal or vertica
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string \| null` | Selected value – use with v-model |
-| default-value? | `string \| null` |  |
+| v-model? (modelValue) | `V \| null` | Selected value – use with v-model; numbers when the items have number values |
+| default-value? | `V \| null` |  |
 | label? | `string` | Visible group label (otherwise pass aria-label – or place the group in a Field with a label) |
 | orientation? | `RadioGroupOrientation` |  |
 | columns? | `number` | Cards in a grid with this many columns (one column on small screens) – for RadioCard |
@@ -4520,7 +4573,7 @@ One choice out of several (role="radiogroup", arrow keys), horizontal or vertica
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: string \| null` |  |
+| v-model | `value: V \| null` |  |
 
 
 ### RadioGroupItem
@@ -4534,7 +4587,7 @@ One option of a RadioGroup
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| value | `string` |  |
+| value | `string \| number` | Value of the option – a number makes the group's v-model a number |
 | disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof radioGroupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -4560,6 +4613,7 @@ Star rating: a radio group – arrow keys change the value, each star reads "3 s
 | label? | `string` | Visible label, also the group's accessible name |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the rating, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof ratingRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4835,8 +4889,8 @@ Few exclusive options as a segmented switch (radio group)
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string \| null` | Selected value – use with v-model |
-| default-value? | `string` |  |
+| v-model? (modelValue) | `V \| null` | Selected value – use with v-model |
+| default-value? | `V` |  |
 | label? | `string` | Accessible name of the group (visually hidden) – inside a Field with a label, the Field's label names it |
 | size? | `SegmentedControlSize` |  |
 | disabled? | `boolean` |  |
@@ -4845,7 +4899,7 @@ Few exclusive options as a segmented switch (radio group)
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: string \| null` |  |
+| v-model | `value: V \| null` |  |
 
 
 ### SegmentedControlItem
@@ -4902,6 +4956,9 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | standalone? | `boolean` | Not labelled by a surrounding Field – for a second control inside it (e.g. PhoneInput's country) |
+| v-model:open? | `boolean` | Whether the list is open – use with v-model:open, or listen to update:open |
+| stop-key-propagation? | `boolean` | Keeps the keys the list handles itself (Enter choosing or opening, Escape closing, Tab leaving) from bubbling up – e.g. in a dialog with window shortcuts for Enter (save) and Escape (cancel) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof selectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4909,6 +4966,7 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 | v-model | `value: V \| null` |  |
 | @filter-change | `text: string` | Text of the search field (filter) – e.g. to load matching items from a server (manualFilter) |
 | @load-more | – | The end of the list was scrolled into view (hasMore) |
+| v-model:open | `open: boolean` | The list opened or closed |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -5089,6 +5147,7 @@ Range: "Price, Minimum" / "Price, Maximum"
 | label | `string` | Visible label, also the accessible name of the thumbs |
 | thumb-labels? | `readonly string[]` | Names of the thumbs of a range slider, read after the label |
 | show-value? | `boolean` | Shows the formatted value next to the label |
+| hide-label? | `boolean` | The label for screen readers only – it stays the accessible name of the thumbs |
 | format-value? | `(value: number) => string` | Formats the shown and announced value, e.g. (v) => `${v} %` |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
@@ -5407,7 +5466,7 @@ Sticks to the top or bottom edge while its container scrolls
 
 ### Switch
 
-Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch
+Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for>
 
 - Import: `import { Switch } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -5429,6 +5488,7 @@ Ark renders a plain checkbox; role="switch" makes screen readers announce it as
 | required? | `boolean` |  |
 | name? | `string` |  |
 | value? | `string` | Value of the switch – inside a SwitchGroup its state comes from the group's value |
+| id? | `string` | Id of the switch (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof switchControlRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5583,6 +5643,7 @@ Free entries: Enter or "," adds, Backspace on the empty field selects the last e
 | has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<string>` | Suggestions from a server instead of `suggestions`: asked with the typed text after a typing pause (outdated answers dropped), more while scrolling |
 | min-search-length? | `number` | Fewest characters the typed text needs before the data source is asked (default 1) |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof tagsInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5594,7 +5655,7 @@ Free entries: Enter or "," adds, Backspace on the empty field selects the last e
 
 ### Textarea
 
-Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field
+Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field. `ref` reaches the native textarea
 
 - Import: `import { Textarea } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -5616,6 +5677,7 @@ Multi-line text field, optionally growing with the text (autoResize) and with a
 | loading? | `boolean` | Shows a spinner in the corner and marks the field busy (aria-busy) |
 | clearable? | `boolean` | Shows a button that empties the field while it has text |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
+| mono? | `boolean` | Monospace font of the theme (JetBrains Mono) – for keys, codes and logs |
 | classes? | `RecipeClasses<typeof textareaRecipe> & RecipeClasses<typeof textareaPartsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipes textarea and textareaParts) |
 
 | Event | Payload | Description |
@@ -5716,6 +5778,7 @@ Time field: type the digits one after another ("1430"), arrow keys change hour o
 | time-zone? | `string` | IANA zone ("Europe/Berlin"): the time is typed in the zone, the value gets its offset ("14:30+02:00") |
 | reference-date? | `string` | Day whose offset applies with timeZone (ISO, default today) |
 | show-time-zone? | `boolean` | Short zone name after the time ("CEST") |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5747,6 +5810,7 @@ Start and end time in one field ("09:00 – 17:30"): typing runs on from start t
 | name? | `string` | Sent as name[0] and name[1] |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -5862,6 +5926,7 @@ No element of its own: the trigger is the slotted element
 | close-delay? | `number` | Delay before closing (ms); default 150 or that of the TooltipGroup |
 | interactive? | `boolean` | The pointer can move onto the tooltip without it closing (WCAG 1.4.13) |
 | follow-cursor? | `boolean` | Follows the mouse pointer over the trigger |
+| close-on-scroll? | `boolean` | Closes when the page (or a container around the trigger) scrolls – false keeps it open while scrolling |
 | disabled? | `boolean` | Never opens (e.g. Truncate while the text fits) – the trigger stays the same element |
 | classes? | `RecipeClasses<typeof tooltipRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -6020,6 +6085,7 @@ Select whose options are a tree: the button opens the tree in a panel, choosing
 | size? | `'sm' \| 'md' \| 'lg'` | Height of the field: 32, 40 (default) or 48 px |
 | load-children? | `(node: TreeNode, request: { signal: AbortSignal }) => Promise<TreeNode[]>` | Loads the children of lazy nodes (`hasChildren: true`) when they open; they are kept while the field lives |
 | data-source? | `DataSource<TreeNode>` | Source of the children of lazy nodes (`getChildren`) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof treeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -6122,6 +6188,7 @@ Select for any number of items – only the visible options are rendered.
 | data-source? | `DataSource<T>` | Loads the items from a server instead of `items`: the first page when it opens, more while scrolling, the search field asks the server (after a typing pause); labels of chosen values that are not loaded come from `getItemsByKeys` |
 | page-size? | `number` | Items per request of the data source (default 50) |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -6297,6 +6364,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 | placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -6503,6 +6571,29 @@ that render components, such as `confirm` or the DataTable feature `dateInput`,
 components warn in the console when the classes of a recipe they render are missing. Recipes you call yourself
 (`card()`) are not checked – add their files along with the import.
 
+**With Vite** (Vue, React, Nuxt, Astro) the plugin `@wirecore/wirelayer-recipes/vite` adds these files itself: it reads
+the imports from `@wirecore/wirelayer-*` in your source files and adds the files of the imported components and recipes
+to the CSS file that imports `theme.css` (or `styles-core.css`). Put it before Tailwind's plugin:
+
+```ts
+// vite.config.ts (Nuxt: vite.plugins in nuxt.config.ts, Astro: vite.plugins in astro.config.mjs)
+import tailwindcss from '@tailwindcss/vite';
+import { wirelayer } from '@wirecore/wirelayer-recipes/vite';
+
+export default { plugins: [wirelayer(), tailwindcss()] };
+```
+
+```css
+@import 'tailwindcss';
+@import '@wirecore/wirelayer-vue/theme.css'; /* the plugin adds the sources files here */
+@import '@wirecore/wirelayer-vue/fonts.css'; /* the WireLayer fonts – leave it out with a font of your own */
+```
+
+`theme.css` is the theme without fonts and without component classes: an app with its own font
+(`@theme { --font-sans: … }`) does not bundle Schibsted Grotesk and JetBrains Mono. Components the plugin cannot see –
+registered globally (`app.component(…)`) or imported automatically – trigger the warning above; import their files by
+hand. Next.js does not use Vite: there, list the files or use `styles.css`.
+
 ### Usage
 
 ```vue
@@ -6535,9 +6626,13 @@ import { ArrowRight } from 'lucide-react';
 // nuxt.config.ts
 import tailwindcss from '@tailwindcss/vite';
 
+import { wirelayer } from '@wirecore/wirelayer-recipes/vite';
+
 export default defineNuxtConfig({
-    css: ['~/assets/main.css'], // @import 'tailwindcss'; @import '@wirecore/wirelayer-vue/styles.css';
-    vite: { plugins: [tailwindcss()] },
+    // main.css: @import 'tailwindcss'; @import '@wirecore/wirelayer-vue/theme.css';
+    //           @import '@wirecore/wirelayer-vue/fonts.css'; – or styles.css with all classes, without the plugin
+    css: ['~/assets/main.css'],
+    vite: { plugins: [wirelayer(), tailwindcss()] },
 });
 ```
 
@@ -6620,6 +6715,31 @@ Every component consists of named parts of its recipe (`base`, `icon`, `row`, `t
 The names are the exports of the recipes (`button`, `iconButton`, `dataTable` …) and are checked by TypeScript, as are
 the variants and parts. Your own components use the same through `useRecipe('button', button)`.
 
+`variants` adds classes for single values of a variant, `compoundVariants` for combinations – instead of selectors on
+the recipe's own classes, which break when they change:
+
+```ts
+const recipes: RecipeConfig = {
+    // only the medium size: 42px high, 16px text
+    button: {
+        variants: { size: { md: { base: 'h-[2.625rem] text-base' } } },
+        compoundVariants: [{ size: ['sm', 'md'], shape: 'rounded', classes: { base: 'rounded-md' } }],
+    },
+    input: { variants: { size: { md: { base: 'h-[2.625rem]' } }, invalid: { true: { base: 'border-2' } } } },
+};
+```
+
+Per part the classes come in this order: `classes`, the matching `variants` and `compoundVariants`, the states of the
+recipe, the overrides of states (`invalid: { true: … }`), and last the class passed to the component. Inner providers
+extend outer ones (classes of the same value are joined, the inner ones win).
+
+Classes from a provider or `classes` change the look, not the states: the classes of an active state variant
+(`invalid`, `success`, `disabled`, `readOnly`, `current`, `selected`, `checked`, `loading`) are added after them, so a
+field with `classes: { base: 'border-line-2' }` still turns red when it is invalid. States that the components mark as
+attributes (`data-invalid:`, `data-disabled:`, `data-[state=checked]:`) win through their selector anyway. Only the
+class passed to the component itself (`class`/`className`) comes after the states – the way out when a single field
+should look different in every state.
+
 ### Hooks and composables
 
 Around 40 hooks (React) and composables (Vue) with the same names and the same logic – for your own components and
@@ -6998,6 +7118,73 @@ WireLayer is licensed under the MIT license. The fonts shipped with `@wirecore/w
 JetBrains Mono) are licensed under the SIL Open Font License 1.1 (`dist/fonts/OFL.txt`). Optional peer dependencies such
 as `pdfjs-dist` (Apache-2.0), Chart.js, Tiptap and Shiki are installed by the app itself – with their own licenses.
 
+### Components and APIs side by side
+
+| PrimeVue                                                                            | WireLayer                                                                                                         |
+| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `<Button label icon="pi pi-x">`                                                     | the label as slot text, `:leading-icon` with a Lucide component (`@lucide/vue`)                                   |
+| `severity` / `text` / `outlined`                                                    | `color` – or `variant="text"` / `variant="outline"`                                                               |
+| Icon button + `v-tooltip`                                                           | `<Tooltip content><IconButton :icon label /></Tooltip>` – `label` is the accessible name (often the tooltip text) |
+| `Button :loading`                                                                   | `loading` on `Button` and `IconButton` (stays focusable, ignores clicks)                                          |
+| `Card` with `#title`/`#content`                                                     | `Card` with the default slot and an own heading                                                                   |
+| `InputText`, `Password`, `InputNumber`, `InputChips`, `SelectButton`, `RadioButton` | `Input`, `PasswordInput`, `NumberInput`, `TagsInput`, `SegmentedControl`, `RadioGroup` + `RadioGroupItem`         |
+| `IconField` + `InputIcon`                                                           | `Input :leading-icon`                                                                                             |
+| `Select :options optionLabel optionValue`                                           | `Select :items item-label item-value` (object values: `value-key`)                                                |
+| `Message severity`                                                                  | `Alert status` (`error` → `danger`)                                                                               |
+| `Tag`                                                                               | `Badge`                                                                                                           |
+| `Dialog v-model:visible header`                                                     | `Dialog v-model:open` + `DialogContent title size` (`hide-title` keeps the title for screen readers only)         |
+| `Toolbar` as a container                                                            | a plain `div` – WireLayer's `Toolbar` is `role="toolbar"` (one tab stop, arrow keys)                              |
+| `useToast().add({ severity, summary, detail, life })`                               | `toast({ type, title, description, duration })`, `<Toaster />` once in the app                                    |
+| `useConfirm().require({ … })`                                                       | `await confirm({ title, description, … })`, `<ConfirmDialog />` once in the app                                   |
+| `DataTable` + `Column`                                                              | `DataTable :columns` (column objects), `#cell-<id>`, `#expansion`, `v-model:page-size`                            |
+| `expandedRows` with a row toggler on some rows                                      | `#expansion` + `row-expandable`                                                                                   |
+| `paginatorTemplate` (first/last page)                                               | `paginator-edges`, `paginator-align`                                                                              |
+| `showGridlines` (with the outer border)                                             | `gridlines` + `bordered`                                                                                          |
+| `FilterMatchMode`, `filters`                                                        | `v-model:global-filter`, column `filter`/`filterOptions`, `filter-display="row"`                                  |
+| `@primevue/forms` + `zodResolver`                                                   | TanStack Form with Zod directly as a Standard Schema, `FormField` + `bindInput`/`bindValue`                       |
+| `pt` (pass-through)                                                                 | `classes` per part, `RecipesProvider` for all components below it                                                 |
+| Theme preset (`definePreset`)                                                       | `--wc-*` tokens, `defineTheme`, the component variables (_Foundations › Themes_)                                  |
+| `darkModeSelector` (a class)                                                        | `data-mode` on `<html>`                                                                                           |
+| `tailwindcss-primeui` (`bg-surface-*`, `text-muted-color`)                          | semantic tokens: `bg-card`, `bg-bg-2`, `text-muted`, `border-line` …                                              |
+
+### Pitfalls
+
+- **An empty choice is `null`, not `''`.** For PrimeVue's Select `''` means "nothing chosen"; WireLayer's Select treats
+  `''` as a value (it warns in development that it is not among the items). Use `null`.
+- **TanStack fields start with `''`.** A required text in Zod therefore needs `.min(1)` – `z.string()` alone accepts
+  the empty field.
+- **Fonts:** set your own with `@theme { --font-sans: … }`. Import `theme.css` instead of `styles.css` (with the
+  sources files, or the Vite plugin `@wirecore/wirelayer-recipes/vite`) so the WireLayer fonts are not bundled
+  (_Getting started › Welcome › Smaller CSS_).
+- **Card spacing:** `Card` puts a `gap` between its direct children – wrap content that should sit tight in one
+  element.
+- **Overrides go per part and per variant.** `classes: { base: 'rounded-md' }` reaches every size; only the medium size
+  with `variants: { size: { md: { base: '…' } } }` – no selectors on the recipe's own classes. States such as `invalid`
+  stay visible over such classes; only `class` on the component itself replaces them.
+- **Sizes and corners in one place:** the height, text and corners of buttons and fields per size, the corners of
+  rounded buttons, the padding of cards and the backdrop of dialogs are CSS variables (`--wc-control-h-md` …).
+- **Labels:** wrap a control in `Field` (it links label, description and error). A native `<label for>` works with the
+  control's own `id`; date fields, sliders and groups need `Field` or `aria-label`.
+- **Brand colours:** `checkTheme` lists the pairs below WCAG AA, `suggestThemeFixes` the nearest colours (and `on-*`
+  colours) that meet them – an orange `primary` with white text, common in PrimeVue themes, does not.
+
+### Desktop apps (dense UI, many dialogs)
+
+- **Focus from code:** the text fields expose `focus()`, `select()`, `setSelectionRange()` and the native input
+  (`element`) through a template ref – no `$el.querySelector('input')`. In a dialog, mark the first field with
+  `data-autofocus`: a `focus()` in `onMounted` is overridden by the dialog's focus trap.
+- **Window shortcuts in dialogs:** Enter/Escape listeners on `window` also get the keys of an open list. `Select` and
+  `Combobox` take `stop-key-propagation` and report `v-model:open`; `ContextMenu` reports `v-model:open` and the
+  right-clicked element (`@before-open`).
+- **Menus at a point:** `close-on-scroll`, `close-on-resize`, `close-on-blur`, and `highlight-first` so Enter takes the
+  first item.
+- **Closable tabs** are built in: `TabsTrigger closable @close` – the close button is not nested in the tab, Delete
+  closes the focused tab and the focus moves to its neighbour.
+- **Typed values:** `RadioGroup`, `SegmentedControl` and `NativeSelect` keep the type of the bound value (unions,
+  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.
+
 ### Custom theme
 
 A theme overrides any colors per mode. `themeToCss` generates the CSS for it,
@@ -7023,3 +7210,47 @@ writeFileSync('brand.css', themeToCss(brand));
 ```
 
 All bundled themes pass this check in both modes.
+
+When a pair misses its contrast, `suggestThemeFixes` says how to fix it: per pair the nearest variant of a colour that
+meets it – its lightness moved in OKLCH, the hue kept – and, where text sits on the colour, a light or dark `on-*`
+colour. A suggestion never breaks a pair that passed:
+
+```ts
+import { suggestThemeFixes } from '@wirecore/wirelayer-tokens';
+
+suggestThemeFixes(brand);
+// [{ name: 'primary: text-on-primary on bg-primary', mode: 'light', ratio: 2.6, min: 4.5,
+//    color: { token: 'primary', value: '#a35c00', ratio: 4.5 },
+//    on: { token: 'on-primary', value: '#050505', ratio: 8.1 } }, …]
+```
+
+### Component sizes and shapes
+
+Besides the colors, a few measures that a brand usually changes are CSS variables. Without them every component looks as
+before – their defaults are the values of the recipes. Set them on `:root` (all pages), on a `[data-theme]` or on any
+element (that part of the page):
+
+```css
+:root {
+    --wc-control-h-md: 2.625rem; /* buttons and fields of the medium size: 42px */
+    --wc-control-text-md: 1rem;
+    --wc-control-radius-md: 0.375rem;
+    --wc-button-radius: 0.375rem;
+    --wc-card-p: 1.25rem;
+    --wc-backdrop: rgb(0 0 0 / 0.4);
+}
+```
+
+| Variable                                              | Default                    | Applies to                                                                                                                                                                                     |
+| ----------------------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wc-control-h-sm` / `-md` / `-lg`                   | `2rem` / `2.5rem` / `3rem` | Height of the sizes sm, md, lg: Button, IconButton, Input, NativeSelect, Select, MultiSelect, Combobox, NumberInput, PasswordInput, the date and time fields, ColorPicker, TagsInput (minimum) |
+| `--wc-control-radius-sm` / `-md` / `-lg`              | `6px` / `8px` / `10px`     | Corners of the fields above and of Textarea (not of buttons)                                                                                                                                   |
+| `--wc-control-text-sm` / `-md` / `-lg`                | `13px` / `15px` / `16px`   | Text in the fields above and in Textarea                                                                                                                                                       |
+| `--wc-button-radius`                                  | `8px`                      | Corners of Button and IconButton with `shape="rounded"` (`pill` and `square` stay)                                                                                                             |
+| `--wc-card-p`                                         | `1.5rem`                   | Padding of Card                                                                                                                                                                                |
+| `--wc-backdrop`                                       | `rgb(0 0 0 / 0.6)`         | Dimming behind Dialog, Drawer and ConfirmDialog                                                                                                                                                |
+| `--radius-card` / `--radius-panel` / `--radius-popup` | `20px` / `28px` / `12px`   | Corners of cards, panels and popups (menus, lists, popovers)                                                                                                                                   |
+| `--wc-dialog-w`                                       | by `size`                  | Width of a DialogContent                                                                                                                                                                       |
+
+The rest – the padding of a dialog or of table cells, the size of a single variant – is set per part with `classes` or
+`RecipesProvider` (_Getting started › Welcome › Customizing_). The React Native components keep their fixed sizes.