@nldd/design-system 0.8.70 → 0.8.71

package/dist/types/vue.d.ts

@@ -6,7 +6,7 @@
 //     import '@nldd/design-system/vue';
 //
 // Every attribute is available both as written in markup (week-numbers) and in
-// the form Vue normalises it to (weekNumbers). Events are the prop Vue derives
+// the form Vue normalizes it to (weekNumbers). Events are the prop Vue derives
 // from @change, so onChange.
 
 import type { DefineComponent } from 'vue';
@@ -60,6 +60,7 @@ import type { NLDDKeyboardShortcut } from '@nldd/design-system/keyboard-shortcut
 import type { NLDDLink } from '@nldd/design-system/link';
 import type { NLDDList } from '@nldd/design-system/list';
 import type { NLDDListItem } from '@nldd/design-system/list-item';
+import type { NLDDListItemAction } from '@nldd/design-system/list-item-action';
 import type { NLDDMenu } from '@nldd/design-system/menu';
 import type { NLDDMenuBar } from '@nldd/design-system/menu-bar';
 import type { NLDDMenuBarItem } from '@nldd/design-system/menu-bar-item';
@@ -102,6 +103,8 @@ import type { NLDDSplitViewDivider } from '@nldd/design-system/split-view-divide
 import type { NLDDSplitViewPane } from '@nldd/design-system/split-view-pane';
 import type { NLDDStackedSplitView } from '@nldd/design-system/stacked-split-view';
 import type { NLDDStatusBar } from '@nldd/design-system/status-bar';
+import type { NLDDStepIndicator } from '@nldd/design-system/step-indicator';
+import type { NLDDStepIndicatorItem } from '@nldd/design-system/step-indicator';
 import type { NLDDStepper } from '@nldd/design-system/stepper';
 import type { NLDDSwitch } from '@nldd/design-system/switch';
 import type { NLDDSwitchField } from '@nldd/design-system/switch-field';
