@wirecore/wirelayer-vue 0.7.0 → 0.8.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-CeZbSy6K.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-DgHt0P5P.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/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
 
@@ -973,8 +977,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 +989,7 @@ Checkbox with label (also indeterminate), works inside Field
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model:checked | `checked: CheckedState` |  |
+| v-model:checked | `checked: C` |  |
 
 
 ### CheckboxCard
@@ -1307,6 +1311,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 +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 |
 | --- | --- | --- |
@@ -1522,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 |
@@ -1536,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 |
 | --- | --- | --- |
@@ -1997,6 +2011,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 +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'`
 
@@ -3038,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 |
@@ -3553,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 |
 | --- | --- | --- |
@@ -3566,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 |
@@ -3775,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` |  |
@@ -3785,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
@@ -3872,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
@@ -4112,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
@@ -4131,7 +4151,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 +4159,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 +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) |
 
 
@@ -4535,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 |
@@ -4548,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
@@ -4562,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) |
 
@@ -4864,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` |  |
@@ -4874,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
@@ -4931,6 +4956,8 @@ 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) |
 
@@ -4939,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 |
 | --- | --- | --- |
@@ -5627,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
@@ -5649,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 |
@@ -7139,6 +7168,23 @@ 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.
+
 ### Custom theme
 
 A theme overrides any colors per mode. `themeToCss` generates the CSS for it,

package/llms.txt

@@ -169,8 +169,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 +185,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 +274,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 +310,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.8.0",
   "description": "WireLayer components for Vue 3",
   "license": "MIT",
   "repository": {
@@ -166,7 +166,7 @@
     "@ark-ui/vue": "^5.39.3",
     "@internationalized/date": "^3.12.4",
     "@lucide/vue": "^1.59.0",
-    "@wirecore/wirelayer-recipes": "^0.6.0",
+    "@wirecore/wirelayer-recipes": "^0.7.0",
     "@wirecore/wirelayer-tokens": "^0.4.0"
   },
   "devDependencies": {