@wirecore/wirelayer-vue 0.7.0 → 0.9.0

package/dist/pdf.js

@@ -1,8 +1,8 @@
 import { a as e, i as t, n } from "./recipes-BlM9aKyt.js";
 import { t as r } from "./Button-BpMOPs8b.js";
-import { t as i } from "./Field-B1EsNF84.js";
-import { i as a, t as o } from "./Select-Bd2Vpr7G.js";
-import { c as s, i as c, l, n as u, o as d, r as ee, s as te, t as ne } from "./Tree-fd9LXqgZ.js";
+import { t as i } from "./Field-Cqe2BG_x.js";
+import { i as a, t as o } from "./Select-q8FUIWLi.js";
+import { c as s, i as c, l, n as u, o as d, r as ee, s as te, t as ne } from "./Tree-B-0NXpUq.js";
 import { Fragment as f, computed as p, createBlock as re, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeProps as ie, nextTick as ae, normalizeClass as b, normalizeStyle as oe, onBeforeUnmount as se, onMounted as ce, openBlock as x, reactive as le, ref as S, renderList as ue, resolveDynamicComponent as de, toDisplayString as C, unref as w, useAttrs as fe, useId as pe, useTemplateRef as T, vModelText as me, watch as E, withCtx as D, withDirectives as he, withModifiers as ge } from "vue";
 import { CaseSensitive as _e, ChevronDown as ve, ChevronUp as ye, Download as be, FileWarning as xe, Maximize as Se, Minimize as Ce, PanelLeft as we, Printer as Te, RotateCw as Ee, Search as De, X as Oe, ZoomIn as ke, ZoomOut as Ae } from "@lucide/vue";
 import { PDF_ZOOM_MAX as je, PDF_ZOOM_MIN as Me, clampPdfPage as Ne, clampPdfZoom as Pe, downloadBytes as Fe, input as Ie, normalizePdfRotation as O, parsePdfPage as Le, pdfFileName as Re, pdfKeyAction as ze, pdfPrintDocument as k, pdfSearchText as Be, pdfThumbnailSize as Ve, pdfTools as A, pdfViewer as He, pdfZoomFromKey as Ue, pdfZoomKey as We, pdfZoomStep as Ge, pdfZoomSteps as j, pdfZoomSteps as Ke, resolvePdfTools as qe, setupToolbar as Je } from "@wirecore/wirelayer-recipes";

package/dist/sources/Code.css

@@ -0,0 +1,2 @@
+/* Classes of Code – generated by scripts/sources.ts, do not edit */
+@import '@wirecore/wirelayer-recipes/sources/inlineCode.css';

package/dist/utils/text-field.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What the text fields expose (Input, PasswordInput, NumberInput, Textarea, MaskInput): the native element and its
+ * focus and selection methods – the root of these components is a wrapper, not the input
+ */
+export interface TextFieldHandle<E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> {
+    /** The native input (or textarea); null before mounting */
+    readonly element: E | null;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    /** Selects the whole text */
+    select(): void;
+    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void;
+}
+/** The handle for a component's defineExpose, reading the element when called */
+export declare function textFieldHandle<E extends HTMLInputElement | HTMLTextAreaElement>(element: () => E | null | undefined): TextFieldHandle<E>;
+//# sourceMappingURL=text-field.d.ts.map

package/dist/utils/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/utils/text-field.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,GAAG,gBAAgB;IAChG,2DAA2D;IAC3D,QAAQ,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,IAAI,IAAI,IAAI,CAAC;IACb,6BAA6B;IAC7B,MAAM,IAAI,IAAI,CAAC;IACf,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;CAClH;AAED,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,EAC5E,OAAO,EAAE,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,GACpC,eAAe,CAAC,CAAC,CAAC,CAUpB"}

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
 
@@ -352,6 +356,7 @@ Image, initials or icon of a person or organisation; `as="button"` makes it a tr
 | Prop | Type | Description |
 | --- | --- | --- |
 | name? | `string` | Person or organisation – accessible name of the avatar and source of the initials |
+| initials? | `string` | Own initials instead of the ones taken from `name`, e.g. "MS" for "my-server" |
 | src? | `string` | Image URL; initials (or the icon) are shown while it loads or if it fails |
 | icon? | `Component` | Icon shown when there is neither an image nor a name (default: user icon) |
 | variant? | `AvatarVariant` |  |
