@nldd/design-system 0.8.82 → 0.8.84

package/dist/types/vue.d.ts

@@ -46,7 +46,6 @@ import type { NLDDFileField } from '@nldd/design-system/file-field';
 import type { NLDDForm } from '@nldd/design-system/form';
 import type { NLDDFormActions } from '@nldd/design-system/form-actions';
 import type { NLDDFormField } from '@nldd/design-system/form-field';
-import type { NLDDFormFieldErrorText } from '@nldd/design-system/form-field';
 import type { NLDDFormFieldHelpText } from '@nldd/design-system/form-field';
 import type { NLDDFormSection } from '@nldd/design-system/form-section';
 import type { NLDDFullBleedSection } from '@nldd/design-system/full-bleed-section';
@@ -62,7 +61,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 { NLDDListItemSegment } from '@nldd/design-system/list-item-segment';
 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';
@@ -116,6 +115,7 @@ import type { NLDDTabBarItem } from '@nldd/design-system/tab-bar';
 import type { NLDDTable } from '@nldd/design-system/table';
 import type { NLDDTableRow } from '@nldd/design-system/table';
 import type { NLDDTag } from '@nldd/design-system/tag';
+import type { NLDDText } from '@nldd/design-system/text';
 import type { NLDDTextCell } from '@nldd/design-system/text-cell';
 import type { NLDDTextEditor } from '@nldd/design-system/text-editor';
 import type { NLDDTextField } from '@nldd/design-system/text-field';
@@ -135,6 +135,8 @@ import type { NLDDTooltip } from '@nldd/design-system/tooltip';
 import type { NLDDTopNavigationBar } from '@nldd/design-system/top-navigation-bar';
 import type { NLDDTopTitleBar } from '@nldd/design-system/top-title-bar';
 import type { NLDDTwoThirdsOneThirdSection } from '@nldd/design-system/two-thirds-one-third-section';
