@wirecore/wirelayer-vue 0.8.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-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 { 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/llms-full.txt

@@ -356,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` |  |
@@ -698,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 |
@@ -1104,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
@@ -1549,7 +1566,7 @@ Opens at the pointer on right click, on touch screens with a long press (and wit
 | @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) |
+| @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 |
 | --- | --- | --- |
@@ -3797,7 +3814,7 @@ The browser's select: its own keyboard and mobile pickers; inside a Field it is
 | --- | --- | --- |
 | 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" |
+| 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` |  |
@@ -3805,7 +3822,7 @@ The browser's select: its own keyboard and mobile pickers; inside a Field it is
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| v-model | `value: V \| ''` |  |
+| v-model | `value: P extends string ? V \| '' : V` |  |
 
 
 ### NavigationMenu
@@ -3923,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 |
@@ -3932,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
@@ -4430,7 +4448,7 @@ Ark names the progressbar after its value; the label is the name, the value its
 | 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 |
+| 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) |
@@ -4567,13 +4585,13 @@ One choice out of several (role="radiogroup", arrow keys), horizontal or vertica
 | 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: V \| null` |  |
+| v-model | `value: R extends true ? V : V \| null` |  |
 
 
 ### RadioGroupItem
@@ -4894,12 +4912,13 @@ Few exclusive options as a segmented switch (radio group)
 | 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: V \| null` |  |
+| v-model | `value: R extends true ? V : V \| null` |  |
 
 
 ### SegmentedControlItem
@@ -4931,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` |  |
@@ -4963,7 +4983,7 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 
 | 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 |
@@ -5417,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 |
@@ -5551,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 |
@@ -5609,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 |
@@ -6326,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 |
@@ -6397,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`): –
@@ -6429,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`): –
@@ -6466,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)
@@ -6477,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
 
@@ -7184,6 +7212,22 @@ as `pdfjs-dist` (Apache-2.0), Chart.js, Tiptap and Shiki are installed by the ap
   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
 

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`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirecore/wirelayer-vue",
-  "version": "0.8.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.7.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",