@@ -694,6 +699,7 @@ Surface for grouped content, optionally with title, media and footer; interactiv
 | subtitle? | `string` | Line below the title (also via #subtitle) |
 | title-tag? | `'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'` | Element of the title – pick the level that fits the page outline |
 | orientation? | `'vertical' \| 'horizontal'` | `horizontal`: media at the start, the content beside it |
+| size? | `'sm' \| 'md'` | `sm`: smaller radius, padding and title, e.g. for cards in a list inside a dialog |
 | classes? | `RecipeClasses<typeof cardRecipe> & RecipeClasses<typeof cardPartsRecipe>` | Extra classes per part of the component, e.g. { base: "…", title: "…" } (see the recipes card and cardParts) |
 
 | Slot | Slot props | Description |
@@ -973,8 +979,8 @@ 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` |  |
@@ -985,7 +991,7 @@ Checkbox with label (also indeterminate), works inside Field
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model:checked | `checked: CheckedState` |  |
+| v-model:checked | `checked: C` |  |
 
 
 ### CheckboxCard
@@ -1100,6 +1106,21 @@ Filter chips: one or several options as toggle buttons
 | v-model | `value: string[]` |  |
 
 
+### Code
+
+Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki
+
+- Import: `import { Code } from '@wirecore/wirelayer-vue'`
+- Category: Data
+- Example: https://wirecore.github.io/WireLayer/?path=/story/vue_data-code--playground
+- Other attributes go to the root element (<code>)
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| code? | `string` | The code (one line) – or pass it as the content |
+| classes? | `RecipeClasses<typeof inlineCodeRecipe>` | Extra classes of the recipe (see the recipe inlineCode) |
+
+
 ### CodeHighlight
 
 Code block with syntax colours; the scroll area is focusable, the copy button copies the plain code
@@ -1307,6 +1328,8 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | 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 |
@@ -1315,6 +1338,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 |
 | --- | --- | --- |
@@ -1522,13 +1546,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 |
@@ -1536,6 +1565,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, details: ContextMenuOpenDetails` | 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) |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -1997,6 +2028,7 @@ The modal window of a Dialog: title, description, focus trap, Escape closes
 | --- | --- | --- |
 | 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` |  |
@@ -3019,7 +3051,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'`
 
@@ -3038,6 +3070,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 |
@@ -3553,7 +3586,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 |
 | --- | --- | --- |
@@ -3566,6 +3599,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 |
@@ -3775,9 +3812,9 @@ 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 |
-| placeholder? | `string` | First, empty option, e.g. "Please choose" |
+| items | `readonly NativeSelectOption<V>[]` |  |
+| v-model? (modelValue) | `V \| ''` | Chosen value – use with v-model; the placeholder option gives an empty string |
+| placeholder? | `P` | First, empty option, e.g. "Please choose" – without it v-model only gets values (typed `V`, not `V \| ''`) |
 | size? | `Size` |  |
 | invalid? | `boolean` |  |
 | disabled? | `boolean` |  |
@@ -3785,7 +3822,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: P extends string ? V \| '' : V` |  |
 
 
 ### NavigationMenu
@@ -3872,7 +3909,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
@@ -3903,6 +3940,7 @@ Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
 | allow-decimal? | `boolean` | Allows decimals (default); false blocks the decimal separator and rounds to whole numbers |
 | decimals? | `number` | Exactly this many decimals, e.g. 2 → "12.50" |
 | clamp-behavior? | `'blur' \| 'strict' \| 'none'` | 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) |
+| empty-fallback? | `F` | 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`) |
 | select-on-focus? | `boolean` | Selects the whole number when the field gets the focus |
 | 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 |
@@ -3912,7 +3950,7 @@ Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: number \| null` |  |
+| v-model | `value: F extends string ? number : number \| null` |  |
 
 
 ### OrderList
@@ -4112,7 +4150,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
@@ -4131,7 +4169,7 @@ 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) |
@@ -4139,6 +4177,7 @@ Password field with a button that shows/hides the password (named "Show/Hide pas
 | 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 |
@@ -4408,6 +4447,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' \| 'neutral'` | Colour of the filled part by its state, e.g. `danger` for a failed transfer, `neutral` (grey) for a cancelled one |
+| 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) |
 
 
@@ -4535,20 +4578,20 @@ 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 |
 | disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
