@wirecore/wirelayer-vue 0.6.0 → 0.7.0

package/fonts.css

@@ -0,0 +1,2 @@
+/* The WireLayer fonts (Schibsted Grotesk, JetBrains Mono) – part of styles.css and styles-core.css, separate for theme.css */
+@import '@wirecore/wirelayer-tokens/fonts.css';

package/llms-full.txt

@@ -161,6 +161,7 @@ Dial for an angle: the needle is the slider (arrow keys, Home/End), drag anywher
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the angle slider, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof angleSliderRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -325,6 +326,7 @@ Free text with suggestions: type, arrow keys to pick a suggestion, Enter takes i
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -725,6 +727,7 @@ Region "carousel" with slides labelled "Image n of m". Previous/next buttons, on
 | loop? | `boolean` |  |
 | autoplay? | `boolean \| { delay: number }` | Turns pages by itself (default every 4 s) – always with a pause button (WCAG 2.2.2) |
 | indicators? | `boolean` | Dots below the slides, one per page |
+| controls-position? | `'bottom' \| 'sides'` | Previous and next: in the row below the slides (`bottom`, default) or beside them, vertically centred (`sides`) |
 | v-model:page? | `number` | Current page – use with v-model:page |
 | default-page? | `number` |  |
 | classes? | `RecipeClasses<typeof carouselRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
@@ -763,6 +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`) |
+| 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 |
@@ -976,6 +980,7 @@ Checkbox with label (also indeterminate), works inside Field
 | 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 |
