@wirecore/wirelayer-vue 0.5.0 → 0.7.0

package/llms-full.txt

@@ -22,7 +22,7 @@ Sections that open and close (one or several at a time); each item is a heading
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string[]` | Open items (values of AccordionItem) |
+| v-model? (modelValue) | `string[]` | Open items (values of AccordionItem) – use with v-model |
 | default-value? | `string[]` |  |
 | multiple? | `boolean` | Several items open at once |
 | collapsible? | `boolean` | The open item can be closed again (single mode) |
@@ -44,7 +44,8 @@ One section of an Accordion: heading button and content
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` |  |
+| value | `string` |  |
+| title? | `string` | Title of the trigger (also via #title) |
 | icon? | `Component` | Icon component before the title |
 | disabled? | `boolean` |  |
 | heading-level? | `2 \| 3 \| 4 \| 5 \| 6` | Level of the heading around the trigger, to fit the page outline |
@@ -71,7 +72,6 @@ Actions for the selected items: a toolbar (one tab stop, arrow keys) with the co
 | label? | `string` | Accessible name of the toolbar |
 | clear-label? | `string` | Name of the button that clears the selection |
 | placement? | `'fixed' \| 'inline'` | `fixed` floats at the bottom of the window, `inline` stays in the flow |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof actionBarRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -107,6 +107,7 @@ Fixed in a corner of the window, e.g. a help or chat button
 | Prop | Type | Description |
 | --- | --- | --- |
 | label? | `string` | Text of the label (default "AI-generated") |
+| explanation? | `string \| false` | Explanation behind the (i) button (default: a short note on AI content); `false` hides the button |
 | size? | `'sm' \| 'md'` |  |
 | classes? | `RecipeClasses<typeof aiLabelRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -128,10 +129,10 @@ Message box with status colour, icon, title and text; role="alert" for errors an
 | status? | `AlertStatus` |  |
 | variant? | `AlertVariant` | `box` (default) or `simple`: only icon and text in the status colour, e.g. for a field error |
 | size? | `'sm' \| 'md'` |  |
-| title? | `ReactNode` |  |
-| dismissible? | `boolean` | Shows a close button that calls `onDismiss` |
+| title? | `string` |  |
+| dismissible? | `boolean` | Shows a close button that emits `dismiss` |
 | dismiss-label? | `string` | Accessible name of the close button |
-| duration? | `number` | Calls `onDismiss` after this many milliseconds. The time pauses while the pointer is over the alert or the focus is in it (WCAG 2.2.1); prefer `dismissible` for messages people need to read |
+| duration? | `number` | Emits `dismiss` after this many milliseconds. The time pauses while the pointer is over the alert or the focus is in it (WCAG 2.2.1); prefer `dismissible` for messages people need to read |
 | classes? | `RecipeClasses<typeof alertRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -149,7 +150,7 @@ Dial for an angle: the needle is the slider (arrow keys, Home/End), drag anywher
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number` | Angle 0–360 (controlled) |
+| v-model? (modelValue) | `number` | Angle 0–360 – use with v-model |
 | default-value? | `number` |  |
 | step? | `number` | Step of the arrow keys and of dragging (default 1) |
 | label? | `string` | Visible label, also the accessible name (or a surrounding Field, or aria-label) |
@@ -160,8 +161,7 @@ Dial for an angle: the needle is the slider (arrow keys, Home/End), drag anywher
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
-| aria-label? | `string` |  |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the angle slider, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof angleSliderRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -180,17 +180,17 @@ App frame with landmarks: skip link, header (banner), side navigation (from lg o
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| navbar-open? | `boolean` |  |
+| v-model:navbar-open? | `boolean` | Navigation drawer on small screens – use with v-model:navbar-open |
 | navbar-label? | `string` | Title of the drawer and name of the button that opens it |
 | skip-link-label? | `string` |  |
 | skip-links? | `readonly SkipLink[]` | Further skip links after the one to the main area, e.g. [{ href: '#search', label: 'Skip to search' }] – then rendered as a named list (SkipLinks) |
-| navbar-collapsed? | `boolean` | The navbar is a rail of icons on the desktop (a SidebarNav inside shows tooltips) |
+| v-model:navbar-collapsed? | `boolean` | The navbar is a rail of icons on the desktop (a SidebarNav inside shows tooltips) – v-model:navbar-collapsed |
 | collapsible? | `boolean` | A button in the header folds and unfolds the navbar (desktop) |
 | navbar-expand-on-hover? | `boolean` | With navbarCollapsed: the rail opens over the main area while hovered or focused |
 | navbar-resizable? | `boolean` | The navbar width can be changed with a handle (drag, arrow keys, Home/End, double click resets) |
 | aside-resizable? | `boolean` | The aside width can be changed the same way |
-| navbar-width? | `number` | Width of the navbar in px (default 256) |
-| aside-width? | `number` | Width of the aside in px (default 288) |
+| v-model:navbar-width? | `number` | Width of the navbar in px (default 256) – v-model:navbar-width |
+| v-model:aside-width? | `number` | Width of the aside in px (default 288) – v-model:aside-width |
 | navbar-min-width? | `number` | Limits for resizing (px) |
 | navbar-max-width? | `number` |  |
 | aside-min-width? | `number` |  |
@@ -241,7 +241,7 @@ One form for sign in, sign up, password reset and one-time code; errors in a sum
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| mode? | `AuthMode` | signIn, signUp, reset (password forgotten) or code (one-time code) (controlled) |
+| v-model:mode? | `AuthMode` | signIn, signUp, reset (password forgotten) or code (one-time code) – use with v-model:mode |
 | default-mode? | `AuthMode` |  |
 | modes? | `readonly AuthMode[]` | Modes the links switch between (default sign in, sign up and reset) |
 | title? | `string` | Heading (default by mode) |
@@ -301,14 +301,14 @@ Free text with suggestions: type, arrow keys to pick a suggestion, Enter takes i
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly T[]` | Suggestions while typing – any other text is allowed, too; strings or objects (read with itemLabel) |
-| v-model? (modelValue) | `string` | The text |
+| v-model? (modelValue) | `string` | The text – use with v-model |
 | default-value? | `string` |  |
-| multiple? | `boolean` | Several entries as chips (a TagsInput with these suggestions) – use values/onValuesChange |
-| values? | `string[]` | The entries with `multiple` |
+| multiple? | `boolean` | Several entries as chips (a TagsInput with these suggestions) – use with v-model:values |
+| v-model:values? | `string[]` | The entries with `multiple` – use with v-model:values |
 | default-values? | `string[]` |  |
 | max? | `number` | Most entries with `multiple` |
 | filter? | `boolean` | Filters the suggestions by the typed text (ignores case and accents) |
-| manual-filter? | `boolean` | The suggestions are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| manual-filter? | `boolean` | The suggestions are filtered elsewhere (server): no local filtering, listen to filterChange |
 | item-label? | `ItemAccessor<T, string>` | Text of a suggestion: property name or function (default: `label`, or the item itself) |
 | item-disabled? | `ItemAccessor<T, boolean>` | Disabled state of a suggestion: property name or function (default: `disabled`) |
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of a suggestion: property name or function (default: `group`) |
@@ -316,13 +316,17 @@ Free text with suggestions: type, arrow keys to pick a suggestion, Enter takes i
 | loading? | `boolean` | Shows a spinner in the field and "Loading" in the list (aria-busy) |
 | loading-text? | `string` | Text of the loading row in the list |
 | size? | `SelectSize` | Height of the field: 32, 40 (default) or 48 px |
-| has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<T>` | Loads the suggestions for the typed text (after a typing pause, outdated answers dropped) |
 | min-search-length? | `number` | Fewest characters typed before the data source is asked |
 | page-size? | `number` | Suggestions per request of the data source (default 50) |
+| placeholder? | `string` |  |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -389,6 +393,7 @@ Short label or status (solid, soft, outline or a status colour)
 | --- | --- | --- |
 | variant? | `BadgeVariant` |  |
 | icon? | `Component` | Icon component rendered before the text |
+| icon-props? | `Record<string, unknown>` | Props passed on to the icon component, e.g. { fill: 'currentColor' } for a filled icon or { strokeWidth: 1.5 } |
 | circle? | `boolean` | Round shape for a count or a single character (grows into a pill for longer content) |
 | classes? | `RecipeClasses<typeof badgeRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -408,7 +413,7 @@ Page-wide notice: message in a live region (role="alert" for danger, else "statu
 | title? | `string` | Bold text before the message |
 | position? | `BannerPosition` | `inline` (default): in the flow; `top`/`bottom`: fixed to that edge of the window |
 | dismissible? | `boolean` | Shows a close button |
-| open? | `boolean` | Controlled visibility |
+| v-model:open? | `boolean` | Controlled visibility – use with v-model:open |
 | storage-key? | `string` | Remembers the dismissal in localStorage under this key – the banner stays hidden on the next visit |
 | icon? | `Component` | Own icon instead of the one for the variant |
 | hide-icon? | `boolean` |  |
@@ -436,6 +441,22 @@ Bars per category for one or more series – vertical or horizontal, grouped or
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| data | `readonly ChartRow[]` | The rows: one object per category with a value per series |
+| category-key | `string` | Property of each row with the category (x axis) |
+| series | `readonly ChartSeries[]` | The series: key of the value, label, colour, axis, stack … |
+| title | `string` | Title of the chart, also its accessible name |
+| hide-title? | `boolean` | Keep the title for screen readers only |
+| height? | `string` | Height of the chart area (CSS length, default 18rem) |
+| table? | `boolean` | The data as a table below the chart (opens on demand) – the text alternative (default true) |
+| format-value? | `(value: number) => string` | Formats values in the axis, tooltips, legend and table (default: numbers in the locale) |
+| references? | `readonly ChartReference[]` | Reference lines (`value`) and areas (`from`–`to`), on the value axis or with `axis: 'x'` on the categories |
+| scale? | `'linear' \| 'logarithmic'` | Logarithmic value axis |
+| legend? | `boolean` | Legend (default: with more than one series) |
+| brush? | `boolean` | A small overview below with a range to zoom into (keyboard: the slider's arrow keys) |
+| v-model:range? | `[number, number]` | Shown rows with `brush` (inclusive indexes) – use with v-model:range |
+| default-range? | `[number, number]` |  |
+| options? | `Record<string, unknown>` | Chart.js options – merged over the WireLayer defaults |
+| classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe chart) |
 | horizontal? | `boolean` | Bars from the start edge instead of from the bottom |
 | stacked? | `boolean` | Stack all series |
 
@@ -478,7 +499,6 @@ While blocked: the content is inert (no focus, no clicks) and busy; the overlay
 | --- | --- | --- |
 | blocked? | `boolean` | Covers the content and makes it inert |
 | label? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof blockUiRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -497,7 +517,7 @@ Navigation landmark fixed at the bottom (above the home indicator): icon and tex
 | label? | `string` | Name of the navigation landmark (default "Navigation") |
 | current-href? | `string` | Path of the current page – the item with exactly this href gets aria-current="page" |
 | is-current? | `(item: BottomNavigationItem) => boolean` | Own check for the current page, e.g. with the router |
-| link-as? | `Component \| string` | Component for the links, e.g. a router link (gets `to` for links with `to`, else `href`); default <a> |
+| link-as? | `string \| Component` | Component for the links, e.g. RouterLink or NuxtLink (gets `to` for links with `to`, else `href`); default <a> |
 | inline? | `boolean` | In the flow of the page instead of fixed at the bottom |
 | classes? | `RecipeClasses<typeof bottomNavigationRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -545,7 +565,7 @@ One step of a Breadcrumb (link, or the current page)
 | current? | `boolean` | The current page – sets aria-current="page" |
 | icon? | `Component` | Icon component before the label |
 | icon-only? | `boolean` | Show only the icon; the label stays available to screen readers |
-| as-child? | `boolean` | Render the child link (e.g. Next.js Link) with breadcrumb styles |
+| as-child? | `boolean` | Render the slotted link (e.g. RouterLink) with breadcrumb styles |
 | classes? | `RecipeClasses<typeof breadcrumbRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -562,7 +582,7 @@ A meter (role="meter") with the value, the end of the scale and the target as it
 | --- | --- | --- |
 | label | `string` | Name of the measure, e.g. "Revenue" |
 | description? | `string` | Smaller text below the name, e.g. the unit |
-| v-model (modelValue) | `number` |  |
+| value | `number` |  |
 | max | `number` | End of the scale |
 | min? | `number` | Start of the scale (default 0) |
 | target? | `number` | Target value: a marker across the bar |
@@ -590,10 +610,13 @@ Button in the variants of the design, with leading/trailing icon; loading keeps
 | block? | `boolean` | Full width of the container |
 | leading-icon? | `Component` | Icon component rendered before the label |
 | trailing-icon? | `Component` | Icon component rendered after the label |
+| icon-props? | `Record<string, unknown>` | Props passed on to the leading and trailing icon, e.g. { fill: 'currentColor' } for a filled icon or { strokeWidth: 1.5 } |
 | loading? | `boolean` | Shows a spinner and ignores clicks; stays focusable (aria-disabled + aria-busy) so focus is not lost |
+| disabled? | `boolean` |  |
+| type? | `'button' \| 'submit' \| 'reset'` |  |
 | badge? | `number \| boolean` | Counter (number > 0) or dot (true) after the label |
 | badge-label? | `(count: string \| null) => string` | Added to the accessible name while a badge is shown, e.g. "Notifications 4 new". Receives the visible counter text ("4", "99+") or null for the dot |
-| as-child? | `boolean` | Render the child element (e.g. a link) with button styles instead of a <button> |
+| as-child? | `boolean` | Render the slotted element (e.g. a link) with button styles instead of a <button> |
 | classes? | `RecipeClasses<typeof buttonRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -625,9 +648,9 @@ Calendar on the page (no field, no popup): a grid with arrow keys, Page Up/Down,
 | Prop | Type | Description |
 | --- | --- | --- |
 | selection-mode? | `'single' \| 'multiple' \| 'range'` | One day, several days, or a range (start and end) |
-| v-model? (modelValue) | `T` | Chosen days as ISO dates; Date objects are accepted too |
+| v-model? (modelValue) | `T` | Chosen days as ISO dates – use with v-model; Date objects are accepted too |
 | default-value? | `T` |  |
-| value-type? | `DateValueType` | What onValueChange gets: ISO strings (default) or Date objects |
+| value-type? | `DateValueType` | What v-model gets: ISO strings (default) or Date objects |
 | min? | `DateLike` |  |
 | max? | `DateLike` |  |
 | is-date-unavailable? | `(date: string) => boolean` | Days that cannot be chosen – receives the ISO date |
@@ -644,8 +667,6 @@ Calendar on the page (no field, no popup): a grid with arrow keys, Page Up/Down,
 | weekend-days? | `readonly number[]` | Weekend days (0 = Sunday … 6) marked with data-weekend; default from the locale |
 | allow-deselect? | `boolean` | With selectionMode single: choosing the selected day again clears it |
 | time-zone? | `string` | IANA zone that decides which day is today |
-| render-day? | `RenderDay` | Content of a day instead of its number, e.g. a dot for appointments |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -668,7 +689,9 @@ Surface for grouped content, optionally with title, media and footer; interactiv
 | Prop | Type | Description |
 | --- | --- | --- |
 | interactive? | `boolean` | Hover state and glow, for cards that act as a link or button. Combine with `asChild` and an `<a>`/`<button>` – a clickable `<div>` is not keyboard accessible. |
-| as-child? | `boolean` | Render the child element (e.g. a link) with card styles instead of a <div> (the parts are not rendered) |
+| as-child? | `boolean` | Render the slotted element (e.g. a link) with card styles instead of a <div> (the parts are not rendered) |
+| title? | `string` | Heading of the card (also via #title) |
+| 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 |
 | classes? | `RecipeClasses<typeof cardRecipe> & RecipeClasses<typeof cardPartsRecipe>` | Extra classes per part of the component, e.g. { base: "…", title: "…" } (see the recipes card and cardParts) |
@@ -704,9 +727,9 @@ Region "carousel" with slides labelled "Image n of m". Previous/next buttons, on
 | loop? | `boolean` |  |
 | autoplay? | `boolean \| { delay: number }` | Turns pages by itself (default every 4 s) – always with a pause button (WCAG 2.2.2) |
 | indicators? | `boolean` | Dots below the slides, one per page |
-| page? | `number` |  |
+| controls-position? | `'bottom' \| 'sides'` | Previous and next: in the row below the slides (`bottom`, default) or beside them, vertically centred (`sides`) |
+| v-model:page? | `number` | Current page – use with v-model:page |
 | default-page? | `number` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof carouselRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -728,7 +751,7 @@ Select with cascading levels: a menu whose groups open to the side (arrow right/
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly CascadeOption<V>[]` |  |
-| v-model? (modelValue) | `V \| null` | Chosen value; any type (see `valueKey`) |
+| v-model? (modelValue) | `V \| null` | Chosen value – use with v-model; any type (see `valueKey`) |
 | default-value? | `V \| null` |  |
 | placeholder? | `string` |  |
 | separator? | `string` | Separator of the path shown in the trigger ("Germany › Bavaria › Munich") |
@@ -743,8 +766,7 @@ Select with cascading levels: a menu whose groups open to the side (arrow right/
 | size? | `'sm' \| 'md' \| 'lg'` | Height of the field: 32, 40 (default) or 48 px |
 | load-children? | `(option: CascadeOption<V>, request: { signal: AbortSignal }) => Promise<CascadeOption<V>[]>` | Loads the options of a level (`hasChildren: true`) when it opens; the signal aborts it |
 | data-source? | `DataSource<CascadeOption<V>>` | Source of the options of lazy levels (`getChildren`) |
-| aria-label? | `string` |  |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field (the trigger, with `filter` the search field), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof cascadeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -778,15 +800,15 @@ Canvas with role="img" named by the title; the data table is its text alternativ
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| type | `TType` |  |
-| data | `ChartData<TType>` |  |
-| options? | `ChartOptions<TType>` | Chart.js options – merged over the WireLayer defaults (colours, font, no fixed aspect ratio) |
+| type | `TType` | Chart.js chart type – it alone decides the types of `data`, `options` and `plugins` |
+| data | `ChartData<NoInfer<TType>>` |  |
+| options? | `ChartOptions<NoInfer<TType>>` | Chart.js options – merged over the WireLayer defaults (colours, font, no fixed aspect ratio). Options kept in a variable need their type, e.g. `computed<ChartOptions<'bar'>>(…)`, or `indexAxis: 'y'` becomes a string |
+| plugins? | `Plugin<NoInfer<TType>>[]` | Inline Chart.js plugins of this chart (global ones: `Chart.register`) – changing them re-creates the chart |
 | title | `string` | Title of the chart, also its accessible name |
 | hide-title? | `boolean` | Keep the title for screen readers only, e.g. inside a card that already has a heading |
 | height? | `string` | Height of the chart area (CSS length) |
 | table? | `boolean` | The data as a table below the chart (opens on demand) – the text alternative for the canvas |
 | format-value? | `(value: number) => string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -801,7 +823,7 @@ A message: author and time (only for screen readers when grouped), the bubble, t
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| text? | `string` | Text of the message – Markdown unless `markdown` is false (children replace it) |
+| text? | `string` | Text of the message – Markdown unless `markdown` is false (the default slot replaces it) |
 | markdown? | `boolean` | Render the text as Markdown (default true); otherwise plain text with its line breaks |
 | author? | `string` | Name of the author, above the message |
 | avatar? | `string` | Avatar image (default: the initials of the author) |
@@ -839,7 +861,7 @@ Message list: role="log" (announcements of new messages come from the live annou
 | now? | `string \| number \| Date` | Today's date – the date lines then say "Today" and "Yesterday" (pass it from the server for hydration) |
 | markdown? | `boolean` | Message texts are Markdown (default true) |
 | announce? | `boolean` | Announces new messages of others – streamed ones once they are complete (default true) |
-| has-more? | `boolean` | Older messages can be loaded: a button at the top calls onLoadMore |
+| has-more? | `boolean` | Older messages can be loaded: a button at the top emits loadMore |
 | loading? | `boolean` |  |
 | empty-text? | `string` | Text without messages |
 | classes? | `RecipeClasses<typeof chatMessagesRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -863,14 +885,14 @@ A form with a growing text field: Enter sends, Shift+Enter adds a line; while re
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | The text (controlled) |
+| v-model? (modelValue) | `string` | The text – use with v-model |
 | default-value? | `string` |  |
 | label? | `string` | Accessible name of the field (default "Message") |
 | placeholder? | `string` |  |
 | disabled? | `boolean` |  |
-| responding? | `boolean` | A reply is being written: the send button becomes a stop button (calls onStop) |
+| responding? | `boolean` | A reply is being written: the send button becomes a stop button (emits stop) |
 | attachments? | `boolean` | A button to attach files |
-| files? | `File[]` | Attached files (controlled) |
+| v-model:files? | `File[]` | Attached files – use with v-model:files |
 | accept? | `string` | Accepted file types for attachments, e.g. "image/*,.pdf" |
 | max-rows? | `number` | Lines the field grows to before it scrolls (default 8) |
 | send-on? | `'enter' \| 'mod-enter'` | `enter` (default): Enter sends, Shift+Enter adds a line; `mod-enter`: Ctrl/Cmd+Enter sends |
@@ -915,7 +937,7 @@ The reasoning of an answer: collapsed by default, "Thinking …" while it is bei
 | Prop | Type | Description |
 | --- | --- | --- |
 | active? | `boolean` | Still thinking: "Thinking …" with a spinner, aria-busy |
-| text? | `string` | The reasoning (plain text; children replace it) |
+| text? | `string` | The reasoning (plain text; the default slot replaces it) |
 | duration? | `number` | Seconds it took – shown when done |
 | default-open? | `boolean` | Open at first |
 | classes? | `RecipeClasses<typeof chatDetailsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -951,10 +973,14 @@ Checkbox with label (also indeterminate), works inside Field
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| checked? | `CheckedState` |  |
+| v-model:checked? | `CheckedState` | Controlled state – use with v-model:checked |
 | default-checked? | `CheckedState` |  |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
-| v-model? (modelValue) | `string` |  |
+| required? | `boolean` |  |
+| name? | `string` |  |
+| value? | `string` |  |
+| id? | `string` | Id of the check box (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof checkboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -974,10 +1000,19 @@ A large card that is one checkbox: title (name), description and price (descript
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | Value inside a CheckboxGroup |
-| checked? | `CheckedState` | Controlled state (alone; in a CheckboxGroup the group holds the value) |
+| title | `string` | Title – the accessible name of the checkbox |
+| description? | `string` | Text below the title – read as the description |
+| icon? | `Component` | Icon component in a box at the start |
+| price? | `string` | Price or other figure at the end, e.g. "$29 / month" – part of the description |
+| value? | `string` | Value inside a CheckboxGroup |
+| v-model:checked? | `CheckedState` | Controlled state – use with v-model:checked (alone; in a CheckboxGroup the group holds the value) |
 | default-checked? | `CheckedState` |  |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
+| required? | `boolean` |  |
+| name? | `string` |  |
+| id? | `string` | Id of the check box (the hidden input), e.g. for a `<label for>` |
+| classes? | `RecipeClasses<typeof selectionCardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -996,8 +1031,16 @@ role="group" named by its label, described by helper and error text; Checkbox/Ch
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string[]` | Values of the ticked checkboxes (controlled) |
+| v-model? (modelValue) | `string[]` | Values of the ticked checkboxes – use with v-model |
 | default-value? | `string[]` |  |
+| label? | `string` | Visible label of the group (names it); otherwise pass aria-label |
+| helper-text? | `string` |  |
+| error? | `string` | Error message – also marks the group and its checkboxes invalid |
+| invalid? | `boolean` |  |
+| required? | `boolean` | Shows the required mark after the label |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
+| name? | `string` | Name of the inputs for form submission |
 | max? | `number` | At most this many can be ticked – the others are disabled until one is unticked (announced) |
 | orientation? | `'vertical' \| 'horizontal'` | vertical (default) or horizontal |
 | columns? | `number` | Cards in a grid with this many columns (one column on small screens) – for CheckboxCard |
@@ -1019,11 +1062,12 @@ One option of a ChipGroup (a toggle button); outside a ChipGroup a standalone ch
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | Value of the option inside a ChipGroup (required there; a standalone chip does not need it) |
+| value? | `string` | Value of the option inside a ChipGroup (required there; a standalone chip does not need it) |
 | icon? | `Component` | Icon component before the label |
-| label? | `string` | Text of a standalone chip (or the children); also names its remove button |
+| disabled? | `boolean` |  |
+| label? | `string` | Text of a standalone chip (or the default slot); also names its remove button |
 | avatar? | `string` | Standalone chip: small round image before the label (decorative) |
-| removable? | `boolean` | Standalone chip: shows a remove button that calls `onRemove` |
+| removable? | `boolean` | Standalone chip: shows a remove button that emits `remove` |
 | remove-label? | `string` | Accessible name of the remove button (default: "Remove <label>") |
 | size? | `ChipSize` | Standalone chip: size |
 | classes? | `RecipeClasses<typeof chipGroupRecipe> & RecipeClasses<typeof chipRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipes chipGroup and chip) |
@@ -1044,10 +1088,10 @@ Filter chips: one or several options as toggle buttons
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string[]` |  |
+| v-model? (modelValue) | `string[]` | Selected values – use with v-model |
 | default-value? | `string[]` |  |
 | multiple? | `boolean` | Allow several selected chips (default) or only one |
-| label? | `string` | Accessible name of the group |
+| label? | `string` | Accessible name of the group – inside a Field with a label, the Field's label names it |
 | disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof chipGroupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -1077,7 +1121,7 @@ Code block with syntax colours; the scroll area is focusable, the copy button co
 | header? | `boolean` | The header with title, language and buttons (default true) |
 | max-height? | `string` | Height limit (CSS length); longer code scrolls – or, with `expandable`, opens with "Show all code" |
 | expandable? | `boolean` | With `maxHeight`: the code is cut off there and a button shows all of it |
-| wrap? | `boolean` | Long lines wrap instead of scrolling (controlled) |
+| v-model:wrap? | `boolean` | Long lines wrap instead of scrolling – use with v-model:wrap |
 | wrap-toggle? | `boolean` | A button in the header switches line wrapping |
 | diff? | `boolean` | Marks lines starting with "+" as added and "-" as removed (e.g. a patch) |
 | added-lines? | `readonly number[]` | Added lines (1-based) – shown with "+" in front |
@@ -1102,7 +1146,7 @@ Several files: tabs with the file names (and an icon by type) above the shown co
 | Prop | Type | Description |
 | --- | --- | --- |
 | files | `readonly CodeFile[]` |  |
-| v-model? (modelValue) | `string` | Name of the shown file (controlled) |
+| v-model? (modelValue) | `string` | Name of the shown file – use with v-model |
 | default-value? | `string` |  |
 | label? | `string` | Accessible name of the tabs (default "Files") |
 | line-numbers? | `boolean` |  |
@@ -1145,7 +1189,7 @@ Colour field: type a colour (hex, rgb(), hsl(), oklch()) or open the picker with
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | Colour as text in `format` (controlled) |
+| v-model? (modelValue) | `string` | Colour as text in `format` – use with v-model |
 | default-value? | `string` |  |
 | format? | `ColorFormat` | Format of the value and the field: hex (default), rgb, hsl, hsb or oklch; typing accepts all of them |
 | alpha? | `boolean` | Adds an opacity slider |
@@ -1153,7 +1197,11 @@ Colour field: type a colour (hex, rgb(), hsl(), oklch()) or open the picker with
 | with-picker? | `boolean` | Area and sliders in the popup (default true); false: only the `swatches` |
 | eye-dropper? | `boolean` | Button to pick a colour from the screen (where supported) |
 | channel-inputs? | `boolean` | Number fields for the channels in the popup |
+| placeholder? | `string` |  |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
+| name? | `string` | Name of the field for form submission (its text) |
 | classes? | `RecipeClasses<typeof colorPickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1171,7 +1219,7 @@ Colour field: the button opens a panel with area, hue (and opacity) slider, hex
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | Colour, e.g. "#1e66f5" ("#1e66f580" with alpha; in `format`) |
+| v-model? (modelValue) | `string` | Colour, e.g. "#1e66f5" ("#1e66f580" with alpha; in `format`) – use with v-model |
 | default-value? | `string` |  |
 | alpha? | `boolean` | Adds an opacity slider; the value then has 8 hex digits |
 | swatches? | `readonly string[]` | Preset colours shown below the picker |
@@ -1183,8 +1231,7 @@ Colour field: the button opens a panel with area, hue (and opacity) slider, hex
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field (the button), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof colorPickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1205,7 +1252,7 @@ Colours as a radio group (arrow keys): every swatch is named by its colour name,
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly ColorSwatch[]` | The colours to choose from |
-| v-model? (modelValue) | `string \| null` | Chosen colour (its value, controlled) |
+| v-model? (modelValue) | `string \| null` | Chosen colour (its value) – use with v-model |
 | default-value? | `string \| null` |  |
 | label? | `string` | Visible label of the group (default "Color"; or aria-label) |
 | show-labels? | `boolean` | Shows the names below the swatches (otherwise only for screen readers) |
@@ -1233,12 +1280,15 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | 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` | Chosen value; any type (string, number, boolean, object) |
+| v-model? (modelValue) | `V \| null` | Chosen value – use with v-model; any type (string, number, boolean, object) |
 | default-value? | `V \| null` |  |
-| filter? | `boolean` | Filters the items by the typed text (ignores case and accents) |
-| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| filter? | `boolean` | Filters the items by the typed text (label and itemKeywords; ignores case and accents) |
+| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to filterChange |
 | allow-custom-value? | `boolean` | Typed text that matches no item becomes the value (a string) on Enter or when leaving the field – an editable select |
 | empty-text? | `string` | Shown when nothing matches |
+| placeholder? | `string` |  |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
@@ -1246,15 +1296,17 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | item-label? | `ItemAccessor<T, string>` | Label of an item: property name or function (default: `label`) |
 | item-disabled? | `ItemAccessor<T, boolean>` | Disabled state of an item: property name or function (default: `disabled`) |
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of an item: property name or function (default: `group`); items are listed per group |
+| item-keywords? | `ItemAccessor<T, string \| readonly string[] \| null \| undefined>` | More text the search finds an item by, besides its label: property name or function, one text or a list (default: `keywords`), e.g. the name of the item's category |
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | clearable? | `boolean` | Button that clears value and text (default true; not a tab stop – the text can be deleted, too) |
 | loading? | `boolean` | Shows a spinner in the field and "Loading" in the list (aria-busy) |
 | loading-text? | `string` | Text of the loading row in the list |
 | size? | `SelectSize` | Height of the field: 32, 40 (default) or 48 px |
-| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<T>` | Loads the options for the typed text (after a typing pause, outdated answers dropped; pages while scrolling); `getItemsByKeys` gives the label of a chosen value that is not loaded |
 | min-search-length? | `number` | Fewest characters typed before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1279,17 +1331,17 @@ Dialog with a search field (combobox) and the matching items (listbox): typing f
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly CommandItem[]` |  |
-| open? | `boolean` |  |
-| data-source? | `DataSource<CommandItem>` | Results from a server: asked with the search text after a typing pause (outdated answers dropped); they come after the matching `items` |
-| min-search-length? | `number` | Fewest characters the search needs before the data source is asked (default 0) |
+| v-model:open? | `boolean` | Open state – use with v-model:open |
 | hotkey? | `boolean \| string \| string[]` | Opens with Strg+K / ⌘K anywhere on the page – or with own shortcuts: "mod+p", ["mod+k", "/"] (mod is Strg or ⌘; shortcuts without Strg/⌘/Alt do not fire while typing in a field). `false` switches it off |
 | placeholder? | `string` |  |
 | limit? | `number` | At most this many results |
-| filter? | `((item: CommandItem, query: string) => number \| boolean) \| false` | Own matching: a score per item (higher first, `false`/0 hides it) – or `false` to show the items as they are (results from the server, see `onSearch`) |
+| filter? | `((item: CommandItem, query: string) => number \| boolean) \| false` | Own matching: a score per item (higher first, `false`/0 hides it) – or `false` to show the items as they are (results from the server, see `search`) |
 | highlight? | `boolean` | Marks the searched text in the labels |
 | clear-query-on-close? | `boolean` | Starts with an empty search field every time it opens |
 | close-on-select? | `boolean` | Closes after running an item |
-| loading? | `boolean` | Results are being loaded (e.g. after `onSearch`) |
+| loading? | `boolean` | Results are being loaded (e.g. after `search`) |
+| data-source? | `DataSource<CommandItem>` | Results from a server: asked with the search text after a typing pause (outdated answers dropped); they come after the matching `items` |
+| min-search-length? | `number` | Fewest characters the search needs before the data source is asked (default 0) |
 | empty-text? | `string` | Text when nothing matches |
 | classes? | `RecipeClasses<typeof commandPaletteRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -1317,7 +1369,7 @@ Two images on top of each other; the range input over them moves the line (drag,
 | label? | `string` | Accessible name of the slider |
 | before-label? | `string` |  |
 | after-label? | `string` |  |
-| v-model? (modelValue) | `number` | Share of the before image in percent |
+| v-model? (modelValue) | `number` | Share of the before image in percent – use with v-model |
 | default-value? | `number` |  |
 | aspect-ratio? | `string` | Aspect ratio of the area (CSS) |
 | classes? | `RecipeClasses<typeof compareRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -1338,6 +1390,22 @@ Bars and lines in one chart (series[].type), e.g. revenue as bars and margin as
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| data | `readonly ChartRow[]` | The rows: one object per category with a value per series |
+| category-key | `string` | Property of each row with the category (x axis) |
+| series | `readonly ChartSeries[]` | The series: key of the value, label, colour, axis, stack … |
+| title | `string` | Title of the chart, also its accessible name |
+| hide-title? | `boolean` | Keep the title for screen readers only |
+| height? | `string` | Height of the chart area (CSS length, default 18rem) |
+| table? | `boolean` | The data as a table below the chart (opens on demand) – the text alternative (default true) |
+| format-value? | `(value: number) => string` | Formats values in the axis, tooltips, legend and table (default: numbers in the locale) |
+| references? | `readonly ChartReference[]` | Reference lines (`value`) and areas (`from`–`to`), on the value axis or with `axis: 'x'` on the categories |
+| scale? | `'linear' \| 'logarithmic'` | Logarithmic value axis |
+| legend? | `boolean` | Legend (default: with more than one series) |
+| brush? | `boolean` | A small overview below with a range to zoom into (keyboard: the slider's arrow keys) |
+| v-model:range? | `[number, number]` | Shown rows with `brush` (inclusive indexes) – use with v-model:range |
+| default-range? | `[number, number]` |  |
+| options? | `Record<string, unknown>` | Chart.js options – merged over the WireLayer defaults |
+| classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe chart) |
 | curved? | `boolean` | Curved lines |
 | stacked? | `boolean` | Stack the bars |
 
@@ -1357,9 +1425,9 @@ Nested and/or groups of rules: field, operator and a value editor matching the f
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| fields | `readonly ConditionField[]` | Fields the rules can test: id, label, type (text, number, date, select, boolean), options of a select |
-| v-model? (modelValue) | `ConditionGroup` | The condition tree (JSON: groups with combinator and children, rules with field, operator, value) – controlled |
+| v-model? (modelValue) | `ConditionGroup` | The condition tree (JSON: groups with combinator and children, rules with field, operator, value) – v-model |
 | default-value? | `ConditionGroup` |  |
+| fields | `readonly ConditionField[]` | Fields the rules can test: id, label, type (text, number, date, select, boolean), options of a select |
 | label? | `string` | Name of the whole tree (default "Conditions") |
 | max-depth? | `number` | How deep groups can be nested (default 3) |
 | disabled? | `boolean` |  |
@@ -1403,6 +1471,8 @@ Place once in the app; ask with `await confirm({ title, … })` or `await prompt
 | Prop | Type | Description |
 | --- | --- | --- |
 | close-label? | `string` | Accessible name of the close button |
+| confirm-button? | `ConfirmButtonOptions` | Look of the confirm button in every request (default: size sm, `primary`, `danger` for status danger) |
+| cancel-button? | `ConfirmButtonOptions` | Look of the cancel button in every request (default: size sm, `outline`) |
 | classes? | `RecipeClasses<typeof dialogRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -1441,7 +1511,7 @@ Centred content with a maximum width and side padding
 | --- | --- | --- |
 | size? | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Maximum width: sm (42rem), md (48rem), lg (64rem, default), xl (80rem) or full |
 | flush? | `boolean` | Without the side padding |
-| as? | `Component \| string` | Element to render, e.g. "section" (default div) |
+| as? | `string \| Component` | Element to render, e.g. "section" (default div) |
 | classes? | `RecipeClasses<typeof containerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -1458,6 +1528,7 @@ Opens at the pointer on right click, on touch screens with a long press (and wit
 | --- | --- | --- |
 | 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> |
 | classes? | `RecipeClasses<typeof menuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1481,11 +1552,10 @@ Copies the value; the icon turns into a check and "Copied to clipboard" is annou
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` | Text that is copied |
+| value | `string` | Text that is copied |
 | show-value? | `boolean` | Shows the value next to the button (monospace) |
 | label? | `string` | Accessible name, e.g. "Copy IP address" |
 | size? | `Size` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof copyButtonRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -1557,7 +1627,7 @@ One term and its value in a DataList
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| label | `string` | The term (<dt>); the children are its value (<dd>) |
+| label | `string` | The term (<dt>); the slot is its value (<dd>) |
 | classes? | `RecipeClasses<typeof dataListRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -1572,81 +1642,88 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| data? | `readonly TData[]` | The rows (with `dataSource` the table loads them itself) |
-| data-source? | `DataTableDataSource<TData>` | Rows from a server instead of `data` and `manual`: the table asks `getRows` (page, sorting, filters, search, grouping, abort signal) whenever they change, cancels outdated requests, goes back to page 1 when filters, sorting or the search change, shows errors with "Try again" – `refresh()` asks again |
+| data? | `readonly T[]` | The rows (with `dataSource` the table loads them itself) |
+| data-source? | `DataTableDataSource<T>` | Rows from a server instead of `data` and `manual`: the table asks `getRows` (page, sorting, filters, search, grouping, abort signal) whenever they change, cancels outdated requests, goes back to page 1 when filters, sorting or the search change, shows errors with "Try again" – `refresh()` asks again |
 | cache-time? | `number` | How long answers of `dataSource` are reused for the same query, in ms (default 0: always ask) |
 | search-debounce? | `number` | Pause after typing in the search before `dataSource` is asked, in ms (default 300) |
 | pivot? | `DataTablePivot` | Cross table of `data`: rows grouped by the values of `rows`, a column per value combination of `columns`, the `values` aggregated in the cells, totals per row and column (ids are column ids of `columns`) |
-| columns | `readonly DataTableColumn<TData>[]` |  |
+| columns | `readonly DataTableColumn<T>[]` |  |
 | caption | `string` | Accessible name of the table (visually hidden caption) |
-| get-row-id? | `(row: TData, index: number) => string` |  |
-| page-size? | `number` | Rows per page – enables pagination (changeable with `pageSizeOptions`) |
+| get-row-id? | `(row: T, index: number) => string` |  |
+| v-model:page-size? | `number` | Rows per page – enables pagination (v-model:page-size with `pageSizeOptions`) |
 | page-size-options? | `readonly number[]` | Choices for the rows per page, shown next to the pagination |
-| page? | `number` | Current page (1-based); controlled together with onPageChange |
-| first? | `number` | Index of the first row of the current page (0-based) – instead of `page`; controlled with onFirstChange |
+| v-model:page? | `number` | Current page (1-based) – use with v-model:page |
+| v-model:first? | `number` | Index of the first row of the current page (0-based) – instead of `page`, use with v-model:first |
 | paginator-position? | `'top' \| 'bottom'` | Pagination below (default) or above the table |
-| sorting? | `DataTableSort \| DataTableSort[] \| null` | Current sorting; controlled together with onSortingChange – an array in the multiple mode |
-| default-sorting? | `DataTableSort \| DataTableSort[] \| null` | Sorting at the start (uncontrolled) |
+| paginator-edges? | `boolean` | Buttons to the first and the last page in the pagination |
+| paginator-align? | `DataTablePaginatorAlign` | Pagination row: rows per page at the start, pages at the end (`between`, default) – or both together |
+| v-model:sorting? | `DataTableSort \| DataTableSort[] \| null` | Current sorting – use with v-model:sorting; an array in the multiple mode |
+| default-sorting? | `DataTableSort \| DataTableSort[] \| null` | Sorting at the start, without v-model |
 | sort-mode? | `'single' \| 'multiple'` | `multiple`: Shift+click (or the column menu) sorts by further columns |
 | manual? | `boolean` | Server mode: `data` is the current page, already sorted and filtered; requires `rowCount` |
 | row-count? | `number` |  |
-| selectable? | `boolean` | Selection column |
+| selectable? | `boolean` | Selection column – selected row ids via v-model:selection |
 | selection-mode? | `'multiple' \| 'single'` | `multiple` (checkboxes, default) or `single` (radio buttons) |
-| selection? | `string[]` |  |
+| v-model:selection? | `string[]` |  |
+| v-model:selected-rows? | `readonly T[]` | The selected rows as objects – use with v-model:selected-rows (instead of or next to `selection`); rows are found by `getRowId` |
 | select-on-row-click? | `boolean` | A click on the row (not on its controls) selects it; Shift+click selects a range |
-| is-row-selectable? | `(row: TData) => boolean` | Rows that cannot be selected get a disabled checkbox |
-| select-all-mode? | `'page' \| 'all'` | `all` with `manual`: "select all" means every row on every page – `allSelection` then holds `{ mode: 'all', except }` (the rows unchecked since); without `manual` all rows of `data` are selected |
-| all-selection? | `DataTableAllSelection \| null` | "Select all" across the pages of a server table (`selectAllMode="all"`); controlled with onAllSelectionChange |
-| row-label? | `(row: TData, index: number) => string` | Names a row for its controls ("Select <label>") |
+| is-row-selectable? | `(row: T) => boolean` | Rows that cannot be selected get a disabled checkbox |
+| select-all-mode? | `'page' \| 'all'` | `all` with `manual`: "select all" means every row on every page – v-model:all-selection then holds `{ mode: 'all', except }` (the rows unchecked since); without `manual` all rows of `data` are selected |
+| v-model:all-selection? | `DataTableAllSelection \| null` | "Select all" across the pages of a server table (`selectAllMode="all"`) – use with v-model:all-selection |
+| row-label? | `(row: T, index: number) => string` | Names a row for its controls ("Select <label>") |
 | loading? | `boolean` |  |
 | loading-variant? | `'overlay' \| 'skeleton'` | While loading: the table fades (`overlay`, default) or shows placeholder rows (`skeleton`) |
 | empty-text? | `string` |  |
 | no-results-text? | `string` | Shown when the filters or the search leave no row (default: `emptyText`) |
 | loading-text? | `string` |  |
 | select-all-label? | `string` |  |
-| get-sub-rows? | `(row: TData) => TData[] \| undefined` | TreeTable: child rows of a row – they appear indented below it and can be expanded |
+| get-sub-rows? | `(row: T) => T[] \| undefined` | TreeTable: child rows of a row – they appear indented below it and can be expanded |
 | tree-filter-mode? | `'lenient' \| 'strict'` | TreeTable filters: `strict` (default) – a row must match itself; `lenient` – a match in a child keeps its parents |
-| expanded? | `string[]` | Expanded rows (ids); controlled together with onExpandedChange – also the rows with open details |
+| v-model:expanded? | `string[]` | Expanded rows (ids) – use with v-model:expanded; also the rows with open details (#expansion) |
 | default-expanded? | `string[]` |  |
-| expand-label? | `(row: TData, index: number) => string` | Names the expand button of a row |
-| advanced-filter? | `boolean \| ConditionField[]` | Advanced filter: the rows pass a condition tree (nested and/or rules). `true` offers every column with a filter type; or pass the fields. A toolbar button opens the editor from `renderAdvancedFilter` above the table – usually `ConditionBuilder` from `@wirecore/wirelayer-blocks-react`; without it there is no button (the tree still filters). A server filters instead: `dataSource` gets the tree as `condition`, with `manual` the parent applies `advancedFilterValue` |
-| advanced-filter-value? | `ConditionGroup` | The condition tree of the advanced filter (controlled together with onAdvancedFilterValueChange) |
-| search? | `boolean` | Search field above the table: filters over all columns |
-| global-filter? | `string` |  |
+| expand-label? | `(row: T, index: number) => string` | Names the expand button of a row |
+| row-expandable? | `(row: T) => boolean` | Whether a row has details (#expansion) – rows without get no expand button (default: all rows) |
+| advanced-filter? | `boolean \| ConditionField[]` | Advanced filter: the rows pass a condition tree (nested and/or rules; v-model:advanced-filter-value). `true` offers every column with a filter type; or pass the fields. A toolbar button opens the editor from the `#advancedFilter` slot above the table – usually `ConditionBuilder` from `@wirecore/wirelayer-blocks-vue`; without it there is no button (the tree still filters). A server filters instead: `dataSource` gets the tree as `condition`, with `manual` the parent applies it |
+| v-model:advanced-filter-value? | `ConditionGroup` | The condition tree of the advanced filter (controlled together with onAdvancedFilterValueChange) |
+| search? | `boolean` | Search field above the table: filters over all columns (v-model:global-filter) |
+| v-model:global-filter? | `string` |  |
+| row-keywords? | `(row: T) => string \| readonly string[] \| null \| undefined` | More text the search finds a row by, besides its columns – e.g. fields without a column of their own (not in server mode: there the server searches) |
 | highlight-search? | `boolean` | Marks the search hits in the cells |
-| filters? | `Record<string, DataTableFilterValue>` | Column filters by column id; controlled together with onFiltersChange |
+| v-model:filters? | `Record<string, DataTableFilterValue>` | Column filters by column id – use with v-model:filters |
 | filter-display? | `'row' \| 'menu' \| 'none'` | Filters in a row below the headers, as a menu per column with match modes and conditions, or none |
-| show-filters? | `boolean` | Shows the filter row or menus (`filterToggle`); controlled with onShowFiltersChange – the filters keep working |
+| v-model:show-filters? | `boolean` | Shows the filter row or menus – use with v-model:show-filters (`filterToggle`); the filters keep working |
 | filter-toggle? | `boolean` | Button in the toolbar that shows and hides the filters |
+| filter-reset? | `boolean` | Button in the toolbar that clears the column filters, the search and the advanced filter (`resetFilters()`) |
 | max-constraints? | `number` | Conditions per column in the filter menu |
 | resizable? | `boolean` | Column widths can be changed by dragging the header edge or with the arrow keys |
-| column-toggle? | `boolean` | Menu above the table to show and hide columns |
-| hidden-columns? | `string[]` |  |
+| column-toggle? | `boolean` | Menu above the table to show and hide columns (v-model:hidden-columns) |
+| v-model:hidden-columns? | `string[]` |  |
 | column-menu? | `boolean` | Menu per column header: sort, pin, move, hide, group |
-| reorderable-columns? | `boolean` | Columns can be moved by drag and drop or the column menu |
-| column-order? | `string[]` |  |
-| pinned-columns? | `{ start: string[]; end: string[] }` | Pinned columns (default: `pinned` of the columns) |
+| reorderable-columns? | `boolean` | Columns can be moved by drag and drop or the column menu (v-model:column-order) |
+| v-model:column-order? | `string[]` |  |
+| v-model:pinned-columns? | `{ start: string[]; end: string[] }` | Pinned columns – use with v-model:pinned-columns (default: `pinned` of the columns) |
 | export-filename? | `string` | Shows an export button; the CSV has the filtered and sorted rows of all pages (or the selection) |
 | csv-separator? | `string` | Separator of the CSV export, also of the export button – default: from the locale (";" where numbers have a decimal comma, e.g. de-DE, as a spreadsheet there expects it; "," otherwise) |
 | export-formats? | `('csv' \| 'xlsx')[]` | Formats of the export button: CSV (default), Excel (.xlsx) or both |
-| group-by? | `string \| string[]` | Groups the rows by the values of these columns (expandable group rows) |
+| v-model:group-by? | `string \| string[]` | Groups the rows by the values of these columns (expandable group rows) – v-model:group-by |
 | frozen-rows? | `readonly string[]` | Rows (ids) that stay at the top, also while scrolling and paging |
-| reorderable-rows? | `boolean` | Rows can be moved with the drag handle (mouse or arrow keys) |
+| reorderable-rows? | `boolean` | Rows can be moved with the drag handle (mouse or arrow keys) – reported via row-reorder |
 | row-numbers? | `boolean` | Column with the row number |
-| row-actions? | `MenuEntry[] \| ((row: TData) => MenuEntry[])` | Menu per row (last column) |
+| row-actions? | `MenuEntry[] \| ((row: T) => MenuEntry[])` | Menu per row (last column) – reported via row-action |
 | context-menu? | `boolean` | The row actions also open on right click (and Shift+F10) |
-| row-class? | `(row: TData) => string \| undefined` | Extra classes of a row |
-| row-href? | `(row: TData) => string \| undefined` | Rows as links: the first cell holds a real link (Ctrl+click and middle click open a new tab), a click anywhere on the row follows it – `onRowClick` can take over the navigation (router) |
+| row-class? | `(row: T) => string \| undefined` | Extra classes of a row |
+| row-href? | `(row: T) => string \| undefined` | Rows as links: the first cell holds a real link (Ctrl+click and middle click open a new tab), a click anywhere on the row follows it – `row-click` can take over the navigation (router) |
 | navigation? | `'tab' \| 'grid'` | `grid`: keyboard like a spreadsheet (ARIA grid) – one Tab stop, arrow keys from cell to cell, Home/End, Ctrl+Home/End, Page Up/Down, Enter/F2 into a cell or edit it, Escape back, Space selects the row |
 | status-bar? | `boolean` | Bar below the table: rows, filtered and selected rows, sum and average of the selected numbers |
 | cell-selection? | `boolean` | Cells can be selected as a range: drag with the mouse, Shift+click, Shift+arrow keys (`navigation="grid"`). Ctrl+C copies the range (or the selected rows) as tab-separated text, Ctrl+V pastes text from Excel into editable cells from the active cell on (a single value fills the range), Ctrl+Z/Ctrl+Y undo and redo |
 | find? | `boolean` | Button "Find in table": finds text in the cells, match x of y, previous/next, marks the matches |
 | wrap-headers? | `boolean` | Long header texts wrap instead of being shortened |
 | vertical-headers? | `boolean` | Header texts read from bottom to top (narrow columns) |
-| edit-mode? | `'cell' \| 'row' \| 'batch'` | `cell`: one cell at a time (Tab moves on); `row`: a whole row with save and cancel; `batch`: like `cell`, but the changes are collected (marked) until "Save" (`onSave`) or "Discard", with undo and redo |
-| size? | `Density` | Row height (`densityToggle`) |
+| edit-mode? | `'cell' \| 'row' \| 'batch'` | `cell`: one cell at a time (Tab moves on); `row`: a whole row with save and cancel; `batch`: like `cell`, but the changes are collected (marked) until "Save" (`save`) or "Discard", with undo and redo |
+| v-model:size? | `'sm' \| 'md' \| 'lg'` | Row height – use with v-model:size (`densityToggle`) |
 | density-toggle? | `boolean` | Menu above the table to change the row height |
 | gridlines? | `boolean` | Lines between the columns |
+| bordered? | `boolean` | A border around the whole table |
 | striped? | `boolean` | Every other row tinted |
 | fullscreen-toggle? | `boolean` | Button above the table to show it on the whole screen |
 | scroll-height? | `string` | Fixed height (CSS length): the table scrolls inside, header and footer stay visible |
@@ -1655,6 +1732,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | row-height? | `number` | Estimated row height in px for `virtual` |
 | state-key? | `string` | Keeps sorting, filters, page, widths, order and the other settings in the browser under this key |
 | state-storage? | `'local' \| 'session'` |  |
+| state-exclude? | `readonly DataTableStateKey[]` | Parts of the state that `stateKey` does not keep – default: the selection (`[]` keeps it, too) |
 | classes? | `RecipeClasses<typeof dataTableRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1664,6 +1742,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:show-filters | `show: boolean` |  |
 | v-model:all-selection | `selection: DataTableAllSelection \| null` |  |
 | @selected-rows-change | `rows: TData[]` | The selected rows as objects (with `selection`; rows of other pages are remembered) |
+| v-model:selected-rows | `rows: TData[]` |  |
 | @row-click | `click: DataTableRowClick<TData>` | A click on a row (not on its controls) – with `rowHref`, `event.preventDefault()` stops the navigation |
 | v-model:page-size | `pageSize: number` |  |
 | v-model:sorting | `sorting: DataTableSort \| DataTableSort[] \| null` |  |
@@ -1692,6 +1771,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | #cell-<id> | `{ row: TData; value: unknown }` | Content of a cell, by column id |
 | #filter-<id> | `DataTableFilterInputProps<TData>` | Own filter input of a column (filter row and filter menu), by column id |
 | #editor-<id> | `DataTableEditorProps<TData>` | Own editor of a column, by column id |
+| #option-<id> | `{ item: unknown; selected: boolean; highlighted: boolean; disabled: boolean; }` | An option in the select filter and editor lists of a column, by column id – e.g. a status as a badge |
 | #expansion | `{ row: TData; rowId: string }` | Details below an expanded row – adds the expand column |
 | #advancedFilter | `DataTableAdvancedFilterProps` | The editor of the advanced filter, e.g. ConditionBuilder from `@wirecore/wirelayer-blocks-vue`: `<template #advancedFilter="{ fields, value, setValue, label }">` |
 | #toolbar | – | Own controls in the toolbar, after the search |
@@ -1713,12 +1793,12 @@ Items as a list or grid (a list either way); the switch is a radio group "View"
 | --- | --- | --- |
 | items? | `readonly T[]` |  |
 | label | `string` | Accessible name of the list, e.g. "Server" |
-| layout? | `'list' \| 'grid'` |  |
+| v-model:layout? | `'list' \| 'grid'` | List or grid – use with v-model:layout |
 | default-layout? | `'list' \| 'grid'` |  |
 | layout-toggle? | `boolean` | Switch between list and grid above the items |
-| page-size? | `number` | Items per page – enables pagination (onPageSizeChange with `pageSizes`) |
+| v-model:page-size? | `number` | Items per page – enables pagination (v-model:page-size with `pageSizes`) |
 | page-sizes? | `readonly number[]` | Page sizes to choose from below the items |
-| page? | `number` | Current page, 1-based |
+| v-model:page? | `number` | Current page, 1-based – use with v-model:page |
 | default-page? | `number` |  |
 | manual? | `boolean` | The items are the current page only (server); `totalCount` is the number of all items |
 | total-count? | `number` | Number of all items (`manual`) |
@@ -1726,13 +1806,12 @@ Items as a list or grid (a list either way); the switch is a radio group "View"
 | query? | `Omit<DataQuery, 'page' \| 'pageSize' \| 'cursor'>` | Sorting, filters and search for the data source (e.g. from the toolbar); a change starts at page 1 |
 | load-mode? | `'pages' \| 'infinite'` | `pages` (default): pagination below the items; `infinite`: the list grows with "Load more" |
 | auto-load? | `boolean` | `infinite`: loads the next page when the end of the list scrolls into view (the button stays as fallback) |
-| has-more? | `boolean` | More items can be loaded (`infinite` without a data source): the button calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded (`infinite` without a data source): the button emits loadMore |
 | loading? | `boolean` | Placeholder items while there are none yet, "Loading" on the button otherwise (aria-busy) |
 | skeleton-count? | `number` | Placeholder items while loading (default: the page size, at most 6) |
-| filtered? | `boolean` | The items are filtered: shows the no-results text (`noResults`) instead of the empty text |
-| error? | `unknown` | An error to show instead of the items (`renderError`); a data source sets it itself |
+| filtered? | `boolean` | The items are filtered: shows the no-results text (slot `noResults`) instead of the empty text |
+| error? | `unknown` | An error to show instead of the items (slot `error`); a data source sets it itself |
 | empty-text? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof dataViewRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1761,10 +1840,10 @@ Date field: type the digits one after another (the separators come from the loca
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | ISO date, e.g. "2026-10-20", with time "2026-10-20T14:30". Date objects and ISO strings with offset are accepted too; with selectionMode "multiple" a list of dates |
+| v-model? (modelValue) | `T` | ISO date, e.g. "2026-10-20", with time "2026-10-20T14:30" – use with v-model. Date objects and ISO strings with offset are accepted too; with selectionMode "multiple" a list of dates |
 | default-value? | `T` |  |
 | selection-mode? | `'single' \| 'multiple'` | One date or several dates (the field lists them, the calendar toggles days) |
-| value-type? | `DateValueType` | What onValueChange gets: ISO strings (default) or Date objects |
+| value-type? | `DateValueType` | What v-model gets: ISO strings (default) or Date objects |
 | with-time? | `boolean` | Adds hour and minute to the field |
 | min? | `DateLike` | Earliest selectable date (ISO or Date) |
 | max? | `DateLike` | Latest selectable date (ISO or Date) |
@@ -1776,6 +1855,7 @@ Date field: type the digits one after another (the separators come from the loca
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
 | show-button-bar? | `boolean` | "Today" and "Clear" below the calendar |
@@ -1789,9 +1869,7 @@ Date field: type the digits one after another (the separators come from the loca
 | time-zone? | `string` | IANA zone ("Europe/Berlin") of a date with time: shown and typed in the zone, the value gets its offset |
 | show-time-zone? | `boolean` | Short zone name after the time ("CEST") |
 | responsive? | `boolean` | On narrow screens the calendar opens as a sheet at the bottom |
-| render-day? | `RenderDay` | Content of a day in the calendar instead of its number, e.g. a dot for appointments |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1812,9 +1890,9 @@ Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar picks sta
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T \| null` | Start and end; Date objects and ISO strings with offset are accepted too |
+| v-model? (modelValue) | `T \| null` | Start and end – use with v-model; Date objects and ISO strings with offset are accepted too |
 | default-value? | `T \| null` |  |
-| value-type? | `DateValueType` | What onValueChange gets: ISO strings (default) or Date objects |
+| value-type? | `DateValueType` | What v-model gets: ISO strings (default) or Date objects |
 | with-time? | `boolean` | Adds hour and minute to both dates |
 | min? | `DateLike` | Earliest selectable date (ISO or Date) |
 | max? | `DateLike` | Latest selectable date (ISO or Date) |
@@ -1826,6 +1904,7 @@ Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar picks sta
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` | Sent as name[0] and name[1] |
+| placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | presets? | `(string \| { label: string; value: DateRangeLike })[]` | Buttons below the calendar: presets ("last7Days", "thisMonth", "thisQuarter", "last3Months", "last12Months", "last3Years" …) or own { label, value } ranges |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
@@ -1839,9 +1918,7 @@ Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar picks sta
 | time-zone? | `string` | IANA zone ("Europe/Berlin") with withTime: shown and typed in the zone, the values get its offset |
 | show-time-zone? | `boolean` | Short zone name after the times ("CEST") |
 | responsive? | `boolean` | On narrow screens the calendar opens as a sheet at the bottom |
-| render-day? | `RenderDay` | Content of a day in the calendar instead of its number |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1869,7 +1946,7 @@ Terms and values (<dl>) in columns, with an optional title and actions; values c
 | columns? | `ResponsiveColumns` | Columns: a number or per breakpoint (default { base: 1, sm: 2, lg: 3 }) |
 | orientation? | `'vertical' \| 'horizontal'` | Label above its value (vertical, default) or beside it |
 | bordered? | `boolean` | Table look with lines between the cells |
-| editing? | `boolean` | Edit mode: the values give way to `renderEdit` (inputs labelled by the term via `labelId`) |
+| editing? | `boolean` | Edit mode: the values give way to the `edit-<id>` slots (inputs labelled by the term via `labelId`) |
 | classes? | `RecipeClasses<typeof descriptionsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Slot | Slot props | Description |
@@ -1886,7 +1963,7 @@ Ark handles focus trap, aria-modal, Escape, scroll lock and returning focus to t
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | default-open? | `boolean` |  |
 | role? | `'dialog' \| 'alertdialog'` | "alertdialog" for confirmations that interrupt the user |
 | modal? | `boolean` | `false`: non-modal – no backdrop, no focus trap, no scroll lock; the page stays usable next to the dialog (role="dialog" with aria-modal="false") |
@@ -1919,14 +1996,15 @@ The modal window of a Dialog: title, description, focus trap, Escape closes
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
+| hide-title? | `boolean` | The title only for screen readers – it still names the dialog (e.g. a video in a dialog) |
 | description? | `string` |  |
 | icon? | `Component` | Icon component in the coloured box at the top |
 | status? | `DialogStatus` |  |
-| size? | `OverlaySize` | Maximum width: sm 320px, md 400px (default), lg 560px, xl 800px, full (screen width minus the margin) |
+| size? | `OverlaySize` | Maximum width: sm 320px (20rem), md 400px (25rem, default), lg 560px (35rem), xl 800px (50rem), full (screen width minus the margin). Another width: leave out `size` and set the CSS variable, e.g. style="--wc-dialog-w: 36rem" |
 | position? | `DialogPosition` | Where the dialog sits: centred (default), at the top/bottom or the start/end edge |
 | fullscreen? | `boolean` | Covers the whole screen |
 | maximizable? | `boolean` | Button in the header that switches between the normal size and the whole screen |
-| maximized? | `boolean` | Maximized state of a maximizable dialog (controlled) |
+| v-model:maximized? | `boolean` | Maximized state of a maximizable dialog – use with v-model:maximized |
 | default-maximized? | `boolean` |  |
 | draggable? | `boolean` | Moved by dragging the header; the keyboard moves it with Alt + arrow keys (Shift: larger steps) |
 | closable? | `boolean` | Shows the close button in the header |
@@ -1935,7 +2013,6 @@ The modal window of a Dialog: title, description, focus trap, Escape closes
 | close-label? | `string` | Accessible name of the close button |
 | maximize-label? | `string` | Accessible names of the maximize button: maximize / restore |
 | restore-label? | `string` |  |
-| footer? | `ReactNode` | Action buttons at the bottom |
 | portal-target? | `HTMLElement \| null` | Element the dialog is rendered into (default: the page body) – e.g. an element in full-screen mode |
 | classes? | `RecipeClasses<typeof dialogRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -1943,6 +2020,10 @@ The modal window of a Dialog: title, description, focus trap, Escape closes
 | --- | --- | --- |
 | v-model:maximized | `maximized: boolean` |  |
 
+| Slot | Slot props | Description |
+| --- | --- | --- |
+| #default | – | The content below the title |
+| #footer | – | Buttons at the bottom, e.g. Cancel and Save (right-aligned) |
 
 ### DialogHost
 
@@ -1981,6 +2062,7 @@ Horizontal or vertical line, optionally with a label
 | orientation? | `DividerOrientation` |  |
 | line-style? | `'solid' \| 'dashed' \| 'dotted'` | Line style: `solid` (default), `dashed` or `dotted` |
 | label-position? | `'start' \| 'center' \| 'end'` | Where the label sits: at the `start`, in the `center` (default) or at the `end` |
+| label? | `string` | Text in the middle, e.g. "or" – read as normal text, the lines are decorative (also via #label) |
 | classes? | `RecipeClasses<typeof dividerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Slot | Slot props | Description |
@@ -2002,6 +2084,10 @@ Button that saves text, a Blob or a fetched file; busy (aria-busy) while the dat
 | url? | `string` | Address to fetch and save instead of `data` (same origin or CORS) |
 | file-name | `string` | File name, e.g. "bericht.csv" |
 | mime-type? | `string` | MIME type of text data (default text/plain; a Blob keeps its own type) |
+| variant? | `ButtonVariant` |  |
+| color? | `ButtonColor` |  |
+| size? | `ButtonSize` |  |
+| disabled? | `boolean` |  |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -2022,7 +2108,7 @@ Modal panel at the edge of the screen – a dialog: focus trap, Escape, scroll l
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | default-open? | `boolean` |  |
 | modal? | `boolean` | `false`: non-modal – no backdrop, no focus trap, the page stays usable next to the panel |
 | close-on-escape? | `boolean` | Escape closes the drawer |
@@ -2054,15 +2140,19 @@ The panel of a Drawer, sliding in from a side; title, focus trap, Escape closes
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
+| hide-title? | `boolean` | The title only for screen readers – it still names the drawer (e.g. a video in a dialog) |
 | description? | `string` |  |
 | placement? | `DrawerPlacement` |  |
 | size? | `OverlaySize` | Width (left/right: sm 320px, md 420px, lg 560px, xl 720px) or height (top/bottom: 30–85 % of the screen); `full` covers the whole screen. Without it 420px wide or as high as the content |
 | offset? | `boolean` | Floats with a gap to the screen edge and rounded corners |
 | closable? | `boolean` | Shows the close button in the header |
 | close-label? | `string` | Accessible name of the close button |
-| footer? | `ReactNode` | Action buttons at the bottom |
 | classes? | `RecipeClasses<typeof drawerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
+| Slot | Slot props | Description |
+| --- | --- | --- |
+| #default | – | The content below the title (scrolls) |
+| #footer | – | Buttons at the bottom, e.g. Cancel and Save |
 
 ### DrawerTrigger
 
@@ -2083,9 +2173,9 @@ Duration field: hours and minutes (optional days and seconds) as spin buttons
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number \| string \| null` | Total minutes (default), total seconds or ISO 8601 ("PT2H30M") – see valueType |
+| v-model? (modelValue) | `number \| string \| null` | Total minutes (default), total seconds or ISO 8601 ("PT2H30M") – see valueType; use with v-model |
 | default-value? | `number \| string \| null` |  |
-| value-type? | `DurationValueType` | What onValueChange gets: total minutes, total seconds or an ISO 8601 duration |
+| value-type? | `DurationValueType` | What v-model gets: total minutes, total seconds or an ISO 8601 duration |
 | with-days? | `boolean` | Adds days before the hours (the hours then stop at 23) |
 | with-seconds? | `boolean` | Adds seconds after the minutes |
 | max-hours? | `number` | Highest number of hours (default 999, with days 23) |
@@ -2097,8 +2187,7 @@ Duration field: hours and minutes (optional days and seconds) as spin buttons
 | name? | `string` |  |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field (the group of parts); a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the field (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -2116,7 +2205,7 @@ Rich-text editor (Tiptap): a toolbar (role="toolbar", one tab stop, arrow keys i
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | HTML; an empty editor gives '' |
+| v-model? (modelValue) | `string` | HTML – use with v-model; an empty editor gives '' |
 | default-value? | `string` |  |
 | toolbar? | `(EditorTool \| '\|')[]` | Toolbar buttons in order, '\|' for a separator |
 | disabled? | `boolean` |  |
@@ -2131,8 +2220,6 @@ Rich-text editor (Tiptap): a toolbar (role="toolbar", one tab stop, arrow keys i
 | floating-menu? | `boolean \| EditorTool[]` | Menu in an empty line – true for the default tools or a list of tools; Alt+F10 moves into it |
 | table-of-contents? | `boolean` | The headings as links above the text |
 | mentions? | `(query: string) => EditorMention[] \| Promise<EditorMention[]>` | Suggestions after "@" (people, documents …) – inserted as a mention |
-| aria-label? | `string` | Accessible name without a Field |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof editorRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -2177,14 +2264,17 @@ Placeholder for an empty list, table or search result, with the next step as act
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
-| description? | `ReactNode` | Text below the title |
+| description? | `string` | Text below the title (also via #description) |
 | icon? | `Component` | Icon component above the title |
 | variant? | `'plain' \| 'dashed'` |  |
 | size? | `'sm' \| 'md'` |  |
 | heading-level? | `2 \| 3 \| 4 \| 5 \| 6` | Renders the title as a heading of this level – without it the title is a paragraph |
-| actions? | `ReactNode` | Buttons or links for the next step |
 | classes? | `RecipeClasses<typeof emptyStateRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
+| Slot | Slot props | Description |
+| --- | --- | --- |
+| #description | – | Own description, e.g. with a link (instead of `description`) |
+| #actions | – | Buttons below the text, e.g. "Create the first entry" |
 
 ### Field
 
@@ -2197,18 +2287,27 @@ Label, helper text and error for one input – connects them by ids (aria-descri
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| label? | `string` | Label of the control – or the `label` slot |
+| helper-text? | `string` | Description below the control – or the `helper-text` slot (e.g. with a link) |
+| error? | `string` | Error message – also marks the field as invalid; or the `error` slot |
 | invalid? | `boolean` |  |
+| success? | `string` | Confirmation, e.g. "Username is available": shown with a check icon, part of the description; the control gets a green border. Ignored while the field is invalid; or the `success` slot |
 | required? | `boolean` |  |
 | optional? | `boolean` | Marks the field as optional: "(optional)" after the label |
 | optional-text? | `string` | Text after the label of an optional field (default "optional") |
 | disabled? | `boolean` |  |
 | read-only? | `boolean` |  |
+| label-help? | `string` | Explanation behind an (i) button next to the label (Toggletip: a click shows it and screen readers read it) – or the `label-help` slot |
 | classes? | `RecipeClasses<typeof fieldRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
 | #default | – |  |
+| #label | – | Own content of the label (instead of `label`) |
 | #label-help | – |  |
+| #helper-text | – | Own helper text, e.g. with a link or a button – part of the control's description (instead of `helperText`) |
+| #success | – | Own confirmation (instead of `success`) |
+| #error | – | Own error message (instead of `error`) – also marks the field as invalid |
 
 ### FieldArray
 
@@ -2235,9 +2334,8 @@ Label, helper text and error for one input – connects them by ids (aria-descri
 | invalid? | `boolean` |  |
 | disabled? | `boolean` | Disables every field inside (native fieldset – the legend's toggle stays usable) |
 | collapsible? | `boolean` | The legend becomes a button that shows/hides the fields (aria-expanded) |
-| open? | `boolean` | Open state of a collapsible fieldset (controlled, with onOpenChange) |
+| v-model:open? | `boolean` | Open state of a collapsible fieldset – use with v-model:open |
 | default-open? | `boolean` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof fieldsetRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -2269,6 +2367,8 @@ Drop files onto the zone or choose them with the button (the keyboard path). Acc
 | preview? | `boolean` | Thumbnails for images (object URLs, released again) |
 | fullscreen-drop? | `boolean` | Files can be dropped anywhere in the window |
 | paste? | `boolean` | Ctrl+V inside the component adds files from the clipboard |
+| v-model:files? | `File[]` | The chosen files – use with v-model:files to remove or replace files from outside (otherwise the component keeps them itself; `clear()` empties it) |
+| show-file-list? | `boolean` | The list of the chosen files below the drop zone – false when the app shows the files itself |
 | disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
@@ -2277,7 +2377,8 @@ Drop files onto the zone or choose them with the button (the keyboard path). Acc
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| @files-change | `files: File[]` |  |
+| @files-change | `files: File[]` | The chosen files changed (rejected files: `filesReject`) |
+| v-model:files | `files: File[]` |  |
 | @files-reject | `rejections: { file: File; errors: string[] }[]` | Files that were not taken, with the reasons as codes (FILE_INVALID_TYPE, FILE_TOO_LARGE, TOO_MANY_FILES …) |
 | @upload-complete | `file: File, state: UploadState` | A file finished uploading (or failed) |
 
@@ -2316,7 +2417,7 @@ Filter region above a list or table: a button with the number of active filters
 | --- | --- | --- |
 | filters? | `readonly FilterChip[]` | The active filters – shown as chips and counted on the button |
 | count? | `number` | Number on the button (default: the number of filters) |
-| open? | `boolean` | Form shown (controlled) |
+| v-model:open? | `boolean` | Form shown – use with v-model:open |
 | default-open? | `boolean` |  |
 | label? | `string` | Name of the region, the button and the drawer (default "Filter") |
 | display? | `'inline' \| 'drawer' \| 'auto'` | `inline` (default): the form folds open below the bar; `drawer`: it opens in a drawer; `auto`: a drawer on small screens (`drawerQuery`) |
@@ -2346,7 +2447,7 @@ Non-modal window (role="dialog", named by its title): drag the header, resize at
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` | Title in the header – also the name of the window |
-| open? | `boolean` | Open (controlled) |
+| v-model:open? | `boolean` | Open – use with v-model:open |
 | default-open? | `boolean` |  |
 | default-size? | `Size` | Size when it opens (default 360 × 280) |
 | default-position? | `Point` | Position when it opens (default: next to the trigger, else centred) |
@@ -2380,10 +2481,12 @@ A file or memory size: "1.2 MB"
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `number \| null \| undefined` | Size in bytes |
+| value | `number \| null \| undefined` | Size in bytes |
 | base? | `'decimal' \| 'binary'` | `decimal` (default): 1000 per step, "1.2 MB"; `binary`: 1024 per step, "1.2 MiB" |
 | maximum-fraction-digits? | `number` | Decimals (default 1) |
 | unit-display? | `'short' \| 'long'` | `short` (default) "MB", `long` "Megabyte" (decimal only) |
+| locale? | `string` |  |
+| classes? | `RecipeClasses<typeof formatValueRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### FormatDate
@@ -2398,9 +2501,11 @@ A date in the format of the locale, in a <time> with the machine-readable value
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `DateInput` | The date: Date, ISO text ("2026-10-21") or milliseconds |
+| value | `DateInput` | The date: Date, ISO text ("2026-10-21") or milliseconds |
 | format-options? | `Intl.DateTimeFormatOptions` | Intl format, e.g. { dateStyle: 'long' } or { weekday: 'long', day: 'numeric', month: 'long' } (default medium) |
 | time-zone? | `string` | Time zone to show the date in, e.g. "Europe/Berlin" (default: the browser's – pass one for server rendering) |
+| locale? | `string` |  |
+| classes? | `RecipeClasses<typeof formatValueRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### FormatDateTime
@@ -2414,7 +2519,11 @@ Date and time in the format of the locale, in a <time> with the machine-readable
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| value | `DateInput` | The point in time: Date, ISO text or milliseconds |
 | format-options? | `Intl.DateTimeFormatOptions` | Intl format, e.g. { dateStyle: 'full', timeStyle: 'short' } (default: medium date, short time) |
+| time-zone? | `string` | Time zone to show the time in, e.g. "Europe/Berlin" (default: the browser's – pass one for server rendering) |
+| locale? | `string` |  |
+| classes? | `RecipeClasses<typeof formatValueRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### FormatList
@@ -2432,6 +2541,8 @@ A list as a sentence: "Anna, Ben, and Clara"
 | items | `readonly string[]` |  |
 | type? | `'conjunction' \| 'disjunction' \| 'unit'` | `conjunction` (default) "A, B, and C", `disjunction` "A, B, or C", `unit` "A, B, C" |
 | format-style? | `'long' \| 'short' \| 'narrow'` | `long` (default), `short`, `narrow` |
+| locale? | `string` |  |
+| classes? | `RecipeClasses<typeof formatValueRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### FormatNumber
@@ -2455,12 +2566,14 @@ A list as a sentence: "Anna, Ben, and Clara"
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `DateInput` | The point in time: Date, ISO text or milliseconds |
+| value | `DateInput` | The point in time: Date, ISO text or milliseconds |
 | now? | `DateInput` | Reference time (default: now) – pass it for the same text on the server and in the browser |
 | live? | `boolean` | Updates the text as time passes (every 10 s, minute or hour, depending on the distance) |
 | numeric? | `'auto' \| 'always'` | `auto` (default): "yesterday", "tomorrow"; `always`: "1 day ago" |
 | format-style? | `'long' \| 'short' \| 'narrow'` | `long` (default) "3 minutes ago", `short` "3 min. ago", `narrow` |
 | show-title? | `boolean` | The exact date and time as the title (tooltip) – default true |
+| locale? | `string` |  |
+| classes? | `RecipeClasses<typeof formatValueRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### FormErrorSummary
@@ -2492,15 +2605,21 @@ Label, helper text, error, aria-invalid and aria-describedby come from Field
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| field | `AnyFieldApi` | The TanStack Form field (from `<form.Field children={(field) => …}>`) |
-| id? | `string` | Id of the control – e.g. the field name, so FormErrorSummary (useFormErrors) can link to it |
-| label? | `ReactNode` |  |
-| helper-text? | `ReactNode` |  |
-| success? | `ReactNode` | Confirmation below the control (Field `success`) |
+| field | `AnyFieldApi` | The TanStack Form field (from `<form.Field v-slot="{ field }">`) |
+| label? | `string` |  |
+| helper-text? | `string` |  |
+| success? | `string` | Confirmation below the control (Field `success`) |
 | required? | `boolean` |  |
 | optional? | `boolean` | "(optional)" after the label |
 | disabled? | `boolean` |  |
+| classes? | `RecipeClasses<typeof fieldRecipe>` | Extra classes per part of the Field, e.g. { label: "…" } (see the field recipe) |
 
+| Slot | Slot props | Description |
+| --- | --- | --- |
+| #default | `{ field: AnyFieldApi }` |  |
+| #label | – | Own content of the label (instead of `label`) |
+| #helper-text | – | Own helper text, e.g. with a link – part of the control's description (instead of `helperText`) |
+| #success | – | Own confirmation (instead of `success`) |
 
 ### FormList
 
@@ -2513,7 +2632,7 @@ Repeated entries of a form: numbered list with move up/down (also Alt+↑/↓) a
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| field | `AnyFieldApi` | The TanStack Form field of the array (`<form.Field name="contacts" mode="array">`) |
+| field | `AnyFieldApi` | The TanStack Form field of the array (`<form.Field name="contacts" mode="array" v-slot="{ field }">`) |
 | label | `string` | Visible name of the list (legend), e.g. "Contacts" |
 | new-item | `() => unknown` | The value of a new entry, e.g. `() => ({ name: '', email: '' })` |
 | item-label? | `(position: number) => string` | Name of an entry by position (1-based), e.g. (n) => `Contact ${n}` – names the buttons and announcements |
@@ -2564,11 +2683,10 @@ Carousel of pictures with thumbnails (aria-current marks the shown one) and an o
 | fullscreen? | `boolean` | Button that opens the pictures large in a dialog |
 | tools? | `boolean` | The large view is a lightbox: zoom (buttons, + and −, Ctrl+wheel, two fingers), move the zoomed picture, rotate, download, fill the screen, swipe; keyboard shortcuts are shown in it |
 | lazy? | `boolean` | Pictures load when they come near the view (loading="lazy") |
-| has-more? | `boolean` | More pictures can be loaded: showing one of the last two calls onLoadMore (they are added at the end) |
+| has-more? | `boolean` | More pictures can be loaded: showing one of the last two emits loadMore (they are added at the end) |
 | loading? | `boolean` | The next pictures are loading (aria-busy) |
-| page? | `number` |  |
+| v-model:page? | `number` | Current picture – use with v-model:page |
 | default-page? | `number` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof galleryRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -2589,10 +2707,10 @@ Gantt chart: task list as treegrid (keyboard, texts of dates and dependencies),
 | Prop | Type | Description |
 | --- | --- | --- |
 | tasks | `readonly GanttTask[]` |  |
-| zoom? | `GanttZoom` | Unit of the time axis; controlled together with onZoomChange |
+| v-model:zoom? | `GanttZoom` | Unit of the time axis – use with v-model:zoom |
 | default-zoom? | `GanttZoom` |  |
 | zooms? | `readonly GanttZoom[]` | Zoom levels offered in the toolbar |
-| expanded? | `string[]` | Ids of the expanded groups; controlled together with onExpandedChange (default: all expanded) |
+| v-model:expanded? | `string[]` | Ids of the expanded groups – use with v-model:expanded (default: all expanded) |
 | default-expanded? | `string[]` |  |
 | editable? | `boolean` | Tasks can be moved, resized and their progress changed: drag the bars, or Alt(+Shift)+arrow keys in the list |
 | linkable? | `boolean` | New dependencies by dragging from the dot at the end of a bar onto another bar, or by keyboard with "Add dependency…" |
@@ -2627,7 +2745,7 @@ role="meter": a value in a known range; the arc is decoration, the value is name
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `number` |  |
+| value | `number` |  |
 | min? | `number` |  |
 | max? | `number` |  |
 | label | `string` | Visible label below the gauge, also its accessible name |
@@ -2655,7 +2773,7 @@ Children side by side, wrapping onto new lines
 | align? | `'middle' \| 'top' \| 'bottom' \| 'baseline' \| 'stretch'` | Vertical alignment of the children (default middle) |
 | nowrap? | `boolean` | Keep everything on one line instead of wrapping |
 | grow? | `boolean` | Children share the width evenly |
-| as? | `Component \| string` | Element to render, e.g. "ul" (default div) |
+| as? | `string \| Component` | Element to render, e.g. "ul" (default div) |
 | classes? | `RecipeClasses<typeof groupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -2713,7 +2831,7 @@ Dialog listing the registered shortcuts with their descriptions, grouped; opens
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| open? | `boolean` | Open state (controlled) |
+| v-model:open? | `boolean` | Open state – use with v-model:open |
 | hotkey? | `string \| false` | Shortcut that opens the dialog (default "?"); `false` switches it off |
 | title? | `string` | Title of the dialog (default "Keyboard shortcuts") |
 | registry? | `HotkeyRegistry` | Another registry than the page's |
@@ -2736,9 +2854,9 @@ Extra information on hover or keyboard focus of the trigger (WCAG 1.4.13: stays
 | --- | --- | --- |
 | open-delay? | `number` | Delay before opening (ms) |
 | close-delay? | `number` | Delay before closing (ms) – time to move the pointer onto the card |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | default-open? | `boolean` |  |
-| anchor? | `AnchorProp` | Element, ref or point to open at instead of the trigger; open with `open` or `ref.current.open(anchor)` |
+| anchor? | `OverlayAnchor \| null` | Element (or point) to open at instead of the trigger; open with v-model:open or the exposed `open(anchor)` |
 | classes? | `RecipeClasses<typeof hoverCardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -2762,11 +2880,15 @@ Button with only an icon; the label is its accessible name, optionally with a co
 | Prop | Type | Description |
 | --- | --- | --- |
 | icon | `Component` | Icon component |
+| icon-props? | `Record<string, unknown>` | Props passed on to the icon component, e.g. { fill: 'currentColor' } for a filled icon or { strokeWidth: 1.5 } |
 | label | `string` | Accessible name – icon buttons have no visible text |
 | variant? | `IconButtonVariant` |  |
 | color? | `ButtonColor` | Colour combined with the variant, like Button `color` (e.g. a danger text button) |
 | size? | `ButtonSize` | `xs` is 24px – the minimum target size (WCAG 2.5.8) |
 | shape? | `ButtonShape` | Corner shape: `pill` (round, default), `rounded` or `square` |
+| disabled? | `boolean` |  |
+| loading? | `boolean` | Shows a spinner instead of the icon and ignores clicks; stays focusable (aria-disabled + aria-busy) |
+| type? | `'button' \| 'submit' \| 'reset'` |  |
 | badge? | `number \| boolean` | Counter (number > 0) or dot (true) in the top-right corner |
 | badge-label? | `(count: string \| null) => string` | Appended to the accessible name while a badge is shown, e.g. "Notifications, 4 new". Receives the visible counter text ("4", "99+") or null for the dot – the visible text must stay part of the name (WCAG 2.5.3). |
 | classes? | `RecipeClasses<typeof iconButtonRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -2805,8 +2927,8 @@ The image with a crop area (a slider): arrow keys move it, Alt+arrows resize it,
 | src | `string` | Image URL (an object URL of a chosen file works, too) |
 | aspect-ratio? | `number` | Width / height of the crop area, e.g. 1 or 16 / 9 (free without) |
 | crop-shape? | `'rectangle' \| 'circle'` | Rectangle (default) or circle (e.g. for avatars) |
-| zoom? | `number` | Zoom factor (controlled) |
-| rotation? | `number` | Rotation in degrees (controlled) |
+| v-model:zoom? | `number` | Zoom factor – use with v-model:zoom |
+| v-model:rotation? | `number` | Rotation in degrees – use with v-model:rotation |
 | min-zoom? | `number` | Smallest and largest zoom (default 1 and 5) |
 | max-zoom? | `number` |  |
 | toolbar? | `boolean` | Buttons for zoom, rotation, mirroring and reset (default true) |
@@ -2847,14 +2969,14 @@ The value as a button; activating it shows an editor (inline or in a popover) wi
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | The value (controlled); it changes only when a valid edit is saved |
+| v-model? (modelValue) | `T` | The value – use with v-model; it changes only when a valid edit is saved |
 | default-value? | `T` |  |
 | label | `string` | What is edited, e.g. "Project name" – names the editor and the button |
 | mode? | `'inline' \| 'popover'` | `inline` (default): the editor replaces the text; `popover`: it opens in a popover next to the text |
 | placeholder? | `string` | Text while the value is empty (default "Empty") |
 | format? | `(value: T \| undefined) => string` | Text of the value (default: the value as text) |
 | validate? | `(value: T \| undefined) => string \| null \| undefined \| Promise<string \| null \| undefined>` | Checks the value before saving: a message keeps the editor open and is shown (and announced); may be async (the save button is busy meanwhile) |
-| editing? | `boolean` | Editing state (controlled) |
+| v-model:editing? | `boolean` | Editing state – use with v-model:editing |
 | disabled? | `boolean` |  |
 | save-label? | `string` |  |
 | cancel-label? | `string` |  |
@@ -2882,7 +3004,7 @@ Shows a value as a button; activating it swaps in the editor (Escape closes it)
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| active? | `boolean` |  |
+| v-model:active? | `boolean` | Editing – use with v-model:active |
 | edit-label? | `string` | Hint for screen readers after the shown text, e.g. "bearbeiten" |
 | classes? | `RecipeClasses<typeof inplaceRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -2905,9 +3027,11 @@ Text field with sizes, leading icon, prefix and suffix; works inside Field
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| v-model? (modelValue) | `string` |  |
 | size? | `Size` |  |
 | invalid? | `boolean` | Marks the input as invalid (also inherited from a surrounding Field) |
 | success? | `boolean` | Confirmed value: green border and check icon (also inherited from a Field with `success`) |
+| disabled? | `boolean` | Disables the input (also inherited from a surrounding Field) |
 | loading? | `boolean` | Shows a spinner in the field and marks it busy (aria-busy), e.g. while checking the value |
 | clearable? | `boolean` | Shows a button that empties the field while it has a value |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
@@ -2954,12 +3078,17 @@ JSON text field: checked while typing (the result is the field's description), "
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | The JSON text (controlled) |
+| v-model? (modelValue) | `string` | The JSON text – use with v-model |
 | default-value? | `string` |  |
 | indent? | `number` | Spaces per level when formatting (default 2) |
 | format-button? | `boolean` | Button that formats the text (default true) |
 | format-on-blur? | `boolean` | Formats valid JSON when the field loses focus |
+| placeholder? | `string` |  |
+| rows? | `number` |  |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
 | invalid? | `boolean` | Marks the field invalid (it also is while the text is no valid JSON) |
+| name? | `string` |  |
 | classes? | `RecipeClasses<typeof jsonInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -2984,8 +3113,6 @@ JSON as a tree (role="tree"): arrow keys open and close, typing jumps to a key;
 | search? | `boolean` | Search field above the tree: hits are marked and their branches opened |
 | copyable? | `boolean` | Copy button per node (and Ctrl+C on the focused node, default true) |
 | show-types? | `boolean` | Shows the type of every value as text (otherwise only for screen readers) |
-| aria-label? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof jsonViewerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3004,7 +3131,7 @@ Kanban board: each column is a sortable list of one group – cards move with th
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| columns? | `KanbanColumn<T>[]` | The columns with their cards (controlled) |
+| v-model:columns? | `KanbanColumn<T>[]` | The columns with their cards – use with v-model:columns |
 | default-columns? | `KanbanColumn<T>[]` |  |
 | label? | `string` | Accessible name of the board (default "Board") |
 | item-key? | `ItemAccessor<T, string \| number>` | Key of a card: property name or function (default `id`, else `value`) |
@@ -3036,7 +3163,7 @@ A key, e.g. <Kbd>Strg</Kbd> + <Kbd>K</Kbd> – or a whole shortcut with `hotkey`
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| hotkey? | `string` | A shortcut to show key by key, e.g. "mod+k" → Ctrl K (⌘ K on Apple devices), "g i" → G then I. Without it the children are the key |
+| hotkey? | `string` | A shortcut to show key by key, e.g. "mod+k" → Ctrl K (⌘ K on Apple devices), "g i" → G then I. Without it the slot is the key |
 | classes? | `RecipeClasses<typeof kbdRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -3070,13 +3197,12 @@ Dial (270°): a slider – arrow keys, Page Up/Down, Home/End, or drag around th
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number` |  |
+| v-model? (modelValue) | `number` | Value – use with v-model |
 | default-value? | `number` |  |
 | min? | `number` |  |
 | max? | `number` |  |
 | step? | `number` |  |
 | label? | `string` | Visible label, also the accessible name |
-| aria-label? | `string` |  |
 | format-value? | `(value: number) => string` | Formats the shown and announced value, e.g. (v) => `${v} %` |
 | value-template? | `string` | Text with the value in it, e.g. "{value} %" (when there is no formatValue) |
 | stroke-width? | `number` | Width of the arc (default 8, of a 100 wide dial) |
@@ -3084,7 +3210,7 @@ Dial (270°): a slider – arrow keys, Page Up/Down, Home/End, or drag around th
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the dial (the slider); a `<label for>` cannot name it, use `label`, a Field or aria-label |
 | classes? | `RecipeClasses<typeof knobRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3118,6 +3244,22 @@ Lines (or areas) over the categories – curved, stacked, with reference lines;
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| data | `readonly ChartRow[]` | The rows: one object per category with a value per series |
+| category-key | `string` | Property of each row with the category (x axis) |
+| series | `readonly ChartSeries[]` | The series: key of the value, label, colour, axis, stack … |
+| title | `string` | Title of the chart, also its accessible name |
+| hide-title? | `boolean` | Keep the title for screen readers only |
+| height? | `string` | Height of the chart area (CSS length, default 18rem) |
+| table? | `boolean` | The data as a table below the chart (opens on demand) – the text alternative (default true) |
+| format-value? | `(value: number) => string` | Formats values in the axis, tooltips, legend and table (default: numbers in the locale) |
+| references? | `readonly ChartReference[]` | Reference lines (`value`) and areas (`from`–`to`), on the value axis or with `axis: 'x'` on the categories |
+| scale? | `'linear' \| 'logarithmic'` | Logarithmic value axis |
+| legend? | `boolean` | Legend (default: with more than one series) |
+| brush? | `boolean` | A small overview below with a range to zoom into (keyboard: the slider's arrow keys) |
+| v-model:range? | `[number, number]` | Shown rows with `brush` (inclusive indexes) – use with v-model:range |
+| default-range? | `[number, number]` |  |
+| options? | `Record<string, unknown>` | Chart.js options – merged over the WireLayer defaults |
+| classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe chart) |
 | curved? | `boolean` | Curved lines |
 | area? | `boolean` | Fill the area below every line (an area chart) |
 | stacked? | `boolean` | Stack all series (with `area`: stacked areas) |
@@ -3139,9 +3281,8 @@ Always visible list (role="listbox"): arrow keys move, Enter/Space choose, typin
 | --- | --- | --- |
 | items | `readonly T[]` | Options: ListboxItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled/itemGroup |
 | label? | `string` | Visible label, also the list's accessible name |
-| aria-label? | `string` | Accessible name without a visible label |
 | multiple? | `boolean` | Several options can be chosen (Space toggles) |
-| v-model? (modelValue) | `V[]` | Chosen values; any type (string, number, boolean, object) |
+| v-model? (modelValue) | `V[]` | Chosen values – use with v-model; any type (string, number, boolean, object) |
 | default-value? | `V[]` |  |
 | disabled? | `boolean` |  |
 | item-value? | `ItemAccessor<T, V>` | Value of an item: property name or function (default: `value`, otherwise the item itself) |
@@ -3150,18 +3291,18 @@ Always visible list (role="listbox"): arrow keys move, Enter/Space choose, typin
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of an item: property name or function (default: `group`); items are listed per group |
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | filter? | `boolean` | Search field above the list; filters by label, ignoring case and accents |
-| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to filterChange |
 | empty-text? | `string` | Shown when no item is left (default "No results" / "No entries") |
 | loading? | `boolean` | Shows "Loading" at the end of the list (aria-busy) |
 | loading-text? | `string` | Text of the loading row |
-| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list emits loadMore |
 | checkboxes? | `boolean` | Check boxes before the options (`multiple`) |
 | select-all? | `boolean` | "Select all" above the options (`multiple`) – takes the options in view (filtered, enabled) |
 | data-source? | `DataSource<T>` | Loads the options (pages while scrolling, the search field asks it); `getItemsByKeys` gives the labels of chosen values that are not loaded |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | draggable-items? | `boolean` | The options can be dragged (`draggable`, `data-value` is the key) – lists that exchange items (PickList) |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the list box, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof listboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3215,14 +3356,13 @@ Log: a scrollable, focusable area (arrow keys scroll) with numbered lines; level
 | label? | `string` | Accessible name of the scroll area (default "Log") |
 | search? | `boolean` | Search field: filters the lines and marks the hits (default true) |
 | level-filter? | `boolean` | Buttons to show and hide the levels (default true) |
-| levels? | `LogLevel[]` | Levels shown (controlled, default all) |
+| v-model:levels? | `LogLevel[]` | Levels shown – use with v-model:levels (default all) |
 | detect-levels? | `boolean` | Reads the level from the text when a line has none ("ERROR", "[warn]" …, default true) |
-| auto-scroll? | `boolean` | Keeps the newest line in view; scrolling up pauses it (default true) |
+| v-model:auto-scroll? | `boolean` | Keeps the newest line in view; scrolling up pauses it – use with v-model:autoScroll (default true) |
 | line-numbers? | `boolean` | Line numbers (default true) |
-| has-more? | `boolean` | Older lines can be loaded: a button at the top calls onLoadMore |
+| has-more? | `boolean` | Older lines can be loaded: a button at the top emits loadMore |
 | loading? | `boolean` | Older lines are loading |
 | row-height? | `number` | Height of a line in px – must match the styles (default 20) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof logViewerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3271,7 +3411,7 @@ Moving band (region, named by the label): moves only without reduced motion; the
 | spacing? | `string` | Space between the items, a CSS length (default "1rem") |
 | auto-fill? | `boolean` | Repeats the content until the band is full (default true) |
 | reverse? | `boolean` |  |
-| paused? | `boolean` | Paused (controlled) – the pause button sets it, hover/focus pause on top of it |
+| v-model:paused? | `boolean` | Paused – use with v-model:paused (the pause button and hover/focus pause, too) |
 | pause-on-hover? | `boolean` | Stops while the pointer is over the band or the focus is in it (default true) |
 | pause-button? | `boolean` | Button to pause and resume (WCAG 2.2.2, default true) |
 | fade? | `boolean` | Fades the content out at the edges |
@@ -3297,10 +3437,11 @@ Text input with a fixed format (IBAN, phone, postcode …): separators are added
 | Prop | Type | Description |
 | --- | --- | --- |
 | mask | `string` | 9 digit, a letter, * letter or digit – everything else is inserted by itself, \\ escapes a token, `?` starts an optional rest, e.g. "+4\\9 999 9999999" or "99999?-9999" |
-| v-model? (modelValue) | `string` | Masked value (or the raw one with `unmask`) |
+| v-model? (modelValue) | `string` | Masked value (or the raw one with `unmask`) – use with v-model |
 | default-value? | `string` |  |
+| placeholder? | `string` |  |
 | slot-char? | `string` | Character for the open slots in the placeholder (default "_") |
-| unmask? | `boolean` | value/onValueChange hold only the typed characters ("891234" instead of "DE89 1234") |
+| unmask? | `boolean` | v-model holds only the typed characters ("891234" instead of "DE89 1234") |
 | auto-clear? | `boolean` | Empties an incomplete value when the field is left |
 | tokens? | `MaskTokens` | Own tokens, e.g. { h: /[0-9a-f]/i } – they extend 9, a and * |
 
@@ -3350,8 +3491,8 @@ Website navigation (nav landmark, disclosure pattern – no menu roles): links,
 | current-href? | `string` | Path of the current page – only the link with exactly this href gets aria-current="page" |
 | is-current? | `(link: MegaMenuLink \| MegaMenuItem) => boolean` | Own check for the current page, e.g. with the router |
 | heading-level? | `2 \| 3 \| 4 \| 5` | Level of the group headings (default 3) |
-| link-as? | `Component \| string` | Component for the links, e.g. a router link (gets `to` for links with `to`, else `href`); default <a> |
-| v-model? (modelValue) | `string` | Open panel (its value, '' for none) |
+| link-as? | `string \| Component` | Component for the links, e.g. RouterLink or NuxtLink (gets `to` for links with `to`, else `href`); default <a> |
+| v-model:value? | `string` | Open panel (its value, '' for none) – use with v-model:value |
 | default-value? | `string` |  |
 | menu-label? | `string` | Name of the menu button and title of the drawer (default "Menu") |
 | classes? | `RecipeClasses<typeof megaMenuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -3379,14 +3520,20 @@ Text field with mentions: "@" (or another trigger) opens suggestions below the f
 | --- | --- | --- |
 | v-model? (modelValue) | `string` | Text with markup: "Hello |
 | default-value? | `string` |  |
-| loading? | `boolean` | Entries are being loaded (after onSearch): the list shows "Loading" |
 | items? | `readonly T[]` | Entries for "@" (shorthand for one trigger) |
 | data-source? | `DataSource<T>` | Loads the "@" entries for the typed text |
+| loading? | `boolean` | Entries are being loaded (after the search event): the list shows "Loading" |
 | triggers? | `readonly MentionTrigger<T>[]` | Several trigger characters with their own entries (replaces items/dataSource) |
 | item-label? | `ItemAccessor<T, string>` | Text of an entry: property name or function (default `label`) |
 | item-value? | `ItemAccessor<T, unknown>` | Id of an entry in the markup: property name or function (default `value`, else `id`) |
 | limit? | `number` | Most suggestions shown (default 8) |
+| placeholder? | `string` |  |
+| rows? | `number` |  |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
+| required? | `boolean` |  |
+| name? | `string` | Name of the hidden form field (the markup) |
 | classes? | `RecipeClasses<typeof mentionsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3411,13 +3558,14 @@ The trigger is the slotted element (e.g. a Button or IconButton)
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly MenuEntry[]` | Items, groups ({ type: 'group' }), separators ({ type: 'separator' }), checkbox items ({ type: 'checkbox' }) and radio groups ({ type: 'radio' }); items with children open a submenu, items with href or to are links |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | default-open? | `boolean` |  |
-| anchor? | `AnchorProp` | Element, ref or point to open at instead of the trigger; open with `open` or `ref.current.open(anchor)` |
+| anchor? | `OverlayAnchor \| null` | Element (or point) to open at instead of the trigger; open with v-model:open or the exposed `open(anchor)` |
 | searchable? | `boolean` | Filter field at the top – for long menus; arrow keys move through the matching items, Enter chooses |
 | search-label? | `string` | Placeholder and accessible name of the filter field |
 | 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> |
 | classes? | `RecipeClasses<typeof menuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3444,9 +3592,9 @@ Menu bar (role="menubar"): arrow keys move along the bar and between open menus,
 | Prop | Type | Description |
 | --- | --- | --- |
 | menus | `readonly MenubarMenu[]` |  |
-| aria-label? | `string` | Name of the menu bar, e.g. "Application" |
 | responsive? | `boolean` | Below the md breakpoint (768px) a menu button with all menus replaces the bar |
 | menu-label? | `string` | Accessible name of the menu button on small screens |
+| link-as? | `Component \| string` | Component for link items, e.g. RouterLink or NuxtLink (gets `to` for items with `to`, else `href`); default <a> |
 | classes? | `RecipeClasses<typeof menubarRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3478,7 +3626,6 @@ One bar for the parts (visual), the legend lists every part with its value as te
 | orientation? | `'horizontal' \| 'vertical'` | Vertical bar growing from the bottom, the legend next to it |
 | legend-position? | `'top' \| 'bottom' \| 'start' \| 'end'` | Where the legend is: bottom (default), top, start or end |
 | legend-orientation? | `'horizontal' \| 'vertical'` | Legend entries in a row (default) or one below the other |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof meterGroupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -3492,9 +3639,9 @@ Days in a row with arrows to earlier and later days; arrow keys choose a day and
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | Chosen day (ISO "2026-10-20" or Date) |
+| v-model? (modelValue) | `T` | Chosen day (ISO "2026-10-20" or Date) – use with v-model |
 | default-value? | `T` |  |
-| value-type? | `DateValueType` | What onValueChange gets: an ISO string (default) or a Date |
+| value-type? | `DateValueType` | What v-model gets: an ISO string (default) or a Date |
 | start-date? | `DateLike` | First day shown at the start (default: the start of the week of the value or today) |
 | days? | `number` | Number of days in the strip |
 | min? | `DateLike` | Earliest day that can be chosen |
@@ -3504,8 +3651,6 @@ Days in a row with arrows to earlier and later days; arrow keys choose a day and
 | locale? | `string` | Day names and the spoken dates follow the locale |
 | label? | `string` | Name of the strip (default "Days") |
 | disabled? | `boolean` |  |
-| aria-label? | `string` | Accessible name instead of `label` |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof miniCalendarRecipe>` | Extra classes per part of the component, e.g. { day: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3540,7 +3685,7 @@ Month field ("10.2026"): type the digits in one go, or pick from the month grid;
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | Month as "2026-10"; with range { start, end } |
+| v-model? (modelValue) | `T` | Month as "2026-10" – use with v-model; with range { start, end } |
 | default-value? | `T` |  |
 | range? | `boolean` | Start and end month instead of one |
 | min? | `string` | Earliest month ("2026-01") |
@@ -3552,10 +3697,10 @@ Month field ("10.2026"): type the digits in one go, or pick from the month grid;
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` | With range sent as name[0] and name[1] |
+| placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -3575,11 +3720,12 @@ Select with several values: the list stays open while choosing, Space/Enter togg
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly T[]` | Options: SelectItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled/itemGroup |
-| v-model? (modelValue) | `V[]` | Selected values; any type (string, number, boolean, object) |
+| v-model? (modelValue) | `V[]` | Selected values – use with v-model; any type (string, number, boolean, object) |
 | default-value? | `V[]` |  |
 | placeholder? | `string` |  |
-| summary? | `(count: number) => string` | Trigger text once more than this many items are selected, e.g. "4 selected" |
+| summary? | `(count: number) => string` | Trigger text once more than `maxShown` items are selected, e.g. "4 selected" |
 | max-shown? | `number` | Selected labels shown in the trigger before the summary is used |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
@@ -3587,6 +3733,7 @@ Select with several values: the list stays open while choosing, Space/Enter togg
 | item-label? | `ItemAccessor<T, string>` | Label of an item: property name or function (default: `label`) |
 | item-disabled? | `ItemAccessor<T, boolean>` | Disabled state of an item: property name or function (default: `disabled`) |
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of an item: property name or function (default: `group`); items are listed per group |
+| item-keywords? | `ItemAccessor<T, string \| readonly string[] \| null \| undefined>` | More text the search finds an item by, besides its label: property name or function, one text or a list (default: `keywords`), e.g. the name of the item's category |
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | display? | `'text' \| 'chips'` | Selected items as text (default) or as chips with a remove button each (Backspace removes the last) |
 | checkboxes? | `boolean` | Check boxes before the options (default); false shows a check mark after the label |
@@ -3596,13 +3743,14 @@ Select with several values: the list stays open while choosing, Space/Enter togg
 | loading? | `boolean` | Shows a spinner in the field and "Loading" in the list (aria-busy) |
 | loading-text? | `string` | Text of the loading row in the list |
 | size? | `SelectSize` | Height of the field: 32, 40 (default) or 48 px |
-| filter? | `boolean` | Search field at the top of the list; filters by label, ignoring case and accents |
-| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| filter? | `boolean` | Search field at the top of the list; filters by label and itemKeywords, ignoring case and accents |
+| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to filterChange |
 | empty-text? | `string` | Shown when no item is left (default "No results" / "No entries") |
-| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<T>` | Loads the options when the list opens (pages while scrolling; with `filter` the search asks it, after a typing pause, outdated answers dropped); `getItemsByKeys` gives the labels of chosen values that are not loaded |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof multiSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3628,9 +3776,11 @@ 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" |
 | size? | `Size` |  |
 | invalid? | `boolean` |  |
+| disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof nativeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3650,7 +3800,6 @@ Website navigation (nav landmark): entries with children are buttons (aria-expan
 | --- | --- | --- |
 | items | `readonly NavigationMenuEntry[]` |  |
 | label? | `string` | Name of the navigation landmark |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof navigationMenuRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -3680,13 +3829,13 @@ Bell with the unread count (part of its name) that opens the notifications in a
 | Prop | Type | Description |
 | --- | --- | --- |
 | items? | `readonly NotificationItem[]` | The notifications (with `dataSource`: new ones pushed by the app, before the loaded pages) |
-| data-source? | `DataSource<NotificationItem>` | Notifications from a server, page by page (newest first): the first page is loaded at the start, "Load more" loads the next; items marked as read are kept as read here (report them with onMarkRead/onMarkAllRead) |
+| data-source? | `DataSource<NotificationItem>` | Notifications from a server, page by page (newest first): the first page is loaded at the start, "Load more" loads the next; items marked as read are kept as read here (report them with markRead/markAllRead) |
 | page-size? | `number` | Notifications per page of the data source (default 20) |
 | unread-count? | `number` | Unread count on the bell when not all items are loaded (default: the unread items) |
-| has-more? | `boolean` | Shows "Load more" below the list (onLoadMore) |
+| has-more? | `boolean` | Shows "Load more" below the list (loadMore event) |
 | loading? | `boolean` | The next page is loading (the button stays focusable, aria-busy) |
 | display? | `'popover' \| 'drawer'` | popover (default) next to the bell, or drawer from the side |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | label? | `string` | Name of the bell and title of the panel (default "Notifications") |
 | now? | `Date \| string` | Reference time for "Today"/"Yesterday" (default: now) |
 | empty-text? | `string` | Text without notifications (default "No notifications") |
@@ -3715,7 +3864,7 @@ A number in the format of the locale ("€1,234.50")
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `number \| bigint \| null \| undefined` |  |
+| value | `number \| bigint \| null \| undefined` |  |
 | format-options? | `Intl.NumberFormatOptions` | Format, e.g. { style: 'currency', currency: 'EUR' } or { notation: 'compact' } |
 | locale? | `string` |  |
 | classes? | `RecipeClasses<typeof numberFormatterRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -3732,7 +3881,7 @@ Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number \| null` |  |
+| v-model? (modelValue) | `number \| null` | Number or null (empty) – use with v-model |
 | default-value? | `number \| null` |  |
 | min? | `number` |  |
 | max? | `number` |  |
@@ -3758,6 +3907,7 @@ Number field with − / + buttons, arrow keys and locale formatting ("1,234.5")
 | loading? | `boolean` | Shows a spinner in the field and marks it busy (aria-busy) |
 | clearable? | `boolean` | Shows a button that empties the field while it has a value |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof numberInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3775,7 +3925,7 @@ Choose an item, then move it with the buttons (or Alt + arrow keys); the new pos
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T[]` | Items in their order; ListboxItem objects or any objects/values (see itemValue/itemLabel) |
+| v-model? (modelValue) | `T[]` | Items in their order – use with v-model; ListboxItem objects or any objects/values (see itemValue/itemLabel) |
 | default-value? | `T[]` |  |
 | label | `string` | Visible label of the list |
 | item-value? | `ItemAccessor<T, V>` | Value of an item: property name or function (default: `value`, otherwise the item itself) |
@@ -3784,7 +3934,6 @@ Choose an item, then move it with the buttons (or Alt + arrow keys); the new pos
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | filter? | `boolean` | A search field above the list (moving works on the whole list) |
 | draggable? | `boolean` | Items can be dragged to another place (the buttons and Alt + arrow keys stay the keyboard way) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof orderListRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3808,14 +3957,13 @@ Hierarchy as nested lists – screen readers read the structure, the lines are d
 | node | `OrgChartNode` | The top of the hierarchy |
 | label | `string` | Accessible name, e.g. "Org chart" |
 | collapsible? | `boolean` | A button below each node with a team shows or hides it |
-| collapsed-keys? | `string[]` | Keys of the nodes whose team is hidden |
+| v-model:collapsed-keys? | `string[]` | Keys of the nodes whose team is hidden – use with v-model:collapsed-keys |
 | default-collapsed-keys? | `string[]` |  |
-| selection-mode? | `'none' \| 'single' \| 'multiple'` | Nodes can be chosen (toggle buttons): one or several |
-| selected-keys? | `string[]` |  |
+| selection-mode? | `'none' \| 'single' \| 'multiple'` | Nodes can be chosen (toggle buttons): one or several – use with v-model:selected-keys |
+| v-model:selected-keys? | `string[]` |  |
 | default-selected-keys? | `string[]` |  |
 | load-children? | `(node: OrgChartNode, request: { signal: AbortSignal }) => Promise<OrgChartNode[]>` | Loads the team of a node with `hasChildren: true` when it is shown; the signal aborts it |
 | data-source? | `DataSource<OrgChartNode>` | Source of the teams of lazy nodes (`getChildren`) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof orgChartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3913,8 +4061,8 @@ Page navigation with previous/next, page buttons and a summary ("1–10 of 42")
 | Prop | Type | Description |
 | --- | --- | --- |
 | count | `number` | Total number of items |
-| page-size? | `number` | Items per page – controlled together with onPageSizeChange when `pageSizes` lets the user change it |
-| page? | `number` | Current page (1-based) |
+| v-model:page-size? | `number` | Items per page – use with v-model:pageSize when `pageSizes` lets the user change it |
+| v-model:page? | `number` | Current page (1-based) – use with v-model:page |
 | default-page? | `number` |  |
 | sibling-count? | `number` | Pages shown on each side of the current page before an ellipsis |
 | boundary-count? | `number` | Pages always shown at the start and the end (default 1) |
@@ -3948,9 +4096,8 @@ Card with a heading (and actions); toggleable: the heading holds a button with a
 | title | `string` |  |
 | heading-level? | `2 \| 3 \| 4` | Heading level of the title |
 | toggleable? | `boolean` | The title becomes a button that shows/hides the content |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Open state – use with v-model:open |
 | default-open? | `boolean` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof panelRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3974,16 +4121,24 @@ Password field with a button that shows/hides the password (named "Show/Hide pas
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| v-model? (modelValue) | `string` |  |
 | size? | `Size` |  |
 | invalid? | `boolean` |  |
 | success? | `boolean` | Confirmed value: green border and check icon (also inherited from a Field with `success`) |
+| disabled? | `boolean` |  |
+| read-only? | `boolean` |  |
+| required? | `boolean` |  |
+| name? | `string` |  |
 | default-visible? | `boolean` | Initially show the password in plain text |
-| visible? | `boolean` | Whether the password is shown in plain text (controlled, with onVisibleChange) |
+| v-model:visible? | `boolean` | Whether the password is shown in plain text – use with v-model:visible |
+| autocomplete? | `'current-password' \| 'new-password'` |  |
 | strength? | `boolean` | Strength meter below the field – for choosing a new password |
 | requirements? | `readonly PasswordRequirement[]` | Checklist below the field, updated while typing: each rule with its state (icon and text), linked to the input as its description |
 | loading? | `boolean` | Shows a spinner in the field and marks it busy (aria-busy) |
 | clearable? | `boolean` | Shows a button that empties the field while it has a value |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear input") |
+| default-value? | `string` | Initial value without v-model |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof passwordInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4004,10 +4159,10 @@ PDF viewer (pdf.js): a toolbar (role="toolbar", one tab stop, arrow keys inside)
 | Prop | Type | Description |
 | --- | --- | --- |
 | src | `PdfSource` | The PDF: URL, ArrayBuffer/Uint8Array or Blob/File – loaded in the browser (the server renders the loading state) |
-| page? | `number` | Current page (1-based) – changing it shows that page |
-| zoom? | `PdfZoom` | Zoom: factor (1 = 100 %, 0.5–4), "page-width" (default) or "page-fit" |
-| rotation? | `number` | Rotation of all pages clockwise: 0, 90, 180 or 270 |
-| sidebar? | `boolean` | Side bar with thumbnails and the outline (controlled) |
+| v-model:page? | `number` | Current page (1-based) – use with v-model:page |
+| v-model:zoom? | `PdfZoom` | Zoom: factor (1 = 100 %, 0.5–4), "page-width" (default) or "page-fit" – use with v-model:zoom |
+| v-model:rotation? | `number` | Rotation of all pages clockwise: 0, 90, 180 or 270 – use with v-model:rotation |
+| v-model:sidebar? | `boolean` | Side bar with thumbnails and the outline – use with v-model:sidebar |
 | toolbar? | `boolean \| PdfTool[]` | Toolbar: all tools (true, default), none (false) or a list, e.g. ['page', 'zoom', 'download'] |
 | height? | `string` | Height of the viewer (CSS length, default "600px") |
 | label? | `string` | Accessible name of the viewer (default "PDF document") |
@@ -4048,8 +4203,7 @@ Avatar (decorative here – the name follows as text), name, description and pre
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | avatar-color? | `AvatarColor \| 'auto'` | Tinted avatar; `auto` picks a colour from the name |
 | href? | `string` | The whole persona is a link |
-| as? | `'div' \| 'button'` | `button`: the whole persona is a button (use onClick) |
-| @click? | `MouseEventHandler<HTMLElement>` |  |
+| as? | `'div' \| 'button'` | `button`: the whole persona is a button (listen to click) |
 | classes? | `RecipeClasses<typeof personaRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -4064,14 +4218,18 @@ Country (flag and calling code, searchable) and the number, formatted for the co
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | The number in E.164 ("+4930123456", "" when empty, controlled) |
+| v-model? (modelValue) | `string` | The number in E.164 ("+4930123456", "" when empty) – use with v-model |
 | default-value? | `string` |  |
-| country? | `string` | Chosen country (ISO code, controlled) |
+| v-model:country? | `string` | Chosen country (ISO code) – use with v-model:country |
 | default-country? | `string` | Country before anything is chosen (default "DE") |
 | countries? | `readonly PhoneCountry[]` | Countries to offer (default: about 60 common ones; extend with your own entries) |
 | country-label? | `string` | Accessible name of the country select (default "Country") |
+| placeholder? | `string` |  |
 | size? | `Size` |  |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` | Marks the number invalid (it also is after leaving a number of the wrong length) |
+| required? | `boolean` |  |
+| name? | `string` | Name of the hidden form field (E.164) |
 | classes? | `RecipeClasses<typeof phoneInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4092,7 +4250,7 @@ Two lists with several choices each; the buttons move the chosen items across, t
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly T[]` | All items: ListboxItem objects – or any objects or values, read with itemValue/itemLabel/itemDisabled |
-| v-model? (modelValue) | `V[]` | Values of the chosen items, in their order; any type (see `valueKey`) |
+| v-model? (modelValue) | `V[]` | Values of the chosen items, in their order – use with v-model; any type (see `valueKey`) |
 | default-value? | `V[]` |  |
 | source-label? | `string` |  |
 | target-label? | `string` |  |
@@ -4101,12 +4259,11 @@ Two lists with several choices each; the buttons move the chosen items across, t
 | item-disabled? | `ItemAccessor<T, boolean>` | Disabled state of an item: property name or function (default: `disabled`) |
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | filter? | `boolean` | A search field above each list |
-| manual-filter? | `boolean` | The source list is searched elsewhere (server): no local filtering there, listen to onFilterChange and pass the found items; chosen items keep their labels |
+| manual-filter? | `boolean` | The source list is searched elsewhere (server): no local filtering there, listen to filterChange and pass the found items; chosen items keep their labels |
 | loading? | `boolean` | The source list is loading (aria-busy, "Loading") |
-| has-more? | `boolean` | More items can be loaded into the source list: scrolling to its end calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded into the source list: scrolling to its end emits loadMore |
 | select-all? | `boolean` | Check boxes and "Select all" in each list |
 | draggable? | `boolean` | Items can be dragged from one list to the other (the buttons stay the keyboard way) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof pickListRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4138,7 +4295,6 @@ Pie or doughnut on a canvas named by the title; the legend lists value and share
 | table? | `boolean` | The slices as a table below (opens on demand) – the text alternative (default true) |
 | format-value? | `(value: number) => string` | Formats values in the legend, tooltips and table |
 | options? | `Record<string, unknown>` | Chart.js options – merged over the WireLayer defaults |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe chart) |
 
 
@@ -4153,7 +4309,7 @@ Code input (OTP, PIN): one box per character, typing moves on, pasting fills all
 | Prop | Type | Description |
 | --- | --- | --- |
 | length? | `number` | Number of characters |
-| v-model? (modelValue) | `string` |  |
+| v-model? (modelValue) | `string` | Code – use with v-model |
 | default-value? | `string` |  |
 | type? | `'numeric' \| 'alphanumeric' \| 'alphabetic'` |  |
 | otp? | `boolean` | One-time code: the browser/phone may fill it in from an SMS |
@@ -4162,8 +4318,7 @@ Code input (OTP, PIN): one box per character, typing moves on, pasting fills all
 | invalid? | `boolean` |  |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
-| aria-label? | `string` | Accessible name of the group without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the PIN input, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof pinInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4182,10 +4337,10 @@ Non-modal panel next to its trigger; Escape and clicking outside close it, focus
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Controlled state – use with v-model:open |
 | default-open? | `boolean` |  |
 | placement? | `PopoverPlacement` |  |
-| anchor? | `AnchorProp` | Element, ref or point to open at instead of the trigger – e.g. a table cell; open with `open` or `ref.current.open(anchor)` |
+| anchor? | `OverlayAnchor \| null` | Element (or point) to open at instead of the trigger – e.g. a table cell; open with v-model:open or the exposed `open(anchor)` |
 | width? | `'trigger'` | `trigger`: as wide as the trigger or anchor |
 | trap-focus? | `boolean` | Keeps the focus inside the panel and makes the page behind inert (modal popover) |
 | overlay? | `boolean` | Dims the page behind the panel |
@@ -4243,7 +4398,7 @@ Ark names the progressbar after its value; the label is the name, the value its
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `number` |  |
+| value | `number` |  |
 | max? | `number` |  |
 | label? | `string` | Visible label, also the accessible name of the progress bar |
 | show-value? | `boolean` | Show the value next to the label |
@@ -4266,13 +4421,12 @@ Ring with the value in the middle; a progressbar named by its label, the value a
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `number` |  |
+| value | `number` |  |
 | max? | `number` |  |
 | label | `string` | Visible label below the ring, also its accessible name |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | status? | `'neutral' \| 'success' \| 'warn' \| 'danger'` |  |
 | format-value? | `(value: number, max: number) => string` | Text in the ring (default: percent) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof progressCircleRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -4287,7 +4441,7 @@ QR code as an image named by its value; optional logo, value text and downloads
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` | Text or URL to encode |
+| value | `string` | Text or URL to encode |
 | size? | `number` | Width and height in px (default 160) |
 | error-correction? | `'L' \| 'M' \| 'Q' \| 'H'` | Error correction: L 7 %, M 15 % (default), Q 25 %, H 30 % of the code may be covered (H with a logo) |
 | logo? | `string` | Image URL shown in the middle (decorative; use error correction "H") |
@@ -4308,7 +4462,7 @@ Quarter field: type "Q4 2026" (also "2026-Q4", "4/2026") or pick from the four q
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | Quarter as "2026-Q4"; with range { start, end } |
+| v-model? (modelValue) | `T` | Quarter as "2026-Q4" – use with v-model; with range { start, end } |
 | default-value? | `T` |  |
 | range? | `boolean` | Start and end quarter instead of one |
 | min? | `string` | Earliest quarter ("2024-Q1") |
@@ -4322,8 +4476,6 @@ Quarter field: type "Q4 2026" (also "2026-Q4", "4/2026") or pick from the four q
 | name? | `string` | Sent as "2026-Q4"; with range as name[0] and name[1] |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the field, e.g. { control: "…" } (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -4363,8 +4515,13 @@ A large card that is one option of a RadioGroup (use `columns` on the group for
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` | Value of the option inside a RadioGroup |
+| value | `string` | Value of the option inside a RadioGroup |
+| title | `string` | Title – the accessible name of the radio button |
+| description? | `string` | Text below the title – read as the description |
+| icon? | `Component` | Icon component in a box at the start |
+| price? | `string` | Price or other figure at the end, e.g. "$29 / month" – part of the description |
 | disabled? | `boolean` |  |
+| classes? | `RecipeClasses<typeof selectionCardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### RadioGroup
@@ -4378,9 +4535,9 @@ One choice out of several (role="radiogroup", arrow keys), horizontal or vertica
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string \| null` |  |
+| v-model? (modelValue) | `string \| null` | Selected value – use with v-model |
 | default-value? | `string \| null` |  |
-| label? | `string` | Visible group label (otherwise pass aria-label) |
+| 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` |  |
@@ -4405,7 +4562,7 @@ One option of a RadioGroup
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` |  |
+| value | `string` |  |
 | disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof radioGroupRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -4420,19 +4577,18 @@ Star rating: a radio group – arrow keys change the value, each star reads "3 s
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number` |  |
+| v-model? (modelValue) | `number` | Rating – use with v-model |
 | default-value? | `number` |  |
 | count? | `number` | Number of stars |
 | allow-half? | `boolean` |  |
 | allow-clear? | `boolean` | Clicking the chosen star again (or Delete/Backspace) clears the rating (value 0) |
-| icon? | `ComponentType<{ className?: string; fill?: string; 'aria-hidden'?: boolean \| 'true' \| 'false' }>` | Own symbol instead of the star, e.g. a heart (filled when chosen – it gets `fill`) |
+| icon? | `Component` | Own symbol instead of the star, e.g. a heart (filled when chosen) |
 | read-only? | `boolean` |  |
 | disabled? | `boolean` |  |
 | label? | `string` | Visible label, also the group's accessible name |
-| aria-label? | `string` |  |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | name? | `string` |  |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the rating, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof ratingRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4487,7 +4643,7 @@ One value: the ring is a progress bar named by the label. Segments: a group name
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number` | One value (a progress bar) – or `segments` |
+| value? | `number` | One value (a progress bar) – or `segments` |
 | segments? | `readonly RingProgressSegment[]` | Several parts one after another (a group with a legend) |
 | max? | `number` | The whole (default 100, or the sum of the segments when larger) |
 | label | `string` | Visible label below the ring, also its accessible name |
@@ -4551,9 +4707,9 @@ Calendar: toolbar (today, back/forward, title, views); events are buttons named
 | Prop | Type | Description |
 | --- | --- | --- |
 | events? | `readonly SchedulerEvent[]` | Events; with `dataSource` they are shown together with the loaded ones |
-| view? | `SchedulerView` | Shown view; controlled together with onViewChange |
+| v-model:view? | `SchedulerView` | Shown view – use with v-model:view |
 | default-view? | `SchedulerView` |  |
-| date? | `string` | Shown date ("2026-10-20"); controlled together with onDateChange |
+| v-model:date? | `string` | Shown date ("2026-10-20") – use with v-model:date |
 | default-date? | `string` |  |
 | views? | `readonly SchedulerView[]` | Views offered in the toolbar ('timeline' and 'year' as well) |
 | start-hour? | `number` | Hours shown in the day and week view (and the day of the timeline) |
@@ -4569,26 +4725,26 @@ Calendar: toolbar (today, back/forward, title, views); events are buttons named
 | resources? | `readonly SchedulerResource[]` | People, rooms or machines: columns in the day and week view, rows in the timeline, a filter in the toolbar |
 | resources-per-page? | `number` | Day and week view with many resources: at most this many resources as columns at a time, buttons in the toolbar page through them (default: all, side by side) |
 | group-by? | `SchedulerGroupBy` | Resource columns per day (`date`, default) or per resource |
-| resource-filter? | `string` | Shown resource (id; empty: all); controlled together with onResourceFilterChange |
+| v-model:resource-filter? | `string` | Shown resource (id; empty: all) – use with v-model:resourceFilter |
 | default-resource-filter? | `string` |  |
-| timeline-range? | `SchedulerTimelineRange` | Span of the timeline: a day in hours, a week or a month in days; controlled with onTimelineRangeChange |
+| v-model:timeline-range? | `SchedulerTimelineRange` | Span of the timeline: a day in hours, a week or a month in days – use with v-model:timelineRange |
 | default-timeline-range? | `SchedulerTimelineRange` |  |
-| zoom? | `number` | Zoom of the timeline (0.5–3, width of its slots); controlled together with onZoomChange |
+| v-model:zoom? | `number` | Zoom of the timeline (0.5–3, width of its slots) – use with v-model:zoom |
 | default-zoom? | `number` |  |
 | business-hours? | `readonly SchedulerBusinessHours[]` | Opening hours by weekday – times outside are hatched (resources can have their own) |
 | hide-weekends? | `boolean` | Leaves out the weekend days of the locale in the week, month and timeline views |
 | overlap-mode? | `SchedulerOverlapMode` | Overlapping events side by side (`columns`, default) or stacked with an offset |
-| can-drop? | `(event: SchedulerEvent, start: string, end: string, resourceId?: string) => boolean` | Whether an event may be dropped there – a refused move is marked, announced and reported (onDropRejected) |
+| can-drop? | `(event: SchedulerEvent, start: string, end: string, resourceId?: string) => boolean` | Whether an event may be dropped there – a refused move is marked, announced and reported (dropRejected) |
 | can-resize? | `(event: SchedulerEvent, start: string, end: string) => boolean` | Whether an event may get this length |
 | prevent-overlap? | `boolean` | No overlapping events per resource (without resources: at all) |
 | recurrence-edit-scope? | `'ask' \| RecurrenceScope` | Moving an occurrence of a series: ask (default), or always only this one / the whole series |
 | month-event-limit? | `number` | Events shown per day in the month before "+N more" |
 | more-popover? | `boolean` | "+N more" opens a popover with all events of the day (instead of the day view) |
 | compact-breakpoint? | `number` | Below this width (px) the month view becomes a compact month with the list of the chosen day below |
-| droppable? | `boolean` | Accepts items dragged in from outside (application/x-wirecore-event or text) – see onExternalDrop |
+| droppable? | `boolean` | Accepts items dragged in from outside (application/x-wirecore-event or text) – see externalDrop |
 | data-source? | `DataSource<SchedulerEvent>` | Loads the events of the shown range (`range` of the query) – cancelled when the range changes, cached |
 | cache-time? | `number` | How long loaded ranges are reused, in ms (default 0) |
-| loading? | `boolean` | Shows the loading state (e.g. while you load on onRangeChange yourself) |
+| loading? | `boolean` | Shows the loading state (e.g. while you load on rangeChange yourself) |
 | time-zone? | `string` | IANA time zone the times are shown in ("Europe/Berlin"); times with offset are converted, changes get it |
 | label? | `string` | Accessible name of the calendar |
 | heading-level? | `2 \| 3 \| 4 \| 5 \| 6` | Level of the title heading |
@@ -4639,8 +4795,7 @@ Native scrolling with slim scrollbars; the viewport is a named, focusable region
 | label | `string` | Names the scrollable region – it is focusable, so keyboard users can scroll it |
 | scrollbars? | `'auto' \| 'hover' \| 'always' \| 'hidden'` | When the scrollbars show: `auto` (on overflow, default), `hover`, `always` or `hidden` |
 | fade? | `boolean` | Fades the top and bottom edge while there is more to scroll in that direction |
-| reach-threshold? | `number` | Distance in pixels from the start/end at which onReachStart/onReachEnd fire (default 0) |
-| style? | `CSSProperties` |  |
+| reach-threshold? | `number` | Distance in pixels from the start/end at which `reachStart`/`reachEnd` fire (default 0) |
 | classes? | `RecipeClasses<typeof scrollPanelRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4675,13 +4830,13 @@ A search form (role="search"): optional area, field with magnifier, clear button
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | The search text (controlled) |
+| v-model? (modelValue) | `string` | The search text – use with v-model |
 | default-value? | `string` |  |
 | label? | `string` | Accessible name of the search (form role="search" and field) – default "Search" |
 | placeholder? | `string` |  |
 | loading? | `boolean` | Search is running: spinner in the field, aria-busy |
-| scopes? | `readonly NativeSelectOption[]` | Areas to search in – a select before the field |
-| scope? | `string` | Chosen area (controlled) |
+| scopes? | `readonly NativeSelectOption[]` | Areas to search in – a select before the field (v-model:scope) |
+| v-model:scope? | `string` | Chosen area – use with v-model:scope |
 | scope-label? | `string` | Accessible name of the area select (default "Search in") |
 | suggestions? | `readonly string[]` | Suggestions while typing (combobox pattern) – any other text can still be searched |
 | clear-label? | `string` | Accessible name of the clear button (default "Clear search") |
@@ -4709,9 +4864,9 @@ Few exclusive options as a segmented switch (radio group)
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string \| null` |  |
+| v-model? (modelValue) | `string \| null` | Selected value – use with v-model |
 | default-value? | `string` |  |
-| label | `string` | Accessible name of the group (visually hidden) |
+| 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` |  |
 | name? | `string` |  |
@@ -4733,7 +4888,7 @@ One option of a SegmentedControl
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` |  |
+| value | `string` |  |
 | icon? | `Component` | Icon component before the label |
 | disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof segmentedControlRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -4751,9 +4906,10 @@ 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; any type (string, number, boolean, object) |
+| v-model? (modelValue) | `V \| null` | Selected value – use with v-model; any type (string, number, boolean, object) |
 | default-value? | `V \| null` |  |
 | placeholder? | `string` |  |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
@@ -4761,19 +4917,21 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 | item-label? | `ItemAccessor<T, string>` | Label of an item: property name or function (default: `label`) |
 | item-disabled? | `ItemAccessor<T, boolean>` | Disabled state of an item: property name or function (default: `disabled`) |
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of an item: property name or function (default: `group`); items are listed per group |
+| item-keywords? | `ItemAccessor<T, string \| readonly string[] \| null \| undefined>` | More text the search finds an item by, besides its label: property name or function, one text or a list (default: `keywords`), e.g. the name of the item's category |
 | value-key? | `ItemAccessor<V, string \| number>` | Identifies object values (property name or function), e.g. "id" – without it objects are compared by content |
 | clearable? | `boolean` | Button that clears the value (also Backspace/Delete on the closed field) |
 | loading? | `boolean` | Shows a spinner in the field and "Loading" in the list (aria-busy) |
 | loading-text? | `string` | Text of the loading row in the list |
 | size? | `SelectSize` | Height of the field: 32, 40 (default) or 48 px |
-| filter? | `boolean` | Search field at the top of the list; filters by label, ignoring case and accents |
-| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| filter? | `boolean` | Search field at the top of the list; filters by label and itemKeywords, ignoring case and accents |
+| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to filterChange |
 | empty-text? | `string` | Shown when no item is left (default "No results" / "No entries") |
-| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<T>` | Loads the options when the list opens (pages while scrolling; with `filter` the search asks it, after a typing pause, outdated answers dropped); `getItemsByKeys` gives the label of a chosen value that is not loaded |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | standalone? | `boolean` | Not labelled by a surrounding Field – for a second control inside it (e.g. PhoneInput's country) |
+| 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 |
@@ -4824,7 +4982,6 @@ Navigation landmark with links and expandable groups (buttons with aria-expanded
 | label | `string` | Name of the navigation landmark, e.g. "Main navigation" |
 | rail? | `boolean` | Icons only, the labels as tooltips (and for screen readers). Default: the collapsed state of a surrounding AppShell (navbarCollapsed) |
 | expand-on-hover? | `boolean` | With `rail`: hovering or focusing the rail shows the labels (no tooltips) – default from the AppShell |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof sidebarNavRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4846,21 +5003,20 @@ Signature field (role="application"): draw with mouse, pen or finger; "Undo" rem
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` | The signature as data URL ("" when empty, controlled) |
-| paths? | `string[]` | The strokes as SVG paths (controlled – to restore or store them) |
+| v-model? (modelValue) | `string` | The signature as data URL ("" when empty) – use with v-model |
+| v-model:paths? | `string[]` | The strokes as SVG paths – use with v-model:paths (to restore or store them) |
 | default-paths? | `string[]` |  |
 | format? | `'png' \| 'svg'` | Format of the data URL: png (default) or svg; a typed signature is always svg |
 | label? | `string` | Visible label, also the name of the field (default "Signature"; a surrounding Field names it, too) |
 | color? | `string` | Ink colour – a real colour (it is exported), default black on the light sheet |
 | stroke-width? | `number` | Stroke width in px (default 2) |
 | typed-alternative? | `boolean` | Offers typing the name instead of drawing (accessible alternative) |
-| typed-name? | `string` | The typed name (controlled) |
+| v-model:typed-name? | `string` | The typed name – use with v-model:typedName |
 | disabled? | `boolean` |  |
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` | Name of the hidden form field (its value is the data URL) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof signaturePadRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4884,7 +5040,7 @@ Columns of equal width, fixed per breakpoint or as many as fit
 | columns? | `ResponsiveColumns` | Columns: a number or per breakpoint, e.g. { base: 1, sm: 2, lg: 4 } (default 1) |
 | min-column-width? | `string` | As many columns as fit, each at least this wide (e.g. "14rem") – instead of `columns` |
 | gap? | `LayoutGap` | Space between the cells (default md, 16px) |
-| as? | `Component \| string` | Element to render, e.g. "ul" (default div) |
+| as? | `string \| Component` | Element to render, e.g. "ul" (default div) |
 | classes? | `RecipeClasses<typeof simpleGridRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -4955,7 +5111,7 @@ Range: "Price, Minimum" / "Price, Maximum"
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `number[]` | One value per thumb – two values make a range slider |
+| v-model? (modelValue) | `number[]` | One value per thumb – two values make a range slider (v-model) |
 | default-value? | `number[]` |  |
 | min? | `number` |  |
 | max? | `number` |  |
@@ -4963,6 +5119,7 @@ Range: "Price, Minimum" / "Price, Maximum"
 | label | `string` | Visible label, also the accessible name of the thumbs |
 | thumb-labels? | `readonly string[]` | Names of the thumbs of a range slider, read after the label |
 | show-value? | `boolean` | Shows the formatted value next to the label |
+| hide-label? | `boolean` | The label for screen readers only – it stays the accessible name of the thumbs |
 | format-value? | `(value: number) => string` | Formats the shown and announced value, e.g. (v) => `${v} %` |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
@@ -4988,21 +5145,19 @@ Sortable list: every item has a handle – drag it, or press Space/Enter, move w
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T[]` | The items in their order (controlled) |
+| v-model? (modelValue) | `T[]` | The items in their order – use with v-model |
 | default-value? | `T[]` |  |
 | item-key? | `ItemAccessor<T, string \| number>` | Key of an item: property name or function (default `id`, else `value`, else the item) |
 | item-label? | `ItemAccessor<T, string>` | Text of an item for its handle and the announcements (default `label`, `name` or `title`) |
 | label? | `string` | Name of the list (visible label, also announced when an item moves in) |
 | group? | `string` | Lists of the same group exchange items (e.g. Kanban columns) |
-| name? | `string` | Id of this list in `onMove` (default: generated) |
+| name? | `string` | Id of this list in `move` events (default: generated) |
 | orientation? | `SortableOrientation` | vertical (default), horizontal or grid (with `columns`) |
 | columns? | `number` | Columns of the grid |
 | accepts? | `(item: T, from: string) => boolean` | Whether an item from another list of the group may come in |
 | animate? | `boolean` | Items glide to their new place when they move (default: yes; not with reduced motion) |
 | disabled? | `boolean` |  |
 | empty-text? | `string` | Text of an empty list (it stays a drop target) |
-| aria-label? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof sortableRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5030,7 +5185,6 @@ Small line without axes; the canvas is an image named by the trend and the extre
 | width? | `string` |  |
 | height? | `string` |  |
 | format-value? | `(value: number) => string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof sparklineRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -5049,7 +5203,6 @@ A menu button: the actions open above it (or in a circle around it) as menu item
 | layout? | `SpeedDialLayout` | `column` (default): above the button with visible labels; `circle`, `semicircle`, `quarter`: around it, the labels show as tooltips on hover and focus |
 | direction? | `SpeedDialDirection` | Where the actions open: up (default), down; for semicircle and quarter also left or right |
 | radius? | `number` | Distance of the actions from the centre of the button in px (circle layouts, default 80) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof speedDialRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5070,7 +5223,7 @@ Loading indicator with a label for screen readers (role="status"); with `value`
 | --- | --- | --- |
 | size? | `Size` |  |
 | label? | `string` | Text announced to screen readers (live region) |
-| v-model? (modelValue) | `number` | Fixed progress 0–100: a ring that fills up instead of turning (a progress bar) |
+| value? | `number` | Fixed progress 0–100: a ring that fills up instead of turning (a progress bar) |
 | classes? | `RecipeClasses<typeof spinnerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -5093,7 +5246,6 @@ Main action plus a menu with the other actions; both are separate buttons
 | icon? | `Component` |  |
 | disabled? | `boolean` |  |
 | menu-label? | `string` | Accessible name of the menu button |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof splitButtonRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5117,7 +5269,6 @@ Panels with handles between them (role="separator"): drag, or arrow keys (Shift
 | step? | `number` | Arrow keys on a handle change the size by this many percent (default 1) |
 | shift-step? | `number` | Shift + arrow keys (percent, default 10) |
 | storage-key? | `string` | Remembers the sizes in localStorage under this key |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof splitterRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5142,10 +5293,9 @@ Content cut to maxHeight; the button (aria-expanded) shows the rest. Hidden text
 | Prop | Type | Description |
 | --- | --- | --- |
 | max-height? | `number` | Height of the cut content in px |
-| open? | `boolean` |  |
+| v-model:open? | `boolean` | Open state – use with v-model:open |
 | show-label? | `string` |  |
 | hide-label? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof spoilerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5166,7 +5316,7 @@ Children below each other with an even gap
 | --- | --- | --- |
 | gap? | `LayoutGap` | Space between the children: none, xs (4px), sm (8px), md (16px, default), lg (24px), xl (32px) |
 | align? | `'stretch' \| 'start' \| 'center' \| 'end'` | Horizontal alignment of the children |
-| as? | `Component \| string` | Element to render, e.g. "ul" or "section" (default div) |
+| as? | `string \| Component` | Element to render, e.g. "ul" or "section" (default div) |
 | classes? | `RecipeClasses<typeof stackRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -5182,7 +5332,7 @@ Label, value (with prefix/suffix and unit), trend as arrow + text, optional char
 | Prop | Type | Description |
 | --- | --- | --- |
 | label | `string` | What the number is, e.g. "Revenue" |
-| v-model? (modelValue) | `number \| null` | The number; null or undefined shows nothing (or the placeholder while loading) |
+| value? | `number \| null` | The number; null or undefined shows nothing (or the placeholder while loading) |
 | format-options? | `Intl.NumberFormatOptions` | Format of the value, e.g. { style: 'currency', currency: 'EUR' } or { notation: 'compact' } |
 | unit? | `string` | Unit (Intl unit identifier), e.g. "percent", "kilobyte", "hour" – formatted with the locale |
 | prefix? | `string` | Text before the value, e.g. "≈" |
@@ -5233,13 +5383,12 @@ Steps list (tabs) with one panel per step and back/next buttons; the last "Next"
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly StepperItem[]` |  |
-| step? | `number` | Current step (0-based; items.length = all done) |
+| v-model:step? | `number` | Current step (0-based; items.length = all done) – use with v-model:step |
 | default-step? | `number` |  |
 | linear? | `boolean` | Steps only in order: no jumping ahead via the step list |
 | 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 |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof stepperRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5283,13 +5432,13 @@ Sticks to the top or bottom edge while its container scrolls
 | edge? | `'top' \| 'bottom'` | Edge it sticks to while its container scrolls (default top) |
 | offset? | `string` | Distance from the edge, e.g. "3.5rem" below a fixed header (default 0) |
 | bar? | `boolean` | Action bar look (background, line, buttons at the end) – e.g. Save/Cancel below a long form |
-| as? | `Component \| string` | Element to render (default div) |
+| as? | `string \| Component` | Element to render (default div) |
 | classes? | `RecipeClasses<typeof stickyRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
 ### Switch
 
-Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch
+Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for>
 
 - Import: `import { Switch } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -5298,15 +5447,20 @@ Ark renders a plain checkbox; role="switch" makes screen readers announce it as
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| checked? | `boolean` |  |
+| v-model:checked? | `boolean` | Controlled state – use with v-model:checked |
 | default-checked? | `boolean` |  |
 | description? | `string` | Second line below the label, also read as the switch's description |
 | icon? | `Component` | Icon component before the label |
 | checked-icon? | `Component` | Icon in the thumb while on |
 | unchecked-icon? | `Component` | Icon in the thumb while off |
+| on-label? | `string` | Short text in the track while on, e.g. "On" (decoration – the state is announced by the switch) |
 | off-label? | `string` | Short text in the track while off, e.g. "Off" |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
-| v-model? (modelValue) | `string` |  |
+| required? | `boolean` |  |
+| name? | `string` |  |
+| value? | `string` | Value of the switch – inside a SwitchGroup its state comes from the group's value |
+| id? | `string` | Id of the switch (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof switchControlRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5325,11 +5479,11 @@ role="group" named by its label, described by helper and error text; Switches wi
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string[]` | Values of the switches that are on (controlled) |
+| v-model? (modelValue) | `string[]` | Values of the switches that are on – use with v-model |
 | default-value? | `string[]` |  |
 | label? | `string` | Visible label of the group (names it); otherwise pass aria-label |
-| helper-text? | `ReactNode` |  |
-| error? | `ReactNode` | Error message – also marks the group and its switches invalid |
+| helper-text? | `string` |  |
+| error? | `string` | Error message – also marks the group and its switches invalid |
 | invalid? | `boolean` |  |
 | required? | `boolean` | Shows the required mark after the label |
 | disabled? | `boolean` |  |
@@ -5355,7 +5509,6 @@ Navigation to the headings of the page; the section in view is marked (aria-curr
 | --- | --- | --- |
 | items | `readonly TocEntry[]` |  |
 | title? | `string` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof tableOfContentsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -5370,7 +5523,7 @@ Tab panels: tab list with arrow keys, one panel visible
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string` |  |
+| v-model? (modelValue) | `string` | Selected tab – use with v-model |
 | default-value? | `string` |  |
 | label? | `string` | Accessible name of the tab list |
 | orientation? | `'horizontal' \| 'vertical'` | Tab list above (default) or beside the panels |
@@ -5395,7 +5548,7 @@ The panel of one tab
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` |  |
+| value | `string` |  |
 | classes? | `RecipeClasses<typeof tabsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 
@@ -5424,9 +5577,10 @@ One tab button
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model (modelValue) | `string` |  |
+| value | `string` |  |
 | icon? | `Component` | Icon component before the label |
-| closable? | `boolean` | Shows a close button (pointer) and closes with the Delete key; onClose reports it – remove the tab (and select another one) yourself. The focus moves to the neighbouring tab |
+| 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 |
 | classes? | `RecipeClasses<typeof tabsRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5444,7 +5598,7 @@ Free entries: Enter or "," adds, Backspace on the empty field selects the last e
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string[]` |  |
+| v-model? (modelValue) | `string[]` | Entries – use with v-model |
 | default-value? | `string[]` |  |
 | placeholder? | `string` |  |
 | max? | `number` | Most entries allowed |
@@ -5455,14 +5609,13 @@ Free entries: Enter or "," adds, Backspace on the empty field selects the last e
 | name? | `string` |  |
 | suggestions? | `readonly string[]` | Suggestions while typing (entries already added are left out); arrow keys pick one, Enter adds it |
 | filter? | `boolean` | Filters the suggestions by the typed text, ignoring case and accents (default true) |
-| manual-filter? | `boolean` | The suggestions are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| manual-filter? | `boolean` | The suggestions are filtered elsewhere (server): no local filtering, listen to filterChange |
 | loading? | `boolean` | Shows "Loading" in the suggestions (aria-busy) |
 | loading-text? | `string` | Text of the loading row |
-| has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list calls onLoadMore |
+| has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<string>` | Suggestions from a server instead of `suggestions`: asked with the typed text after a typing pause (outdated answers dropped), more while scrolling |
 | min-search-length? | `number` | Fewest characters the typed text needs before the data source is asked (default 1) |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof tagsInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5483,13 +5636,16 @@ Multi-line text field, optionally growing with the text (autoResize) and with a
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| v-model? (modelValue) | `string` |  |
+| default-value? | `string` | Start value without v-model (uncontrolled) |
 | size? | `Size` |  |
 | invalid? | `boolean` | Marks the textarea as invalid (also inherited from a surrounding Field) |
 | success? | `boolean` | Confirmed value: green border and check icon (also inherited from a Field with `success`) |
+| disabled? | `boolean` | Disables the textarea (also inherited from a surrounding Field) |
 | auto-resize? | `boolean` | Grows with its text instead of scrolling (rows stays the minimum) |
 | min-rows? | `number` | With autoResize: at least this many rows |
 | max-rows? | `number` | With autoResize: at most this many rows, then it scrolls |
-| show-count? | `boolean` | Counter "12 / 200" below the field (needs `maxLength`); the remaining characters are announced once typing pauses, not on every character |
+| show-count? | `boolean` | Counter "12 / 200" below the field (needs `maxlength`); the remaining characters are announced once typing pauses, not on every character |
 | 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") |
@@ -5510,7 +5666,7 @@ Free time slots for a booking: radio buttons for one time (arrow keys move and c
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | Chosen start time ("HH:mm"); with range { start, end } (start times of the first and last slot) |
+| v-model? (modelValue) | `T` | Chosen start time ("HH:mm") – use with v-model; with range { start, end } (start times of the first and last slot) |
 | default-value? | `T` |  |
 | times? | `(string \| TimeGridSlot)[]` | The bookable times; default every `interval` minutes from `start` up to `end` |
 | start? | `string` | First slot ("HH:mm") when `times` is not given |
@@ -5525,8 +5681,6 @@ Free time slots for a booking: radio buttons for one time (arrow keys move and c
 | disabled? | `boolean` |  |
 | name? | `string` | Sent as "HH:mm"; with range as name[0] and name[1] |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
-| aria-label? | `string` | Accessible name instead of `label` |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof timeGridRecipe>` | Extra classes per part of the component, e.g. { slot: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5550,11 +5704,10 @@ Events in order (ordered list); the markers are decoration, the status colour is
 | orientation? | `'vertical' \| 'horizontal'` | Events side by side with a horizontal line |
 | active-index? | `number` | Index of the current event: filled marker and aria-current="step" |
 | feed? | `boolean` | A feed (role="feed"): each event is an article that takes the focus, Page Up/Down move between them; with `hasMore` older events are loaded at the end |
-| has-more? | `boolean` | Older events can be loaded: the button "Load older entries" (and `autoLoad`) calls onLoadMore |
+| has-more? | `boolean` | Older events can be loaded: the button "Load older entries" (and `autoLoad`) emits loadMore |
 | loading? | `boolean` | Older events are loading (aria-busy on the feed) |
 | auto-load? | `boolean` | Loads older events when the end of the feed scrolls into view (the button stays as fallback) |
 | set-size? | `number` | Number of all events (aria-setsize); -1 when unknown (default: the number of items, or -1 with hasMore) |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof timelineRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5577,7 +5730,7 @@ Time field: type the digits one after another ("1430"), arrow keys change hour o
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `string \| null` | "HH:mm", e.g. "14:30" ("HH:mm:ss" with withSeconds); with timeZone "14:30+02:00" |
+| v-model? (modelValue) | `string \| null` | "HH:mm", e.g. "14:30" ("HH:mm:ss" with withSeconds) – use with v-model; with timeZone "14:30+02:00" |
 | default-value? | `string \| null` |  |
 | min? | `string` | Earliest time ("HH:mm") – also the start of the list |
 | max? | `string` | Latest time ("HH:mm") – also the end of the list |
@@ -5596,8 +5749,7 @@ Time field: type the digits one after another ("1430"), arrow keys change hour o
 | time-zone? | `string` | IANA zone ("Europe/Berlin"): the time is typed in the zone, the value gets its offset ("14:30+02:00") |
 | reference-date? | `string` | Day whose offset applies with timeZone (ISO, default today) |
 | show-time-zone? | `boolean` | Short zone name after the time ("CEST") |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5615,7 +5767,7 @@ Start and end time in one field ("09:00 – 17:30"): typing runs on from start t
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `TimeRange \| null` | Start and end ("09:00" – "17:30") |
+| v-model? (modelValue) | `TimeRange \| null` | Start and end ("09:00" – "17:30") – use with v-model |
 | default-value? | `TimeRange \| null` |  |
 | min? | `string` | Earliest time ("HH:mm") |
 | max? | `string` | Latest time ("HH:mm") |
@@ -5629,8 +5781,7 @@ Start and end time in one field ("09:00 – 17:30"): typing runs on from start t
 | name? | `string` | Sent as name[0] and name[1] |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -5649,6 +5800,10 @@ Place once in the app; show toasts with toast({ title, description, type, action
 | Prop | Type | Description |
 | --- | --- | --- |
 | toaster? | `typeof appToaster` | A toaster from createToaster() – without it the app-wide one of toast() |
+| placement? | `ToasterOptions['placement']` | Where the toasts appear (default bottom-end) – also for the app-wide toaster of toast() |
+| max? | `number` | Toasts shown at once (default 5); more wait in a queue |
+| overlap? | `boolean` | Toasts lie on top of each other and fan out on hover or focus (instead of a list) |
+| gap? | `number` | Space between the toasts in px (default 12) |
 | label? | `string` | Accessible name of the notification region |
 | close-label? | `string` | Accessible name of each toast's close button |
 | show-progress? | `boolean` | Thin bar at the bottom that shows the remaining time (decorative; stops while paused) |
@@ -5667,10 +5822,14 @@ Button that stays pressed (aria-pressed), e.g. "Active only" – the label does
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| pressed? | `boolean` |  |
+| v-model:pressed? | `boolean` | Pressed state – use with v-model:pressed |
 | default-pressed? | `boolean` |  |
 | size? | `Size` |  |
 | icon? | `Component` |  |
+| pressed-icon? | `Component` | Icon while pressed (default: `icon`) – the label stays the same |
+| icon-props? | `Record<string, unknown>` | Props passed on to the icon component, e.g. { fill: 'currentColor' } for a filled icon or { strokeWidth: 1.5 } |
+| pressed-icon-props? | `Record<string, unknown>` | Props of the icon while pressed, added to `iconProps` – e.g. { fill: 'currentColor' }: a filled icon when on |
+| disabled? | `boolean` |  |
 | classes? | `RecipeClasses<typeof toggleButtonRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5689,10 +5848,10 @@ Button that stays pressed (aria-pressed), e.g. "Active only" – the label does
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| content? | `ReactNode` | The explanation (or children) |
+| content? | `string` | The explanation (or the default slot) |
 | label? | `string` | What it explains, e.g. the field label – names the button "More information about <label>" |
 | trigger-label? | `string` | Own accessible name of the button |
-| open? | `boolean` | Open state (controlled) |
+| v-model:open? | `boolean` | Open state – use with v-model:open |
 | icon? | `Component` | Icon of the button (default: info) |
 | classes? | `RecipeClasses<typeof toggletipRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -5713,7 +5872,6 @@ Groups controls (role="toolbar"): one tab stop, arrow keys move between the cont
 | --- | --- | --- |
 | label | `string` | Accessible name, e.g. "Formatting" |
 | orientation? | `'horizontal' \| 'vertical'` |  |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof toolbarRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Slot | Slot props | Description |
@@ -5739,6 +5897,7 @@ No element of its own: the trigger is the slotted element
 | close-delay? | `number` | Delay before closing (ms); default 150 or that of the TooltipGroup |
 | interactive? | `boolean` | The pointer can move onto the tooltip without it closing (WCAG 1.4.13) |
 | follow-cursor? | `boolean` | Follows the mouse pointer over the trigger |
+| close-on-scroll? | `boolean` | Closes when the page (or a container around the trigger) scrolls – false keeps it open while scrolling |
 | disabled? | `boolean` | Never opens (e.g. Truncate while the text fits) – the trigger stays the same element |
 | classes? | `RecipeClasses<typeof tooltipRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -5788,7 +5947,7 @@ Step-by-step introduction: each step is a dialog next to its element (focus move
 | Prop | Type | Description |
 | --- | --- | --- |
 | steps | `readonly TourStep[]` |  |
-| open? | `boolean` | Running – starting it sets it, the tour ends itself |
+| v-model:open? | `boolean` | Running – use with v-model:open |
 | classes? | `RecipeClasses<typeof tourRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5809,30 +5968,28 @@ Tree (role="tree"): arrow keys move and open/close, Enter/Space select, typing j
 | --- | --- | --- |
 | items | `readonly TreeNode[]` |  |
 | label? | `string` | Visible label, also the tree's accessible name |
-| aria-label? | `string` | Accessible name without a visible label |
 | selection-mode? | `'single' \| 'multiple'` |  |
-| selected-value? | `string[]` |  |
+| v-model:selected-value? | `string[]` | Selected ids – use with v-model:selected-value |
 | default-selected-value? | `string[]` |  |
-| expanded-value? | `string[]` |  |
+| v-model:expanded-value? | `string[]` | Expanded ids – use with v-model:expanded-value |
 | default-expanded-value? | `string[]` |  |
-| checkable? | `boolean` | A checkbox per node; checking a branch checks its children |
-| checked-value? | `string[]` |  |
+| checkable? | `boolean` | A checkbox per node; checking a branch checks its children (v-model:checked-value) |
+| v-model:checked-value? | `string[]` |  |
 | default-checked-value? | `string[]` |  |
 | check-strictly? | `boolean` | Check boxes of parents and children are independent (no cascade) |
 | checked-strategy? | `TreeCheckedStrategy` | Which checked ids are reported: `all` – every checked node, `parent` – a fully checked branch instead of its children, `child` – only nodes without children. Without it the ids are reported as Ark keeps them. |
-| reorderable? | `boolean` | Nodes can be moved: drag and drop (before, after or into a branch), Alt+arrow keys on the focused node (up/down among the siblings, right into the branch above, left out of the branch), or Ctrl+X and Ctrl+V. Reported via `onMove`. |
+| reorderable? | `boolean` | Nodes can be moved: drag and drop (before, after or into a branch), Alt+arrow keys on the focused node (up/down among the siblings, right into the branch above, left out of the branch), or Ctrl+X and Ctrl+V. Reported via `move`. |
 | allow-drop? | `TreeDropAllowed` | Decides whether a node may go before, after or into another one (drag and drop, keyboard, paste) |
-| group? | `string` | Trees with the same group exchange nodes: drag and drop, or Ctrl+X in one tree and Ctrl+V in the other. The receiving tree reports `onTransfer`; the parent moves the node between the items. |
-| name? | `string` | Identifies this tree in `onTransfer` events (sourceTree/targetTree) |
-| load-children? | `(node: TreeNode, request: { signal: AbortSignal }) => Promise<TreeNode[]>` | Loads the children of a node with `hasChildren: true` (or `leaf: false`) when it opens; the signal aborts it. Without it (and without `dataSource`) the tree calls `onLoadChildren` and the parent adds the children. |
+| group? | `string` | Trees with the same group exchange nodes: drag and drop, or Ctrl+X in one tree and Ctrl+V in the other. The receiving tree reports `transfer`; the parent moves the node between the items. |
+| name? | `string` | Identifies this tree in `transfer` events (sourceTree/targetTree) |
+| load-children? | `(node: TreeNode, request: { signal: AbortSignal }) => Promise<TreeNode[]>` | Loads the children of a node with `hasChildren: true` (or `leaf: false`) when it opens; the signal aborts it. Without it (and without `dataSource`) the tree emits `loadChildren` and the parent adds the children. |
 | data-source? | `DataSource<TreeNode>` | Source of the children of lazy nodes (`getChildren`) |
 | filter? | `boolean` | Search field above the tree; hits stay with their ancestors (opened), hits are marked |
-| filter-value? | `string` | Search text – controlled, or set it from a search field of your own |
+| v-model:filter-value? | `string` | Search text – use with v-model:filter-value, or set it from a search field of your own |
 | filter-mode? | `'filter' \| 'highlight'` | `filter`: only the hits and their ancestors stay; `highlight`: all nodes stay, Enter jumps to the next hit |
 | expand-controls? | `boolean` | Buttons "Expand all" and "Collapse all" above the tree |
 | show-lines? | `boolean` | Guide lines along the children of open branches |
-| empty-text? | `string` | Shown without nodes (or without hits) |
-| style? | `CSSProperties` |  |
+| empty-text? | `string` | Shown without nodes (or without hits); the `empty` slot replaces it |
 | classes? | `RecipeClasses<typeof treeRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5882,7 +6039,7 @@ Select whose options are a tree: the button opens the tree in a panel, choosing
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly TreeNode[]` |  |
-| v-model? (modelValue) | `T` | Chosen node id (an array of ids with `multiple`) |
+| v-model? (modelValue) | `T` | Chosen node id (an array of ids with `multiple`) – use with v-model |
 | default-value? | `T` |  |
 | placeholder? | `string` |  |
 | leaves-only? | `boolean` | Only nodes without children can be chosen |
@@ -5899,8 +6056,7 @@ Select whose options are a tree: the button opens the tree in a panel, choosing
 | size? | `'sm' \| 'md' \| 'lg'` | Height of the field: 32, 40 (default) or 48 px |
 | load-children? | `(node: TreeNode, request: { signal: AbortSignal }) => Promise<TreeNode[]>` | Loads the children of lazy nodes (`hasChildren: true`) when they open; they are kept while the field lives |
 | data-source? | `DataSource<TreeNode>` | Source of the children of lazy nodes (`getChildren`) |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof treeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5924,7 +6080,7 @@ Text cut to one or more lines; the full text in a tooltip (only while cut) or be
 | lines? | `number` | Lines before the text is cut (default 1: one line with an ellipsis) |
 | tooltip? | `boolean` | The full text in a tooltip – only while it is cut; the text then becomes focusable for keyboard users |
 | expandable? | `boolean` | A "Show more" button below the cut text instead of the tooltip |
-| expanded? | `boolean` | Expanded state with `expandable` (controlled) |
+| v-model:expanded? | `boolean` | Expanded state with `expandable` – use with v-model:expanded |
 | default-expanded? | `boolean` |  |
 | as? | `'span' \| 'p' \| 'div'` | Element of the text (default span; p for paragraphs) |
 | more-label? | `string` | Text of the button while cut / expanded |
@@ -5952,14 +6108,13 @@ Only the visible rows are in the DOM; each row says its position (aria-posinset/
 | estimate-size? | `(item: T, index: number) => number` | Estimated height of one item, when the heights differ a lot (rows are measured when shown) |
 | height? | `string` | Height of the scroll area (CSS length) |
 | item-group? | `ItemAccessor<T, string \| null \| undefined>` | Group heading of an item (property name or function); the heading of the group in view sticks to the top |
-| has-more? | `boolean` | More items can be loaded: scrolling near the end calls onLoadMore |
+| has-more? | `boolean` | More items can be loaded: scrolling near the end emits loadMore |
 | loading? | `boolean` | The next items are loading: a loading row at the end |
 | loading-more? | `boolean` |  |
-| end-threshold? | `number` | How many rows before the end onLoadMore is called (default 5) |
+| end-threshold? | `number` | How many rows before the end loadMore is emitted (default 5) |
 | data-source? | `DataSource<T>` | Loads the items page by page while scrolling (instead of `items`) |
 | query? | `Omit<DataQuery, 'page' \| 'pageSize' \| 'cursor'>` | Sorting, filters and search for the data source; a change starts over |
 | page-size? | `number` | Items per request of the data source (default 50) |
-| style? | `CSSProperties` |  |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -5982,9 +6137,10 @@ Select for any number of items – only the visible options are rendered.
 | Prop | Type | Description |
 | --- | --- | --- |
 | items | `readonly T[]` | Any number of items – only the visible options are rendered |
-| v-model? (modelValue) | `V \| null` | Selected value; any type (string, number, boolean, object) |
+| v-model? (modelValue) | `V \| null` | Selected value – use with v-model; any type (string, number, boolean, object) |
 | default-value? | `V \| null` |  |
 | placeholder? | `string` |  |
+| disabled? | `boolean` |  |
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
@@ -5997,12 +6153,13 @@ Select for any number of items – only the visible options are rendered.
 | loading-text? | `string` | Text of the loading row in the list |
 | size? | `SelectSize` | Height of the field: 32, 40 (default) or 48 px |
 | filter? | `boolean` | Search field at the top of the list; filters by label, ignoring case and accents |
-| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to onFilterChange |
+| manual-filter? | `boolean` | The items are filtered elsewhere (server): no local filtering, listen to filterChange |
 | empty-text? | `string` | Shown when no item is left (default "No results" / "No entries") |
-| has-more? | `boolean` | More items can be loaded: reaching the end of the list calls onLoadMore (endless list) |
+| has-more? | `boolean` | More items can be loaded: reaching the end of the list emits loadMore (endless list) |
 | data-source? | `DataSource<T>` | Loads the items from a server instead of `items`: the first page when it opens, more while scrolling, the search field asks the server (after a typing pause); labels of chosen values that are not loaded come from `getItemsByKeys` |
 | page-size? | `number` | Items per request of the data source (default 50) |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -6022,6 +6179,30 @@ Tree for many nodes: the open part of the tree as a flat, virtualised list of tr
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| items | `readonly TreeNode[]` |  |
+| label? | `string` | Visible label, also the tree's accessible name |
+| selection-mode? | `'single' \| 'multiple'` |  |
+| v-model:selected-value? | `string[]` | Selected ids – use with v-model:selected-value |
+| default-selected-value? | `string[]` |  |
+| v-model:expanded-value? | `string[]` | Expanded ids – use with v-model:expanded-value |
+| default-expanded-value? | `string[]` |  |
+| checkable? | `boolean` | A checkbox per node; checking a branch checks its children (v-model:checked-value) |
+| v-model:checked-value? | `string[]` |  |
+| default-checked-value? | `string[]` |  |
+| check-strictly? | `boolean` | Check boxes of parents and children are independent (no cascade) |
+| checked-strategy? | `TreeCheckedStrategy` | Which checked ids are reported: `all` – every checked node, `parent` – a fully checked branch instead of its children, `child` – only nodes without children. Without it the ids are reported as Ark keeps them. |
+| reorderable? | `boolean` | Nodes can be moved: drag and drop (before, after or into a branch), Alt+arrow keys on the focused node (up/down among the siblings, right into the branch above, left out of the branch), or Ctrl+X and Ctrl+V. Reported via `move`. |
+| allow-drop? | `TreeDropAllowed` | Decides whether a node may go before, after or into another one (drag and drop, keyboard, paste) |
+| group? | `string` | Trees with the same group exchange nodes: drag and drop, or Ctrl+X in one tree and Ctrl+V in the other. The receiving tree reports `transfer`; the parent moves the node between the items. |
+| name? | `string` | Identifies this tree in `transfer` events (sourceTree/targetTree) |
+| load-children? | `(node: TreeNode, request: { signal: AbortSignal }) => Promise<TreeNode[]>` | Loads the children of a node with `hasChildren: true` (or `leaf: false`) when it opens; the signal aborts it. Without it (and without `dataSource`) the tree emits `loadChildren` and the parent adds the children. |
+| data-source? | `DataSource<TreeNode>` | Source of the children of lazy nodes (`getChildren`) |
+| filter? | `boolean` | Search field above the tree; hits stay with their ancestors (opened), hits are marked |
+| v-model:filter-value? | `string` | Search text – use with v-model:filter-value, or set it from a search field of your own |
+| filter-mode? | `'filter' \| 'highlight'` | `filter`: only the hits and their ancestors stay; `highlight`: all nodes stay, Enter jumps to the next hit |
+| expand-controls? | `boolean` | Buttons "Expand all" and "Collapse all" above the tree |
+| empty-text? | `string` | Shown without nodes (or without hits); the `empty` slot replaces it |
+| classes? | `RecipeClasses<typeof treeRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 | height? | `string` | Height of the scrolling tree (CSS length) |
 | item-height? | `number` | Estimated row height in px (rows are measured when shown) |
 
@@ -6051,7 +6232,7 @@ Text only for screen readers, e.g. a label next to an icon
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| as? | `Component \| string` | Element (default span) |
+| as? | `string` | Element (default span) |
 | focusable? | `boolean` | Becomes visible while it (or something inside) has the focus – e.g. a skip link |
 | classes? | `RecipeClasses<typeof visuallyHiddenRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -6074,7 +6255,6 @@ Floating bars: each change starts where the previous one ended, totals from zero
 | format-value? | `(value: number) => string` | Formats values in the axis, tooltips and table |
 | tones? | `{ up?: ChartTone; down?: ChartTone; total?: ChartTone }` | Colours of rising, falling and total bars (default success, danger, primary) |
 | options? | `Record<string, unknown>` | Chart.js options – merged over the WireLayer defaults |
-| style? | `CSSProperties` |  |
 | classes? | `RecipeClasses<typeof chartRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe chart) |
 
 
@@ -6113,9 +6293,9 @@ Multi-step form on the Stepper: "Next" checks the step (async with a spinner), "
 | Prop | Type | Description |
 | --- | --- | --- |
 | steps | `readonly WizardStep[]` |  |
-| step? | `number` | Current step (0-based; steps + summary = done) – controlled with onStepChange |
+| v-model:step? | `number` | Current step (0-based; steps + summary = done) – use with v-model:step |
 | default-step? | `number` |  |
-| summary-label? | `string` | Name of the summary step (default "Summary") |
+| 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 |
 | classes? | `RecipeClasses<typeof wizardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
@@ -6140,7 +6320,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| v-model? (modelValue) | `T` | Year as "2026"; with range { start, end } |
+| v-model? (modelValue) | `T` | Year as "2026" – use with v-model; with range { start, end } |
 | default-value? | `T` |  |
 | range? | `boolean` | Start and end year instead of one |
 | min? | `string` | Earliest year ("2020") |
@@ -6152,10 +6332,10 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` | With range sent as name[0] and name[1] |
+| placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
-| aria-label? | `string` | Accessible name without a surrounding Field |
-| style? | `CSSProperties` |  |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -6362,6 +6542,29 @@ that render components, such as `confirm` or the DataTable feature `dateInput`,
 components warn in the console when the classes of a recipe they render are missing. Recipes you call yourself
 (`card()`) are not checked – add their files along with the import.
 
+**With Vite** (Vue, React, Nuxt, Astro) the plugin `@wirecore/wirelayer-recipes/vite` adds these files itself: it reads
+the imports from `@wirecore/wirelayer-*` in your source files and adds the files of the imported components and recipes
+to the CSS file that imports `theme.css` (or `styles-core.css`). Put it before Tailwind's plugin:
+
+```ts
+// vite.config.ts (Nuxt: vite.plugins in nuxt.config.ts, Astro: vite.plugins in astro.config.mjs)
+import tailwindcss from '@tailwindcss/vite';
+import { wirelayer } from '@wirecore/wirelayer-recipes/vite';
+
+export default { plugins: [wirelayer(), tailwindcss()] };
+```
+
+```css
+@import 'tailwindcss';
+@import '@wirecore/wirelayer-vue/theme.css'; /* the plugin adds the sources files here */
+@import '@wirecore/wirelayer-vue/fonts.css'; /* the WireLayer fonts – leave it out with a font of your own */
+```
+
+`theme.css` is the theme without fonts and without component classes: an app with its own font
+(`@theme { --font-sans: … }`) does not bundle Schibsted Grotesk and JetBrains Mono. Components the plugin cannot see –
+registered globally (`app.component(…)`) or imported automatically – trigger the warning above; import their files by
+hand. Next.js does not use Vite: there, list the files or use `styles.css`.
+
 ### Usage
 
 ```vue
@@ -6394,9 +6597,13 @@ import { ArrowRight } from 'lucide-react';
 // nuxt.config.ts
 import tailwindcss from '@tailwindcss/vite';
 
+import { wirelayer } from '@wirecore/wirelayer-recipes/vite';
+
 export default defineNuxtConfig({
-    css: ['~/assets/main.css'], // @import 'tailwindcss'; @import '@wirecore/wirelayer-vue/styles.css';
-    vite: { plugins: [tailwindcss()] },
+    // main.css: @import 'tailwindcss'; @import '@wirecore/wirelayer-vue/theme.css';
+    //           @import '@wirecore/wirelayer-vue/fonts.css'; – or styles.css with all classes, without the plugin
+    css: ['~/assets/main.css'],
+    vite: { plugins: [wirelayer(), tailwindcss()] },
 });
 ```
 
@@ -6479,6 +6686,31 @@ Every component consists of named parts of its recipe (`base`, `icon`, `row`, `t
 The names are the exports of the recipes (`button`, `iconButton`, `dataTable` …) and are checked by TypeScript, as are
 the variants and parts. Your own components use the same through `useRecipe('button', button)`.
 
+`variants` adds classes for single values of a variant, `compoundVariants` for combinations – instead of selectors on
+the recipe's own classes, which break when they change:
+
+```ts
+const recipes: RecipeConfig = {
+    // only the medium size: 42px high, 16px text
+    button: {
+        variants: { size: { md: { base: 'h-[2.625rem] text-base' } } },
+        compoundVariants: [{ size: ['sm', 'md'], shape: 'rounded', classes: { base: 'rounded-md' } }],
+    },
+    input: { variants: { size: { md: { base: 'h-[2.625rem]' } }, invalid: { true: { base: 'border-2' } } } },
+};
+```
+
+Per part the classes come in this order: `classes`, the matching `variants` and `compoundVariants`, the states of the
+recipe, the overrides of states (`invalid: { true: … }`), and last the class passed to the component. Inner providers
+extend outer ones (classes of the same value are joined, the inner ones win).
+
+Classes from a provider or `classes` change the look, not the states: the classes of an active state variant
+(`invalid`, `success`, `disabled`, `readOnly`, `current`, `selected`, `checked`, `loading`) are added after them, so a
+field with `classes: { base: 'border-line-2' }` still turns red when it is invalid. States that the components mark as
+attributes (`data-invalid:`, `data-disabled:`, `data-[state=checked]:`) win through their selector anyway. Only the
+class passed to the component itself (`class`/`className`) comes after the states – the way out when a single field
+should look different in every state.
+
 ### Hooks and composables
 
 Around 40 hooks (React) and composables (Vue) with the same names and the same logic – for your own components and
@@ -6857,6 +7089,56 @@ WireLayer is licensed under the MIT license. The fonts shipped with `@wirecore/w
 JetBrains Mono) are licensed under the SIL Open Font License 1.1 (`dist/fonts/OFL.txt`). Optional peer dependencies such
 as `pdfjs-dist` (Apache-2.0), Chart.js, Tiptap and Shiki are installed by the app itself – with their own licenses.
 
+### Components and APIs side by side
+
+| PrimeVue                                                                            | WireLayer                                                                                                         |
+| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `<Button label icon="pi pi-x">`                                                     | the label as slot text, `:leading-icon` with a Lucide component (`@lucide/vue`)                                   |
+| `severity` / `text` / `outlined`                                                    | `color` – or `variant="text"` / `variant="outline"`                                                               |
+| Icon button + `v-tooltip`                                                           | `<Tooltip content><IconButton :icon label /></Tooltip>` – `label` is the accessible name (often the tooltip text) |
+| `Button :loading`                                                                   | `loading` on `Button` and `IconButton` (stays focusable, ignores clicks)                                          |
+| `Card` with `#title`/`#content`                                                     | `Card` with the default slot and an own heading                                                                   |
+| `InputText`, `Password`, `InputNumber`, `InputChips`, `SelectButton`, `RadioButton` | `Input`, `PasswordInput`, `NumberInput`, `TagsInput`, `SegmentedControl`, `RadioGroup` + `RadioGroupItem`         |
+| `IconField` + `InputIcon`                                                           | `Input :leading-icon`                                                                                             |
+| `Select :options optionLabel optionValue`                                           | `Select :items item-label item-value` (object values: `value-key`)                                                |
+| `Message severity`                                                                  | `Alert status` (`error` → `danger`)                                                                               |
+| `Tag`                                                                               | `Badge`                                                                                                           |
+| `Dialog v-model:visible header`                                                     | `Dialog v-model:open` + `DialogContent title size` (`hide-title` keeps the title for screen readers only)         |
+| `Toolbar` as a container                                                            | a plain `div` – WireLayer's `Toolbar` is `role="toolbar"` (one tab stop, arrow keys)                              |
+| `useToast().add({ severity, summary, detail, life })`                               | `toast({ type, title, description, duration })`, `<Toaster />` once in the app                                    |
+| `useConfirm().require({ … })`                                                       | `await confirm({ title, description, … })`, `<ConfirmDialog />` once in the app                                   |
+| `DataTable` + `Column`                                                              | `DataTable :columns` (column objects), `#cell-<id>`, `#expansion`, `v-model:page-size`                            |
+| `expandedRows` with a row toggler on some rows                                      | `#expansion` + `row-expandable`                                                                                   |
+| `paginatorTemplate` (first/last page)                                               | `paginator-edges`, `paginator-align`                                                                              |
+| `showGridlines` (with the outer border)                                             | `gridlines` + `bordered`                                                                                          |
+| `FilterMatchMode`, `filters`                                                        | `v-model:global-filter`, column `filter`/`filterOptions`, `filter-display="row"`                                  |
+| `@primevue/forms` + `zodResolver`                                                   | TanStack Form with Zod directly as a Standard Schema, `FormField` + `bindInput`/`bindValue`                       |
+| `pt` (pass-through)                                                                 | `classes` per part, `RecipesProvider` for all components below it                                                 |
+| Theme preset (`definePreset`)                                                       | `--wc-*` tokens, `defineTheme`, the component variables (_Foundations › Themes_)                                  |
+| `darkModeSelector` (a class)                                                        | `data-mode` on `<html>`                                                                                           |
+| `tailwindcss-primeui` (`bg-surface-*`, `text-muted-color`)                          | semantic tokens: `bg-card`, `bg-bg-2`, `text-muted`, `border-line` …                                              |
+
+### Pitfalls
+
+- **An empty choice is `null`, not `''`.** For PrimeVue's Select `''` means "nothing chosen"; WireLayer's Select treats
+  `''` as a value (it warns in development that it is not among the items). Use `null`.
+- **TanStack fields start with `''`.** A required text in Zod therefore needs `.min(1)` – `z.string()` alone accepts
+  the empty field.
+- **Fonts:** set your own with `@theme { --font-sans: … }`. Import `theme.css` instead of `styles.css` (with the
+  sources files, or the Vite plugin `@wirecore/wirelayer-recipes/vite`) so the WireLayer fonts are not bundled
+  (_Getting started › Welcome › Smaller CSS_).
+- **Card spacing:** `Card` puts a `gap` between its direct children – wrap content that should sit tight in one
+  element.
+- **Overrides go per part and per variant.** `classes: { base: 'rounded-md' }` reaches every size; only the medium size
+  with `variants: { size: { md: { base: '…' } } }` – no selectors on the recipe's own classes. States such as `invalid`
+  stay visible over such classes; only `class` on the component itself replaces them.
+- **Sizes and corners in one place:** the height, text and corners of buttons and fields per size, the corners of
+  rounded buttons, the padding of cards and the backdrop of dialogs are CSS variables (`--wc-control-h-md` …).
+- **Labels:** wrap a control in `Field` (it links label, description and error). A native `<label for>` works with the
+  control's own `id`; date fields, sliders and groups need `Field` or `aria-label`.
+- **Brand colours:** `checkTheme` lists the pairs below WCAG AA, `suggestThemeFixes` the nearest colours (and `on-*`
+  colours) that meet them – an orange `primary` with white text, common in PrimeVue themes, does not.
+
 ### Custom theme
 
 A theme overrides any colors per mode. `themeToCss` generates the CSS for it,
@@ -6882,3 +7164,47 @@ writeFileSync('brand.css', themeToCss(brand));
 ```
 
 All bundled themes pass this check in both modes.
+
+When a pair misses its contrast, `suggestThemeFixes` says how to fix it: per pair the nearest variant of a colour that
+meets it – its lightness moved in OKLCH, the hue kept – and, where text sits on the colour, a light or dark `on-*`
+colour. A suggestion never breaks a pair that passed:
+
+```ts
+import { suggestThemeFixes } from '@wirecore/wirelayer-tokens';
+
+suggestThemeFixes(brand);
+// [{ name: 'primary: text-on-primary on bg-primary', mode: 'light', ratio: 2.6, min: 4.5,
+//    color: { token: 'primary', value: '#a35c00', ratio: 4.5 },
+//    on: { token: 'on-primary', value: '#050505', ratio: 8.1 } }, …]
+```
+
+### Component sizes and shapes
+
+Besides the colors, a few measures that a brand usually changes are CSS variables. Without them every component looks as
+before – their defaults are the values of the recipes. Set them on `:root` (all pages), on a `[data-theme]` or on any
+element (that part of the page):
+
+```css
+:root {
+    --wc-control-h-md: 2.625rem; /* buttons and fields of the medium size: 42px */
+    --wc-control-text-md: 1rem;
+    --wc-control-radius-md: 0.375rem;
+    --wc-button-radius: 0.375rem;
+    --wc-card-p: 1.25rem;
+    --wc-backdrop: rgb(0 0 0 / 0.4);
+}
+```
+
+| Variable                                              | Default                    | Applies to                                                                                                                                                                                     |
+| ----------------------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wc-control-h-sm` / `-md` / `-lg`                   | `2rem` / `2.5rem` / `3rem` | Height of the sizes sm, md, lg: Button, IconButton, Input, NativeSelect, Select, MultiSelect, Combobox, NumberInput, PasswordInput, the date and time fields, ColorPicker, TagsInput (minimum) |
+| `--wc-control-radius-sm` / `-md` / `-lg`              | `6px` / `8px` / `10px`     | Corners of the fields above and of Textarea (not of buttons)                                                                                                                                   |
+| `--wc-control-text-sm` / `-md` / `-lg`                | `13px` / `15px` / `16px`   | Text in the fields above and in Textarea                                                                                                                                                       |
+| `--wc-button-radius`                                  | `8px`                      | Corners of Button and IconButton with `shape="rounded"` (`pill` and `square` stay)                                                                                                             |
+| `--wc-card-p`                                         | `1.5rem`                   | Padding of Card                                                                                                                                                                                |
+| `--wc-backdrop`                                       | `rgb(0 0 0 / 0.6)`         | Dimming behind Dialog, Drawer and ConfirmDialog                                                                                                                                                |
+| `--radius-card` / `--radius-panel` / `--radius-popup` | `20px` / `28px` / `12px`   | Corners of cards, panels and popups (menus, lists, popovers)                                                                                                                                   |
+| `--wc-dialog-w`                                       | by `size`                  | Width of a DialogContent                                                                                                                                                                       |
+
+The rest – the padding of a dialog or of table cells, the size of a single variant – is set per part with `classes` or
+`RecipesProvider` (_Getting started › Welcome › Customizing_). The React Native components keep their fixed sizes.