-| required? | `boolean` |  |
+| required? | `R & 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 |
 | name? | `string` |  |
 | classes? | `RecipeClasses<typeof radioGroupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: string \| null` |  |
+| v-model | `value: R extends true ? V : V \| null` |  |
 
 
 ### RadioGroupItem
@@ -4562,7 +4605,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) |
 
@@ -4864,17 +4907,18 @@ 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` |  |
+| required? | `R & 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 |
 | name? | `string` |  |
 | classes? | `RecipeClasses<typeof segmentedControlRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: string \| null` |  |
+| v-model | `value: R extends true ? V : V \| null` |  |
 
 
 ### SegmentedControlItem
@@ -4906,8 +4950,9 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly T[]` | Options: SelectItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled/itemGroup |
-| v-model? (modelValue) | `V \| null` | Selected value – use with v-model; any type (string, number, boolean, object) |
-| default-value? | `V \| null` |  |
+| v-model? (modelValue) | `V \| NoInfer<E> \| null` | Selected value – use with v-model; any type (string, number, boolean, object) |
+| default-value? | `V \| NoInfer<E> \| null` |  |
+| empty-value? | `E` | 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) |
 | placeholder? | `string` |  |
 | disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
@@ -4931,14 +4976,17 @@ 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 |
 | --- | --- | --- |
-| v-model | `value: V \| null` |  |
+| v-model | `value: V \| NoInfer<E>` |  |
 | @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 |
 | --- | --- | --- |
@@ -5389,6 +5437,7 @@ Steps list (tabs) with one panel per step and back/next buttons; the last "Next"
 | is-step-valid? | `(index: number) => boolean` | Blocks "Next" while a step is not valid (with linear) |
 | orientation? | `'horizontal' \| 'vertical'` | Steps listed top to bottom beside the content |
 | label-placement? | `'end' \| 'bottom'` | Label beside the number (default) or below it |
+| finish-label? | `string` | Text of the last "Next" button, e.g. "Create" (default "Finish") |
 | classes? | `RecipeClasses<typeof stepperRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5523,7 +5572,7 @@ Tab panels: tab list with arrow keys, one panel visible
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | Selected tab – use with v-model |
+| v-model? (modelValue) | `string \| null` | 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) |
 | default-value? | `string` |  |
 | label? | `string` | Accessible name of the tab list |
 | orientation? | `'horizontal' \| 'vertical'` | Tab list above (default) or beside the panels |
@@ -5581,6 +5630,7 @@ One tab button
 | icon? | `Component` | Icon component before the label |
 | disabled? | `boolean` |  |
 | closable? | `boolean` | 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 |
+| controls? | `string \| null` | 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) |
 | classes? | `RecipeClasses<typeof tabsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5627,7 +5677,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
@@ -5649,6 +5699,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 |
@@ -6297,6 +6348,8 @@ Multi-step form on the Stepper: "Next" checks the step (async with a spinner), "
 | default-step? | `number` |  |
 | summary-label? | `string` | Name of the summary step – the step appears with the #summary slot (default "Summary") |
 | orientation? | `'horizontal' \| 'vertical'` | Steps listed top to bottom beside the content |