@@ -1006,6 +1011,7 @@ A large card that is one checkbox: title (name), description and price (descript
 | invalid? | `boolean` |  |
 | required? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the check box (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof selectionCardRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1225,6 +1231,7 @@ Colour field: the button opens a panel with area, hue (and opacity) slider, hex
 | read-only? | `boolean` |  |
 | invalid? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the field (the button), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof colorPickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1299,6 +1306,7 @@ Text field with suggestions (autocomplete): type to filter, arrow keys to choose
 | data-source? | `DataSource<T>` | Loads the options for the typed text (after a typing pause, outdated answers dropped; pages while scrolling); `getItemsByKeys` gives the label of a chosen value that is not loaded |
 | min-search-length? | `number` | Fewest characters typed before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof comboboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -1463,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) |
 
 
@@ -1645,6 +1655,8 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:page? | `number` | Current page (1-based) – use with v-model:page |
 | v-model:first? | `number` | Index of the first row of the current page (0-based) – instead of `page`, use with v-model:first |
 | paginator-position? | `'top' \| 'bottom'` | Pagination below (default) or above the table |
+| paginator-edges? | `boolean` | Buttons to the first and the last page in the pagination |
+| paginator-align? | `DataTablePaginatorAlign` | Pagination row: rows per page at the start, pages at the end (`between`, default) – or both together |
 | v-model:sorting? | `DataTableSort \| DataTableSort[] \| null` | Current sorting – use with v-model:sorting; an array in the multiple mode |
 | default-sorting? | `DataTableSort \| DataTableSort[] \| null` | Sorting at the start, without v-model |
 | sort-mode? | `'single' \| 'multiple'` | `multiple`: Shift+click (or the column menu) sorts by further columns |
@@ -1670,6 +1682,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:expanded? | `string[]` | Expanded rows (ids) – use with v-model:expanded; also the rows with open details (#expansion) |
 | default-expanded? | `string[]` |  |
 | expand-label? | `(row: T, index: number) => string` | Names the expand button of a row |
+| row-expandable? | `(row: T) => boolean` | Whether a row has details (#expansion) – rows without get no expand button (default: all rows) |
 | advanced-filter? | `boolean \| ConditionField[]` | Advanced filter: the rows pass a condition tree (nested and/or rules; v-model:advanced-filter-value). `true` offers every column with a filter type; or pass the fields. A toolbar button opens the editor from the `#advancedFilter` slot above the table – usually `ConditionBuilder` from `@wirecore/wirelayer-blocks-vue`; without it there is no button (the tree still filters). A server filters instead: `dataSource` gets the tree as `condition`, with `manual` the parent applies it |
 | v-model:advanced-filter-value? | `ConditionGroup` | The condition tree of the advanced filter (controlled together with onAdvancedFilterValueChange) |
 | search? | `boolean` | Search field above the table: filters over all columns (v-model:global-filter) |
@@ -1710,6 +1723,7 @@ Data table on TanStack Table: sorting (also by several columns), search, filter
 | v-model:size? | `'sm' \| 'md' \| 'lg'` | Row height – use with v-model:size (`densityToggle`) |
 | density-toggle? | `boolean` | Menu above the table to change the row height |
 | gridlines? | `boolean` | Lines between the columns |
+| bordered? | `boolean` | A border around the whole table |
 | striped? | `boolean` | Every other row tinted |
 | fullscreen-toggle? | `boolean` | Button above the table to show it on the whole screen |
 | scroll-height? | `string` | Fixed height (CSS length): the table scrolls inside, header and footer stay visible |
@@ -1855,6 +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 |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1903,6 +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 |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -1980,6 +1996,7 @@ 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` |  |
@@ -2123,6 +2140,7 @@ The panel of a Drawer, sliding in from a side; title, focus trap, Escape closes
 | Prop | Type | Description |
 | --- | --- | --- |
 | title | `string` |  |
+| hide-title? | `boolean` | The title only for screen readers – it still names the drawer (e.g. a video in a dialog) |
 | description? | `string` |  |
 | placement? | `DrawerPlacement` |  |
 | size? | `OverlaySize` | Width (left/right: sm 320px, md 420px, lg 560px, xl 720px) or height (top/bottom: 30–85 % of the screen); `full` covers the whole screen. Without it 420px wide or as high as the content |
@@ -2169,6 +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 |
+| id? | `string` | Id of the field (the group of parts); a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the field (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -2593,6 +2612,7 @@ Label, helper text, error, aria-invalid and aria-describedby come from Field
 | required? | `boolean` |  |
 | optional? | `boolean` | "(optional)" after the label |
 | disabled? | `boolean` |  |
+| classes? | `RecipeClasses<typeof fieldRecipe>` | Extra classes per part of the Field, e.g. { label: "…" } (see the field recipe) |
 
 | Slot | Slot props | Description |
 | --- | --- | --- |
@@ -2867,6 +2887,7 @@ Button with only an icon; the label is its accessible name, optionally with a co
 | size? | `ButtonSize` | `xs` is 24px – the minimum target size (WCAG 2.5.8) |
 | shape? | `ButtonShape` | Corner shape: `pill` (round, default), `rounded` or `square` |
 | disabled? | `boolean` |  |
+| loading? | `boolean` | Shows a spinner instead of the icon and ignores clicks; stays focusable (aria-disabled + aria-busy) |
 | type? | `'button' \| 'submit' \| 'reset'` |  |
 | badge? | `number \| boolean` | Counter (number > 0) or dot (true) in the top-right corner |
 | badge-label? | `(count: string \| null) => string` | Appended to the accessible name while a badge is shown, e.g. "Notifications, 4 new". Receives the visible counter text ("4", "99+") or null for the dot – the visible text must stay part of the name (WCAG 2.5.3). |
@@ -3189,6 +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` |  |
+| id? | `string` | Id of the dial (the slider); a `<label for>` cannot name it, use `label`, a Field or aria-label |
 | classes? | `RecipeClasses<typeof knobRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3280,6 +3302,7 @@ Always visible list (role="listbox"): arrow keys move, Enter/Space choose, typin
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | draggable-items? | `boolean` | The options can be dragged (`draggable`, `data-value` is the key) – lists that exchange items (PickList) |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the list box, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof listboxRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3677,6 +3700,7 @@ Month field ("10.2026"): type the digits in one go, or pick from the month grid;
 | placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -3726,6 +3750,7 @@ Select with several values: the list stays open while choosing, Space/Enter togg
 | data-source? | `DataSource<T>` | Loads the options when the list opens (pages while scrolling; with `filter` the search asks it, after a typing pause, outdated answers dropped); `getItemsByKeys` gives the labels of chosen values that are not loaded |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof multiSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -3882,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 |
@@ -4112,6 +4138,7 @@ Password field with a button that shows/hides the password (named "Show/Hide pas
 | 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 |
@@ -4291,6 +4318,7 @@ Code input (OTP, PIN): one box per character, typing moves on, pasting fills all
 | invalid? | `boolean` |  |
 | disabled? | `boolean` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the PIN input, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof pinInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4560,6 +4588,7 @@ Star rating: a radio group – arrow keys change the value, each star reads "3 s
 | label? | `string` | Visible label, also the group's accessible name |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | name? | `string` |  |
+| id? | `string` | Id of the root element; a `<label for>` cannot name the rating, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof ratingRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -4902,6 +4931,7 @@ Dropdown list for one option: arrow keys, typeahead, Escape; native select hidde
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
 | page-size? | `number` | Options per request of the data source (default 50) |
 | standalone? | `boolean` | Not labelled by a surrounding Field – for a second control inside it (e.g. PhoneInput's country) |
+| 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 |
@@ -5089,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` |  |
@@ -5407,7 +5438,7 @@ Sticks to the top or bottom edge while its container scrolls
 
 ### Switch
 
-Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch
+Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for>
 
 - Import: `import { Switch } from '@wirecore/wirelayer-vue'`
 - Category: Forms
@@ -5429,6 +5460,7 @@ Ark renders a plain checkbox; role="switch" makes screen readers announce it as
 | required? | `boolean` |  |
 | name? | `string` |  |
 | value? | `string` | Value of the switch – inside a SwitchGroup its state comes from the group's value |
+| id? | `string` | Id of the switch (the hidden input), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof switchControlRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5583,6 +5615,7 @@ Free entries: Enter or "," adds, Backspace on the empty field selects the last e
 | has-more? | `boolean` | More suggestions can be loaded: scrolling to the end of the list emits loadMore |
 | data-source? | `DataSource<string>` | Suggestions from a server instead of `suggestions`: asked with the typed text after a typing pause (outdated answers dropped), more while scrolling |
 | min-search-length? | `number` | Fewest characters the typed text needs before the data source is asked (default 1) |
+| id? | `string` | Id of the input, e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof tagsInputRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5716,6 +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") |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -5747,6 +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 |
+| id? | `string` | Id of the field – the (first) time gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePickerRecipe>` | Extra classes per part of the component (see the datePicker recipe) |
 
 | Event | Payload | Description |
@@ -5862,6 +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) |
 
@@ -6020,6 +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`) |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 | classes? | `RecipeClasses<typeof treeSelectRecipe>` | Extra classes per part of the component, e.g. { base: "…" } (see the recipe) |
 
 | Event | Payload | Description |
@@ -6122,6 +6159,7 @@ Select for any number of items – only the visible options are rendered.
 | data-source? | `DataSource<T>` | Loads the items from a server instead of `items`: the first page when it opens, more while scrolling, the search field asks the server (after a typing pause); labels of chosen values that are not loaded come from `getItemsByKeys` |
 | page-size? | `number` | Items per request of the data source (default 50) |
 | min-search-length? | `number` | Fewest characters the search needs before the data source is asked |
+| id? | `string` | Id of the field (the trigger), e.g. for a `<label for>` |
 
 | Event | Payload | Description |
 | --- | --- | --- |
@@ -6297,6 +6335,7 @@ Year field ("2026"): type the digits, or pick from the year grid; range: start
 | placeholder? | `string` | Text of the empty field, shown until it gets the focus – no replacement for a label |
 | size? | `'sm' \| 'md' \| 'lg'` |  |
 | clearable? | `boolean` | Clear button in the field while it has a value |
+| id? | `string` | Id of the field – the (first) date gets it; a `<label for>` cannot name it, use a Field or aria-label |
 | classes? | `RecipeClasses<typeof datePicker>` | Extra classes per part of the date field, e.g. { control: "…" } (the calendar: RecipesProvider) |
 
 | Event | Payload | Description |
@@ -6503,6 +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
@@ -6535,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()] },
 });
 ```
 
@@ -6620,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
@@ -6998,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,
@@ -7023,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.

package/llms.txt

@@ -182,7 +182,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - [Select](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-select--playground): Dropdown list for one option: arrow keys, typeahead, Escape; native select hidden for forms (`@wirecore/wirelayer-vue`)
 - [SignaturePad](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-signaturepad--playground): Signature field (role="application"): draw with mouse, pen or finger; "Undo" removes the last stroke. With typedAlternative the name can be typed instead – the field shows it in a handwriting font. (`@wirecore/wirelayer-vue`)
 - [Slider](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-slider--playground): Range: "Price, Minimum" / "Price, Maximum" (`@wirecore/wirelayer-vue`)
-- [Switch](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switch--playground): Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch (`@wirecore/wirelayer-vue`)
+- [Switch](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switch--playground): Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for> (`@wirecore/wirelayer-vue`)
 - [SwitchGroup](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-switchgroup--playground): role="group" named by its label, described by helper and error text; Switches with a value inside (`@wirecore/wirelayer-vue`)
 - [TagsInput](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-tagsinput--playground): Free entries: Enter or "," adds, Backspace on the empty field selects the last entry (again removes it), arrow keys move between entries; additions and removals are announced. With suggestions the field is a combobox: Arrow down opens them, Enter adds the highlighted one. (`@wirecore/wirelayer-vue`)
 - [Textarea](https://wirecore.github.io/WireLayer/?path=/story/vue_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field (`@wirecore/wirelayer-vue`)
@@ -308,4 +308,7 @@ Full API (props, events, slots, examples) in llms-full.txt next to this file. MC
 - React Native (Expo)
 - HTML and server templates
 - License
+- Components and APIs side by side
+- Pitfalls
 - Custom theme
+- Component sizes and shapes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirecore/wirelayer-vue",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "WireLayer components for Vue 3",
   "license": "MIT",
   "repository": {
@@ -55,12 +55,16 @@
     },
     "./styles.css": "./styles.css",
     "./styles-core.css": "./styles-core.css",
+    "./theme.css": "./theme.css",
+    "./fonts.css": "./fonts.css",
     "./sources/*": "./dist/sources/*"
   },
   "files": [
     "dist",
     "styles.css",
     "styles-core.css",
+    "theme.css",
+    "fonts.css",
     "llms.txt",
     "llms-full.txt"
   ],
@@ -162,8 +166,8 @@
     "@ark-ui/vue": "^5.39.3",
     "@internationalized/date": "^3.12.4",
     "@lucide/vue": "^1.59.0",
-    "@wirecore/wirelayer-recipes": "^0.5.0",
-    "@wirecore/wirelayer-tokens": "^0.3.0"
+    "@wirecore/wirelayer-recipes": "^0.6.0",
+    "@wirecore/wirelayer-tokens": "^0.4.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.6.2",

package/theme.css

@@ -0,0 +1,14 @@
+/*
+ * WireLayer theme without fonts and without the classes of the components – for an app with its own font
+ * (@theme { --font-sans: … }) and the classes of the components it uses: by hand, or with the Vite plugin
+ * (@wirecore/wirelayer-recipes/vite) that adds them to this file:
+ *   @import 'tailwindcss';
+ *   @import '@wirecore/wirelayer-vue/theme.css';
+ *   @import '@wirecore/wirelayer-vue/fonts.css';   (the WireLayer fonts, if you want them)
+ */
+@import '@wirecore/wirelayer-tokens/theme.css';
+
+/* Lets the components warn in development when the classes of a recipe they render were not imported */
+:root {
+    --wc-recipe-sources: 1;
+}