+import type { NLDDValidationItem } from '@nldd/design-system/validation-list';
+import type { NLDDValidationList } from '@nldd/design-system/validation-list';
 import type { NLDDWindow } from '@nldd/design-system/window';
 
 declare module 'vue' {
@@ -197,6 +199,10 @@ declare module 'vue' {
 		'tooltipTiming'?: NLDDAvatar['tooltipTiming'];
 		/** Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it */
 		'href'?: NLDDAvatar['href'];
+		/** Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar. */
+		'no-tab'?: NLDDAvatar['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar. */
+		'noTab'?: NLDDAvatar['noTab'];
 		/** Makes the avatar a button; ignored when `href` is set */
 		'button'?: NLDDAvatar['button'];
 		/** Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab" */
@@ -228,8 +234,12 @@ declare module 'vue' {
 	type NLDDBadgeProps = {
 		/** Size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDBadge['size'];
-		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical' */
+		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical' */
 		'color'?: NLDDBadge['color'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		'custom-color'?: NLDDBadge['customColor'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		'customColor'?: NLDDBadge['customColor'];
 		/** Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`. */
 		'pulse'?: NLDDBadge['pulse'];
 		/** Text (takes precedence over number) */
@@ -285,8 +295,8 @@ declare module 'vue' {
 	};
 
 	type NLDDBoxProps = {
-		/** Which surface this box draws. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — colour is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
-		'variant'?: NLDDBox['variant'];
+		/** Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — color is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
+		'background'?: NLDDBox['background'];
 	};
 
 	type NLDDBreadcrumbsProps = {
@@ -308,7 +318,7 @@ declare module 'vue' {
 	};
 
 	type NLDDButtonProps = {
-		/** Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken; inherit-filled gebruikt de vlakkleur (--context-parent-background-color) als labelkleur met een wit/zwart-contrastflip als fallback. */
+		/** Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback. */
 		'variant'?: NLDDButton['variant'];
 		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons. */
 		'size'?: NLDDButton['size'];
@@ -322,6 +332,10 @@ declare module 'vue' {
 		'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'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDButton['noTab'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDButton['noTab'];
 		/** 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. */
@@ -376,6 +390,8 @@ declare module 'vue' {
 		'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'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDButton['describedByElements'];
 		/** When button is clicked (not fired when disabled) */
 		'onClick'?: (event: CustomEvent) => void;
 	};
@@ -400,21 +416,21 @@ declare module 'vue' {
 	};
 
 	type NLDDCardProps = {
-		/** Vlakkleur van de kaart: `base` (standaard) op een gewone pagina-achtergrond, `tinted` wanneer de kaart juist mag opvallen tegen een base-surface */
+		/** Surface color of the card: `base` (default) on a plain page background, `tinted` when the card should stand out against a base surface */
 		'background'?: NLDDCard['background'];
-		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
+		/** Accessible name of the card; with `href`/`button` it names the link or button, otherwise the card region */
 		'accessible-label'?: NLDDCard['accessibleLabel'];
-		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
+		/** Accessible name of the card; with `href`/`button` it names the link or button, otherwise the card region */
 		'accessibleLabel'?: NLDDCard['accessibleLabel'];
-		/** Maakt de hele kaart een link naar deze URL (leeg = geen link) */
+		/** Makes the whole card a link to this URL (empty = no link) */
 		'href'?: NLDDCard['href'];
-		/** Maakt de hele kaart een knop; genegeerd wanneer `href` is gezet */
+		/** Makes the whole card a button; ignored when `href` is set */
 		'button'?: NLDDCard['button'];
-		/** Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe */
+		/** Link target for href (e.g. '_blank'); adjusts rel automatically and adds an "Opent in nieuw tabblad" announcement for '_blank' */
 		'target'?: NLDDCard['target'];
-		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
+		/** Link rel for href; defaults to 'noopener noreferrer' with target='_blank' */
 		'rel'?: NLDDCard['rel'];
-		/** Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding) */
+		/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement) */
 		'translations'?: NLDDCard['translations'];
 	};
 
@@ -454,16 +470,26 @@ declare module 'vue' {
 		'decorative'?: NLDDCheckbox['decorative'];
 		/** Disabled state */
 		'disabled'?: NLDDCheckbox['disabled'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDCheckbox['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDCheckbox['noTab'];
 		/** Indeterminate state (takes precedence over checked visually) */
 		'indeterminate'?: NLDDCheckbox['indeterminate'];
 		/** Value for form submission */
 		'value'?: NLDDCheckbox['value'];
 		/** Name for form submission */
 		'name'?: NLDDCheckbox['name'];
-		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		/** Accessible label forwarded as aria-label to the native input. */
 		'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. */
+		/** Accessible label forwarded as aria-label to the native input. */
 		'accessibleLabel'?: NLDDCheckbox['accessibleLabel'];
+		/** Required state */
+		'required'?: NLDDCheckbox['required'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'invalid'?: NLDDCheckbox['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDCheckbox['describedByElements'];
 		'internals'?: NLDDCheckbox['internals'];
 		/** Fired when the checkbox state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -482,6 +508,12 @@ declare module 'vue' {
 		'name'?: NLDDCheckboxField['name'];
 		/** Label text for the checkbox */
 		'label'?: NLDDCheckboxField['label'];
+		/** Required state */
+		'required'?: NLDDCheckboxField['required'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDCheckboxField['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDCheckboxField['describedByElements'];
 		'internals'?: NLDDCheckboxField['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -522,6 +554,10 @@ declare module 'vue' {
 		'accessible-label'?: NLDDCodeEditor['accessibleLabel'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDCodeEditor['accessibleLabel'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDCodeEditor['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDCodeEditor['describedByElements'];
 		'internals'?: NLDDCodeEditor['internals'];
 		/** When the content changes (detail: { value }) */
 		'onInput'?: (event: CustomEvent) => void;
@@ -588,6 +624,8 @@ declare module 'vue' {
 		'invalid'?: NLDDComboBox['invalid'];
 		/** Disabled state */
 		'disabled'?: NLDDComboBox['disabled'];
+		/** Read-only state: the value stays readable, selectable and in the tab order, but the menu does not open and there is nothing to clear. The input drops its combobox role and the aria that goes with it, so assistive technology is not told about a list it cannot open. Use this where the value belongs to the record rather than to the form, e.g. the product an asset is an instance of. */
+		'readonly'?: NLDDComboBox['readonly'];
 		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
 		'allow-custom'?: NLDDComboBox['allowCustom'];
 		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
@@ -612,6 +650,16 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDComboBox['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDComboBox['width'];
+		/** Required state */
+		'required'?: NLDDComboBox['required'];
+		/** Regular expression the value has to match, as the native `pattern`. */
+		'pattern'?: NLDDComboBox['pattern'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDComboBox['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDComboBox['maxlength'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDComboBox['describedByElements'];
 		'internals'?: NLDDComboBox['internals'];
 		/** When the input value changes; detail: { value: string } */
 		'onInput'?: (event: CustomEvent) => void;
@@ -783,93 +831,95 @@ declare module 'vue' {
 	};
 
 	type NLDDDateFieldProps = {
-		/** 'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field. */
+		/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
 		'size'?: NLDDDateField['size'];
-		/** De datum als ISO (jjjj-mm-dd). Met `range` een ISO 8601-interval: `jjjj-mm-dd/jjjj-mm-dd`. Leeg wanneer er geen geldige datum staat. */
+		/** The date as ISO (yyyy-mm-dd). With `range` an ISO 8601 interval: `yyyy-mm-dd/yyyy-mm-dd`. Empty when there is no valid date. */
 		'value'?: NLDDDateField['value'];
-		/** Kies een periode: twee invoervelden en een kalender in bereikmodus. */
+		/** Pick a period: two inputs and a calendar in range mode. */
 		'range'?: NLDDDateField['range'];
-		/** Vroegst toegestane datum als ISO (jjjj-mm-dd). */
+		/** Earliest allowed date as ISO (yyyy-mm-dd). */
 		'min'?: NLDDDateField['min'];
-		/** Laatst toegestane datum als ISO (jjjj-mm-dd). */
+		/** Latest allowed date as ISO (yyyy-mm-dd). */
 		'max'?: NLDDDateField['max'];
-		/** Verbergt de kalenderknop. Standaard staat die knop er wel. */
+		/** Hides the calendar button. It is shown by default. */
 		'no-picker'?: NLDDDateField['noPicker'];
-		/** Verbergt de kalenderknop. Standaard staat die knop er wel. */
+		/** Hides the calendar button. It is shown by default. */
 		'noPicker'?: NLDDDateField['noPicker'];
-		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Sets the id on the internal input. Set automatically by nldd-form-field. */
 		'input-id'?: NLDDDateField['inputId'];
-		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Sets the id on the internal input. Set automatically by nldd-form-field. */
 		'inputId'?: NLDDDateField['inputId'];
-		/** Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field. */
+		/** Placeholder text. Do not put a format here; use the supporting label of nldd-form-field for that. */
 		'placeholder'?: NLDDDateField['placeholder'];
-		/** Markeert het veld als ongeldig. */
+		/** Marks the field as invalid. */
 		'invalid'?: NLDDDateField['invalid'];
-		/** Markeert het veld als geldig. */
+		/** Marks the field as valid. */
 		'valid'?: NLDDDateField['valid'];
-		/** Uitgeschakelde staat. */
+		/** Disabled state. */
 		'disabled'?: NLDDDateField['disabled'];
-		/** Alleen-lezen staat. */
+		/** Read-only state. */
 		'readonly'?: NLDDDateField['readonly'];
-		/** Verplichte staat. */
+		/** Required state. */
 		'required'?: NLDDDateField['required'];
-		/** Naam voor formulierverzending. */
+		/** Name for form submission. */
 		'name'?: NLDDDateField['name'];
-		/** Autocomplete-hint, bijvoorbeeld 'bday'. */
+		/** Autocomplete hint, for example 'bday'. */
 		'autocomplete'?: NLDDDateField['autocomplete'];
-		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Accessible label for the internal input. Set automatically by nldd-form-field. */
 		'accessible-label'?: NLDDDateField['accessibleLabel'];
-		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Accessible label for the internal input. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDDateField['accessibleLabel'];
-		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
-		'error-message-ids'?: NLDDDateField['errorMessageIds'];
-		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
-		'errorMessageIds'?: NLDDDateField['errorMessageIds'];
-		/** Breedte. Standaard precies breed genoeg voor een datum plus de iconen; 'full' vult de container, of geef een eigen CSS-lengte. */
+		/** Width. By default exactly wide enough for a date plus the icons; 'full' fills the container; 'fit-content' drops the room for the validation icon and grows again as soon as the field turns valid or invalid; or pass your own CSS length. */
 		'width'?: NLDDDateField['width'];
-		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		/** Translations; unspecified keys fall back to Dutch. */
 		'translations'?: NLDDDateField['translations'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDDateField['describedByElements'];
 		'internals'?: NLDDDateField['internals'];
-		/** Bij elke wijziging. detail: { value } met de ISO-datum, of '' zolang er geen geldige datum staat. */
+		/** On every change. detail: { value } with the ISO date, or '' while there is no valid date. */
 		'onInput'?: (event: CustomEvent) => void;
-		/** Wanneer de waarde is vastgelegd. detail: { value } met de ISO-datum, of ''. */
+		/** When the value is committed. detail: { value } with the ISO date, or ''. */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDDatePickerProps = {
-		/** De gekozen datum als ISO (jjjj-mm-dd). Alleen zonder `range`. */
+		/** The chosen date as ISO (yyyy-mm-dd). Only without `range`. */
 		'value'?: NLDDDatePicker['value'];
-		/** Begin van de periode als ISO. Alleen met `range`. */
+		/** Start of the period as ISO. Only with `range`. */
 		'start'?: NLDDDatePicker['start'];
-		/** Einde van de periode als ISO. Alleen met `range`. */
+		/** End of the period as ISO. Only with `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: `full` (fills the container) or a CSS length (e.g. `560px`). Empty (default) is the intrinsic width of seven day cells; the cells stretch along with the width you pass. */
 		'width'?: NLDDDatePicker['width'];
-		/** Kies een periode in plaats van één datum. */
+		/** Pick a period instead of a single date. */
 		'range'?: NLDDDatePicker['range'];
-		/** Vroegst toegestane datum: ISO, of `today` met een verschuiving (`today-18y`). */
+		/** Earliest allowed date: ISO, or `today` with an offset (`today-18y`). */
 		'min'?: NLDDDatePicker['min'];
-		/** Laatst toegestane datum: ISO, of `today` met een verschuiving (`today+1y`). */
+		/** Latest allowed date: ISO, or `today` with an offset (`today+1y`). */
 		'max'?: NLDDDatePicker['max'];
-		/** Eerste dag van de week, 0 is zondag. Standaard 1 (maandag). */
+		/** First day of the week, 0 is Sunday. Default 1 (Monday). */
 		'first-day-of-week'?: NLDDDatePicker['firstDayOfWeek'];
-		/** Eerste dag van de week, 0 is zondag. Standaard 1 (maandag). */
+		/** First day of the week, 0 is Sunday. Default 1 (Monday). */
 		'firstDayOfWeek'?: NLDDDatePicker['firstDayOfWeek'];
-		/** Toont ISO-weeknummers in een kolom links. */
+		/** Shows ISO week numbers in a column on the left. */
 		'week-numbers'?: NLDDDatePicker['weekNumbers'];
-		/** Toont ISO-weeknummers in een kolom links. */
+		/** Shows ISO week numbers in a column on the left. */
 		'weekNumbers'?: NLDDDatePicker['weekNumbers'];
-		/** Toegankelijke naam van de kalender. */
+		/** Accessible name of the calendar. */
 		'accessible-label'?: NLDDDatePicker['accessibleLabel'];
-		/** Toegankelijke naam van de kalender. */
+		/** Accessible name of the calendar. */
 		'accessibleLabel'?: NLDDDatePicker['accessibleLabel'];
-		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDDatePicker['invalid'];
+		/** Translations; unspecified keys fall back to Dutch. */
 		'translations'?: NLDDDatePicker['translations'];
 		/** Marks individual dates as unselectable - weekends, holidays, dates already booked. */
 		'isDateUnavailable'?: NLDDDatePicker['isDateUnavailable'];
-		/** Wanneer een datum of een volledige periode is gekozen. detail: { value } of { start, end }. */
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDDatePicker['describedByElements'];
+		/** When a date or a complete period has been chosen. detail: { value } or { start, end }. */
 		'onChange'?: (event: CustomEvent) => void;
-		/** Ook bij de tussenstap van een periode, wanneer alleen de begindatum staat. */
+		/** Also on the intermediate step of a period, when only the start date is set. */
 		'onInput'?: (event: CustomEvent) => void;
 	};
 
@@ -969,6 +1019,10 @@ declare module 'vue' {
 		'accessible-label'?: NLDDDropdown['accessibleLabel'];
 		/** Accessible name, forwarded as aria-label to the slotted select */
 		'accessibleLabel'?: NLDDDropdown['accessibleLabel'];
+		/** Required state, handed to the slotted <select>. A `required` on the <select> itself is left alone. */
+		'required'?: NLDDDropdown['required'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDDropdown['describedByElements'];
 		/** Bubbles up from the slotted select; detail: { value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -988,10 +1042,6 @@ declare module 'vue' {
 		'input-id'?: NLDDFileField['inputId'];
 		/** Sets the id on the native input. Set automatically by nldd-form-field. */
 		'inputId'?: NLDDFileField['inputId'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'error-message-ids'?: NLDDFileField['errorMessageIds'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'errorMessageIds'?: NLDDFileField['errorMessageIds'];
 		/** Marks the field as valid; shows a check icon on the right, like nldd-dropdown */
 		'valid'?: NLDDFileField['valid'];
 		/** Marks the field as invalid; shows an alert icon on the right, like nldd-dropdown */
@@ -1005,15 +1055,17 @@ declare module 'vue' {
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDFileField['translations'];
 		'files'?: NLDDFileField['files'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDFileField['describedByElements'];
 		'internals'?: NLDDFileField['internals'];
 		/** When the chosen files change, including a clear; detail: { files: File[] } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDFormProps = {
-		/** Default `label-alignment` voor descendant nldd-form-field en nldd-form-actions ('top' | 'right' | 'left'). Wordt naar descendants gepropageerd als `form-label-alignment`. Een eigen `label-alignment` op de descendant heeft voorrang via CSS-cascade. */
+		/** Default `label-alignment` for descendant nldd-form-field and nldd-form-actions ('top' | 'right' | 'left'). Propagated to descendants as `form-label-alignment`. A `label-alignment` of its own on the descendant takes precedence through the CSS cascade. */
 		'label-alignment'?: NLDDForm['labelAlignment'];
-		/** Default `label-alignment` voor descendant nldd-form-field en nldd-form-actions ('top' | 'right' | 'left'). Wordt naar descendants gepropageerd als `form-label-alignment`. Een eigen `label-alignment` op de descendant heeft voorrang via CSS-cascade. */
+		/** Default `label-alignment` for descendant nldd-form-field and nldd-form-actions ('top' | 'right' | 'left'). Propagated to descendants as `form-label-alignment`. A `label-alignment` of its own on the descendant takes precedence through the CSS cascade. */
 		'labelAlignment'?: NLDDForm['labelAlignment'];
 		/** The inner <form> element. Useful for `form.checkValidity()` etc. */
 		'form'?: NLDDForm['form'];
@@ -1022,16 +1074,16 @@ declare module 'vue' {
 	};
 
 	type NLDDFormActionsProps = {
-		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
 		'label-alignment'?: NLDDFormActions['labelAlignment'];
-		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
 		'labelAlignment'?: NLDDFormActions['labelAlignment'];
 	};
 
 	type NLDDFormFieldProps = {
-		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
 		'label-alignment'?: NLDDFormField['labelAlignment'];
-		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		/** 'top' (default) | 'right' | 'left'. A value of its own always wins over the inherited form-label-alignment. */
 		'labelAlignment'?: NLDDFormField['labelAlignment'];
 		/** Field label text. Omit for no-label layout. */
 		'label'?: NLDDFormField['label'];
@@ -1047,20 +1099,15 @@ declare module 'vue' {
 		'optionalLabel'?: NLDDFormField['optionalLabel'];
 	};
 
-	type NLDDFormFieldErrorTextProps = {
-		/** Visibility managed automatically by nldd-form-field. */
-		'invalid'?: NLDDFormFieldErrorText['invalid'];
-	};
-
 	type NLDDFormFieldHelpTextProps = {
 	};
 
 	type NLDDFormSectionProps = {
-		/** Heading-tekst (gerenderd in `<legend>`). */
+		/** Heading text (rendered in the `<legend>`). */
 		'text'?: NLDDFormSection['text'];
-		/** Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note). */
+		/** Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note). */
 		'supporting-text'?: NLDDFormSection['supportingText'];
-		/** Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note). */
+		/** Short description under the heading. Keep it to roughly 80 characters or less (see the a11y note). */
 		'supportingText'?: NLDDFormSection['supportingText'];
 	};
 
@@ -1183,10 +1230,14 @@ declare module 'vue' {
 		'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'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		'custom-color'?: NLDDIcon['customColor'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		'customColor'?: NLDDIcon['customColor'];
 	};
 
 	type NLDDIconButtonProps = {
-		/** Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken. */
+		/** Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces. */
 		'variant'?: NLDDIconButton['variant'];
 		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
 		'size'?: NLDDIconButton['size'];
@@ -1208,9 +1259,9 @@ declare module 'vue' {
 		'expandable'?: NLDDIconButton['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. */
 		'expanded'?: NLDDIconButton['expanded'];
-		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable. */
 		'no-tab'?: NLDDIconButton['noTab'];
-		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable. */
 		'noTab'?: NLDDIconButton['noTab'];
 		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
 		'popup-type'?: NLDDIconButton['popupType'];
@@ -1357,84 +1408,88 @@ declare module 'vue' {
 	};
 
 	type NLDDJustInTimeEducationProps = {
-		/** Toon de coach-mark. App-gestuurd; standaard false. */
+		/** Show the coach mark. Driven by the app; false by default. */
 		'active'?: NLDDJustInTimeEducation['active'];
-		/** Titel van de callout. */
+		/** Title of the callout. */
 		'text'?: NLDDJustInTimeEducation['text'];
-		/** Ondersteunende tekst onder de titel. */
+		/** Supporting text under the title. */
 		'supporting-text'?: NLDDJustInTimeEducation['supportingText'];
-		/** Ondersteunende tekst onder de titel. */
+		/** Supporting text under the title. */
 		'supportingText'?: NLDDJustInTimeEducation['supportingText'];
-		/** 'auto' | 'top' | 'bottom' | 'left' | 'right' (standaard 'auto'). */
+		/** 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto'). */
 		'placement'?: NLDDJustInTimeEducation['placement'];
-		/** Toon de dismiss-knop en sta sluiten toe via 1 klik/toets buiten de coach-mark. Standaard false: dan beheert de consumer het sluiten zelf. */
+		/** Show the dismiss button and allow closing with one click or key press outside the coach mark. False by default: the consumer then manages closing itself. */
 		'dismissable'?: NLDDJustInTimeEducation['dismissable'];
-		/** Pijllengte en dus de afstand tussen card en control, als CSS-lengte (bijv. \`333px\`, \`30vh\`). Leeg = DS-standaard; onder 40px wordt geklemd. */
+		/** Arrow length, and therefore the distance between card and control, as a CSS length (e.g. `333px`, `30vh`). Empty = the DS default; anything under 40px is clamped. */
 		'arrow-length'?: NLDDJustInTimeEducation['arrowLength'];
-		/** Pijllengte en dus de afstand tussen card en control, als CSS-lengte (bijv. \`333px\`, \`30vh\`). Leeg = DS-standaard; onder 40px wordt geklemd. */
+		/** Arrow length, and therefore the distance between card and control, as a CSS length (e.g. `333px`, `30vh`). Empty = the DS default; anything under 40px is clamped. */
 		'arrowLength'?: NLDDJustInTimeEducation['arrowLength'];
-		/** Verberg de pijl; de card staat dan dicht tegen het control. */
+		/** Hide the arrow; the card then sits close against the control. */
 		'no-arrow'?: NLDDJustInTimeEducation['noArrow'];
-		/** Verberg de pijl; de card staat dan dicht tegen het control. */
+		/** Hide the arrow; the card then sits close against the control. */
 		'noArrow'?: NLDDJustInTimeEducation['noArrow'];
 		'translations'?: NLDDJustInTimeEducation['translations'];
-		/** Wanneer de coach-mark sluit. detail: { reason: 'completed' | 'dismissed' | 'ignored' }. */
+		/** When the coach mark closes. detail: { reason: 'completed' | 'dismissed' | 'ignored' }. */
 		'onNlddClose'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDKeyboardShortcutProps = {
-		/** Toetsen gescheiden door '+' (bijv. 'Cmd+K' of 'Ctrl+Shift+P'). Gebruik '+++' voor een letterlijke '+' toets: 'Ctrl+++' wordt 'Ctrl' + '+'. Voor complexere scenario's (bijv. combo met meerdere '+' keys) kun je in plaats van het keys-attribuut de default slot gebruiken met eigen <kbd> elementen. */
+		/** Keys separated by '+' (e.g. 'Cmd+K' or 'Ctrl+Shift+P'). Use '+++' for a literal '+' key: 'Ctrl+++' becomes 'Ctrl' + '+'. For more complex cases (a combo with several '+' keys, for instance) use the default slot with your own <kbd> elements instead of the keys attribute. */
 		'keys'?: NLDDKeyboardShortcut['keys'];
-		/** Optionele override voor macOS (incl. iPhone/iPad/iPod). */
+		/** Optional override for macOS (iPhone/iPad/iPod included). */
 		'mac-keys'?: NLDDKeyboardShortcut['macKeys'];
-		/** Optionele override voor macOS (incl. iPhone/iPad/iPod). */
+		/** Optional override for macOS (iPhone/iPad/iPod included). */
 		'macKeys'?: NLDDKeyboardShortcut['macKeys'];
-		/** Optionele override voor Windows. */
+		/** Optional override for Windows. */
 		'windows-keys'?: NLDDKeyboardShortcut['windowsKeys'];
-		/** Optionele override voor Windows. */
+		/** Optional override for Windows. */
 		'windowsKeys'?: NLDDKeyboardShortcut['windowsKeys'];
-		/** Optionele override voor Linux/ChromeOS. */
+		/** Optional override for Linux/ChromeOS. */
 		'linux-keys'?: NLDDKeyboardShortcut['linuxKeys'];
-		/** Optionele override voor Linux/ChromeOS. */
+		/** Optional override for Linux/ChromeOS. */
 		'linuxKeys'?: NLDDKeyboardShortcut['linuxKeys'];
-		/** Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de font-size over van de container; bij de box-variant schalen de keycaps dan mee in em. */
+		/** Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the font-size from the container; in the box variant the keycaps then scale along in em. */
 		'size'?: NLDDKeyboardShortcut['size'];
-		/** 'box' (default) toont elke toets als keycap met vulling en highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens — lichter, voor inline gebruik zoals in een menu-item. */
+		/** 'box' (default) shows each key as a keycap with a fill and a highlight edge. 'simple' shows the keys as plain text with separators: lighter, for inline use such as in a menu item. */
 		'variant'?: NLDDKeyboardShortcut['variant'];
-		/** 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit' laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur of een gemarkeerde rij. */
+		/** 'neutral' (default) uses the component colors of its own. 'inherit' lets the keys and separators follow the surrounding text color (currentColor), with a translucent contrast fill and highlight edge. Useful on a filled surface color or a highlighted row. */
 		'color'?: NLDDKeyboardShortcut['color'];
-		/** Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn. */
+		/** Show on touch-only devices too, where shortcuts cannot be invoked. */
 		'always-visible'?: NLDDKeyboardShortcut['alwaysVisible'];
-		/** Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn. */
+		/** Show on touch-only devices too, where shortcuts cannot be invoked. */
 		'alwaysVisible'?: NLDDKeyboardShortcut['alwaysVisible'];
 	};
 
 	type NLDDLinkProps = {
-		/** Link doel */
+		/** Link target */
 		'href'?: NLDDLink['href'];
-		/** Link target (bijv. '_blank'); stelt rel automatisch bij. Bij '_blank' voegt de link een visueel verborgen "Opent in nieuw tabblad"-melding toe voor screenreaders (WCAG 2.1 SC 3.2.2). */
+		/** Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDLink['target'];
-		/** Link rel attribuut; standaard 'noopener noreferrer' bij target='_blank' */
+		/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
 		'rel'?: NLDDLink['rel'];
-		/** Tekstgrootte: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Leeg = inherit. */
+		/** Text size: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Empty = inherit. */
 		'size'?: NLDDLink['size'];
-		/** Link tekst (alternatief voor default slot) */
+		/** Link text (alternative to the default slot) */
 		'text'?: NLDDLink['text'];
-		/** Icoon voor de tekst */
+		/** Icon before the text */
 		'start-icon'?: NLDDLink['startIcon'];
-		/** Icoon voor de tekst */
+		/** Icon before the text */
 		'startIcon'?: NLDDLink['startIcon'];
-		/** Icoon na de tekst */
+		/** Icon after the text */
 		'end-icon'?: NLDDLink['endIcon'];
-		/** Icoon na de tekst */
+		/** Icon after the text */
 		'endIcon'?: NLDDLink['endIcon'];
-		/** Toegankelijk label voor screen readers */
+		/** Accessible label for screen readers */
 		'accessible-label'?: NLDDLink['accessibleLabel'];
-		/** Toegankelijk label voor screen readers */
+		/** Accessible label for screen readers */
 		'accessibleLabel'?: NLDDLink['accessibleLabel'];
-		/** Uitgeschakelde staat */
+		/** Disabled state */
 		'disabled'?: NLDDLink['disabled'];
-		/** Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding); niet-gezette sleutels vallen terug op Nederlands. */
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDLink['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDLink['noTab'];
+		/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDLink['translations'];
 	};
 
@@ -1443,24 +1498,12 @@ declare module 'vue' {
 		'variant'?: NLDDList['variant'];
 		/** A11y role and behavior (default 'list'). See the docblock above. */
 		'type'?: NLDDList['type'];
-		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; wins over `arrow-navigation` when both are set. */
+		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus. */
 		'reorderable'?: NLDDList['reorderable'];
 		/** When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere */
 		'dividers'?: NLDDList['dividers'];
-		/** 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 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'];
-		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
-		'empty-text'?: NLDDList['emptyText'];
-		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
-		'emptyText'?: NLDDList['emptyText'];
-		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
-		'empty-supporting-text'?: NLDDList['emptySupportingText'];
-		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
-		'emptySupportingText'?: NLDDList['emptySupportingText'];
 		/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
 		'accessible-label'?: NLDDList['accessibleLabel'];
 		/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
@@ -1476,17 +1519,21 @@ declare module 'vue' {
 	type NLDDListItemProps = {
 		/** 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`. */
+		/** Marks the item as selected: it is one of the rows you picked. 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) */
+		/** Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current="page"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs. */
+		'current'?: NLDDListItem['current'];
+		/** Renders the item as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
 		'button'?: NLDDListItem['button'];
-		/** Makes the whole row a `role="checkbox"` control; ignored when `href` is set */
+		/** Makes the whole row a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItem['checkbox'];
 		/** Checked state of a `checkbox` row; the item toggles it on activation */
 		'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. */
+		/** Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row. */
+		'disabled'?: NLDDListItem['disabled'];
+		/** 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 segment 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. */
+		/** Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three 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. */
 		'target'?: NLDDListItem['target'];
@@ -1503,34 +1550,34 @@ declare module 'vue' {
 		'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'];
+	type NLDDListItemSegmentProps = {
+		/** Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
+		'button'?: NLDDListItemSegment['button'];
+		/** Renders the segment as an `<a>` with this URL. Wins over `checkbox` and `button`. */
+		'href'?: NLDDListItemSegment['href'];
 		/** Link target forwarded to the `<a>`; only applies with `href` */
-		'target'?: NLDDListItemAction['target'];
+		'target'?: NLDDListItemSegment['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 } */
+		'rel'?: NLDDListItemSegment['rel'];
+		/** Makes the segment a `role="checkbox"` control. Wins over `button`, loses to `href`. */
+		'checkbox'?: NLDDListItemSegment['checkbox'];
+		/** Checked state of a `checkbox` segment; it toggles on activation */
+		'checked'?: NLDDListItemSegment['checked'];
+		/** Disclosure state, reflected as `aria-expanded` on the control, and painted: the segment stays lit a step above hover for as long as what it opened is on screen, so a menu reads as hanging off this row rather than floating over the list. Set it on the segment that opens something (a tree row's chevron, a menu). Leave it off entirely when the segment discloses nothing — an absent attribute emits no aria-expanded. */
+		'expanded'?: NLDDListItemSegment['expanded'];
+		/** Marks the segment 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'?: NLDDListItemSegment['disclosure'];
+		/** Marks the segment as the current page (`aria-current="page"`). The row it sits in paints itself as the current row from it, so on a segmented row this is the only place it has to be set. */
+		'current'?: NLDDListItemSegment['current'];
+		/** Switches the segment off: a `button` or `checkbox` segment stops responding and dims, a `href` segment gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). The arrow keys skip a row whose only segment is off. */
+		'disabled'?: NLDDListItemSegment['disabled'];
+		/** `full` lets the segment grow to fill the row (default: 'fit-content') */
+		'width'?: NLDDListItemSegment['width'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessible-label'?: NLDDListItemSegment['accessibleLabel'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessibleLabel'?: NLDDListItemSegment['accessibleLabel'];
+		/** On a `checkbox` segment after it toggles; detail: { checked: boolean } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
@@ -1564,59 +1611,59 @@ declare module 'vue' {
 	};
 
 	type NLDDMenuBarProps = {
-		/** Tekst voor de overflow button (standaard via i18n) */
+		/** Text for the overflow button (default through i18n) */
 		'overflow-text'?: NLDDMenuBar['overflowText'];
-		/** Tekst voor de overflow button (standaard via i18n) */
+		/** Text for the overflow button (default through i18n) */
 		'overflowText'?: NLDDMenuBar['overflowText'];
-		/** aria-label voor de nav landmark */
+		/** aria-label for the nav landmark */
 		'accessible-label'?: NLDDMenuBar['accessibleLabel'];
-		/** aria-label voor de nav landmark */
+		/** aria-label for the nav landmark */
 		'accessibleLabel'?: NLDDMenuBar['accessibleLabel'];
-		/** Propageert compact attribuut naar slotted items (activeert content-priority) */
+		/** Propagates the compact attribute to slotted items (activates content priority) */
 		'compact'?: NLDDMenuBar['compact'];
 		'translations'?: NLDDMenuBar['translations'];
 	};
 
 	type NLDDMenuBarItemProps = {
-		/** Tekst van het item */
+		/** Text of the item */
 		'text'?: NLDDMenuBarItem['text'];
-		/** Markeer als actief/huidig item */
+		/** Mark as the active or current item */
 		'current'?: NLDDMenuBarItem['current'];
-		/** aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page' */
+		/** aria-current value when current is true ('page', 'step', 'location', 'true'). Default: 'page' */
 		'current-type'?: NLDDMenuBarItem['currentType'];
-		/** aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page' */
+		/** aria-current value when current is true ('page', 'step', 'location', 'true'). Default: 'page' */
 		'currentType'?: NLDDMenuBarItem['currentType'];
-		/** Optionele link URL. Zonder href rendert als button. */
+		/** Optional link URL. Without href it renders as a button. */
 		'href'?: NLDDMenuBarItem['href'];
-		/** Optioneel icon naam (nldd-icon) */
+		/** Optional icon name (nldd-icon) */
 		'icon'?: NLDDMenuBarItem['icon'];
-		/** Toon disclosure icon en open de geslotte `<nldd-menu>` bij klik */
+		/** Show the disclosure icon and open the slotted `<nldd-menu>` on click */
 		'expandable'?: NLDDMenuBarItem['expandable'];
-		/** Verberg tekst visueel (altijd) */
+		/** Hide the text visually (always) */
 		'icon-only'?: NLDDMenuBarItem['iconOnly'];
-		/** Verberg tekst visueel (altijd) */
+		/** Hide the text visually (always) */
 		'iconOnly'?: NLDDMenuBarItem['iconOnly'];
-		/** Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon */
+		/** Decides what stays visible in compact mode: 'icon' hides the text, 'text' hides the icon */
 		'content-priority'?: NLDDMenuBarItem['contentPriority'];
-		/** Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon */
+		/** Decides what stays visible in compact mode: 'icon' hides the text, 'text' hides the icon */
 		'contentPriority'?: NLDDMenuBarItem['contentPriority'];
-		/** Activeert content-priority gedrag (gezet door parent nldd-menu-bar) */
+		/** Activates content-priority behavior (set by the parent nldd-menu-bar) */
 		'compact'?: NLDDMenuBarItem['compact'];
-		/** Schakel interactie uit */
+		/** Turn interaction off */
 		'disabled'?: NLDDMenuBarItem['disabled'];
-		/** Overschrijf aria-label */
+		/** Override aria-label */
 		'accessible-label'?: NLDDMenuBarItem['accessibleLabel'];
-		/** Overschrijf aria-label */
+		/** Override aria-label */
 		'accessibleLabel'?: NLDDMenuBarItem['accessibleLabel'];
-		/** aria-haspopup waarde (bijv. "menu", "dialog") */
+		/** aria-haspopup value (e.g. "menu", "dialog") */
 		'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>`. */
+		/** Whether the matching popover is open; sets aria-expanded on the button when expandable or haspopup is set. Tracked automatically for a slotted `<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 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'];
-		/** Bij klik op non-expandable button item (bubbles, composed) */
+		/** On a click on a non-expandable button item (bubbles, composed) */
 		'onSelect'?: (event: CustomEvent) => void;
 	};
 
@@ -1631,7 +1678,7 @@ declare module 'vue' {
 	type NLDDMenuItemProps = {
 		/** Display text. Supports **bold** markdown syntax. */
 		'text'?: NLDDMenuItem['text'];
-		/** Form value. Falls back to text when not set. */
+		/** A value of the item's own, read off the item in a `select` handler. The default filter matches on it as well as on `text` and `aliases`. Not a form value: this component is not form-associated. */
 		'value'?: NLDDMenuItem['value'];
 		/** Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled. */
 		'href'?: NLDDMenuItem['href'];
@@ -1690,7 +1737,7 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDModalDialog['accessibleLabel'];
 		/** When the dialog is opened */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** When the dialog is fully closed */
+		/** When the dialog is fully closed. Does not bubble: overlays nest, and a listener on one dialog asking about that dialog should not also hear the form it opened. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -1719,6 +1766,12 @@ declare module 'vue' {
 		'required'?: NLDDMultiLineTextField['required'];
 		/** Autocomplete hint */
 		'autocomplete'?: NLDDMultiLineTextField['autocomplete'];
+		/** Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop. */
+		'keyboard'?: NLDDMultiLineTextField['keyboard'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. In a field where Enter starts a new line, leave it alone. */
+		'enter-key'?: NLDDMultiLineTextField['enterKey'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. In a field where Enter starts a new line, leave it alone. */
+		'enterKey'?: NLDDMultiLineTextField['enterKey'];
 		/** Initial visible rows (minimum height). Default: 3. */
 		'rows'?: NLDDMultiLineTextField['rows'];
 		/** 'none' | 'vertical' | 'auto' (default). 'auto' grows with content (native field-sizing), no manual handle. */
@@ -1727,16 +1780,18 @@ declare module 'vue' {
 		'accessible-label'?: NLDDMultiLineTextField['accessibleLabel'];
 		/** Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDMultiLineTextField['accessibleLabel'];
-		/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
-		'error-message-ids'?: NLDDMultiLineTextField['errorMessageIds'];
-		/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
-		'errorMessageIds'?: NLDDMultiLineTextField['errorMessageIds'];
 		/** Disables browser spellchecking on the inner textarea */
 		'no-spellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
 		/** Disables browser spellchecking on the inner textarea */
 		'noSpellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDMultiLineTextField['width'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDMultiLineTextField['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDMultiLineTextField['maxlength'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDMultiLineTextField['describedByElements'];
 		'internals'?: NLDDMultiLineTextField['internals'];
 		/** When value changes */
 		'onInput'?: (event: CustomEvent) => void;
@@ -1822,6 +1877,10 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDNumberField['accessibleLabel'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDNumberField['translations'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDNumberField['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDNumberField['describedByElements'];
 		'internals'?: NLDDNumberField['internals'];
 		/** When the value changes (typing, +/- button, or on-commit correction); detail: { value: number } */
 		'onInput'?: (event: CustomEvent) => void;
@@ -1957,15 +2016,15 @@ declare module 'vue' {
 		'total'?: NLDDPagination['total'];
 		/** Disabled state */
 		'disabled'?: NLDDPagination['disabled'];
-		/** Centreert de pagination in de container (host fills row, items grouped in the middle) */
+		/** Centers the pagination in the container (host fills row, items grouped in the middle) */
 		'centered'?: NLDDPagination['centered'];
-		/** URL patroon met {page} placeholder, rendert links in plaats van buttons */
+		/** URL pattern with a {page} placeholder, renders links instead of buttons */
 		'href-pattern'?: NLDDPagination['hrefPattern'];
-		/** URL patroon met {page} placeholder, rendert links in plaats van buttons */
+		/** URL pattern with a {page} placeholder, renders links instead of buttons */
 		'hrefPattern'?: NLDDPagination['hrefPattern'];
-		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands */
+		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDPagination['translations'];
-		/** Bij paginawisseling (detail: { page: number, href?: string }). Alleen cancelable in href-mode: preventDefault() voorkomt navigatie (SPA). */
+		/** On a page change (detail: { page: number, href?: string }). Only cancelable in href mode: preventDefault() blocks navigation (SPA). */
 		'onPageChange'?: (event: CustomEvent) => void;
 	};
 
@@ -2016,12 +2075,16 @@ declare module 'vue' {
 		'accessible-label'?: NLDDPasswordField['accessibleLabel'];
 		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDPasswordField['accessibleLabel'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'error-message-ids'?: NLDDPasswordField['errorMessageIds'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'errorMessageIds'?: NLDDPasswordField['errorMessageIds'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDPasswordField['width'];
+		/** Regular expression the value has to match, as the native `pattern`. */
+		'pattern'?: NLDDPasswordField['pattern'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDPasswordField['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDPasswordField['maxlength'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDPasswordField['describedByElements'];
 		'internals'?: NLDDPasswordField['internals'];
 		/** When the input value changes ({ detail: { value } }) */
 		'onInput'?: (event: CustomEvent) => void;
@@ -2060,7 +2123,7 @@ declare module 'vue' {
 		'open'?: NLDDPopover['open'];
 		/** When the popover opens */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** When the popover closes */
+		/** When the popover closes. Does not bubble: overlays nest, and a listener on the sheet or window around this one should not hear it close. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -2163,16 +2226,24 @@ declare module 'vue' {
 		'decorative'?: NLDDRadioButton['decorative'];
 		/** Disabled state */
 		'disabled'?: NLDDRadioButton['disabled'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDRadioButton['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDRadioButton['noTab'];
 		/** Required state */
 		'required'?: NLDDRadioButton['required'];
 		/** Radio group name for form submission; ties the buttons of one group together */
 		'name'?: NLDDRadioButton['name'];
 		/** Value submitted with the form when this radio button is checked */
 		'value'?: NLDDRadioButton['value'];
-		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		/** Accessible label forwarded as aria-label to the native input. */
 		'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. */
+		/** Accessible label forwarded as aria-label to the native input. */
 		'accessibleLabel'?: NLDDRadioButton['accessibleLabel'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'invalid'?: NLDDRadioButton['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDRadioButton['describedByElements'];
 		'internals'?: NLDDRadioButton['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string, name: string } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -2191,6 +2262,10 @@ declare module 'vue' {
 		'required'?: NLDDRadioButtonField['required'];
 		/** Label text for the radio button */
 		'label'?: NLDDRadioButtonField['label'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDRadioButtonField['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDRadioButtonField['describedByElements'];
 		'internals'?: NLDDRadioButtonField['internals'];
 		/** When checked state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -2211,6 +2286,8 @@ declare module 'vue' {
 		'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
 		/** Id of an external label element, set as aria-labelledby on the group */
 		'accessibleLabeledBy'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDRadioButtonGroup['invalid'];
 		/** Bubbles up from the checked field; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2220,9 +2297,9 @@ declare module 'vue' {
 		'spacing'?: NLDDRichText['spacing'];
 		/** Centers the main column inside the container; without it, content is left-aligned */
 		'centered'?: NLDDRichText['centered'];
-		/** Opt-in automatische woordafbreking voor doorlopende tekst (p, li, dd). Vereist een correcte `lang` op de pagina (bijv. `lang="nl"` op `<html>`): zonder taalinfo breekt de browser niet af. Een `overflow-wrap: break-word`-vangnet op p/li staat altijd aan, los van dit attribuut, zodat lange URLs en samenstellingen ook zonder woordenboek netjes breken in plaats van te overlopen. */
+		/** Opt-in automatic hyphenation for running text (p, li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for instance): without language information the browser does not hyphenate. An `overflow-wrap: break-word` safety net on p/li is always on, independent of this attribute, so long URLs and compounds break neatly instead of overflowing even without a dictionary. */
 		'hyphens'?: NLDDRichText['hyphens'];
-		/** 'inherit' laat alle tekst de kleur van de ondergrond volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren. */
+		/** 'inherit' lets all text follow the color of the surface (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. Empty = the default content colors. */
 		'color'?: NLDDRichText['color'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDRichText['translations'];
@@ -2255,6 +2332,18 @@ declare module 'vue' {
 		'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDSearchField['width'];
+		/** Required state */
+		'required'?: NLDDSearchField['required'];
+		/** Regular expression the value has to match, as the native `pattern`. */
+		'pattern'?: NLDDSearchField['pattern'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDSearchField['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDSearchField['maxlength'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDSearchField['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDSearchField['describedByElements'];
 		'internals'?: NLDDSearchField['internals'];
 		/** When the input value changes; detail: { value: string } */
 		'onInput'?: (event: CustomEvent) => void;
@@ -2265,6 +2354,10 @@ declare module 'vue' {
 	};
 
 	type NLDDSegmentedControlProps = {
+		/** Marks the group as required. Enforced in radio mode; in checkbox mode only announced. */
+		'required'?: NLDDSegmentedControl['required'];
+		/** Marks the group as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDSegmentedControl['invalid'];
 		/** Selected value for radio type */
 		'value'?: NLDDSegmentedControl['value'];
 		/** Control size: 'sm' | 'md' | 'lg' (default: 'md') */
@@ -2295,6 +2388,8 @@ declare module 'vue' {
 	};
 
 	type NLDDSegmentedControlItemProps = {
+		/** Required state. Set by nldd-segmented-control. */
+		'required'?: NLDDSegmentedControlItem['required'];
 		/** Value for this item */
 		'value'?: NLDDSegmentedControlItem['value'];
 		/** Whether this item is selected (set by parent) */
@@ -2336,7 +2431,7 @@ declare module 'vue' {
 		'width'?: NLDDSheet['width'];
 		/** Fired when the sheet is opened */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** Fired when the sheet is fully closed */
+		/** Fired when the sheet is fully closed. Does not bubble: overlays nest, and a listener on one sheet asking about that sheet should not also hear the form it opened. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -2458,9 +2553,9 @@ declare module 'vue' {
 	};
 
 	type NLDDSkipLinkProps = {
-		/** Tekst van de skip-link. Fallback naar i18n default. */
+		/** Text of the skip link. Falls back to the i18n default. */
 		'text'?: NLDDSkipLink['text'];
-		/** Optioneel extern doel-ID. Zonder href springt naar eind van eigen content. */
+		/** Optional external target id. Without href it jumps to the end of its own content. */
 		'href'?: NLDDSkipLink['href'];
 		'translations'?: NLDDSkipLink['translations'];
 	};
@@ -2544,17 +2639,17 @@ declare module 'vue' {
 	};
 
 	type NLDDStatusBarProps = {
-		/** Kleur van de balk (standaard: 'neutral') */
+		/** Color of the bar (default: 'neutral') */
 		'variant'?: NLDDStatusBar['variant'];
-		/** De statustekst (één regel; afgekapt met ellipsis) */
+		/** The status text (one line; truncated with an ellipsis) */
 		'text'?: NLDDStatusBar['text'];
-		/** Maakt de hele balk een link (rendert een <a>) */
+		/** Makes the whole bar a link (renders an <a>) */
 		'href'?: NLDDStatusBar['href'];
-		/** Link target (bijv. '_blank'); alleen gebruikt bij href */
+		/** Link target (e.g. '_blank'); only used with href */
 		'target'?: NLDDStatusBar['target'];
-		/** Link rel; standaard 'noopener noreferrer' bij target='_blank' */
+		/** Link rel; defaults to 'noopener noreferrer' with target='_blank' */
 		'rel'?: NLDDStatusBar['rel'];
-		/** Maakt de hele balk een button; genegeerd als href is gezet */
+		/** Makes the whole bar a button; ignored when href is set */
 		'button'?: NLDDStatusBar['button'];
 	};
 
@@ -2609,6 +2704,10 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDStepper['accessibleLabel'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDStepper['translations'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDStepper['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDStepper['describedByElements'];
 		'internals'?: NLDDStepper['internals'];
 		/** When the value changes; detail: { value: number } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -2621,6 +2720,10 @@ declare module 'vue' {
 		'checked'?: NLDDSwitch['checked'];
 		/** Disabled state */
 		'disabled'?: NLDDSwitch['disabled'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDSwitch['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDSwitch['noTab'];
 		/** Switch size: 'xs' | 'sm' (default: 'sm') */
 		'size'?: NLDDSwitch['size'];
 		/** Accessible label forwarded as aria-label to the native input. Required when using nldd-switch without nldd-switch-field. */
@@ -2629,6 +2732,12 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDSwitch['accessibleLabel'];
 		/** Value submitted with the form when the switch is on (default: 'on') */
 		'value'?: NLDDSwitch['value'];
+		/** Required state */
+		'required'?: NLDDSwitch['required'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDSwitch['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDSwitch['describedByElements'];
 		'internals'?: NLDDSwitch['internals'];
 		/** When the switch state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -2645,6 +2754,12 @@ declare module 'vue' {
 		'name'?: NLDDSwitchField['name'];
 		/** Label text for the switch */
 		'label'?: NLDDSwitchField['label'];
+		/** Required state */
+		'required'?: NLDDSwitchField['required'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDSwitchField['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDSwitchField['describedByElements'];
 		/** When checked state changes; detail: { checked: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -2669,8 +2784,8 @@ declare module 'vue' {
 	};
 
 	type NLDDTabBarItemProps = {
-		/** Selected state (managed by nldd-tab-bar) */
-		'selected'?: NLDDTabBarItem['selected'];
+		/** The item you are on. A tab bar switching content manages it itself and renders it as `aria-selected`; a `navigation` bar leaves it to the consumer, since it follows the route, and renders it as `aria-current="page"`. Unlike a list row, which separates `current` from `selected` because it can be both at once, a tab bar has exactly one active item. */
+		'current'?: NLDDTabBarItem['current'];
 		/** Optional link URL; renders an anchor instead of a button */
 		'href'?: NLDDTabBarItem['href'];
 		/** Set by nldd-tab-bar. Not part of the public API. */
@@ -2708,14 +2823,6 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDTable['accessibleLabel'];
 		/** Opt into row selection: body rows expose aria-selected (true/false). Without it, rows omit aria-selected so a non-selectable table isn't announced as selectable. */
 		'selectable'?: NLDDTable['selectable'];
-		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
-		'empty-text'?: NLDDTable['emptyText'];
-		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
-		'emptyText'?: NLDDTable['emptyText'];
-		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
-		'empty-supporting-text'?: NLDDTable['emptySupportingText'];
-		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
-		'emptySupportingText'?: NLDDTable['emptySupportingText'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDTable['translations'];
 	};
@@ -2742,6 +2849,23 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDTag['accessibleLabel'];
 	};
 
+	type NLDDTextProps = {
+		/** Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
+		'size'?: NLDDText['size'];
+		/** Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale. */
+		'weight'?: NLDDText['weight'];
+		/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
+		'line-height'?: NLDDText['lineHeight'];
+		/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
+		'lineHeight'?: NLDDText['lineHeight'];
+		/** Text color: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit' (default: 'default'). 'default' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface. */
+		'color'?: NLDDText['color'];
+		/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
+		'horizontal-alignment'?: NLDDText['horizontalAlignment'];
+		/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
+		'horizontalAlignment'?: NLDDText['horizontalAlignment'];
+	};
+
 	type NLDDTextCellProps = {
 		/** Cell size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDTextCell['size'];
@@ -2822,10 +2946,14 @@ declare module 'vue' {
 		'annotatable'?: NLDDTextEditor['annotatable'];
 		/** Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch. */
 		'translations'?: NLDDTextEditor['translations'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDTextEditor['invalid'];
 		/** Consumer-supplied */
 		'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'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDTextEditor['describedByElements'];
 		'internals'?: NLDDTextEditor['internals'];
 		/** When the content changes (detail: { value }) */
 		'onInput'?: (event: CustomEvent) => void;
@@ -2858,6 +2986,12 @@ declare module 'vue' {
 		'disabled'?: NLDDTextField['disabled'];
 		/** Input type: 'text' | 'email' | 'tel' | 'url' */
 		'type'?: NLDDTextField['type'];
+		/** Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop. Reach for it where the value is digits but not a quantity you would step (a house number, a postcode, a rack unit): 'numeric'. The keyboard for 'tel', 'email' and 'url' already follows from `type`. */
+		'keyboard'?: NLDDTextField['keyboard'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. It only labels the key; what Enter does is still up to the form, and on a desktop it changes nothing. */
+		'enter-key'?: NLDDTextField['enterKey'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. It only labels the key; what Enter does is still up to the form, and on a desktop it changes nothing. */
+		'enterKey'?: NLDDTextField['enterKey'];
 		/** Input name for form submission */
 		'name'?: NLDDTextField['name'];
 		/** Readonly state */
@@ -2870,16 +3004,20 @@ declare module 'vue' {
 		'accessible-label'?: NLDDTextField['accessibleLabel'];
 		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDTextField['accessibleLabel'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'error-message-ids'?: NLDDTextField['errorMessageIds'];
-		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
-		'errorMessageIds'?: NLDDTextField['errorMessageIds'];
 		/** Disables browser spellchecking on the inner input */
 		'no-spellcheck'?: NLDDTextField['noSpellcheck'];
 		/** Disables browser spellchecking on the inner input */
 		'noSpellcheck'?: NLDDTextField['noSpellcheck'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDTextField['width'];
+		/** Regular expression the value has to match, as the native `pattern`. */
+		'pattern'?: NLDDTextField['pattern'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDTextField['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDTextField['maxlength'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDTextField['describedByElements'];
 		'internals'?: NLDDTextField['internals'];
 		/** When input value changes */
 		'onInput'?: (event: CustomEvent) => void;
@@ -2888,95 +3026,99 @@ declare module 'vue' {
 	};
 
 	type NLDDTimeFieldProps = {
-		/** 'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field. */
+		/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
 		'size'?: NLDDTimeField['size'];
-		/** De tijd als `HH:mm` (24-uurs). Leeg wanneer er geen geldige tijd staat. */
+		/** The time as `HH:mm` (24-hour). Empty when there is no valid time. */
 		'value'?: NLDDTimeField['value'];
-		/** Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt. */
+		/** Earliest allowed time as `HH:mm`. Also the base that `step` counts from. */
 		'min'?: NLDDTimeField['min'];
-		/** Laatst toegestane tijd als `HH:mm`. */
+		/** Latest allowed time as `HH:mm`. */
 		'max'?: NLDDTimeField['max'];
-		/** Minutenstap (standaard 1). Bepaalt welke tijden geldig zijn, waarop wordt afgerond en hoe ver de pijltjestoetsen verspringen. */
+		/** Step in minutes (default 1). Decides which times are valid, what rounding snaps to, and how far the arrow keys jump. */
 		'step'?: NLDDTimeField['step'];
-		/** Verbergt de picker-knop. Standaard staat die knop er wel. */
+		/** Hides the picker button. It is shown by default. */
 		'no-picker'?: NLDDTimeField['noPicker'];
-		/** Verbergt de picker-knop. Standaard staat die knop er wel. */
+		/** Hides the picker button. It is shown by default. */
 		'noPicker'?: NLDDTimeField['noPicker'];
-		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Sets the id on the internal input. Set automatically by nldd-form-field. */
 		'input-id'?: NLDDTimeField['inputId'];
-		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Sets the id on the internal input. Set automatically by nldd-form-field. */
 		'inputId'?: NLDDTimeField['inputId'];
-		/** Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field. */
+		/** Placeholder text. Do not put a format here; use the supporting label of nldd-form-field for that. */
 		'placeholder'?: NLDDTimeField['placeholder'];
-		/** Markeert het veld als ongeldig. */
+		/** Marks the field as invalid. */
 		'invalid'?: NLDDTimeField['invalid'];
-		/** Markeert het veld als geldig. */
+		/** Marks the field as valid. */
 		'valid'?: NLDDTimeField['valid'];
-		/** Uitgeschakelde staat. */
+		/** Disabled state. */
 		'disabled'?: NLDDTimeField['disabled'];
-		/** Alleen-lezen staat. */
+		/** Read-only state. */
 		'readonly'?: NLDDTimeField['readonly'];
-		/** Verplichte staat. */
+		/** Required state. */
 		'required'?: NLDDTimeField['required'];
-		/** Naam voor formulierverzending. */
+		/** Name for form submission. */
 		'name'?: NLDDTimeField['name'];
-		/** Autocomplete-hint. */
+		/** Autocomplete hint. */
 		'autocomplete'?: NLDDTimeField['autocomplete'];
-		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Accessible label for the internal input. Set automatically by nldd-form-field. */
 		'accessible-label'?: NLDDTimeField['accessibleLabel'];
-		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		/** Accessible label for the internal input. Set automatically by nldd-form-field. */
 		'accessibleLabel'?: NLDDTimeField['accessibleLabel'];
-		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
-		'error-message-ids'?: NLDDTimeField['errorMessageIds'];
-		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
-		'errorMessageIds'?: NLDDTimeField['errorMessageIds'];
-		/** Breedte. Standaard precies breed genoeg voor een tijd plus het validatie-icoon; 'full' vult de container, of geef een eigen CSS-lengte. */
+		/** Width. By default exactly wide enough for a time plus the validation icon; 'full' fills the container; 'fit-content' drops the room for the validation icon and grows again as soon as the field turns valid or invalid; or pass your own CSS length. */
 		'width'?: NLDDTimeField['width'];
-		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		/** Translations; unspecified keys fall back to Dutch. */
 		'translations'?: NLDDTimeField['translations'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDTimeField['describedByElements'];
 		'internals'?: NLDDTimeField['internals'];
-		/** Bij elke wijziging. detail: { value } met `HH:mm`, of '' zolang er geen geldige tijd staat. */
+		/** On every change. detail: { value } with `HH:mm`, or '' while there is no valid time. */
 		'onInput'?: (event: CustomEvent) => void;
-		/** Wanneer de waarde is vastgelegd: bij het verlaten van het veld, en bij het sluiten van de picker op een manier die de keuze houdt. detail: { value } met `HH:mm`, of ''. */
+		/** When the value is committed: on leaving the field, and on closing the picker in a way that keeps the choice. detail: { value } with `HH:mm`, or ''. */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDTimePickerProps = {
-		/** De gekozen tijd als `HH:mm` (24-uurs). */
+		/** The chosen time as `HH:mm` (24-hour). */
 		'value'?: NLDDTimePicker['value'];
-		/** Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt. */
+		/** Earliest allowed time as `HH:mm`. Also the base that `step` counts from. */
 		'min'?: NLDDTimePicker['min'];
-		/** Laatst toegestane tijd als `HH:mm`. */
+		/** Latest allowed time as `HH:mm`. */
 		'max'?: NLDDTimePicker['max'];
-		/** Minutenstap (standaard 1). Bepaalt welke minuten in de kolom staan. */
+		/** Step in minutes (default 1). Decides which minutes are in the column. */
 		'step'?: NLDDTimePicker['step'];
-		/** Hoogte van de kolommen in rijen (standaard 7, minimaal 3). De gekozen waarde staat altijd in het midden, dus een oneven aantal toont hele rijen en een even aantal kapt boven en onder een halve rij af. */
+		/** Height of the columns in rows (default 7, minimum 3). The chosen value always sits in the middle, so an odd number shows whole rows and an even number cuts off half a row at the top and bottom. */
 		'rows'?: NLDDTimePicker['rows'];
-		/** Breedte: `full` vult de container, of geef een eigen CSS-lengte. */
+		/** Width: `full` fills the container, or pass your own CSS length. */
 		'width'?: NLDDTimePicker['width'];
-		/** Toegankelijke naam van de picker. */
+		/** Accessible name of the picker. */
 		'accessible-label'?: NLDDTimePicker['accessibleLabel'];
-		/** Toegankelijke naam van de picker. */
+		/** Accessible name of the picker. */
 		'accessibleLabel'?: NLDDTimePicker['accessibleLabel'];
-		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		/** Translations; unspecified keys fall back to Dutch. */
 		'translations'?: NLDDTimePicker['translations'];
-		/** Bij elke wijziging: scrollen, de pijltjestoetsen. detail: { value } met `HH:mm`. */
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDTimePicker['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDTimePicker['describedByElements'];
+		/** On every change: scrolling, the arrow keys. detail: { value } with `HH:mm`. */
 		'onInput'?: (event: CustomEvent) => void;
-		/** Wanneer de keuze is bevestigd: een klik op een waarde of op de selectie, of Enter. detail: { value } met `HH:mm`. Scrollen geeft alleen `input`, want anders zou een veld dat de picker in een popover toont al vastleggen zodra je stopt met scrollen. */
+		/** When the choice is confirmed: a click on a value or on the selection, or Enter. detail: { value } with `HH:mm`. Scrolling only fires `input`, because otherwise a field showing the picker in a popover would commit as soon as you stopped scrolling. */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDTimelineTrackCellProps = {
-		/** Status of this step (default 'past'); the same values as `nldd-step-indicator-item`. `none` draws the line only, without a dot */
+		/** How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below */
 		'status'?: NLDDTimelineTrackCell['status'];
-		/** What this row is: a `dot` (default) on a timeline of events, a 16px dot, or a `step` in a list of steps, a 24px dot with room for a number or an icon */
+		/** How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps */
+		'size'?: NLDDTimelineTrackCell['size'];
+		/** What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color */
 		'variant'?: NLDDTimelineTrackCell['variant'];
-		/** This row belongs under the previous one: a smaller dot in the same lane, so the track runs straight on and nothing indents. The dot stays empty (a number or an icon would not fit, and would make the row a step of its own); carry the hierarchy in the row itself instead, with an `nldd-text-cell` rather than an `nldd-title-cell` for example */
-		'minor'?: NLDDTimelineTrackCell['minor'];
 		/** The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there */
 		'direction'?: NLDDTimelineTrackCell['direction'];
-		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere */
+		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `variant="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
 		'position'?: NLDDTimelineTrackCell['position'];
+		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `variant="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
+		'line'?: NLDDTimelineTrackCell['line'];
 		/** Number or short text in the dot */
 		'text'?: NLDDTimelineTrackCell['text'];
 		/** Icon name in the dot; wins over `text` */
@@ -2985,14 +3127,14 @@ declare module 'vue' {
 		'hideBelow'?: NLDDTimelineTrackCell['hideBelow'];
 		'hide-above'?: NLDDTimelineTrackCell['hideAbove'];
 		'hideAbove'?: NLDDTimelineTrackCell['hideAbove'];
-		/** 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. */
+		/** Only a whole dot in a wide lane has room to read a number in: a minor one is smaller still, and would claim to be a step of its own. */
 		'showsContent'?: NLDDTimelineTrackCell['showsContent'];
 	};
 
 	type NLDDTitleProps = {
 		/** Visual size of the title: 1–6 (default: 3) */
 		'size'?: NLDDTitle['size'];
-		/** 'inherit' lets the title take the text color of the ondergrond volgen (voor gekleurde vlakken zoals de filled-categories); overline en subtitle krijgen dezelfde kleur op verlaagde dekking. Leeg = standaard contentkleuren. */
+		/** 'inherit' lets the title follow the text color of the surface (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. Empty = the default content colors. */
 		'color'?: NLDDTitle['color'];
 	};
 
@@ -3048,6 +3190,8 @@ declare module 'vue' {
 	};
 
 	type NLDDToggleButtonProps = {
+		/** Required state. Set by nldd-toggle-button-group. */
+		'required'?: NLDDToggleButton['required'];
 		/** Underlying element (default: 'button') */
 		'type'?: NLDDToggleButton['type'];
 		/** Button size (default: 'md') */
@@ -3056,6 +3200,10 @@ declare module 'vue' {
 		'selected'?: NLDDToggleButton['selected'];
 		/** Disabled state */
 		'disabled'?: NLDDToggleButton['disabled'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDToggleButton['noTab'];
+		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDToggleButton['noTab'];
 		/** Value for form submission (checkbox/radio) */
 		'value'?: NLDDToggleButton['value'];
 		/** Name for form submission (checkbox/radio) */
@@ -3070,12 +3218,18 @@ declare module 'vue' {
 		'accessible-label'?: NLDDToggleButton['accessibleLabel'];
 		/** Accessible label; required for icon-only usage */
 		'accessibleLabel'?: NLDDToggleButton['accessibleLabel'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDToggleButton['invalid'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDToggleButton['describedByElements'];
 		'internals'?: NLDDToggleButton['internals'];
 		/** When selection changes; detail: { selected: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDToggleButtonGroupProps = {
+		/** Marks the group as required. Enforced in radio mode; in checkbox mode only announced. */
+		'required'?: NLDDToggleButtonGroup['required'];
 		/** Selection mode (default: 'checkbox') */
 		'type'?: NLDDToggleButtonGroup['type'];
 		/** Forwarded to all buttons */
@@ -3092,6 +3246,8 @@ declare module 'vue' {
 		'accessible-labeled-by'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
 		/** ID of an external label element (aria-labelledby) */
 		'accessibleLabeledBy'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDToggleButtonGroup['invalid'];
 		/** Bubbles up from the changed button; detail: { selected: boolean, value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -3158,6 +3314,8 @@ declare module 'vue' {
 		'name'?: NLDDTokenField['name'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDTokenField['translations'];
+		/** Set by nldd-form-field. A consumer never writes this. */
+		'describedByElements'?: NLDDTokenField['describedByElements'];
 		'internals'?: NLDDTokenField['internals'];
 		/** When the selected values change; detail: { values: string[] } */
 		'onChange'?: (event: CustomEvent) => void;
@@ -3227,7 +3385,7 @@ declare module 'vue' {
 	type NLDDTooltipProps = {
 		/** Tooltip text */
 		'text'?: NLDDTooltip['text'];
-		/** Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behaviour. */
+		/** Forces the tooltip visible, whatever hover or focus does. Use it for programmatic feedback ("Copied", for instance). Reset it to false to restore the hover behavior. */
 		'open'?: NLDDTooltip['open'];
 		/** Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices) */
 		'placement'?: NLDDTooltip['placement'];
@@ -3238,47 +3396,47 @@ declare module 'vue' {
 	};
 
 	type NLDDTopNavigationBarProps = {
-		/** Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg. */
+		/** Name of the website or application, above the menu bar. Empty leaves the title line out. */
 		'website-title'?: NLDDTopNavigationBar['websiteTitle'];
-		/** Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg. */
+		/** Name of the website or application, above the menu bar. Empty leaves the title line out. */
 		'websiteTitle'?: NLDDTopNavigationBar['websiteTitle'];
-		/** Verbergt de hele logobalk, inclusief woordmerk. */
+		/** Hides the whole logo bar, wordmark included. */
 		'no-logo'?: NLDDTopNavigationBar['noLogo'];
-		/** Verbergt de hele logobalk, inclusief woordmerk. */
+		/** Hides the whole logo bar, wordmark included. */
 		'noLogo'?: NLDDTopNavigationBar['noLogo'];
-		/** Begrenst de bar-content tot een max-width zodat die uitlijnt met de page-sections. 'full' vult de volle breedte, of geef een eigen CSS-lengte. */
+		/** Limits the bar content to a max-width so it lines up with the page sections. 'full' fills the entire width, or pass your own CSS length. */
 		'width'?: NLDDTopNavigationBar['width'];
-		/** Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen. */
+		/** Title of the wordmark next to the logo. Without it the logo stands alone. */
 		'logo-title'?: NLDDTopNavigationBar['logoTitle'];
-		/** Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen. */
+		/** Title of the wordmark next to the logo. Without it the logo stands alone. */
 		'logoTitle'?: NLDDTopNavigationBar['logoTitle'];
-		/** Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** Subtitle under the wordmark title. Only visible when there is a wordmark. */
 		'logo-subtitle'?: NLDDTopNavigationBar['logoSubtitle'];
-		/** Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** Subtitle under the wordmark title. Only visible when there is a wordmark. */
 		'logoSubtitle'?: NLDDTopNavigationBar['logoSubtitle'];
-		/** Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** First supporting line under the wordmark title. Only visible when there is a wordmark. */
 		'logo-supporting-text-1'?: NLDDTopNavigationBar['logoSupportingText1'];
-		/** Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** First supporting line under the wordmark title. Only visible when there is a wordmark. */
 		'logoSupportingText1'?: NLDDTopNavigationBar['logoSupportingText1'];
-		/** Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** Second supporting line under the wordmark title. Only visible when there is a wordmark. */
 		'logo-supporting-text-2'?: NLDDTopNavigationBar['logoSupportingText2'];
-		/** Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		/** Second supporting line under the wordmark title. Only visible when there is a wordmark. */
 		'logoSupportingText2'?: NLDDTopNavigationBar['logoSupportingText2'];
-		/** URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label. */
+		/** URL for the logo and wordmark. Without it they are not a link but an image with an accessible label. */
 		'logo-href'?: NLDDTopNavigationBar['logoHref'];
-		/** URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label. */
+		/** URL for the logo and wordmark. Without it they are not a link but an image with an accessible label. */
 		'logoHref'?: NLDDTopNavigationBar['logoHref'];
-		/** URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst. */
+		/** URL for the website title. Without it the title stays plain text. */
 		'website-href'?: NLDDTopNavigationBar['websiteHref'];
-		/** URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst. */
+		/** URL for the website title. Without it the title stays plain text. */
 		'websiteHref'?: NLDDTopNavigationBar['websiteHref'];
-		/** URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert. */
+		/** URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself. */
 		'back-href'?: NLDDTopNavigationBar['backHref'];
-		/** URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert. */
+		/** URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself. */
 		'backHref'?: NLDDTopNavigationBar['backHref'];
-		/** Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug"). */
+		/** Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug"). */
 		'back-text'?: NLDDTopNavigationBar['backText'];
-		/** Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug"). */
+		/** Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug"). */
 		'backText'?: NLDDTopNavigationBar['backText'];
 		'translations'?: NLDDTopNavigationBar['translations'];
 	};
@@ -3306,9 +3464,9 @@ declare module 'vue' {
 		'dismiss-text'?: NLDDTopTitleBar['dismissText'];
 		/** Text of the dismiss button. Empty hides that button. */
 		'dismissText'?: NLDDTopTitleBar['dismissText'];
-		/** Fired when the back button is clicked (not fired when back-href is set) */
+		/** Fired when the back button is clicked (not fired when back-href is set). It bubbles and is composed, so an ancestor hears it too, which is how nldd-navigation-split-view lets a consumer catch the back of any pane in one place. Listen in one place then: bound to both this bar and an ancestor, a single press runs the handler twice. */
 		'onBack'?: (event: CustomEvent) => void;
-		/** Fired when the dismiss button is clicked */
+		/** Fired when the dismiss button is clicked. Bubbles and is composed, with the same caveat as `back`. */
 		'onDismiss'?: (event: CustomEvent) => void;
 	};
 
@@ -3355,38 +3513,70 @@ declare module 'vue' {
 		'height'?: NLDDTwoThirdsOneThirdSection['height'];
 	};
 
+	type NLDDValidationItemProps = {
+		/** Regular expression the value has to contain. Not anchored, unlike the native `pattern`: `[A-Z]` means "has a capital in it". */
+		'match'?: NLDDValidationItem['match'];
+		/** Fewest characters the value may have. */
+		'minlength'?: NLDDValidationItem['minlength'];
+		/** Most characters the value may have. */
+		'maxlength'?: NLDDValidationItem['maxlength'];
+		/** The value may not be empty. Use it on a field whose other rules would pass an empty value. */
+		'required'?: NLDDValidationItem['required'];
+		/** Show this item before there is a verdict, whatever the list says. */
+		'hint'?: NLDDValidationItem['hint'];
+		/** Whether the value fails this item. Managed by the list; do not set it yourself. */
+		'unmet'?: NLDDValidationItem['unmet'];
+		/** Whether the item is on screen. Managed by the list. */
+		'visible'?: NLDDValidationItem['visible'];
+		/** Whether this item judges itself, or waits for the app to name it. */
+		'hasRule'?: NLDDValidationItem['hasRule'];
+	};
+
+	type NLDDValidationListProps = {
+		/** Id of the control this list is about. Not needed inside an nldd-form-field, which hands its own control over. */
+		'for'?: NLDDValidationList['for'];
+		/** Show every item before there is a verdict, as the requirements of the field. Overridable per item. */
+		'hint'?: NLDDValidationList['hint'];
+		/** Drop the hints, because this field has been judged. Turned on by the list itself once its control is `invalid`, and settable by hand. What turns red follows `invalid`, not this. */
+		'judging'?: NLDDValidationList['judging'];
+		/** The control this list is about. Set by the wrapping nldd-form-field, which already answers "which control is this field about" for the label and the description. A `for` of its own wins, and setting this property directly is what a test or a story does. */
+		'control'?: NLDDValidationList['control'];
+		/** The value to check, when there is no control to read it from. */
+		'value'?: NLDDValidationList['value'];
+	};
+
 	type NLDDWindowProps = {
-		/** Niet-modaal (geen backdrop of focusvergrendeling); standaard is het venster modaal */
+		/** Modeless (no backdrop or focus trap); the window is modal by default */
 		'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. */
+		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
 		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
-		/** 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. */
+		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
 		'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. */
+		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
 		'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. */
+		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
 		'accessibleLabel'?: NLDDWindow['accessibleLabel'];
-		/** Override translation keys; unset keys vallen terug op de Nederlandse default. */
+		/** Override translation keys; unset keys fall back to the Dutch default. */
 		'translations'?: NLDDWindow['translations'];
-		/** CSS top positie van de bovenrand (bijv. '0', '100px') */
+		/** CSS top position of the top edge (e.g. '0', '100px') */
 		'top'?: NLDDWindow['top'];
-		/** CSS left positie van de linkerrand */
+		/** CSS left position of the left edge */
 		'left'?: NLDDWindow['left'];
-		/** CSS right waarde */
+		/** CSS right value */
 		'right'?: NLDDWindow['right'];
-		/** CSS bottom waarde */
+		/** CSS bottom value */
 		'bottom'?: NLDDWindow['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. */
+		/** Centers both axes on the viewport. Overridable per axis: `centered top="0"` is horizontally centered, top aligned. Mirrors CSS `place-items: center` with `align-items`/`justify-items` overrides. */
 		'centered'?: NLDDWindow['centered'];
-		/** CSS width (standaard: var(--components-window-default-width)) */
+		/** CSS width (default: var(--components-window-default-width)) */
 		'width'?: NLDDWindow['width'];
-		/** CSS height (standaard: content height) */
+		/** CSS height (default: content height) */
 		'height'?: NLDDWindow['height'];
 		/** Color scheme (default 'inherit'). */
 		'scheme'?: NLDDWindow['scheme'];
-		/** Wanneer het venster wordt geopend */
+		/** When the window opens */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** Wanneer het venster volledig is gesloten */
+		/** When the window has fully closed. Does not bubble: overlays can sit inside each other, and a listener on one window should not also hear the form that opened it. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -3405,7 +3595,7 @@ declare module 'vue' {
 		'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>;
-		/** Toont een citaat met optionele bron-attributie. */
+		/** Shows a quote with an optional source attribution. */
 		'nldd-blockquote': DefineComponent<NLDDBlockquoteProps>;
 		/** Use a box to visually group related components in a distinct, contained region. Boxes draw attention to a set of controls or content that belong together, helping users understand their relationship at a glance. */
 		'nldd-box': DefineComponent<NLDDBoxProps>;
@@ -3419,7 +3609,7 @@ declare module 'vue' {
 		'nldd-button-bar-divider': DefineComponent<anonymous_0Props>;
 		/** A container for grouping related buttons together, either horizontally or vertically. */
 		'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
-		/** 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. */
+		/** A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable. */
 		'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>;
@@ -3436,13 +3626,13 @@ declare module 'vue' {
 		'nldd-combo-box': DefineComponent<NLDDComboBoxProps>;
 		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. */
 		'nldd-container': DefineComponent<NLDDContainerProps>;
-		/** Een tekstveld voor een datum, met een optionele kalender in een popover. De waarde is altijd ISO (jjjj-mm-dd); op het scherm staat de Nederlandse notatie (dd-mm-jjjj). Er wordt niet gemaskerd tijdens het typen: invoer wordt royaal geaccepteerd en pas bij het verlaten van het veld genormaliseerd. Foutmeldingen horen bij nldd-form-field, niet hier. Dit veld reflecteert alleen `invalid` / `valid`, net als nldd-text-field. */
+		/** A text field for a date, with an optional calendar in a popover. The value is always ISO (yyyy-mm-dd); on screen it shows the Dutch notation (dd-mm-yyyy). Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. */
 		'nldd-date-field': DefineComponent<NLDDDateFieldProps>;
-		/** Een kalender waarin een datum of een periode wordt gekozen. Het component is zelfstandig bruikbaar - inline op een pagina, in een filterpaneel - en zit ook in de popover van nldd-date-field. Waarden zijn altijd ISO (jjjj-mm-dd). Met `range` kiest de gebruiker in twee stappen een begin- en einddatum. */
+		/** A calendar for picking a date or a period. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-date-field. Values are always ISO (yyyy-mm-dd). With `range` the user picks a start and an end date in two steps. */
 		'nldd-date-picker': DefineComponent<NLDDDatePickerProps>;
 		/** A cell component for displaying a title-description pair in lists. `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-description-cell': DefineComponent<NLDDDescriptionCellProps>;
-		/** Een scheidingslijn die secties van inhoud visueel van elkaar scheidt. */
+		/** A rule that visually separates sections of content. */
 		'nldd-divider': DefineComponent<NLDDDividerProps>;
 		/** 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>;
@@ -3453,20 +3643,19 @@ declare module 'vue' {
 		'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
 		/** A file picker that reads as one control: an nldd-button flush in the corner of a tinted surface, the chosen file next to it, and a dismiss button to clear it again. It wraps a hidden native `<input type="file">`, which is what makes the picker open at all — a file dialog only opens from a user gesture on a real input. The surface deliberately does not look like an input field. A border with field semantics promises you can type into it; here you can only press a button, so it uses button and surface colors instead of `--semantics-input-fields-*`. The button keeps its own tinted background and therefore sits a shade darker in the surface, which is what marks it as the thing to press. Several files are summarized, not listed: "3 bestanden" with a single cross that clears all of them. Every pick replaces the whole FileList, and rebuilding it to add or drop one file means going through DataTransfer, which does not deduplicate (even the same File object twice yields two entries) — and a File has no id, so deduplicating would come down to guessing from name, size and last-modified. A list with a cross per file would promise an edit the platform does not support. A page that does want to show the files renders its own list from the `File[]` in the change event. */
 		'nldd-file-field': DefineComponent<NLDDFileFieldProps>;
-		/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit) — required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - Geen shadowRoot — alle children leven in light DOM (binnen het inner <form>) - Geen Lit — pure HTMLElement met handmatige attribute-mirroring - **Vereist global stylesheet import** — vertical rhythm en form-section divider-suppression regels staan in `dist/css/form.css` (of `global.css`), niet in een component-specifieke shadow stylesheet. Import deze als deel van je app's globale CSS bundle. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute-mirroring, en skipt de migration. Children blijven waar je framework ze plaatst — geen DOM-shuffling die met React/Vue/Angular reconciliation conflicteert. **Framework interop:** In auto-wrap mode wordt elke direct child verplaatst naar het inner form via een MutationObserver. Voor de meeste React/Vue use cases werkt dit prima omdat frameworks alleen DOM-mutaties doen wanneer hun virtual DOM verandert. Voor edge cases (animatie-libs die DOM-positie tracken, SSR-hydration mismatches, frameworks die actief sibling-positions controleren) gebruik dan **user-provided form** mode. Voor programmatische manipulatie: gebruik de `form` getter zodat je direct met het inner `<form>` element werkt: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skipt migration-overhead */
+		/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit), required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - No shadowRoot: all children live in the light DOM (inside the inner <form>) - No Lit: a plain HTMLElement with manual attribute mirroring - **Requires a global stylesheet import**: the vertical rhythm rules live in `dist/css/form.css` (or `global.css`), not in a component-specific shadow stylesheet. Import it as part of your app's global CSS bundle. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute mirroring, and skips the migration. Children stay where your framework puts them, so there is no DOM shuffling to conflict with React/Vue/Angular reconciliation. **Framework interop:** In auto-wrap mode every direct child is moved into the inner form through a MutationObserver. That works fine for most React/Vue use cases, because frameworks only mutate the DOM when their virtual DOM changes. For edge cases (animation libraries that track DOM position, SSR hydration mismatches, frameworks that actively check sibling positions) use **user-provided form** mode instead. For programmatic manipulation, use the `form` getter so you work with the inner `<form>` element directly: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skips the migration overhead */
 		'nldd-form': DefineComponent<NLDDFormProps>;
-		/** Een layout-wrapper voor de actie-knoppen onderaan een formulier (typisch een submit-button of button-group). Volgt dezelfde responsive layout als `nldd-form-field`: met `label-alignment="right"` of `"left"` krijgt de inhoud dezelfde insprong als de invoervelden boven, dankzij een `::before`-pseudo-element dat fungeert als spacer-kolom waar de label zou staan. Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`: de form propageert z'n eigen `label-alignment` als `form-label-alignment` naar descendant `nldd-form-actions` (en `nldd-form-field`) via een MutationObserver. Een expliciete eigen `label-alignment` op de form-actions wint via CSS-cascade — de form-code raakt het `label-alignment` attribuut van de descendant nooit aan. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
+		/** A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment="right"` or `"left"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
 		'nldd-form-actions': DefineComponent<NLDDFormActionsProps>;
 		'nldd-form-field': DefineComponent<NLDDFormFieldProps>;
-		'nldd-form-field-error-text': DefineComponent<NLDDFormFieldErrorTextProps>;
 		'nldd-form-field-help-text': DefineComponent<NLDDFormFieldHelpTextProps>;
-		/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit) — light-DOM render lost een NVDA + Firefox a11y-bug op waar shadow-DOM <fieldset> + <legend> niet betrouwbaar als group-label aangekondigd worden voor slotted controls. Native fieldset/legend in light DOM werkt correct over alle AT/browser-combinaties. **Differs from shadow components:** - Geen shadowRoot — alle children leven in light DOM (binnen het gerenderde <fieldset>). - Geen Lit — pure HTMLElement met handmatige DOM-mutation. - **Vereist global stylesheet import** — `dist/css/form-section.css` (of `global.css`). Form-section heeft geen shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__subtitle">Subtitle</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: de title rendert als `<legend>`. Dat is semantisch een **groep-label**, geen heading. Screenreaders kondigen 't aan wanneer de gebruiker in de fieldset komt, maar gebruikers die met de H-toets door headings springen slaan 'm over. Visueel lijkt 't op een heading; gebruik dit component dus voor *form-grouping*, niet als pagina-structuur. Voor echte page-headings: gebruik een apart heading-element boven het form. **Supporting-text lengte**: de subtitle staat als `<span>` binnen de `<legend>` zodat SR 'm meeleest als group label. Bijwerking: bij elke field-entry binnen de sectie wordt de hele legend (titel + subtitel) opnieuw uitgesproken. Houd `supporting-text` daarom kort (richtlijn: ≤ ~80 tekens) en gebruik 'm voor groep-introductie ("Vul je adresgegevens in"), niet voor uitgebreide instructies. Voor langere uitleg op een specifiek veld: gebruik `nldd-form-field-help-text` op dat veld. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
+		/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit). The light-DOM render works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> + <legend> is not reliably announced as the group label for slotted controls. A native fieldset/legend in the light DOM works correctly across all AT/browser combinations. **Differs from shadow components:** - No shadowRoot: all children live in the light DOM (inside the rendered <fieldset>). - No Lit: a plain HTMLElement with manual DOM mutation. - **Requires a global stylesheet import**: `dist/css/form-section.css` (or `global.css`). Form-section has no shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__subtitle">Subtitle</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: the title renders as a `<legend>`. Semantically that is a **group label**, not a heading. Screen readers announce it when the user enters the fieldset, but users jumping through headings with the H key skip it. Visually it looks like a heading, so use this component for *form grouping*, not as page structure. For real page headings, use a separate heading element above the form. **Supporting-text length**: the subtitle sits as a `<span>` inside the `<legend>` so a screen reader reads it along as the group label. Side effect: on every field entry within the section, the whole legend (title + subtitle) is spoken again. Keep `supporting-text` short (roughly 80 characters or less) and use it to introduce the group ("Vul je adresgegevens in"), not for detailed instructions. For a longer explanation on one specific field, use `nldd-form-field-help-text` on that field. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
 		'nldd-form-section': DefineComponent<NLDDFormSectionProps>;
 		/** A section that spans the full width without horizontal padding. Useful for background colors, images, or other content that runs edge to edge. Vertical padding and gap adjust via container queries. */
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
 		/** A page header with a media area and a text panel (the main) that can stand in six positions. Every area is rectangular. With `main-width="full"` the media area sits as its own strip above or below the panel rather than behind it. On mobile the media always stacks above the full-width panel. Without media the main fills the whole area; with `main-background="base"` that area gets a border so it stays visible on the base surface. `main-background` gives the panel a surface color from the filled categories. Those carry a pure white or black content color along, so components with `color="inherit"` (title, rich-text) are guaranteed to keep their contrast. */
 		'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: 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. */
+		/** 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 a color the design system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
 		'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. */
@@ -3477,23 +3666,23 @@ declare module 'vue' {
 		'nldd-image': DefineComponent<NLDDImageProps>;
 		/** An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width. */
 		'nldd-inline-dialog': DefineComponent<NLDDInlineDialogProps>;
-		/** Een guided-discovery coach-mark. Plaats een control (bijv. nldd-search-field) in de default slot; zolang `active` is gezet tilt het component een callout (titel + supporting text + dismiss) in de top layer via de Popover API (`popover="manual"`), geankerd aan het control met Floating UI. Geen backdrop, non-modaal: de achtergrond blijft interactief. Het control zelf blijft op zijn plek in de flow staan. Met `dismissable` beheert het component het sluiten en vuurt het nldd-close: - de gebruiker voert de geadviseerde interactie uit op het control -> close{completed} - de dismiss-knop -> close{dismissed} - een klik/toets BUITEN de coach-mark -> close{ignored} Zonder `dismissable` sluit niets vanzelf (geen knop, geen buiten- of slot-klik); dan bepaalt de consumer het sluiten zelf via `active` of `complete()`. `complete()` werkt altijd en sluit met close{completed} (bijv. pas bij een echte zoekopdracht). */
+		/** A guided-discovery coach mark. Put a control (nldd-search-field, for instance) in the default slot. While `active` is set, the component lifts a callout (title + supporting text + dismiss) into the top layer through the Popover API (`popover="manual"`), anchored to the control with Floating UI. No backdrop, non-modal: the background stays interactive. The control itself stays where it is in the flow. With `dismissable` the component manages closing and fires nldd-close: - the user performs the suggested interaction on the control -> close{completed} - the dismiss button -> close{dismissed} - a click or key press OUTSIDE the coach mark -> close{ignored} Without `dismissable` nothing closes by itself (no button, no outside or slot click); the consumer then decides when to close through `active` or `complete()`. `complete()` always works and closes with close{completed}, for example only once a real search has been submitted. */
 		'nldd-just-in-time-education': DefineComponent<NLDDJustInTimeEducationProps>;
-		/** Toont een toetsencombinatie (zoals Cmd+K of Ctrl+Shift+P) in één gecombineerde container met semantische <kbd>-elementen per toets. Op touch-only devices (geen hover-capable input) wordt de shortcut standaard verborgen omdat hij niet aanroepbaar is. Gebruik het `always-visible` attribuut wanneer de shortcut puur informatief is en altijd zichtbaar moet blijven. Voor cross-platform shortcuts kunnen `mac-keys`, `windows-keys` en `linux-keys` worden gezet — het component picks de juiste op basis van de gedetecteerde OS, met `keys` als fallback voor onbekende platforms. */
+		/** Shows a key combination (such as Cmd+K or Ctrl+Shift+P) in one combined container with a semantic <kbd> element per key. On touch-only devices (no hover-capable input) the shortcut is hidden by default, because it cannot be invoked there. Use the `always-visible` attribute when the shortcut is purely informative and should stay visible. For cross-platform shortcuts you can set `mac-keys`, `windows-keys` and `linux-keys`. The component picks the right one from the detected OS, with `keys` as the fallback for unknown platforms. */
 		'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. */
+		/** Hyperlink component with two modes: 1. **Standalone (sized)**: set `size="xs"|"sm"|"md"|"lg"` for menus, action areas or overviews. Fixed text size, `display: inline-flex` with `gap` for icon spacing. 2. **Inline (inherit)**: leave `size` out or set `size="inherit"` explicitly. The link inherits `font-size`, `line-height` and `font-family` from its surroundings. Text wraps naturally across lines (`display: inline`). Icons work here too; the natural whitespace between icon and text provides the spacing. For links in CMS or markdown output, where the `<a>` arrives as HTML, `<nldd-rich-text>` with a raw `<a>` remains the route to take. */
 		'nldd-link': DefineComponent<NLDDLinkProps>;
-		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `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" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
+		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role="list"`, `role="listitem"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. A list you walk through answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. It follows the type, which you can see before you touch a key. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
 		'nldd-list': DefineComponent<NLDDListProps>;
-		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and 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. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-action` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-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 synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
+		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
 		'nldd-list-item': DefineComponent<NLDDListItemProps>;
-		/** 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 segment 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 segment — 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 segment 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 a segment 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 segment 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 segment 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-segment': DefineComponent<NLDDListItemSegmentProps>;
 		/** 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. */
+		/** Horizontal row of nldd-menu-bar-item elements with automatic overflow detection. Items that do not fit are hidden behind an overflow button with a 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). */
+		/** Interactive building block for use in a menu bar. Renders as an <a> (with href) or a <button> (without href). Supports an icon, text, a disclosure indicator, and an expandable popover through a slotted `<nldd-menu>` (or another popover element). */
 		'nldd-menu-bar-item': DefineComponent<NLDDMenuBarItemProps>;
 		/** A horizontal rule between groups of items in an `nldd-menu`. */
 		'nldd-menu-divider': DefineComponent<NLDDMenuDividerProps>;
@@ -3540,7 +3729,7 @@ declare module 'vue' {
 		'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>;
-		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen, lijsten, blockquote, div/section) leest op de `main`-maat; media en tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent; al het overige — codeblokken en élke component — krijgt de volledige `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is maar niet geforceerd wordt. Per kind te overschrijven met `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en full als bleed naar rechts; met `centered` zijn ze symmetrisch. */
+		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. Children are placed in three zones: text (headings, paragraphs, lists, blockquote, div/section) reads at the `main` size; media and tables (img, figure, video, iframe, table) get the `wide` accent; everything else, code blocks and every component, gets the full `full` span with `justify-self: start`, so the room is available without being forced. Overridable per child with `data-width="main" | "wide" | "full"`. In the left-aligned layout, wide and full read as a bleed to the right; with `centered` they are symmetrical. */
 		'nldd-rich-text': DefineComponent<NLDDRichTextProps>;
 		/** A search input with a leading search icon, an optional dismiss button, and an optional search button. */
 		'nldd-search-field': DefineComponent<NLDDSearchFieldProps>;
@@ -3555,7 +3744,7 @@ declare module 'vue' {
 		'nldd-sidebar-section': DefineComponent<NLDDSidebarSectionProps>;
 		/** A basic section with responsive padding and gap based on container size. Contains optional header and footer slots. The padding and spacing between slots adjust automatically via container queries. */
 		'nldd-simple-section': DefineComponent<NLDDSimpleSectionProps>;
-		/** Accessibility-patroon dat keyboard-gebruikers toestaat om content over te slaan. Wraps content in een default slot — zonder href focust het het eerste element na de skip-link in het DOM (nextElementSibling). Zorg dat er een focusbaar element na het component staat, anders heeft de skip-link geen effect. */
+		/** Accessibility pattern that lets keyboard users skip past content. Wraps content in a default slot. Without href it focuses the first element after the skip link in the DOM (nextElementSibling). Make sure a focusable element follows the component, otherwise the skip link has no effect. */
 		'nldd-skip-link': DefineComponent<NLDDSkipLinkProps>;
 		/** Add explicit space between elements. Components in this design system have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
 		'nldd-spacer': DefineComponent<NLDDSpacerProps>;
@@ -3569,7 +3758,7 @@ declare module 'vue' {
 		'nldd-split-view-pane': DefineComponent<NLDDSplitViewPaneProps>;
 		/** A vertical split view with multiple stacked panes. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available height are automatically hidden. */
 		'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). */
+		/** A narrow, page-wide status bar (24px) with a deep background color per variant. Use it for persistent system state: an outage, planned maintenance, a draft view or a recording in progress. The bar deliberately shows no icon and supports text only. The text itself has to name the status ("Storing: …", "Gepland onderhoud …"), so the meaning does not follow from color alone (WCAG 1.4.1). Keep the text short: the bar shows one line and truncates with an ellipsis, certainly on narrower screens. For a long message with a lot of information only the essence belongs in the bar. Point to a separate page or sheet for the rest (through `href` or `button`, for instance), where the user can read on. The whole bar can be clickable: set `href` (renders an `<a>`) or `button` (renders a `<button>`; listen for the native `click` event). Without either the bar is static. On interaction a chevron appears as an affordance. One action per bar at most; several actions, or links in running text, belong in nldd-banner. role and aria-live are set automatically from the variant: - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader) - others → role="status" aria-live="polite" Not overridable. If you need a quieter component, pick a different one. Use `critical` only for a real emergency: role="alert" interrupts the screen reader on every change of the content, so do not put text in it that changes regularly (a counting-down timer, for example). */
 		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
 		/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. The parent holds the truth: `current` (1-based) derives the status of every child — `past` before it, `future` after. A child can override that with a `status` of its own, for flows that jump back or skip a step. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
 		'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
@@ -3589,14 +3778,16 @@ declare module 'vue' {
 		'nldd-table-row': DefineComponent<NLDDTableRowProps>;
 		/** A compact property that has been assigned to something: a category, a type, a role, a certification. What it says changes only when someone edits the content. A tag is not interactive. Do not use it for a state the system keeps itself, such as "Active" or "Expired", because that is `nldd-badge`. If the user can remove the thing or click it, it is `nldd-token`. */
 		'nldd-tag': DefineComponent<NLDDTagProps>;
+		/** One run of body text at a size from the type scale. It is what you reach for where an app would otherwise write a bare `<p>` and inherit whatever the page happens to set: a line under a title, a sentence in a panel, a caption. Every combination it offers exists as a token, so it cannot invent typography — it only names what the scale already has. The three axes are the same three the tokens carry: size, weight and line height. Not for headings, which is `nldd-title`, and not for a block of prose with its own rhythm, spacing and media widths, which is `nldd-rich-text`. This is one run of text and nothing around it. Color follows the context channel a list item, menu or table sets on its content, so text inside a row travels with that row as it is hovered or selected. Standalone that channel is unset and the semantic color answers. */
+		'nldd-text': DefineComponent<NLDDTextProps>;
 		/** A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-text-cell': DefineComponent<NLDDTextCellProps>;
 		/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
 		'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
 		'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
-		/** Een tekstveld voor een tijd. De waarde is altijd 24-uurs `HH:mm`; dat is in het Nederlands ook de weergave, dus anders dan bij nldd-date-field valt er niets om te rekenen. Er wordt niet gemaskeerd tijdens het typen: invoer wordt royaal geaccepteerd en pas bij het verlaten van het veld genormaliseerd. Foutmeldingen horen bij nldd-form-field, niet hier. Dit veld reflecteert alleen `invalid` / `valid`, net als nldd-text-field. Wat je in de picker doet is een voorbeeld tot je hem verlaat: het veld toont de tijd meteen, maar legt hem pas vast bij het sluiten. "Klaar" en Enter houden de keuze, een klik ernaast ook zodra je iets gekozen hebt, en Annuleer en Escape zetten de oude tijd terug. Op een leeg veld openen de wielen op `min`, of anders op de huidige tijd afgerond op `step`; dat vult het veld nog niet in. */
+		/** A text field for a time. The value is always 24-hour `HH:mm`, which is how Dutch shows it too, so unlike nldd-date-field there is nothing to convert. Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. What you do in the picker is a preview until you leave it. The field shows the time right away but commits it on close. "Klaar" and Enter keep the choice, and so does a click outside once you have picked something. Cancel and Escape put the old time back. On an empty field the wheels open at `min`, or otherwise at the current time rounded to `step`, which does not fill in the field yet. */
 		'nldd-time-field': DefineComponent<NLDDTimeFieldProps>;
-		/** Twee kolommen, uren en minuten, die als een wiel langs de selectie in het midden schuiven. Het component is zelfstandig bruikbaar (inline op een pagina, in een filterpaneel) en zit ook in de popover van nldd-time-field. Waarden zijn altijd 24-uurs `HH:mm`. Scrollen ís kiezen: wat in het midden tot stilstand komt, is de waarde. Met het toetsenbord bedien je de selectie, want dat is wat een wiel is: uur en minuut zijn er elk een spinbutton. De kolommen eronder staan op aria-hidden, zodat dezelfde waarden niet twee keer worden voorgelezen. */
+		/** Two columns, hours and minutes, that slide like a wheel past the selection in the middle. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-time-field. Values are always 24-hour `HH:mm`. Scrolling is choosing: whatever comes to rest in the middle is the value. The keyboard drives that same selection, because that is what a wheel is: hour and minute are each a spinbutton. The columns underneath are aria-hidden, so the same values are not read out twice. */
 		'nldd-time-picker': DefineComponent<NLDDTimePickerProps>;
 		/** 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. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `variant="step"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the variant rather than to the content: every dot in a list is the same size, or the track would jump. */
 		'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
@@ -3617,13 +3808,16 @@ declare module 'vue' {
 		'nldd-toolbar-title': DefineComponent<NLDDToolbarTitleProps>;
 		/** A wrapper that shows a tooltip on hover or focus of its child element. It uses `display: contents`, so it does not affect the child's layout. */
 		'nldd-tooltip': DefineComponent<NLDDTooltipProps>;
-		/** De bovenste balk van een pagina: een logobalk met het Rijkslogo en een optioneel woordmerk, en daaronder de hoofdbalk met de websitetitel, een terugknop, de globale navigatie en de utility-navigatie. Op smalle breedtes verhuist de globale navigatie naar een menusheet achter de menuknop. */
+		/** The top bar of a page: a logo bar with the Rijkslogo and an optional wordmark, and below it the main bar with the website title, a back button, the global navigation and the utility navigation. On narrow widths the global navigation moves into a menu sheet behind the menu button. */
 		'nldd-top-navigation-bar': DefineComponent<NLDDTopNavigationBarProps>;
 		/** A toolbar for page and container headings with optional navigation and action buttons. The component has two states: - Default: the back button shows the previous page title as a text button - Compact (class `is-compact`): the back button is an icon button, a divider and the toolbar title are visible When `collapse-anchor` is set, the `is-compact` class is automatically applied as soon as the top of the anchor element reaches this bar's own top edge (the sticky header line). Measuring the bar rather than the page keeps it correct in both nested and root scroll modes; it also re-points at the live scroll target when the page switches mode. Without `collapse-anchor` the bar takes a static state: compact when `text` is set (so the title shows in the title-group), non-compact otherwise (so the `back-text` button stays visible). An anchored bar hides its own title from assistive technology. The anchor is the heading the title swaps in for, so both carry the same words: once you scroll past the heading, a screen reader would otherwise find the same title twice. Sighted readers see one at a time, and this makes that true for everyone. Anchor at the heading, then, and not at some other element that happens to sit at the right height: the bar hands its title over to it. */
 		'nldd-top-title-bar': DefineComponent<NLDDTopTitleBarProps>;
 		/** A section with 2/3 main content on the left and a 1/3 sidebar on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
 		'nldd-two-thirds-one-third-section': DefineComponent<NLDDTwoThirdsOneThirdSectionProps>;
-		/** Een zwevend venster gebaseerd op het native <dialog>-element. Kan modaal of niet-modaal worden weergegeven. Positioneerbaar via CSS-waarden. Geen eigen header — consumers gebruiken nldd-page met sticky-header binnenin voor een title bar. */
+		'nldd-validation-item': DefineComponent<NLDDValidationItemProps>;
+		/** Nederlandse Digitale Dienst Validation List (Lit + TypeScript) Everything a value has to satisfy, in one list. A requirement you can state up front is an item with a rule, and it checks itself while you type. One only a server can decide is an item without a rule, and the app names it in `unmet` on the control. The list has two modes and `judging` is the switch. Before a verdict it shows its hints, which are the requirements of the field. After one it shows everything the value does not satisfy, and the hints are gone. It throws that switch itself the moment its control turns `invalid`, so when the field is judged is the consumer's decision, and the right moment is on submit. Hints are off by default. A phone number does not need its format spelled out before anyone has typed, while the rules for a password do. There are no checkmarks. The control already shows a validation icon of its own, and repeating that per line says the same thing three times. */
+		'nldd-validation-list': DefineComponent<NLDDValidationListProps>;
+		/** A floating window based on the native <dialog> element. Can be shown modal or modeless. Positionable through CSS values. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
 		'nldd-window': DefineComponent<NLDDWindowProps>;
 	}
 }