+| finish-label? | `string` | Text of the last button, e.g. "Create" (default "Finish") |
+| focus-on-step-change? | `boolean` | 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 |
 | classes? | `RecipeClasses<typeof wizardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -6368,6 +6421,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 - `emptyConditionGroup` (`@wirecore/wirelayer-vue`): –
 - `expandRecurrence` (`@wirecore/wirelayer-vue`): –
 - `firstError` (`@wirecore/wirelayer-vue/form`): First readable message of TanStack Form errors (strings or Standard Schema issues).
+- `focusFirst` (`@wirecore/wirelayer-vue`): –
 - `formatColor` (`@wirecore/wirelayer-vue`): –
 - `formatHotkey` (`@wirecore/wirelayer-vue`): –
 - `formatHotkeyText` (`@wirecore/wirelayer-vue`): –
@@ -6400,6 +6454,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 - `provideRecipes` (`@wirecore/wirelayer-vue`): Adds overrides for the components below (inner ones win) – used by RecipesProvider
 - `registerLocale` (`@wirecore/wirelayer-vue`): –
 - `removeTreeNode` (`@wirecore/wirelayer-vue`): –
+- `resolveTokens` (`@wirecore/wirelayer-vue`): –
 - `rowsToDataSource` (`@wirecore/wirelayer-vue/data-table`): –
 - `toast` (`@wirecore/wirelayer-vue`): –
 - `toaster` (`@wirecore/wirelayer-vue`): –
@@ -6437,6 +6492,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 - `useReducedMotion` (`@wirecore/wirelayer-vue`): Whether the user asked for less motion (prefers-reduced-motion: reduce)
 - `useRegisteredHotkeys` (`@wirecore/wirelayer-vue`): The registered shortcuts (enabled, with a description), updated as components register them
 - `useResizeObserver` (`@wirecore/wirelayer-vue`): The content box of an element as it changes (bind `ref` to it)
+- `useResolvedTokens` (`@wirecore/wirelayer-vue`): 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
 - `useScrollSpy` (`@wirecore/wirelayer-vue`): The id of the section being read: the last of `ids` whose top passed `offset` px (e.g. a sticky header) – for a table of contents
 - `useSelection` (`@wirecore/wirelayer-vue`): Selected items of a list: toggle, select all, clear – with "all"/"some" for a header checkbox
 - `useSessionStorage` (`@wirecore/wirelayer-vue`): Like useLocalStorage, in sessionStorage (this tab only, gone when it closes)
@@ -6448,6 +6504,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 - `useWindowScroll` (`@wirecore/wirelayer-vue`): Scroll position of the window and `scrollTo` (0 on the server)
 - `validateFields` (`@wirecore/wirelayer-vue/form`): Validates some fields of a TanStack form (e.g. one Wizard step) and marks them touched, so their errors show. Resolves with true when none has an error.
 - `virtualRows` (`@wirecore/wirelayer-vue/virtual`): DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable :features="[virtualRows]" virtual>`
+- `watchTokens` (`@wirecore/wirelayer-vue`): –
 
 ## Guides
 
@@ -7139,6 +7196,39 @@ as `pdfjs-dist` (Apache-2.0), Chart.js, Tiptap and Shiki are installed by the ap
 - **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.