@@ -171,7 +174,7 @@ declare module 'vue' {
 		'type'?: NLDDAvatar['type'];
 		/** `default` (neutrale vulling) of `inherit` (vulling in de content-kleur: de `--context-content-color`-channel, of `currentColor` als die niet gezet is; tekst in de contrastkleur, zodat de avatar een icoon in bijvoorbeeld een knop kan vervangen); standaard `default` */
 		'color'?: NLDDAvatar['color'];
-		/** Vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg = schaal mee met de container (net als nldd-icon); de initialen en het icoon schalen mee */
+		/** `full` (standaard) schaalt mee met de container, net als nldd-icon; of een vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg gedraagt zich als `full`. De initialen en het icoon schalen mee */
 		'size'?: NLDDAvatar['size'];
 		/** Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge) */
 		'icon-aligned'?: NLDDAvatar['iconAligned'];
@@ -179,6 +182,22 @@ declare module 'vue' {
 		'iconAligned'?: NLDDAvatar['iconAligned'];
 		/** Verbergt de avatar voor hulpsoftware (gebruik wanneer de naam er al als tekst naast staat) */
 		'decorative'?: NLDDAvatar['decorative'];
+		/** Maakt de avatar een link naar deze URL; de schijf zelf wordt de link, dus klikgebied en focusring volgen de vorm */
+		'href'?: NLDDAvatar['href'];
+		/** Maakt de avatar een knop; genegeerd wanneer `href` is gezet */
+		'button'?: NLDDAvatar['button'];
+		/** Link target voor href (bijv. '_blank'); vult rel aan en meldt "Opent in nieuw tabblad" */
+		'target'?: NLDDAvatar['target'];
+		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
+		'rel'?: NLDDAvatar['rel'];
+		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
+		'accessible-label'?: NLDDAvatar['accessibleLabel'];
+		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
+		'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
+		/** Overschrijf translation keys; niet gezette keys vallen terug op het Nederlands */
+		'translations'?: NLDDAvatar['translations'];
+		/** True zodra de avatar zelf een control is. */
+		'isInteractive'?: NLDDAvatar['isInteractive'];
 		/** Initials shown when there is no image: an explicit `initials` wins, otherwise the first letter of the first and last word of `name`. */
 		'resolvedInitials'?: NLDDAvatar['resolvedInitials'];
 		/** Fallback icon when there is neither image nor initials. */
@@ -206,7 +225,7 @@ declare module 'vue' {
 	};
 
 	type NLDDBannerProps = {
-		/** Colour and default icon (default: 'neutral') */
+		/** Color and default icon (default: 'neutral') */
 		'variant'?: NLDDBanner['variant'];
 		/** Icon override. Default per variant: neutral → info-circle-filled, accent → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled */
 		'icon'?: NLDDBanner['icon'];
@@ -272,6 +291,10 @@ declare module 'vue' {
 		'horizontalAlignment'?: NLDDButton['horizontalAlignment'];
 		/** Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px') */
 		'width'?: NLDDButton['width'];
+		/** Caps the width at this CSS length (e.g. '320px'). Combines with `width="full"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it. */
+		'max-width'?: NLDDButton['maxWidth'];
+		/** Caps the width at this CSS length (e.g. '320px'). Combines with `width="full"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it. */
+		'maxWidth'?: NLDDButton['maxWidth'];
 		/** Whether the button has a icon to indicate it opens a menu or popover */
 		'expandable'?: NLDDButton['expandable'];
 		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
@@ -322,7 +345,7 @@ declare module 'vue' {
 		'rel'?: NLDDButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDButton['translations'];
-		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognises this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
+		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognizes this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
 		'popoverTargetElement'?: NLDDButton['popoverTargetElement'];
 		/** Action the browser performs when the button is clicked, mirroring the standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use `'show'` when a separate handler owns the close path (e.g. the consumer toggles the popover programmatically) so the browser's default action doesn't double-fire. */
 		'popoverTargetAction'?: NLDDButton['popoverTargetAction'];
@@ -371,12 +394,14 @@ declare module 'vue' {
 	};
 
 	type NLDDCardProps = {
-		/** Toegankelijke naam van de kaart; bij `href` benoemt deze de link, anders de kaart-region */
+		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
 		'accessible-label'?: NLDDCard['accessibleLabel'];
-		/** Toegankelijke naam van de kaart; bij `href` benoemt deze de link, anders de kaart-region */
+		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
 		'accessibleLabel'?: NLDDCard['accessibleLabel'];
 		/** Maakt de hele kaart een link naar deze URL (leeg = geen link) */
 		'href'?: NLDDCard['href'];
+		/** Maakt de hele kaart een knop; genegeerd wanneer `href` is gezet */
+		'button'?: NLDDCard['button'];
 		/** Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe */
 		'target'?: NLDDCard['target'];
 		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
@@ -429,6 +454,7 @@ declare module 'vue' {
 		'accessible-label'?: NLDDCheckbox['accessibleLabel'];
 		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
 		'accessibleLabel'?: NLDDCheckbox['accessibleLabel'];
+		'internals'?: NLDDCheckbox['internals'];
 		/** Fired when the checkbox state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -446,6 +472,7 @@ declare module 'vue' {
 		'name'?: NLDDCheckboxField['name'];
 		/** Label text for the checkbox */
 		'label'?: NLDDCheckboxField['label'];
+		'internals'?: NLDDCheckboxField['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -485,6 +512,7 @@ declare module 'vue' {
 		'accessible-label'?: NLDDCodeEditor['accessibleLabel'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDCodeEditor['accessibleLabel'];
+		'internals'?: NLDDCodeEditor['internals'];
 		/** When the content changes (detail: { value }) */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When the content is committed on blur (detail: { value }) */
@@ -576,6 +604,7 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDComboBox['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDComboBox['width'];
+		'internals'?: NLDDComboBox['internals'];
 		/** When the input value changes; detail: { value: string } */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When an option is selected or a custom value is committed; detail: { value: string } */
@@ -782,6 +811,7 @@ declare module 'vue' {
 		'width'?: NLDDDateField['width'];
 		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
 		'translations'?: NLDDDateField['translations'];
+		'internals'?: NLDDDateField['internals'];
 		/** Bij elke wijziging. detail: { value } met de ISO-datum, of '' zolang er geen geldige datum staat. */
 		'onInput'?: (event: CustomEvent) => void;
 		/** Wanneer de waarde is vastgelegd. detail: { value } met de ISO-datum, of ''. */
@@ -795,6 +825,8 @@ declare module 'vue' {
 		'start'?: NLDDDatePicker['start'];
 		/** Einde van de periode als ISO. Alleen met `range`. */
 		'end'?: NLDDDatePicker['end'];
+		/** Breedte: `full` (vult de container) of een CSS-lengte (bv. `560px`). Leeg (standaard) is de intrinsieke breedte van zeven dagcellen; de cellen rekken mee met de opgegeven breedte. */
+		'width'?: NLDDDatePicker['width'];
 		/** Kies een periode in plaats van één datum. */
 		'range'?: NLDDDatePicker['range'];
 		/** Vroegst toegestane datum: ISO, of `today` met een verschuiving (`today-18y`). */
@@ -1088,7 +1120,7 @@ declare module 'vue' {
 	type NLDDIconProps = {
 		/** The name of the icon to display */
 		'name'?: NLDDIcon['name'];
-		/** Fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty = inherit from parent. */
+		/** `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`. */
 		'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'];
@@ -1149,7 +1181,7 @@ declare module 'vue' {
 		'rel'?: NLDDIconButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDIconButton['translations'];
-		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognises this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
+		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognizes this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
 		'popoverTargetElement'?: NLDDIconButton['popoverTargetElement'];
 		/** Action the browser performs when the button is clicked, mirroring the standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use `'show'` when a separate handler owns the close path (e.g. the consumer toggles the popover programmatically) so the browser's default action doesn't double-fire. */
 		'popoverTargetAction'?: NLDDIconButton['popoverTargetAction'];
@@ -1339,9 +1371,9 @@ declare module 'vue' {
 		'no-dividers'?: NLDDList['noDividers'];
 		/** Hides the dividers between list items */
 		'noDividers'?: NLDDList['noDividers'];
-		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between items, Home/End jump to first/last, and the list becomes a single tab stop. Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
+		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
 		'arrow-navigation'?: NLDDList['arrowNavigation'];
-		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between items, Home/End jump to first/last, and the list becomes a single tab stop. Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
+		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
 		'arrowNavigation'?: NLDDList['arrowNavigation'];
 		/** Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap. */
 		'height'?: NLDDList['height'];
@@ -1366,12 +1398,18 @@ declare module 'vue' {
 	};
 
 	type NLDDListItemProps = {
-		/** Row size (default: 'md') */
+		/** Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone. */
 		'size'?: NLDDListItem['size'];
 		/** Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
 		'selected'?: NLDDListItem['selected'];
 		/** Renders the item as a `<button>`; ignored when `href` is set (a link wins) */
 		'button'?: NLDDListItem['button'];
+		/** Makes the whole row a `role="checkbox"` control; ignored when `href` is set */
+		'checkbox'?: NLDDListItem['checkbox'];
+		/** Checked state of a `checkbox` row; the item toggles it on activation */
+		'checked'?: NLDDListItem['checked'];
+		/** Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live. */
+		'expanded'?: NLDDListItem['expanded'];
 		/** Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action. */
 		'href'?: NLDDListItem['href'];
 		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
@@ -1381,10 +1419,47 @@ declare module 'vue' {
 		/** Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility. */
 		'reorderable'?: NLDDListItem['reorderable'];
 		'translations'?: NLDDListItem['translations'];
+		/** Nested rows sit in this item's `children` slot, not the list's, so a plain `querySelector` from the list walks past them. */
+		'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 } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDListItemActionProps = {
+		/** Renders the segmented action as a `<button>`; ignored when `href` is set */
+		'button'?: NLDDListItemAction['button'];
+		/** Renders the segmented action as an `<a>` with this URL; wins over `button` and `checkbox` */
+		'href'?: NLDDListItemAction['href'];
+		/** Link target forwarded to the `<a>`; only applies with `href` */
+		'target'?: NLDDListItemAction['target'];
+		/** Link rel forwarded to the `<a>`; only applies with `href` */
+		'rel'?: NLDDListItemAction['rel'];
+		/** Makes the segmented action a `role="checkbox"` control; ignored when `href` is set */
+		'checkbox'?: NLDDListItemAction['checkbox'];
+		/** Checked state of a `checkbox` action; it toggles on activation */
+		'checked'?: NLDDListItemAction['checked'];
+		/** Disclosure state, reflected as `aria-expanded` on the control. Set it on the segmented action that opens something (e.g. a tree row's chevron). Leave it off entirely when the segmented action discloses nothing — an absent attribute emits no aria-expanded. */
+		'expanded'?: NLDDListItemAction['expanded'];
+		/** Marks the segmented action as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
+		'disclosure'?: NLDDListItemAction['disclosure'];
+		/** Marks the segmented action as the current page (`aria-current="page"`) */
+		'current'?: NLDDListItemAction['current'];
+		/** Disabled state; only applies to button and checkbox segmented actions */
+		'disabled'?: NLDDListItemAction['disabled'];
+		/** `full` lets the segmented action grow to fill the row (default: 'fit-content') */
+		'width'?: NLDDListItemAction['width'];
+		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
+		'accessible-label'?: NLDDListItemAction['accessibleLabel'];
+		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
+		'accessibleLabel'?: NLDDListItemAction['accessibleLabel'];
+		/** On a `checkbox` action after it toggles; detail: { checked: boolean } */
+		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDMenuProps = {
-		/** ID of the anchor element. */
+		/** ID of the anchor element. Positions the menu against it AND makes it a toggle: the menu listens on document click and opens/closes itself when the click lands on the anchor. Use this for a menu hung off a button. For a menu you open yourself (a type-ahead under a text field, say), set the `anchorElement` property instead — same positioning, no toggle. */
 		'anchor'?: NLDDMenu['anchor'];
 		/** Floating UI placement. Default: 'bottom-start'. */
 		'placement'?: NLDDMenu['placement'];
@@ -1408,6 +1483,7 @@ declare module 'vue' {
 		'filterFn'?: NLDDMenu['filterFn'];
 		/** Render variant. Use 'listbox' when the menu serves as a combobox popup — this switches role to "listbox" and item roles to "option" per ARIA spec. Default: 'menu'. */
 		'variant'?: NLDDMenu['variant'];
+		/** The anchor as an element reference. Positions the menu exactly like the `anchor` attribute, but does NOT turn the anchor into a toggle — clicking it does not open the menu. Use this whenever you drive open/close yourself (`showPopover()` / `hidePopover()`), which is what nldd-combo-box and nldd-token-field do: their input must stay an input, not a menu button. */
 		'anchorElement'?: NLDDMenu['anchorElement'];
 	};
 
@@ -1460,7 +1536,7 @@ declare module 'vue' {
 		'haspopup'?: NLDDMenuBarItem['haspopup'];
 		/** Of de bijbehorende popover open is; zet aria-expanded op de knop wanneer expandable of haspopup is gezet. Wordt automatisch bijgehouden voor een geslotte `<nldd-menu>`. */
 		'expanded'?: NLDDMenuBarItem['expanded'];
-		/** Direct element reference to the popover this item invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Set by `nldd-menu` when this item is wired up as the menu's anchor so the browser recognises the inner button as the menu's invoker and excludes the click from popover light-dismiss. */
+		/** Direct element reference to the popover this item invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Set by `nldd-menu` when this item is wired up as the menu's anchor so the browser recognizes the inner button as the menu's invoker and excludes the click from popover light-dismiss. */
 		'popoverTargetElement'?: NLDDMenuBarItem['popoverTargetElement'];
 		/** Action the browser performs when the inner button is clicked, mirroring the standard `popovertargetaction` attribute. The menu keeps this in sync with its open state — `'hide'` while open, `'show'` while closed — so the browser's native invoker action always matches the intent of the click without racing. */
 		'popoverTargetAction'?: NLDDMenuBarItem['popoverTargetAction'];
@@ -1499,7 +1575,7 @@ declare module 'vue' {
 		'type'?: NLDDMenuItem['type'];
 		/** Selected state for checkbox and radio types. */
 		'selected'?: NLDDMenuItem['selected'];
-		/** Marks the item as destructive (red text; red highlight bg). Use for irreversible actions like "Delete". Colour is the only built-in signal, so per WCAG 1.4.1 the item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's responsibility. */
+		/** Marks the item as destructive (red text; red highlight bg). Use for irreversible actions like "Delete". Color is the only built-in signal, so per WCAG 1.4.1 the item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's responsibility. */
 		'destructive'?: NLDDMenuItem['destructive'];
 		/** Disabled state. */
 		'disabled'?: NLDDMenuItem['disabled'];
@@ -1585,6 +1661,7 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDMultiLineTextField['width'];
+		'internals'?: NLDDMultiLineTextField['internals'];
 		/** When value changes */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When value is committed (blur) */
@@ -1650,6 +1727,7 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDNumberField['accessibleLabel'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDNumberField['translations'];
+		'internals'?: NLDDNumberField['internals'];
 		/** When the value changes (typing, +/- button, or on-commit correction); detail: { value: number } */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When the value is committed (blur/Enter or +/- button), clamped to [min, max]; empty input falls back to the last valid value. When the committed value differs from the typed value, a matching input event is fired immediately before this one. detail: { value: number } */
@@ -1751,7 +1829,7 @@ declare module 'vue' {
 		'sticky-footer'?: NLDDPage['stickyFooter'];
 		/** Sticky footer */
 		'stickyFooter'?: NLDDPage['stickyFooter'];
-		/** Use a grey background instead of white */
+		/** Use a gray background instead of white */
 		'background'?: NLDDPage['background'];
 		'scrollTarget'?: NLDDPage['scrollTarget'];
 	};
@@ -1849,6 +1927,7 @@ declare module 'vue' {
 		'errorMessageIds'?: NLDDPasswordField['errorMessageIds'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDPasswordField['width'];
+		'internals'?: NLDDPasswordField['internals'];
 		/** When the input value changes ({ detail: { value } }) */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When the input value is committed ({ detail: { value } }) */
@@ -1872,9 +1951,9 @@ declare module 'vue' {
 		'bottom'?: NLDDPopover['bottom'];
 		/** Centreert beide assen op de viewport. Per as overrideable: `centered top="0"` = horizontaal gecentreerd, top-aligned. Mirrort CSS `place-items: center` met `align-items`/`justify-items` overrides. */
 		'centered'?: NLDDPopover['centered'];
-		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoek- resultaten of lange detail-views; volgt Apple/Material conventie van content- sized als default. */
+		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
 		'sm-full-height'?: NLDDPopover['smFullHeight'];
-		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoek- resultaten of lange detail-views; volgt Apple/Material conventie van content- sized als default. */
+		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
 		'smFullHeight'?: NLDDPopover['smFullHeight'];
 		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Popover') als niet gezet — geef altijd een unieke, beschrijvende naam. */
 		'accessible-label'?: NLDDPopover['accessibleLabel'];
@@ -1939,7 +2018,7 @@ declare module 'vue' {
 	};
 
 	type NLDDProgressCircleProps = {
-		/** Semantics for ARIA and gap behaviour (default: 'progress') */
+		/** Semantics for ARIA and gap behavior (default: 'progress') */
 		'mode'?: NLDDProgressCircle['mode'];
 		/** Total value (default: 100) */
 		'max'?: NLDDProgressCircle['max'];
@@ -1997,6 +2076,7 @@ declare module 'vue' {
 		'accessible-label'?: NLDDRadioButton['accessibleLabel'];
 		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
 		'accessibleLabel'?: NLDDRadioButton['accessibleLabel'];
+		'internals'?: NLDDRadioButton['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string, name: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2014,6 +2094,7 @@ declare module 'vue' {
 		'required'?: NLDDRadioButtonField['required'];
 		/** Label text for the radio button */
 		'label'?: NLDDRadioButtonField['label'];
+		'internals'?: NLDDRadioButtonField['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2026,9 +2107,9 @@ declare module 'vue' {
 		/** Marks the group as required */
 		'required'?: NLDDRadioButtonGroup['required'];
 		/** Id of an external label element, set as aria-labelledby on the group */
-		'accessible-labelled-by'?: NLDDRadioButtonGroup['accessibleLabelledBy'];
+		'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
 		/** Id of an external label element, set as aria-labelledby on the group */
-		'accessibleLabelledBy'?: NLDDRadioButtonGroup['accessibleLabelledBy'];
+		'accessibleLabeledBy'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
 		/** Bubbles up from the checked field; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2073,6 +2154,7 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDSearchField['width'];
+		'internals'?: NLDDSearchField['internals'];
 		/** When the input value changes; detail: { value: string } */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When the input value is committed; detail: { value: string } */
@@ -2101,11 +2183,12 @@ declare module 'vue' {
 		/** Accessible name for the group, set as aria-label */
 		'accessibleLabel'?: NLDDSegmentedControl['accessibleLabel'];
 		/** Id of an external label element, set as aria-labelledby on the group */
-		'accessible-labelled-by'?: NLDDSegmentedControl['accessibleLabelledBy'];
+		'accessible-labeled-by'?: NLDDSegmentedControl['accessibleLabeledBy'];
 		/** Id of an external label element, set as aria-labelledby on the group */
-		'accessibleLabelledBy'?: NLDDSegmentedControl['accessibleLabelledBy'];
+		'accessibleLabeledBy'?: NLDDSegmentedControl['accessibleLabeledBy'];
 		/** Selected values for checkbox type. Use property binding: .values=${['New York', 'Amsterdam']} Does not reflect to an attribute — safe for values containing spaces or special characters. */
 		'values'?: NLDDSegmentedControl['values'];
+		'internals'?: NLDDSegmentedControl['internals'];
 		/** When selection changes; detail: { value: string } for radio, detail: { values: string[] } for checkbox */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2183,6 +2266,8 @@ declare module 'vue' {
 		'no-collapse'?: NLDDSidebarSection['noCollapse'];
 		/** Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false. */
 		'noCollapse'?: NLDDSidebarSection['noCollapse'];
+		/** Override translation keys (sheet title fallback, dismiss label); unset keys fall back to Dutch. */
+		'translations'?: NLDDSidebarSection['translations'];
 		/** Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome. */
 		'collapsed'?: NLDDSidebarSection['collapsed'];
 		'background'?: NLDDSidebarSection['background'];
@@ -2364,6 +2449,36 @@ declare module 'vue' {
 		'button'?: NLDDStatusBar['button'];
 	};
 
+	type NLDDStepIndicatorProps = {
+		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		'accessible-label'?: NLDDStepIndicator['accessibleLabel'];
+		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		'accessibleLabel'?: NLDDStepIndicator['accessibleLabel'];
+		/** 1-based nummer van de huidige stap (standaard 1) */
+		'current'?: NLDDStepIndicator['current'];
+		/** Overschrijf vertaalsleutels; niet gezette vallen terug op Nederlands */
+		'translations'?: NLDDStepIndicator['translations'];
+		'total'?: NLDDStepIndicator['total'];
+		/** The current step, clamped to the number of steps: an out-of-range `current` would otherwise mark every step past (or none at all). */
+		'resolvedCurrent'?: NLDDStepIndicator['resolvedCurrent'];
+		'currentItem'?: NLDDStepIndicator['currentItem'];
+	};
+
+	type NLDDStepIndicatorItemProps = {
+		/** `past` | `current` | `future`; overschrijft wat de ouder afleidt */
+		'status'?: NLDDStepIndicatorItem['status'];
+		/** Label onder de bol */
+		'text'?: NLDDStepIndicatorItem['text'];
+		/** Icoon in de bol in plaats van het cijfer of het vinkje */
+		'icon'?: NLDDStepIndicatorItem['icon'];
+		/** Maakt de stap een link (bijvoorbeeld terug naar een afgeronde stap) */
+		'href'?: NLDDStepIndicatorItem['href'];
+		/** For flows without a URL per step (a wizard inside one window). Ignored once `href` is set: one step is one action, and a link outranks a button -- the same rule as nldd-card and nldd-avatar. */
+		'button'?: NLDDStepIndicatorItem['button'];
+		/** The status that counts: the item's own wins over the derived one. */
+		'resolvedStatus'?: NLDDStepIndicatorItem['resolvedStatus'];
+	};
+
 	type NLDDStepperProps = {
 		/** Current value */
 		'value'?: NLDDStepper['value'];
@@ -2381,6 +2496,7 @@ declare module 'vue' {
 		'name'?: NLDDStepper['name'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDStepper['translations'];
+		'internals'?: NLDDStepper['internals'];
 		/** When the value changes; detail: { value: number } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2400,6 +2516,7 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDSwitch['accessibleLabel'];
 		/** Value submitted with the form when the switch is on (default: 'on') */
 		'value'?: NLDDSwitch['value'];
+		'internals'?: NLDDSwitch['internals'];
 		/** When the switch state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2598,6 +2715,7 @@ declare module 'vue' {
 		'mentionSource'?: NLDDTextEditor['mentionSource'];
 		/** 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'];
+		'internals'?: NLDDTextEditor['internals'];
 		/** When the content changes (detail: { value }) */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When the content is committed on blur (detail: { value }) */
@@ -2651,6 +2769,7 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDTextField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDTextField['width'];
+		'internals'?: NLDDTextField['internals'];
 		/** When input value changes */
 		'onInput'?: (event: CustomEvent) => void;
 		/** When input value is committed */
@@ -2658,10 +2777,22 @@ declare module 'vue' {
 	};
 
 	type NLDDTimelineTrackCellProps = {
-		/** Timeline step state (default: 'past') */
-		'step'?: NLDDTimelineTrackCell['step'];
-		/** Position in timeline (default: 'between') */
-		'child'?: NLDDTimelineTrackCell['child'];
+		/** Status van deze stap (standaard 'past'); dezelfde waarden als `nldd-step-indicator-item`. `none` tekent alleen de lijn, zonder stip */
+		'status'?: NLDDTimelineTrackCell['status'];
+		/** Wat deze rij is: een `dot` (standaard) op een tijdlijn van gebeurtenissen, stip van 16px, of een `step` in een stappenlijst, stip van 24px waar een cijfer of icoon in past */
+		'variant'?: NLDDTimelineTrackCell['variant'];
+		/** Deze rij hoort onder de vorige: een kleinere stip in dezelfde baan, dus het spoor loopt recht door en er springt niets in. De stip blijft leeg (een cijfer of icoon past er niet in en zou de rij tot een eigen stap maken); de hiërarchie zet je verder met de rij zelf, bijvoorbeeld een `nldd-text-cell` in plaats van een `nldd-title-cell` */
+		'minor'?: NLDDTimelineTrackCell['minor'];
+		/** Richting waarin de tijdlijn vooruit loopt: `down` (standaard) zet het verleden boven, `up` eronder. Alleen de huidige stap heeft een half spoor, dus alleen daar heeft dit effect */
+		'direction'?: NLDDTimelineTrackCell['direction'];
+		/** Plek in de reeks (standaard 'between'): bepaalt of de lijn boven, onder of aan beide kanten van de stip doorloopt */
+		'position'?: NLDDTimelineTrackCell['position'];
+		/** Cijfer of korte tekst in de stip */
+		'text'?: NLDDTimelineTrackCell['text'];
+		/** Icoonnaam in de stip; wint van `text` */
+		'icon'?: NLDDTimelineTrackCell['icon'];
+		/** Only a step marker has room to read a number in, and a minor row is smaller still -- besides, a number would claim it is a step of its own. */
+		'showsContent'?: NLDDTimelineTrackCell['showsContent'];
 	};
 
 	type NLDDTitleProps = {
@@ -2745,6 +2876,7 @@ declare module 'vue' {
 		'accessible-label'?: NLDDToggleButton['accessibleLabel'];
 		/** Accessible label; required for icon-only usage */
 		'accessibleLabel'?: NLDDToggleButton['accessibleLabel'];
+		'internals'?: NLDDToggleButton['internals'];
 		/** When selection changes; detail: { selected: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2763,9 +2895,9 @@ declare module 'vue' {
 		/** Accessible name for the group (aria-label) */
 		'accessibleLabel'?: NLDDToggleButtonGroup['accessibleLabel'];
 		/** ID of an external label element (aria-labelledby) */
-		'accessible-labelled-by'?: NLDDToggleButtonGroup['accessibleLabelledBy'];
+		'accessible-labeled-by'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
 		/** ID of an external label element (aria-labelledby) */
-		'accessibleLabelledBy'?: NLDDToggleButtonGroup['accessibleLabelledBy'];
+		'accessibleLabeledBy'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
 		/** Bubbles up from the changed button; detail: { selected: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2832,6 +2964,7 @@ declare module 'vue' {
 		'name'?: NLDDTokenField['name'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDTokenField['translations'];
+		'internals'?: NLDDTokenField['internals'];
 		/** When the selected values change; detail: { values: string[] } */
 		'onChange'?: (event: CustomEvent) => void;
 		/** When the input text changes; detail: { value: string } */
@@ -3025,6 +3158,10 @@ declare module 'vue' {
 	type NLDDWindowProps = {
 		/** Niet-modaal (geen backdrop of focusvergrendeling); standaard is het venster modaal */
 		'modeless'?: NLDDWindow['modeless'];
+		/** Een klik op de backdrop sluit het venster niet. Voor vensters waar per ongeluk wegklikken werk kost: een wizard, een formulier met ingevulde velden. Escape en de dismiss-knop blijven werken. */
+		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
+		/** Een klik op de backdrop sluit het venster niet. Voor vensters waar per ongeluk wegklikken werk kost: een wizard, een formulier met ingevulde velden. Escape en de dismiss-knop blijven werken. */
+		'noLightDismiss'?: NLDDWindow['noLightDismiss'];
 		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Venster') als niet gezet — geef altijd een unieke, beschrijvende naam per venster. */
 		'accessible-label'?: NLDDWindow['accessibleLabel'];
 		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Venster') als niet gezet — geef altijd een unieke, beschrijvende naam per venster. */
@@ -3054,15 +3191,15 @@ declare module 'vue' {
 	};
 
 	export interface GlobalComponents {
-		/** Layout placeholder that fills its parent and centres an indeterminate activity indicator. By default the indicator is held back for 1000ms so brief loading states don't flash; once the delay passes it fades in. Set `timing="instant"` to skip the delay (the fade-in still plays) — this is what embedding components such as `nldd-button` use for their loading state. The default indicator is a simple icon-sized circle that follows the shared `--context-content-color` channel (set by list-item / table / menu on their content), falling back to `currentColor` wherever that channel is unset (buttons, rich-text, standalone) — so a spinner inside a cell tracks the row's state-aware content colour, while embedders relying on currentColor are unaffected. An optional label sits below (hidden unless `show-text` is set). Drop a `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the `indicator` slot to override it. Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled icon glyph has), so a standalone spinner lines up with an icon or an `icon-aligned` `nldd-avatar` on the same grid — no extra option needed (unlike `nldd-avatar`, which fills edge-to-edge and opts in via `icon-aligned`). Overlay mode: put content in the default slot and the indicator wraps it — it becomes a `position: relative` container, renders the spinner over a dimming backdrop (opt out with `no-backdrop`), and makes the content `inert` so its controls can't be focused or clicked. Toggle loading with `complete` (`?complete=${!isLoading}`). With no slotted content it stays the standalone placeholder described above. Reconnect behaviour: every `connectedCallback` resets the timer and hides the indicator again. If a consumer toggles the element via a conditional render (remove + re-insert) the indicator disappears and re-fades after another delay. Keep the element mounted and toggle visibility / `hidden` instead if you want the timer to run only once. Accessibility: while connected and not `complete` the host is a polite live region (`role="status"`). The label (`text`, or the translated "Laden" fallback) always renders as the region's content — visually hidden when `show-text` is off (the default) — so assistive tech announces the loading state when the indicator appears. Set `complete` (or unmount) to clear it. */
+		/** Layout placeholder that fills its parent and centers an indeterminate activity indicator. By default the indicator is held back for 1000ms so brief loading states don't flash; once the delay passes it fades in. Set `timing="instant"` to skip the delay (the fade-in still plays) — this is what embedding components such as `nldd-button` use for their loading state. The default indicator is a simple icon-sized circle that follows the shared `--context-content-color` channel (set by list-item / table / menu on their content), falling back to `currentColor` wherever that channel is unset (buttons, rich-text, standalone) — so a spinner inside a cell tracks the row's state-aware content color, while embedders relying on currentColor are unaffected. An optional label sits below (hidden unless `show-text` is set). Drop a `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the `indicator` slot to override it. Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled icon glyph has), so a standalone spinner lines up with an icon or an `icon-aligned` `nldd-avatar` on the same grid — no extra option needed (unlike `nldd-avatar`, which fills edge-to-edge and opts in via `icon-aligned`). Overlay mode: put content in the default slot and the indicator wraps it — it becomes a `position: relative` container, renders the spinner over a dimming backdrop (opt out with `no-backdrop`), and makes the content `inert` so its controls can't be focused or clicked. Toggle loading with `complete` (`?complete=${!isLoading}`). With no slotted content it stays the standalone placeholder described above. Reconnect behavior: every `connectedCallback` resets the timer and hides the indicator again. If a consumer toggles the element via a conditional render (remove + re-insert) the indicator disappears and re-fades after another delay. Keep the element mounted and toggle visibility / `hidden` instead if you want the timer to run only once. Accessibility: while connected and not `complete` the host is a polite live region (`role="status"`). The label (`text`, or the translated "Laden" fallback) always renders as the region's content — visually hidden when `show-text` is off (the default) — so assistive tech announces the loading state when the indicator appears. Set `complete` (or unmount) to clear it. */
 		'nldd-activity-indicator': DefineComponent<NLDDActivityIndicatorProps>;
-		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. Set background="tinted" to give the whole application a tinted background. All descendants read --context-parent-background-color via --_background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. In nested (default) scroll mode `overscroll-behavior: none` is set on `document.documentElement` and `document.body` while the app-view is connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s scroll target, this prevents iOS rubber-band on the viewport when scroll gestures land outside an `nldd-page` (e.g. on a top-bar). In root scroll mode the document itself is the scroller, so this is lifted to let the native rubber-band happen. Cleared on last disconnect. */
+		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. Set background="tinted" to give the whole application a tinted background. All descendants read --context-parent-background-color via --_background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll inside its pane (nested mode). The mode is derived from the outermost horizontal split view: one column means the document scrolls, several columns mean the panes do. An app without such a split view is a single column at every width and therefore scrolls the document too — nested scrolling would cost it the rubber-band and the collapsing browser toolbar on iOS for nothing. Set `--context-scroll-mode` on the `nldd-app-view` itself to override the derived mode; an inherited value loses from it. In nested scroll mode `overscroll-behavior: none` is set on `document.documentElement` and `document.body` while the app-view is connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s scroll target, this prevents iOS rubber-band on the viewport when scroll gestures land outside an `nldd-page` (e.g. on a top-bar). In root scroll mode the document itself is the scroller, so this is lifted to let the native rubber-band happen. Cleared on last disconnect. */
 		'nldd-app-view': DefineComponent<NLDDAppViewProps>;
 		/** Toont één persoon of organisatie als een compacte, ronde (persoon) of afgeronde (organisatie) representatie. De inhoud volgt een vaste terugvalketen: een afbeelding wanneer `src` laadt, anders de initialen (uit `initials` of afgeleid uit `name`), en anders een terugval-icoon. `type` bepaalt zowel de vorm als het terugval-icoon: `person` geeft een cirkel met een person-icoon, `organization` een afgeronde vierkant met een building-icoon. De vorm hoort dus bij de betekenis en is niet los instelbaar. Overschrijf het terugval-icoon desgewenst met `icon`. Zonder `size` schaalt de avatar mee met zijn container (net als `nldd-icon`); een vaste maat (dezelfde spacer-uitgelijnde schaal, 16 tot en met 96) is de uitzondering. De initialen en het icoon schalen mee. Brede initialen (WW, MMM) worden automatisch teruggeschaald zodat ze binnen de schijf blijven. Toegankelijkheid: het host-element draagt de betekenis. Met een `name` (en zonder `decorative`) krijgt het `role="img"` met de naam als label. Staat de naam al als tekst ernaast (bijvoorbeeld in een byline), zet dan `decorative` zodat de avatar voor hulpsoftware verborgen blijft. Een dode `src` valt automatisch terug op de initialen of het icoon, nooit op een gebroken-afbeelding-icoon. */
 		'nldd-avatar': DefineComponent<NLDDAvatarProps>;
 		/** Een notificatie-indicator, vaak voor ongelezen aantallen of statusdots. Kan tekst, een getal en/of een icoon tonen. Zonder inhoud verschijnt automatisch een stip. Gebruik in een hoek van een ander element (bijv. een icon) of standalone. */
 		'nldd-badge': DefineComponent<NLDDBadgeProps>;
-		/** An inline notification with a tinted background per variant. Use for persistent, page-level feedback (e.g. an error summary at the top of a form). Banner is more visually present than nldd-inline-dialog — the tinted colour catches the eye. If you need a quieter component, pick a different one rather than overriding the banner's ARIA. Layout: icon left, text + supporting text + optional rich content + actions in the centre, optional dismiss button right. Buttons wrap to a second row on narrow viewports via nldd-button-group's flex wrapping. role and aria-live are set automatically from the variant: - critical → role="alert" (interrupts screen reader) - others → role="status" aria-live="polite" Not overridable — if you need a less prominent component, use one. aria-atomic="true" is also set so that updates to the structured region (icon + heading + supporting-text + actions) are announced as one unit rather than as a partial subtree. Trade-off: any programmatic content mutation re-reads the entire banner. Banners are designed for short, heading-scale copy — if you slot in a paragraph of rich body text and then toggle variant or supporting-text at runtime, AT will re-announce the whole thing. Keep banner content concise, or render long-form messages in a different surface. */
+		/** An inline notification with a tinted background per variant. Use for persistent, page-level feedback (e.g. an error summary at the top of a form). Banner is more visually present than nldd-inline-dialog — the tinted color catches the eye. If you need a quieter component, pick a different one rather than overriding the banner's ARIA. Layout: icon left, text + supporting text + optional rich content + actions in the center, optional dismiss button right. Buttons wrap to a second row on narrow viewports via nldd-button-group's flex wrapping. role and aria-live are set automatically from the variant: - critical → role="alert" (interrupts screen reader) - others → role="status" aria-live="polite" Not overridable — if you need a less prominent component, use one. aria-atomic="true" is also set so that updates to the structured region (icon + heading + supporting-text + actions) are announced as one unit rather than as a partial subtree. Trade-off: any programmatic content mutation re-reads the entire banner. Banners are designed for short, heading-scale copy — if you slot in a paragraph of rich body text and then toggle variant or supporting-text at runtime, AT will re-announce the whole thing. Keep banner content concise, or render long-form messages in a different surface. */
 		'nldd-banner': DefineComponent<NLDDBannerProps>;
 		/** A vertical split view with a main area and an unlimited number of bar panels. Each child determines its order per breakpoint via sm-order, md-order, and lg-order. Children without order attributes are sorted by DOM order. All bars are in normal flow at every breakpoint and stack vertically. A divider is drawn only where the main pane meets an adjacent bar — directly above and/or below main — at every breakpoint (including sm). Two stacked bars on the same side never get a divider between them, so a toolbar and a tab-bar read as one visual unit. Consumers never manage dividers themselves. Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar"). Use slot="bar-1", slot="bar-2" if no meaningful name applies. The main panel always uses slot="main". Sets --context-parent-background-color, which cascades to all descendants. */
 		'nldd-bar-split-view': DefineComponent<NLDDBarSplitViewProps>;
@@ -3082,12 +3219,12 @@ declare module 'vue' {
 		'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
 		/** Een redactionele regel die auteurs of redacteuren toont: optionele avatar(s), een naamregel en ondersteunende tekst (bijvoorbeeld functie of datum). Alle onderdelen zijn optioneel. De naamregel en ondersteunende tekst kunnen als attribuut of als slot worden aangeleverd. Gebruik de slots voor rijkere inhoud, zoals een `<time datetime="…">` voor machine-leesbare datums of een link naar het auteursprofiel. Geslotte inhoud vervangt het bijbehorende attribuut (het attribuut is de fallback van de slot). Bij meerdere redacteuren overlappen de avatars elkaar subtiel; elke avatar krijgt een ring in de surface-kleur (zelfde mechaniek als badge) zodat ze visueel gescheiden blijven. Op een gekleurde ondergrond kan de ringkleur meegegeven worden via `--context-parent-background-color`. Op smalle breedtes (een sm-container, ≤ 640px) met meerdere avatars komt de avatarrij boven de namen te staan, zodat de tekst de volle breedte houdt; met één avatar blijft de byline op één regel. Avatars worden geslot als `<img slot="avatars">`. Zet `alt=""` wanneer de namen al in de tekst staan (decoratief); geef anders een beschrijvende alt-tekst op. Voor één avatar kun je in plaats van slotten ook `avatar-src` (met optioneel `avatar-srcset`) als attribuut meegeven; de afmetingen liggen vast (40px), dus `sizes` zet het component zelf. Meerdere avatars gaan altijd via de slot, en geslotte avatars hebben voorrang op `avatar-src`. */
 		'nldd-byline': DefineComponent<NLDDBylineProps>;
-		/** Een visueel afgebakende kaart met optionele header, body en footer secties. De kaart heeft een elevated look als standaard. Padding wordt overgelaten aan geneste containers. Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart). Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met `position: relative; z-index: 1` om klikbaar te blijven. */
+		/** Een visueel afgebakende kaart met optionele header, body en footer secties. De kaart heeft een elevated look als standaard. Padding wordt overgelaten aan geneste containers. Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart); met `button` een knop (een overlay-button die een gewone, composed `click` geeft — een klik-listener of htmx-attribuut op de kaart zelf werkt dus direct, en Enter/Space doen het native). `href` wint als beide gezet zijn. Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met `position: relative; z-index: 1` om klikbaar te blijven. */
 		'nldd-card': DefineComponent<NLDDCardProps>;
 		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. `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"`. */
 		'nldd-cell': DefineComponent<NLDDCellProps>;
 		'nldd-checkbox': DefineComponent<NLDDCheckboxProps>;
-		/** A checkbox with an inline label for use in forms. */
+		/** A checkbox with an inline label for use in forms. Form-associated: participates in native form submission under `name` with `value` when checked (the inner nldd-checkbox sits in the shadow root and never joins the consumer's form; the field submits on its behalf). */
 		'nldd-checkbox-field': DefineComponent<NLDDCheckboxFieldProps>;
 		/** A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `variant="simple"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `variant="input-field"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line). */
 		'nldd-code-editor': DefineComponent<NLDDCodeEditorProps>;
@@ -3110,7 +3247,7 @@ declare module 'vue' {
 		/** A horizontal tab bar for document tabs with an automatic overflow button and an end slot for action buttons. Exports both NLDDDocumentTabBar and NLDDDocumentTabBarItem. */
 		'nldd-document-tab-bar': DefineComponent<NLDDDocumentTabBarProps>;
 		'nldd-document-tab-bar-item': DefineComponent<NLDDDocumentTabBarItemProps>;
-		/** A cell that displays a drag handle for reorderable list items. Always vertically centered and sized to fit the handle. To enable drag-to-reorder, add the `reorderable-only` attribute to this element. This attribute is required for `nldd-list` to detect the drag handle in the composed event path and activate pointer and keyboard drag mode: ```html <nldd-list reorderable> <nldd-list-item> <nldd-drag-handle-cell slot="start" reorderable-only></nldd-drag-handle-cell> <nldd-text-cell text="Item"></nldd-text-cell> </nldd-list-item> </nldd-list> ``` Without `reorderable-only`, pointer and keyboard drag will never trigger. */
+		/** A cell that displays a drag handle for reorderable list items. Always vertically centered and sized to fit the handle. To enable drag-to-reorder, add the `reorderable-only` attribute to this element. This attribute is required for `nldd-list` to detect the drag handle in the composed event path and activate pointer and keyboard drag mode: ```html <nldd-list reorderable> <nldd-list-item> <nldd-drag-handle-cell reorderable-only></nldd-drag-handle-cell> <nldd-text-cell text="Item"></nldd-text-cell> </nldd-list-item> </nldd-list> ``` Without `reorderable-only`, pointer and keyboard drag will never trigger. */
 		'nldd-drag-handle-cell': DefineComponent<NLDDDragHandleCellProps>;
 		/** A visual wrapper around a native `<select>` element. The consumer provides a native `<select>` as a slotted child — this way the browser retains full control over form submission, accessibility and keyboard navigation, including `<optgroup>`, `data-*` attributes and dynamic changes to options. */
 		'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
@@ -3127,7 +3264,7 @@ declare module 'vue' {
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
 		/** Een paginakop met een mediavlak en een tekstpaneel (de main) dat op zes posities kan staan. Alle vlakken zijn rechthoekig. Bij `main-width="full"` staat het mediavlak als losse strook boven of onder het paneel, niet erachter. Op mobiel stapelt de media altijd boven het volle-breedte paneel. Zonder media vult de main het volledige vlak; met `main-background="base"` krijgt dat vlak een rand zodat het zichtbaar blijft op de base-surface. Met `main-background` krijgt het paneel een vlakkleur uit de filled-categories; die leveren een pure witte of zwarte contentkleur mee, zodat componenten met `color="inherit"` (title, rich-text) gegarandeerd contrast houden. */
 		'nldd-hero': DefineComponent<NLDDHeroProps>;
-		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: by default the icon fills its parent (existing behaviour). Set `size` to pin to a fixed spacer-aligned dimension (16–96px). Colour: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For arbitrary one-off colours, set `style="color: …"` on the host — the inherited `color` still drives the SVG fill/stroke. */
+		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For arbitrary one-off colors, set `style="color: …"` on the host — the inherited `color` still drives the SVG fill/stroke. */
 		'nldd-icon': DefineComponent<NLDDIconProps>;
 		'nldd-icon-button': DefineComponent<NLDDIconButtonProps>;
 		/** A cell component for displaying icons in lists with configurable alignment and size. Set `icon` to render an `nldd-icon` by name, or slot custom content as an escape hatch for non-standard iconography. */
@@ -3142,18 +3279,21 @@ declare module 'vue' {
 		'nldd-keyboard-shortcut': DefineComponent<NLDDKeyboardShortcutProps>;
 		/** Hyperlink component met twee modi: 1. **Standalone (sized)** — set `size="xs"|"sm"|"md"|"lg"` voor menu's, actiegebieden of overzichten. Vaste tekstgrootte, `display: inline-flex` met `gap` voor icon-spacing. 2. **Inline (inherit)** — laat `size` weg of zet expliciet `size="inherit"`. De link erft `font-size`, `line-height` en `font-family` van zijn omgeving. Tekst wraps natuurlijk over regels (`display: inline`). Icons werken ook hier; de natuurlijke whitespace tussen icon en tekst zorgt voor de spacing. Voor links in CMS/markdown-output (waar de `<a>` als HTML binnenkomt) blijft `<nldd-rich-text>` met raw `<a>` de aangewezen route. */
 		'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. Items may individually be buttons or links; the list itself has no special keyboard semantics. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `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. 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 `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). 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. - `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>`. - `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. 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 `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - 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 / 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 segmented action 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" behaviour 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`, providing layout for start, main and end areas. Renders as a link when `href` is set, as a button when `button` is set, or as a plain container otherwise. 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 synchronises 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`). */
+		/** 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 action segmented actions 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 segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. The divider spans the content width by default. Mark a cell with `divider-start` and/or `divider-end` to run it from that cell's start edge to that cell's end edge instead (e.g. starting after an avatar). 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-action[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 synchronises 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>;
+		/** A segmented action inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one action — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segmented action takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot an action sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segmented action sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type="listbox"` list the segmented action renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts. */
+		'nldd-list-item-action': DefineComponent<NLDDListItemActionProps>;
 		/** A floating menu component using the Popover API. Positioned relative to an anchor element using Floating UI. Supports filtering, keyboard navigation, and highlight management. Use nldd-menu-item and nldd-menu-divider as children. Note: Only type="button" items are supported when used inside nldd-combo-box-field. Radio and checkbox types may be used in standalone menus. */
 		'nldd-menu': DefineComponent<NLDDMenuProps>;
 		/** Horizontale rij van nldd-menu-bar-item elementen met automatische overflow detectie. Items die niet passen worden verborgen achter een overflow button met een popover menu. */
 		'nldd-menu-bar': DefineComponent<NLDDMenuBarProps>;
 		/** Interactief bouwblok voor gebruik in een menu bar. Rendert als <a> (met href) of <button> (zonder href). Ondersteunt icon, text, disclosure indicator, en een expandable popover via een geslotte `<nldd-menu>` (of ander popover-element). */
 		'nldd-menu-bar-item': DefineComponent<NLDDMenuBarItemProps>;
+		/** A horizontal rule between groups of items in an `nldd-menu`. */
 		'nldd-menu-divider': DefineComponent<NLDDMenuDividerProps>;
-		/** A labelled group of menu items inside an nldd-menu. Wraps its slotted items in `role="group"` with `aria-labelledby` pointing to the group's `text`, providing native ARIA group semantics that a flat title element can't deliver. The group renders an automatic divider above itself, except when it's the first child of the menu — so consumers don't need to manage separator placement around groups themselves. Spacing above the title is intentionally larger than below, to bind the title visually to the items it labels. Use the wrapper for grouping with a title; for ungrouped flat menus or a divider without a title, the existing `nldd-menu-item` + `nldd-menu-divider` flat structure keeps working unchanged. */
+		/** A labeled group of menu items inside an nldd-menu. Wraps its slotted items in `role="group"` with `aria-labelledby` pointing to the group's `text`, providing native ARIA group semantics that a flat title element can't deliver. The group renders an automatic divider above itself, except when it's the first child of the menu — so consumers don't need to manage separator placement around groups themselves. Spacing above the title is intentionally larger than below, to bind the title visually to the items it labels. Use the wrapper for grouping with a title; for ungrouped flat menus or a divider without a title, the existing `nldd-menu-item` + `nldd-menu-divider` flat structure keeps working unchanged. */
 		'nldd-menu-group': DefineComponent<NLDDMenuGroupProps>;
 		/** A single item within an nldd-menu. */
 		'nldd-menu-item': DefineComponent<NLDDMenuItemProps>;
@@ -3185,12 +3325,12 @@ declare module 'vue' {
 		/** Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two modes: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads "X% voltooid". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged. */
 		'nldd-progress-bar': DefineComponent<NLDDProgressBarProps>;
 		'nldd-progress-bar-segment-indicator': DefineComponent<NLDDProgressBarSegmentIndicatorProps>;
-		/** Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution mode, 24 colours, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No centre text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner. */
+		/** Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution mode, 24 colors, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No center text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner. */
 		'nldd-progress-circle': DefineComponent<NLDDProgressCircleProps>;
 		'nldd-progress-circle-segment-indicator': DefineComponent<NLDDProgressCircleSegmentIndicatorProps>;
 		/** WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with role="radiogroup" and aria-labelledby for proper group semantics. <fieldset> <legend>Kies een optie</legend> <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button> <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button> </fieldset> */
 		'nldd-radio-button': DefineComponent<NLDDRadioButtonProps>;
-		/** A radio button with an inline label. Use inside nldd-radio-button-group for keyboard navigation and group semantics. The group sets the name. */
+		/** A radio button with an inline label. Use inside nldd-radio-button-group for keyboard navigation and group semantics. The group sets the name. Form-associated: the checked field submits its `value` under `name` (the inner nldd-radio-button sits in the shadow root and never joins the consumer's form; the field submits on its behalf). Unchecking siblings is the group's job, so exactly one value per group reaches the form. */
 		'nldd-radio-button-field': DefineComponent<NLDDRadioButtonFieldProps>;
 		/** Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label. */
 		'nldd-radio-button-group': DefineComponent<NLDDRadioButtonGroupProps>;
@@ -3225,6 +3365,10 @@ declare module 'vue' {
 		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
 		/** Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur per variant. Gebruik voor persistente systeemtoestand: een storing, gepland onderhoud, een conceptweergave of een lopende opname. De balk toont bewust geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet alleen uit kleur volgt (WCAG 1.4.1). Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker op smallere schermen. Bij een lang bericht met veel informatie hoort alleen de kern in de balk; verwijs voor de rest naar een losse pagina of sheet (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen. De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button` (rendert een `<button>`; luister naar het native `click` event). Zonder beide is de balk statisch. Bij interactie verschijnt een chevron als affordance. Maximaal één actie per balk; meerdere acties of links in lopende tekst horen in nldd-banner. role en aria-live worden automatisch gezet op basis van de variant: - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader) - overige → role="status" aria-live="polite" Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander. Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in die regelmatig verandert (zoals een aftellende timer). */
 		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
+		/** Toont waar je staat in een proces van meerdere stappen: een rij bollen met een cijfer (of een vinkje op wat af is), een label eronder en een lijn die ze verbindt. De ouder houdt de waarheid vast: `current` (1-based) leidt de status van elk kind af — ervoor `past`, daarna `future`. Een kind kan dat overschrijven met een eigen `status`, voor flows die terugspringen of een stap overslaan. Alleen horizontaal. Wil je stappen onder elkaar, bouw dan een `nldd-list` met per rij een `nldd-timeline-track-cell` en een `nldd-title-cell`: verticale stappen dragen meestal meer dan een titel, en dat kan een lijstrij al. Onder de sm-breakpoint (container query, dus gemeten op het component zelf en niet op de viewport) klapt het om naar één regel tekst plus een segmentbalk. De volledige stappenlijst blijft dan in de DOM staan, alleen visueel verborgen, zodat hulpsoftware niet minder te horen krijgt dan een breed scherm laat zien. Toegankelijkheid: een `nav` met een label, daarin een `role="list"` met per stap een `role="listitem"`. De huidige stap krijgt `aria-current="step"` — het enige begrip dat WAI-ARIA hiervoor kent. "Afgerond" en "nog te doen" bestaan niet als ARIA-token en reizen daarom als visueel verborgen tekst mee. */
+		'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
+		/** Eén stap in een `nldd-step-indicator`. De ouder bepaalt de status en het volgnummer; die staan hier als interne state en niet als publieke API, op `status` na — dat overschrijft de afleiding uit `current`. */
+		'nldd-step-indicator-item': DefineComponent<NLDDStepIndicatorItemProps>;
 		/** A numeric control with increment and decrement buttons. */
 		'nldd-stepper': DefineComponent<NLDDStepperProps>;
 		/** A toggle control for on/off settings. Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label. Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility. */
@@ -3241,10 +3385,10 @@ declare module 'vue' {
 		'nldd-tag': DefineComponent<NLDDTagProps>;
 		/** 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 coloured) 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 ring. `font` is `sans` (default, best for prose) or `mono`. 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 ring. `font` is `sans` (default, best for prose) or `mono`. 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. */
 		'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
 		'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
-		/** A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The line extends into the surrounding list-item's block padding via the `--context-list-item-padding-block` cascade so consecutive steps connect without gaps. */
+		/** A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. Standaard is de cel een kaal spoor: een lijn met een stip per rij, voor een tijdlijn van gebeurtenissen. Met `variant="step"` wordt de stip groot genoeg voor een cijfer of icoon en heb je een stappenlijst onder elkaar, de verticale tegenhanger van `nldd-step-indicator`. De maat hoort bij de variant en niet bij de inhoud: elke stip in een lijst is even groot, anders verspringt het spoor. */
 		'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
 		/** A title bar with an optional overline, title, and subtitle on the left, and a slot for actions on the right. */
 		'nldd-title': DefineComponent<NLDDTitleProps>;