@nldd/design-system 0.8.85 → 0.8.87

package/dist/types/vue.d.ts

@@ -149,7 +149,7 @@ declare module 'vue' {
 		'showText'?: NLDDActivityIndicator['showText'];
 		/** Label text. Falls back to the translated "Laden" when unset. */
 		'text'?: NLDDActivityIndicator['text'];
-		/** 'default' waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). Default 'default'. */
+		/** 'delay' (the default) waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). */
 		'timing'?: NLDDActivityIndicator['timing'];
 		/** Mark the loader as finished while keeping the element mounted; clears aria-busy and hides the indicator. */
 		'complete'?: NLDDActivityIndicator['complete'];
@@ -169,9 +169,9 @@ declare module 'vue' {
 	type NLDDAvatarProps = {
 		/** `person` (circle, person icon) or `organization` (rounded, building icon); default `person` */
 		'type'?: NLDDAvatar['type'];
-		/** `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along */
+		/** `full` (the default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). The initials and the icon scale along */
 		'size'?: NLDDAvatar['size'];
-		/** `default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default` */
+		/** `neutral` (the default, a neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance) */
 		'color'?: NLDDAvatar['color'];
 		/** Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin) */
 		'icon-aligned'?: NLDDAvatar['iconAligned'];
@@ -193,9 +193,9 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
 		/** Hides the avatar from assistive software (use when the name already stands beside it as text) */
 		'decorative'?: NLDDAvatar['decorative'];
-		/** When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
+		/** When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
 		'tooltip-timing'?: NLDDAvatar['tooltipTiming'];
-		/** When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
+		/** When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
 		'tooltipTiming'?: NLDDAvatar['tooltipTiming'];
 		/** Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it */
 		'href'?: NLDDAvatar['href'];
@@ -583,7 +583,7 @@ declare module 'vue' {
 	};
 
 	type NLDDCollectionProps = {
-		/** Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid') */
+		/** Layout mode: 'grid' | 'stack' | 'lanes' | 'horizontal-scroll' (default: 'grid') */
 		'layout'?: NLDDCollection['layout'];
 		/** Show load-more button in grid/stack (default: false) */
 		'show-load-more'?: NLDDCollection['showLoadMore'];
@@ -597,12 +597,24 @@ declare module 'vue' {
 		'lazy-load'?: NLDDCollection['lazyLoad'];
 		/** Automatically load more items when the button becomes visible */
 		'lazyLoad'?: NLDDCollection['lazyLoad'];
-		/** Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
+		/** Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
 		'item-width'?: NLDDCollection['itemWidth'];
-		/** Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
+		/** Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
 		'itemWidth'?: NLDDCollection['itemWidth'];
-		/** Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default. */
+		/** Gap between items, as a step of the spacing scale ('0', '2', '4', '6', '8', '10', '12', '16', '20', '24', '28', '32', '40', '44', '48', '56', '64', '80', '96'). Overrides the responsive default at every breakpoint; unset keeps the default. */
 		'gap'?: NLDDCollection['gap'];
+		/** Gap at sm, overriding `gap` there */
+		'sm-gap'?: NLDDCollection['smGap'];
+		/** Gap at sm, overriding `gap` there */
+		'smGap'?: NLDDCollection['smGap'];
+		/** Gap at md, overriding `gap` there */
+		'md-gap'?: NLDDCollection['mdGap'];
+		/** Gap at md, overriding `gap` there */
+		'mdGap'?: NLDDCollection['mdGap'];
+		/** Gap at lg, overriding `gap` there */
+		'lg-gap'?: NLDDCollection['lgGap'];
+		/** Gap at lg, overriding `gap` there */
+		'lgGap'?: NLDDCollection['lgGap'];
 		/** Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action' */
 		'translations'?: NLDDCollection['translations'];
 		/** When the load-more button is clicked */
@@ -1226,7 +1238,7 @@ declare module 'vue' {
 	type NLDDIconProps = {
 		/** The name of the icon to display */
 		'name'?: NLDDIcon['name'];
-		/** `full` (default) fills the container; `inherit` follows the surrounding text (1em); or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. */
+		/** `full` (the default) fills the container. `inherit` sizes the icon to the surrounding text (1em) and drops it onto that text's own line, for an icon set in a line of running text. Or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). */
 		'size'?: NLDDIcon['size'];
 		/** Functional (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or rijkskleur (`lintblauw`, `donkerblauw`, `hemelblauw`, `lichtblauw`, `paars`, `violet`, `robijnrood`, `roze`, `rood`, `oranje`, `donkergeel`, `geel`, `donkerbruin`, `bruin`, `donkergroen`, `groen`, `mosgroen`, `mintgroen`). Empty = inherit `color` from parent. */
 		'color'?: NLDDIcon['color'];
@@ -1281,9 +1293,9 @@ declare module 'vue' {
 		'accessible-label'?: NLDDIconButton['accessibleLabel'];
 		/** Accessible label for screen readers. Overrides text as aria-label and title tooltip. Use when the visible text alone lacks context for screen readers (e.g. text "Toon", accessible-label "Toon wachtwoord"). The text is still shown visually in lg size regardless. */
 		'accessibleLabel'?: NLDDIconButton['accessibleLabel'];
-		/** Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
+		/** Forwarded to the inner nldd-tooltip's `timing`: 'delay' (the default, a 700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
 		'tooltip-timing'?: NLDDIconButton['tooltipTiming'];
-		/** Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
+		/** Forwarded to the inner nldd-tooltip's `timing`: 'delay' (the default, a 700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
 		'tooltipTiming'?: NLDDIconButton['tooltipTiming'];
 		/** When set, renders an <a> element instead of <button> */
 		'href'?: NLDDIconButton['href'];
@@ -1308,7 +1320,7 @@ declare module 'vue' {
 		'verticalAlignment'?: NLDDIconCell['verticalAlignment'];
 		/** Size: '16' | '20' | '24' | '32' (default: '24') */
 		'size'?: NLDDIconCell['size'];
-		/** Color variant of the icon (default: 'default') */
+		/** Color variant of the icon (default: 'content') */
 		'color'?: NLDDIconCell['color'];
 		/** Icon name (renders `<nldd-icon>`). Takes precedence over the default slot. */
 		'icon'?: NLDDIconCell['icon'];
@@ -1407,6 +1419,10 @@ declare module 'vue' {
 		'heading-level'?: NLDDInlineDialog['headingLevel'];
 		/** Renders text as h1–h6; absent renders a p */
 		'headingLevel'?: NLDDInlineDialog['headingLevel'];
+		/** Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width. */
+		'horizontal-alignment'?: NLDDInlineDialog['horizontalAlignment'];
+		/** Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width. */
+		'horizontalAlignment'?: NLDDInlineDialog['horizontalAlignment'];
 	};
 
 	type NLDDJustInTimeEducationProps = {
@@ -1469,7 +1485,7 @@ declare module 'vue' {
 		'target'?: NLDDLink['target'];
 		/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
 		'rel'?: NLDDLink['rel'];
-		/** Text size: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Empty = inherit. */
+		/** Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap. */
 		'size'?: NLDDLink['size'];
 		/** Link text (alternative to the default slot) */
 		'text'?: NLDDLink['text'];
@@ -1529,7 +1545,9 @@ declare module 'vue' {
 		'button'?: NLDDListItem['button'];
 		/** Makes the whole row a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItem['checkbox'];
-		/** Checked state of a `checkbox` row; the item toggles it on activation */
+		/** Makes the whole row one radio of a group: the action becomes a `role="radio"` button carrying `aria-checked`, and activation sets `checked` (never clears it) and fires `change`. Put the rows in an `nldd-list type="radiogroup"`, which is what makes them a set. Wins over `button`, loses to `href` and `checkbox`. The arrow keys move focus without checking, where a native radio group and `nldd-radio-button-group` check as they go: a row can carry more than a label, so stepping past one should not commit it. */
+		'radio'?: NLDDListItem['radio'];
+		/** Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on activation, a radio row only ever sets it */
 		'checked'?: NLDDListItem['checked'];
 		/** Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row. */
 		'disabled'?: NLDDListItem['disabled'];
@@ -1548,7 +1566,7 @@ declare module 'vue' {
 		'childRows'?: NLDDListItem['childRows'];
 		/** The branch this row hangs under, or undefined for a top-level row. */
 		'parentRow'?: NLDDListItem['parentRow'];
-		/** On a `checkbox` row after it toggles; detail: { checked: boolean } */
+		/** On a `checkbox` row after it toggles, and on a `radio` row when it becomes checked; detail: { checked: boolean } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
@@ -1733,6 +1751,10 @@ declare module 'vue' {
 		'supporting-text'?: NLDDModalDialog['supportingText'];
 		/** Forwarded to nldd-inline-dialog; supporting text */
 		'supportingText'?: NLDDModalDialog['supportingText'];
+		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
+		'horizontal-alignment'?: NLDDModalDialog['horizontalAlignment'];
+		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
+		'horizontalAlignment'?: NLDDModalDialog['horizontalAlignment'];
 		/** Accessible name for the dialog (aria-label); falls back to text */
 		'accessible-label'?: NLDDModalDialog['accessibleLabel'];
 		/** Accessible name for the dialog (aria-label); falls back to text */
@@ -2301,7 +2323,7 @@ declare module 'vue' {
 		'centered'?: NLDDRichText['centered'];
 		/** Opt-in automatic hyphenation for running text (p, li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for instance): without language information the browser does not hyphenate. An `overflow-wrap: break-word` safety net on p/li is always on, independent of this attribute, so long URLs and compounds break neatly instead of overflowing even without a dictionary. */
 		'hyphens'?: NLDDRichText['hyphens'];
-		/** 'inherit' lets all text follow the color of the surface (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. Empty = the default content colors. */
+		/** 'content' (the default) takes the system's own content colors, each element its own. 'inherit' lets all text follow the color of the surface instead (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. */
 		'color'?: NLDDRichText['color'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDRichText['translations'];
@@ -2423,8 +2445,6 @@ declare module 'vue' {
 		'placement'?: NLDDSheet['placement'];
 		/** Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+. */
 		'height'?: NLDDSheet['height'];
-		/** Non-modal (no backdrop or focus lock); the sheet is modal by default */
-		'modeless'?: NLDDSheet['modeless'];
 		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
 		'accessible-label'?: NLDDSheet['accessibleLabel'];
 		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
@@ -2860,7 +2880,7 @@ declare module 'vue' {
 		'line-height'?: NLDDText['lineHeight'];
 		/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
 		'lineHeight'?: NLDDText['lineHeight'];
-		/** Text color: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit' (default: 'default'). 'default' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface. */
+		/** Text color: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit'. 'content' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface. */
 		'color'?: NLDDText['color'];
 		/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
 		'horizontal-alignment'?: NLDDText['horizontalAlignment'];
@@ -2871,7 +2891,7 @@ declare module 'vue' {
 	type NLDDTextCellProps = {
 		/** Cell size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDTextCell['size'];
-		/** Text color variant: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' (default: 'default'). All non-default/-secondary variants apply to all three text fields so the cell reads as a coherent state. */
+		/** Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state. */
 		'color'?: NLDDTextCell['color'];
 		/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
 		'width'?: NLDDTextCell['width'];
@@ -2952,6 +2972,8 @@ declare module 'vue' {
 		'invalid'?: NLDDTextEditor['invalid'];
 		/** Consumer-supplied */
 		'mentionSource'?: NLDDTextEditor['mentionSource'];
+		/** Your own typeahead lists next to the */
+		'typeaheads'?: NLDDTextEditor['typeaheads'];
 		/** Consumer-supplied annotations (W3C-style overlay). Property only (set via JS). Render only when `annotatable` is on. The text stays clean; these render as a light tint and a count badge, anchored by offset and mapped through edits. IMPORTANT: assign a NEW array to apply changes. Lit dirty-checks this property by identity, so mutating the existing array in place (`editor.annotations.push(next)`, `editor.annotations[0].end = 9`, …) does NOT trigger a re-render. Always replace it: `editor.annotations = [...editor.annotations, next]`. */
 		'annotations'?: NLDDTextEditor['annotations'];
 		/** Set by nldd-form-field. A consumer never writes this. */
@@ -2963,8 +2985,10 @@ declare module 'vue' {
 		'onChange'?: (event: CustomEvent) => void;
 		/** When the selection or content changes (detail: TextEditorState), for toolbar toggle state */
 		'onNlddTextEditorState'?: (event: CustomEvent) => void;
-		/** When an @-mention is inserted (detail: MentionInsertedDetail with id, label, from, to) */
+		/** When an @-mention is inserted (detail: MentionInsertedDetail with id, text, from, to; clean offsets, like getSelection()) */
 		'onNlddTextEditorMention'?: (event: CustomEvent) => void;
+		/** When a candidate from one of the `typeaheads` is chosen (detail: TypeaheadChosenDetail with trigger, candidate, from, to; clean offsets) */
+		'onNlddTextEditorTypeahead'?: (event: CustomEvent) => void;
 		/** When an annotation's count badge is clicked (detail: { ids: string[], rect: DOMRect }); rect is the badge's viewport box so a consumer can anchor its own note UI to it */
 		'onNlddTextEditorAnnotationClick'?: (event: CustomEvent) => void;
 	};
@@ -3136,14 +3160,14 @@ declare module 'vue' {
 	type NLDDTitleProps = {
 		/** Visual size of the title: 1–6 (default: 3) */
 		'size'?: NLDDTitle['size'];
-		/** 'inherit' lets the title follow the text color of the surface (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. Empty = the default content colors. */
+		/** 'content' (the default) takes the system's own content colors. 'inherit' lets the title follow the text color of the surface instead (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. */
 		'color'?: NLDDTitle['color'];
 	};
 
 	type NLDDTitleCellProps = {
 		/** Visual size of the title (default: 5) */
 		'size'?: NLDDTitleCell['size'];
-		/** Text color variant (default: 'default'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state. */
+		/** Text color variant (default: 'content'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state. */
 		'color'?: NLDDTitleCell['color'];
 		/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
 		'width'?: NLDDTitleCell['width'];
@@ -3391,7 +3415,7 @@ declare module 'vue' {
 		'open'?: NLDDTooltip['open'];
 		/** Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices) */
 		'placement'?: NLDDTooltip['placement'];
-		/** When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant. */
+		/** When the tooltip appears on hover: 'instant' — right away, without a show delay. 'delay' (the default) — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant. */
 		'timing'?: NLDDTooltip['timing'];
 		/** When a user presses Escape while `open=true`. The consumer owns the open lifecycle from there (we cannot clear `open` on our own), so this event is the consumer's chance to set `open` back to `false`. WCAG 1.4.13: a persistent hover or focus overlay has to be dismissible without moving focus. */
 		'onNlddTooltipDismiss'?: (event: CustomEvent) => void;
@@ -3548,8 +3572,6 @@ declare module 'vue' {
 	};
 
 	type NLDDWindowProps = {
-		/** Modeless (no backdrop or focus trap); the window is modal by default */
-		'modeless'?: NLDDWindow['modeless'];
 		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
 		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
 		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
@@ -3622,11 +3644,11 @@ declare module 'vue' {
 		'nldd-code-editor': DefineComponent<NLDDCodeEditorProps>;
 		/** A read-only block of code/text built on a non-editable CodeMirror 6 view. Visually pairs with nldd-code-editor (same engine, same token palette). Whitespace is preserved; long lines scroll horizontally by default. Set `wrap` to break long lines onto the next visual line. Set `language` to one of the supported grammars (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python) to highlight the content. Without `language` the content renders plain. Grammars are loaded lazily on first use, so a page that never sets `language` ships zero grammar code. Token colors are the `--components-code-viewer-token-*` custom properties (shared with the editor via the CodeMirror highlight style). Override them per-instance to swap the theme. */
 		'nldd-code-viewer': DefineComponent<NLDDCodeViewerProps>;
-		/** A container for displaying collections of items. Supports grid, stack, and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view. */
+		/** A container for displaying collections of items. Supports grid, stack, lanes and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view. */
 		'nldd-collection': DefineComponent<NLDDCollectionProps>;
 		/** A text input with autocomplete dropdown via nldd-menu. Add a slotted nldd-menu with nldd-menu-item children to provide options. The slotted nldd-menu keeps its default focus behavior (menu container receives focus) so that typing keeps focus on the input. The picker button moves focus to the menu explicitly on activation. Note: Only nldd-menu-item type="button" is supported. Radio and checkbox types are not supported in this context. */
 		'nldd-combo-box': DefineComponent<NLDDComboBoxProps>;
-		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. */
+		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that nldd-collection's lanes falls back to its own grid rather than to multicol: that component pages, and multicol redistributes the whole set every time load-more adds to it. */
 		'nldd-container': DefineComponent<NLDDContainerProps>;
 		/** A text field for a date, with an optional calendar in a popover. The value is always ISO (yyyy-mm-dd); on screen it shows the Dutch notation (dd-mm-yyyy). Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. */
 		'nldd-date-field': DefineComponent<NLDDDateFieldProps>;
@@ -3674,7 +3696,7 @@ declare module 'vue' {
 		'nldd-keyboard-shortcut': DefineComponent<NLDDKeyboardShortcutProps>;
 		/** Hyperlink component with two modes: 1. **Standalone (sized)**: set `size="xs"|"sm"|"md"|"lg"` for menus, action areas or overviews. Fixed text size, `display: inline-flex` with `gap` for icon spacing. 2. **Inline (inherit)**: leave `size` out or set `size="inherit"` explicitly. The link inherits `font-size`, `line-height` and `font-family` from its surroundings. Text wraps naturally across lines (`display: inline`). Icons work here too; the natural whitespace between icon and text provides the spacing. For links in CMS or markdown output, where the `<a>` arrives as HTML, `<nldd-rich-text>` with a raw `<a>` remains the route to take. */
 		'nldd-link': DefineComponent<NLDDLinkProps>;
-		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role="list"`, `role="listitem"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. A list you walk through answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. It follows the type, which you can see before you touch a key. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
+		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `radiogroup` — `role="radiogroup"`, for a set of `nldd-list-item radio` rows: one choice, laid out as rows so each option can carry a count or a second line. The rows step out of the accessibility tree themselves (`role="none"`), so the radios are the group's own children. The arrows move focus here and activation checks, rather than the selection following focus as it does in `nldd-radio-button-group`. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role="list"`, `role="listitem"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. A list you walk through answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. It follows the type, which you can see before you touch a key. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
 		'nldd-list': DefineComponent<NLDDListProps>;
 		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
 		'nldd-list-item': DefineComponent<NLDDListItemProps>;
@@ -3705,7 +3727,7 @@ declare module 'vue' {
 		'nldd-one-half-one-half-section': DefineComponent<NLDDOneHalfOneHalfSectionProps>;
 		/** A section with a 1/3 sidebar on the left and 2/3 main content on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
 		'nldd-one-third-two-thirds-section': DefineComponent<NLDDOneThirdTwoThirdsSectionProps>;
-		/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling. A ResizeObserver on the header sets padding-top on the scroll wrapper (only when not scrolled). In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer become position:sticky layers offset by --context-layer-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. */
+		/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling. A ResizeObserver on the header sets padding-top on the scroll wrapper (only when not scrolled). In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. */
 		'nldd-page': DefineComponent<NLDDPageProps>;
 		/** The footer band at the bottom of a page. Hosts three optional rows in a fixed order: breadcrumbs (top), consumer-defined main content (middle), and a legal-bar (bottom). Dividers are drawn automatically between non-empty rows. Establishes its own container query (`page-footer-container`) so the responsive padding and gap react to the footer's own width, not the viewport. The host has `id="page-footer"` so a skip-link can target it directly. Use the sub-components `nldd-page-footer-legal-bar` and `nldd-page-footer-legal-bar-item` for the bottom row. */
 		'nldd-page-footer': DefineComponent<NLDDPageFooterProps>;
@@ -3784,7 +3806,7 @@ declare module 'vue' {
 		'nldd-text': DefineComponent<NLDDTextProps>;
 		/** A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-text-cell': DefineComponent<NLDDTextCellProps>;
-		/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
+		/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
 		'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
 		'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
 		/** A text field for a time. The value is always 24-hour `HH:mm`, which is how Dutch shows it too, so unlike nldd-date-field there is nothing to convert. Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. What you do in the picker is a preview until you leave it. The field shows the time right away but commits it on close. "Klaar" and Enter keep the choice, and so does a click outside once you have picked something. Cancel and Escape put the old time back. On an empty field the wheels open at `min`, or otherwise at the current time rounded to `step`, which does not fill in the field yet. */
@@ -3819,7 +3841,7 @@ declare module 'vue' {
 		'nldd-validation-item': DefineComponent<NLDDValidationItemProps>;
 		/** Nederlandse Digitale Dienst Validation List (Lit + TypeScript) Everything a value has to satisfy, in one list. A requirement you can state up front is an item with a rule, and it checks itself while you type. One only a server can decide is an item without a rule, and the app names it in `unmet` on the control. The list has two modes and `judging` is the switch. Before a verdict it shows its hints, which are the requirements of the field. After one it shows everything the value does not satisfy, and the hints are gone. It throws that switch itself the moment its control turns `invalid`, so when the field is judged is the consumer's decision, and the right moment is on submit. Hints are off by default. A phone number does not need its format spelled out before anyone has typed, while the rules for a password do. There are no checkmarks. The control already shows a validation icon of its own, and repeating that per line says the same thing three times. */
 		'nldd-validation-list': DefineComponent<NLDDValidationListProps>;
-		/** A floating window based on the native <dialog> element. Can be shown modal or modeless. Positionable through CSS values. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
+		/** A floating window based on the native <dialog> element, positionable through CSS values. Always modal. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
 		'nldd-window': DefineComponent<NLDDWindowProps>;
 	}
 }

package/dist/utilities/spacing-scale.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The spacing scale, for the attributes that take a step of it.
+ *
+ * Spacing is rhythm: the point of a scale is that the space between things is
+ * the same handful of numbers on every page, so a value beside it is not a
+ * finer choice but a break in the pattern. These attributes take a step and
+ * nothing else, and this is the one place that turns a step into its token.
+ *
+ * Which also settles what the attribute means. `gap="16"` in a component that
+ * expected a CSS length wrote `--_gap: 16`, which is not one: the declaration
+ * fell away and the gap became zero with nothing said. Anything this cannot
+ * place is refused and named in dev instead, a length included — writing an
+ * unplaceable value is that same silent zero.
+ */
+/** Every step there is. `'0'` is a value, not the absence of one. */
+export declare const SPACING_SCALE: readonly ["0", "2", "4", "6", "8", "10", "12", "16", "20", "24", "28", "32", "40", "44", "48", "56", "64", "80", "96"];
+export type SpacingSize = (typeof SPACING_SCALE)[number];
+/**
+ * A step of the scale as the token it stands for.
+ *
+ * Returns null when there is nothing to set, so a caller can remove the
+ * property rather than write an empty one. `element` and `attribute` are only
+ * there to name the offender in a dev warning.
+ */
+export declare function spacingToValue(value: string | undefined, element: string, attribute: string): string | null;
+//# sourceMappingURL=spacing-scale.d.ts.map

package/dist/utilities/spacing-scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing-scale.d.ts","sourceRoot":"","sources":["../../src/utilities/spacing-scale.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,qEAAqE;AACrE,eAAO,MAAM,aAAa,wHAGhB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAgBzD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,GACf,MAAM,GAAG,IAAI,CAiBf"}

package/dist/utilities/spacing-scale.js

@@ -0,0 +1,54 @@
+/**
+ * The spacing scale, for the attributes that take a step of it.
+ *
+ * Spacing is rhythm: the point of a scale is that the space between things is
+ * the same handful of numbers on every page, so a value beside it is not a
+ * finer choice but a break in the pattern. These attributes take a step and
+ * nothing else, and this is the one place that turns a step into its token.
+ *
+ * Which also settles what the attribute means. `gap="16"` in a component that
+ * expected a CSS length wrote `--_gap: 16`, which is not one: the declaration
+ * fell away and the gap became zero with nothing said. Anything this cannot
+ * place is refused and named in dev instead, a length included — writing an
+ * unplaceable value is that same silent zero.
+ */
+/** Every step there is. `'0'` is a value, not the absence of one. */
+export const SPACING_SCALE = [
+    '0', '2', '4', '6', '8', '10', '12', '16', '20', '24',
+    '28', '32', '40', '44', '48', '56', '64', '80', '96',
+];
+/** Anything that is not a bare number: a length, a percentage, a calc(). */
+function looksLikeLength(value) {
+    return /[a-z%()]/i.test(value.trim());
+}
+const warned = new Set();
+function warnOnce(element, attribute, message) {
+    const key = `${element}.${attribute}.${message}`;
+    if (warned.has(key))
+        return;
+    warned.add(key);
+    console.warn(`<${element}>: ${message}`);
+}
+/**
+ * A step of the scale as the token it stands for.
+ *
+ * Returns null when there is nothing to set, so a caller can remove the
+ * property rather than write an empty one. `element` and `attribute` are only
+ * there to name the offender in a dev warning.
+ */
+export function spacingToValue(value, element, attribute) {
+    if (value === undefined || value === '')
+        return null;
+    const step = String(value).trim();
+    if (SPACING_SCALE.includes(step)) {
+        return step === '0' ? '0' : `var(--primitives-space-${step})`;
+    }
+    if (import.meta.env?.DEV) {
+        const why = looksLikeLength(step)
+            ? 'is a CSS length, and these attributes take a step of the spacing scale so the rhythm holds across the page'
+            : 'is not a step of the spacing scale';
+        warnOnce(element, attribute, `${attribute}="${step}" ${why} (${SPACING_SCALE.join(', ')}). Nothing is written, so the default stands.`);
+    }
+    return null;
+}
+//# sourceMappingURL=spacing-scale.js.map

package/dist/utilities/spacing-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing-scale.js","sourceRoot":"","sources":["../../src/utilities/spacing-scale.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACrD,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;CAC3C,CAAC;AAIX,4EAA4E;AAC5E,SAAS,eAAe,CAAC,KAAa;IACrC,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;AAEjC,SAAS,QAAQ,CAAC,OAAe,EAAE,SAAiB,EAAE,OAAe;IACpE,MAAM,GAAG,GAAG,GAAG,OAAO,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;IACjD,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChB,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,MAAM,OAAO,EAAE,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC7B,KAAyB,EACzB,OAAe,EACf,SAAiB;IAEjB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,IAAI,CAAC;IACrD,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IAClC,IAAK,aAAmC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACzD,OAAO,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,0BAA0B,IAAI,GAAG,CAAC;IAC/D,CAAC;IACD,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;QAC1B,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC;YAChC,CAAC,CAAC,4GAA4G;YAC9G,CAAC,CAAC,oCAAoC,CAAC;QACxC,QAAQ,CACP,OAAO,EACP,SAAS,EACT,GAAG,SAAS,KAAK,IAAI,KAAK,GAAG,KAAK,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,+CAA+C,CACzG,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC"}

package/dist/utilities/visibility-mixin.d.ts

@@ -4,8 +4,8 @@ type Constructor<T = LitElement> = new (...args: any[]) => T;
  * Adds `hide-below` and `hide-above` attributes that toggle visibility based
  * on the inline-size of an ancestor CSS container.
  *
- * Without a `containerName` argument the generated rule is an anonymous
- * `@container (…)` query — it matches the nearest ancestor that declares
+ * Without a `containerName` argument the rule is an anonymous `@container (…)`
+ * query — it matches the nearest ancestor that declares
  * `container-type: inline-size`. Pass a name to target a specific container
  * (e.g. `'cells-container'` for cells inside `nldd-list`, which sets that
  * name inline on its host as a Safari shadow-DOM workaround).
@@ -14,12 +14,15 @@ type Constructor<T = LitElement> = new (...args: any[]) => T;
  * (e.g. '320px', '20rem'). Named values resolve to the standard breakpoint
  * thresholds: `hide-below` uses the breakpoint's lower bound (e.g.
  * `hide-below="lg"` hides in sm+md and shows in lg), `hide-above` its upper
- * bound; the open edges (below sm, above lg) are no-ops. Container queries can't
- * read CSS variables in their conditions, so the query rule is generated at
- * runtime and injected as a <style> element in the component's shadow root,
- * wrapped in `:host { @container <name>? (…) { display: none !important; } }`
- * (nested form — the flattened `@container { :host { … } }` is unreliable in
- * Safari).
+ * bound; the open edges (below sm, above lg) are no-ops.
+ *
+ * The named values are static CSS (see `visibility-mixin.styles.ts`), added
+ * through `finalizeStyles` so that a component's own `static styles` does not
+ * have to know about them. A custom length has no static form: the threshold
+ * is only known at runtime and a container query cannot read one from a CSS
+ * variable, so its rule is written at runtime into a constructable stylesheet
+ * the shadow root adopts. Neither path is an inline stylesheet, so no consumer
+ * needs `'unsafe-inline'` in its `style-src` for either.
  *
  * @mixin VisibilityMixin
  *

package/dist/utilities/visibility-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visibility-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAGtD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AA0C7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACpE,IAAI,EAAE,KAAK,EACX,aAAa,CAAC,EAAE,MAAM,GAgDc,KAAK,GACxC,WAAW,CAAC,UAAU,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CACrE"}
+{"version":3,"file":"visibility-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAoE,MAAM,KAAK,CAAC;AAGnG,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAuC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACpE,IAAI,EAAE,KAAK,EACX,aAAa,CAAC,EAAE,MAAM,GA0Ec,KAAK,GACxC,WAAW,CAAC,UAAU,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CACrE"}