+- **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`).
+
 ### Custom theme
 
 A theme overrides any colors per mode. `themeToCss` generates the CSS for it,

package/llms.txt

@@ -58,6 +58,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [ChatThinking](https://wirecore.github.io/WireLayer/?path=/story/vue_data-chat--playground): The reasoning of an answer: collapsed by default, "Thinking …" while it is being written (`@wirecore/wirelayer-vue`)
 - [ChatToolCall](https://wirecore.github.io/WireLayer/?path=/story/vue_data-chat--playground): A tool call of an assistant: name and status in the summary, arguments and result inside (`@wirecore/wirelayer-vue`)
 - [Chip](https://wirecore.github.io/WireLayer/?path=/story/vue_data-chip--playground): One option of a ChipGroup (a toggle button); outside a ChipGroup a standalone chip, optionally removable (`@wirecore/wirelayer-vue`)
+- [Code](https://wirecore.github.io/WireLayer/?path=/story/vue_data-code--playground): Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki (`@wirecore/wirelayer-vue`)
 - [CodeHighlight](https://wirecore.github.io/WireLayer/?path=/story/vue_data-codehighlight--playground): Code block with syntax colours; the scroll area is focusable, the copy button copies the plain code (`@wirecore/wirelayer-vue/code`)
 - [CodeHighlightTabs](https://wirecore.github.io/WireLayer/?path=/story/vue_data-codehighlight--playground): Several files: tabs with the file names (and an icon by type) above the shown code (`@wirecore/wirelayer-vue/code`)
 - [CompositeChart](https://wirecore.github.io/WireLayer/?path=/story/vue_data-compositechart--playground): Bars and lines in one chart (series[].type), e.g. revenue as bars and margin as a line on a second axis (`@wirecore/wirelayer-vue/chart`)
@@ -169,8 +170,8 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [MonthPicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-monthpicker--playground): Month field ("10.2026"): type the digits in one go, or pick from the month grid; range: start – end (`@wirecore/wirelayer-vue`)
 - [MultiSelect](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-multiselect--playground): Select with several values: the list stays open while choosing, Space/Enter toggle an option (`@wirecore/wirelayer-vue`)
 - [NativeSelect](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-nativeselect--playground): The browser's select: its own keyboard and mobile pickers; inside a Field it is labelled and described (`@wirecore/wirelayer-vue`)
-- [NumberInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5") (`@wirecore/wirelayer-vue`)
-- [PasswordInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password") (`@wirecore/wirelayer-vue`)
+- [NumberInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5"); `ref` reaches the native input (`@wirecore/wirelayer-vue`)
+- [PasswordInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password"); `ref` reaches the native input (`@wirecore/wirelayer-vue`)
 - [PhoneInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-phoneinput--playground): Country (flag and calling code, searchable) and the number, formatted for the country; the value is E.164 (`@wirecore/wirelayer-vue`)
 - [PinInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-pininput--playground): Code input (OTP, PIN): one box per character, typing moves on, pasting fills all boxes (`@wirecore/wirelayer-vue`)
 - [QuarterPicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-quarterpicker--playground): Quarter field: type "Q4 2026" (also "2026-Q4", "4/2026") or pick from the four quarters of a year; with range a start and an end quarter. Arrow keys move between the quarters and on into the next or previous year. (`@wirecore/wirelayer-vue`)
@@ -185,7 +186,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [Switch](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switch--playground): Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for> (`@wirecore/wirelayer-vue`)
 - [SwitchGroup](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switchgroup--playground): role="group" named by its label, described by helper and error text; Switches with a value inside (`@wirecore/wirelayer-vue`)
 - [TagsInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-tagsinput--playground): Free entries: Enter or "," adds, Backspace on the empty field selects the last entry (again removes it), arrow keys move between entries; additions and removals are announced. With suggestions the field is a combobox: Arrow down opens them, Enter adds the highlighted one. (`@wirecore/wirelayer-vue`)
-- [Textarea](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field (`@wirecore/wirelayer-vue`)
+- [Textarea](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field. `ref` reaches the native textarea (`@wirecore/wirelayer-vue`)
 - [TimeGrid](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timegrid--playground): Free time slots for a booking: radio buttons for one time (arrow keys move and choose), toggle buttons for a range (start, then end). Taken slots stay visible but cannot be chosen. (`@wirecore/wirelayer-vue`)
 - [TimePicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timepicker--playground): Time field: type the digits one after another ("1430"), arrow keys change hour or minute – or pick from the list of times (every `step` minutes). Gives "HH:mm". (`@wirecore/wirelayer-vue`)
 - [TimeRangePicker](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-timerangepicker--playground): Start and end time in one field ("09:00 – 17:30"): typing runs on from start to end (`@wirecore/wirelayer-vue`)
@@ -274,7 +275,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 ## Other
 
 - FilterChips: The active filters as a list of chips with remove buttons ("Remove filter Location: Frankfurt") (`@wirecore/wirelayer-vue`)
-- Input: Text field with sizes, leading icon, prefix and suffix; works inside Field (`@wirecore/wirelayer-vue`)
+- Input: Text field with sizes, leading icon, prefix and suffix; works inside Field. `ref` reaches the native input (focus, select, setSelectionRange) (`@wirecore/wirelayer-vue`)
 - KeyValueEditor: Key-value pairs (FormList preset): two inputs per row, duplicate keys marked (`@wirecore/wirelayer-vue/form`)
 - LocaleProvider: Renders nothing itself; Ark's provider passes locale and direction (keyboard order) on to Ark (`@wirecore/wirelayer-vue`)
 
@@ -310,5 +311,6 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - License
 - Components and APIs side by side
 - Pitfalls
+- Desktop apps (dense UI, many dialogs)
 - Custom theme
 - Component sizes and shapes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirecore/wirelayer-vue",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "WireLayer components for Vue 3",
   "license": "MIT",
   "repository": {
@@ -166,8 +166,8 @@
     "@ark-ui/vue": "^5.39.3",
     "@internationalized/date": "^3.12.4",
     "@lucide/vue": "^1.59.0",
-    "@wirecore/wirelayer-recipes": "^0.6.0",
-    "@wirecore/wirelayer-tokens": "^0.4.0"
+    "@wirecore/wirelayer-recipes": "^0.8.0",
+    "@wirecore/wirelayer-tokens": "^0.5.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.6.2",