@nldd/design-system 0.8.79 → 0.8.82

package/dist/types/vue.d.ts

@@ -13,6 +13,7 @@ import type { DefineComponent } from 'vue';
 import type { NLDDActivityIndicator } from '@nldd/design-system/activity-indicator';
 import type { NLDDAppView } from '@nldd/design-system/app-view';
 import type { NLDDAvatar } from '@nldd/design-system/avatar';
+import type { NLDDAvatarGroup } from '@nldd/design-system/avatar-group';
 import type { NLDDBadge } from '@nldd/design-system/badge';
 import type { NLDDBanner } from '@nldd/design-system/banner';
 import type { NLDDBarSplitView } from '@nldd/design-system/bar-split-view';
@@ -24,7 +25,6 @@ import type { NLDDButton } from '@nldd/design-system/button';
 import type { NLDDButtonBar } from '@nldd/design-system/button-bar';
 import type { anonymous_0 } from '@nldd/design-system/button-bar';
 import type { NLDDButtonGroup } from '@nldd/design-system/button-group';
-import type { NLDDByline } from '@nldd/design-system/byline';
 import type { NLDDCard } from '@nldd/design-system/card';
 import type { NLDDCell } from '@nldd/design-system/cell';
 import type { NLDDCheckbox } from '@nldd/design-system/checkbox';
@@ -42,6 +42,7 @@ import type { NLDDDocumentTabBar } from '@nldd/design-system/document-tab-bar';
 import type { NLDDDocumentTabBarItem } from '@nldd/design-system/document-tab-bar';
 import type { NLDDDragHandleCell } from '@nldd/design-system/drag-handle-cell';
 import type { NLDDDropdown } from '@nldd/design-system/dropdown';
+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';
@@ -53,6 +54,7 @@ import type { NLDDHero } from '@nldd/design-system/hero';
 import type { NLDDIcon } from '@nldd/design-system/icon';
 import type { NLDDIconButton } from '@nldd/design-system/icon-button';
 import type { NLDDIconCell } from '@nldd/design-system/icon-cell';
+import type { NLDDIdentity } from '@nldd/design-system/identity';
 import type { NLDDImage } from '@nldd/design-system/image';
 import type { NLDDInlineDialog } from '@nldd/design-system/inline-dialog';
 import type { NLDDJustInTimeEducation } from '@nldd/design-system/just-in-time-education';
@@ -70,6 +72,7 @@ import type { NLDDMenuItem } from '@nldd/design-system/menu';
 import type { NLDDModalDialog } from '@nldd/design-system/modal-dialog';
 import type { NLDDMultiLineTextField } from '@nldd/design-system/multi-line-text-field';
 import type { NLDDNavigationSplitView } from '@nldd/design-system/navigation-split-view';
+import type { NLDDNotification } from '@nldd/design-system/notification';
 import type { NLDDNumberField } from '@nldd/design-system/number-field';
 import type { NLDDOneHalfOneHalfSection } from '@nldd/design-system/one-half-one-half-section';
 import type { NLDDOneThirdTwoThirdsSection } from '@nldd/design-system/one-third-two-thirds-section';
@@ -162,41 +165,45 @@ declare module 'vue' {
 	};
 
 	type NLDDAvatarProps = {
-		/** Afbeeldingsbron; valt bij een laadfout terug op initialen/icoon */
-		'src'?: NLDDAvatar['src'];
-		/** Responsive source set voor de afbeelding (het component zet zelf `sizes`) */
-		'srcset'?: NLDDAvatar['srcset'];
-		/** Naam van de persoon/organisatie; levert de afgeleide initialen en het toegankelijke label */
-		'name'?: NLDDAvatar['name'];
-		/** Expliciete initialen, max 3 tekens (overschrijft de afleiding uit `name`; ook voor organisatie-acroniemen) */
-		'initials'?: NLDDAvatar['initials'];
-		/** Overschrijft het type-afhankelijke terugval-icoon */
-		'icon'?: NLDDAvatar['icon'];
-		/** `person` (cirkel, person-icoon) of `organization` (afgerond, building-icoon); standaard `person` */
+		/** `person` (circle, person icon) or `organization` (rounded, building icon); default `person` */
 		'type'?: NLDDAvatar['type'];
-		/** `default` (neutrale vulling) of `inherit` (vulling in de content-kleur: de `--context-content-color`-channel, of `currentColor` als die niet gezet is; tekst in de contrastkleur, zodat de avatar een icoon in bijvoorbeeld een knop kan vervangen); standaard `default` */
-		'color'?: NLDDAvatar['color'];
-		/** `full` (standaard) schaalt mee met de container, net als nldd-icon; of een vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg gedraagt zich als `full`. De initialen en het icoon schalen mee */
+		/** `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along */
 		'size'?: NLDDAvatar['size'];
-		/** Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge) */
+		/** `default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default` */
+		'color'?: NLDDAvatar['color'];
+		/** Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin) */
 		'icon-aligned'?: NLDDAvatar['iconAligned'];
-		/** Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge) */
+		/** Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin) */
 		'iconAligned'?: NLDDAvatar['iconAligned'];
-		/** Verbergt de avatar voor hulpsoftware (gebruik wanneer de naam er al als tekst naast staat) */
+		/** Name of the person or organization; supplies the derived initials and the accessible label */
+		'name'?: NLDDAvatar['name'];
+		/** Explicit initials, at most 3 characters (overrides what is derived from `name`; also for organization acronyms) */
+		'initials'?: NLDDAvatar['initials'];
+		/** Image source; falls back to initials or icon when it fails to load */
+		'src'?: NLDDAvatar['src'];
+		/** Responsive source set for the image (the component sets `sizes` itself) */
+		'srcset'?: NLDDAvatar['srcset'];
+		/** Overrides the type-dependent fallback icon */
+		'icon'?: NLDDAvatar['icon'];
+		/** Name of the link or button; without it `name` is used */
+		'accessible-label'?: NLDDAvatar['accessibleLabel'];
+		/** Name of the link or button; without it `name` is used */
+		'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
+		/** Hides the avatar from assistive software (use when the name already stands beside it as text) */
 		'decorative'?: NLDDAvatar['decorative'];
-		/** Maakt de avatar een link naar deze URL; de schijf zelf wordt de link, dus klikgebied en focusring volgen de vorm */
+		/** When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
+		'tooltip-timing'?: NLDDAvatar['tooltipTiming'];
+		/** When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text */
+		'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'];
-		/** Maakt de avatar een knop; genegeerd wanneer `href` is gezet */
+		/** Makes the avatar a button; ignored when `href` is set */
 		'button'?: NLDDAvatar['button'];
-		/** Link target voor href (bijv. '_blank'); vult rel aan en meldt "Opent in nieuw tabblad" */
+		/** Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab" */
 		'target'?: NLDDAvatar['target'];
-		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
+		/** Link rel for href; defaults to 'noopener noreferrer' when target='_blank' */
 		'rel'?: NLDDAvatar['rel'];
-		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
-		'accessible-label'?: NLDDAvatar['accessibleLabel'];
-		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
-		'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
-		/** Overschrijf translation keys; niet gezette keys vallen terug op het Nederlands */
+		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDAvatar['translations'];
 		/** True once the avatar is a control itself. */
 		'isInteractive'?: NLDDAvatar['isInteractive'];
@@ -206,23 +213,39 @@ declare module 'vue' {
 		'resolvedIcon'?: NLDDAvatar['resolvedIcon'];
 	};
 
+	type NLDDAvatarGroupProps = {
+		/** Diameter of each avatar in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96); default 40 */
+		'size'?: NLDDAvatarGroup['size'];
+		/** Shows at most this many avatars; the rest go behind a "+N" button that opens them as a list of names */
+		'max'?: NLDDAvatarGroup['max'];
+		/** Describes the group as a whole (e.g. "Editors"); without a label the group is not a landmark of its own and the avatars speak for themselves */
+		'accessible-label'?: NLDDAvatarGroup['accessibleLabel'];
+		/** Describes the group as a whole (e.g. "Editors"); without a label the group is not a landmark of its own and the avatars speak for themselves */
+		'accessibleLabel'?: NLDDAvatarGroup['accessibleLabel'];
+		'translations'?: NLDDAvatarGroup['translations'];
+	};
+
 	type NLDDBadgeProps = {
-		/** Semantisch ('critical' | 'accent' | 'neutral' | 'warning' | 'success') of een Rijkskleur ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical' */
-		'color'?: NLDDBadge['color'];
-		/** Grootte: 'sm' | 'md' (default: 'md') */
+		/** Size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDBadge['size'];
-		/** Tekst (heeft voorrang op number) */
+		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical' */
+		'color'?: NLDDBadge['color'];
+		/** 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) */
 		'text'?: NLDDBadge['text'];
-		/** Numerieke waarde. Wordt beknopt als meer dan max */
+		/** Numeric value. Shortened when it is over max */
 		'number'?: NLDDBadge['number'];
-		/** Maximum waarde boven welke number wordt getoond als "{max}+" (default: 99) */
+		/** Value above which number is shown as "{max}+" (default: 99) */
 		'max'?: NLDDBadge['max'];
-		/** Icoon naam. Icon-only wordt als vierkant gerenderd; met text/number komt het icoon links. */
+		/** Icon name. Icon-only renders as a square; with text or number the icon goes on the left. */
 		'icon'?: NLDDBadge['icon'];
-		/** Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie"). */
+		/** Accessible label for screen readers. Falls back to text/number; otherwise to the i18n default ("Notificatie"). */
 		'accessible-label'?: NLDDBadge['accessibleLabel'];
-		/** Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie"). */
+		/** Accessible label for screen readers. Falls back to text/number; otherwise to the i18n default ("Notificatie"). */
 		'accessibleLabel'?: NLDDBadge['accessibleLabel'];
+		/** Hides the badge from assistive software (use when the text beside it says the same, such as a dot next to a status word) */
+		'decorative'?: NLDDBadge['decorative'];
 		'translations'?: NLDDBadge['translations'];
 	};
 
@@ -257,13 +280,13 @@ declare module 'vue' {
 	};
 
 	type NLDDBlockquoteProps = {
-		/** URL van de bron (wordt doorgegeven aan het <blockquote> element) */
+		/** URL of the source (forwarded to the <blockquote> element) */
 		'cite'?: NLDDBlockquote['cite'];
 	};
 
 	type NLDDBoxProps = {
-		/** Surface fill. - `tinted` (default): for a box on a plain page bg. - `base`: for a box sitting on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). */
-		'background'?: NLDDBox['background'];
+		/** 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'];
 	};
 
 	type NLDDBreadcrumbsProps = {
@@ -376,27 +399,6 @@ declare module 'vue' {
 		'orientation'?: NLDDButtonGroup['orientation'];
 	};
 
-	type NLDDBylineProps = {
-		/** Naamregel (bijv. "Jan Jansen en Piet Pietersen"); fallback wanneer de text-slot leeg is */
-		'text'?: NLDDByline['text'];
-		/** Ondersteunende tekst onder de naamregel (bijv. rol of datum); fallback wanneer de supporting-text-slot leeg is */
-		'supporting-text'?: NLDDByline['supportingText'];
-		/** Ondersteunende tekst onder de naamregel (bijv. rol of datum); fallback wanneer de supporting-text-slot leeg is */
-		'supportingText'?: NLDDByline['supportingText'];
-		/** Bron van één avatar (alternatief voor de avatars-slot); genegeerd zodra de avatars-slot gevuld is */
-		'avatar-src'?: NLDDByline['avatarSrc'];
-		/** Bron van één avatar (alternatief voor de avatars-slot); genegeerd zodra de avatars-slot gevuld is */
-		'avatarSrc'?: NLDDByline['avatarSrc'];
-		/** Responsive source set voor de avatar-src-afbeelding */
-		'avatar-srcset'?: NLDDByline['avatarSrcset'];
-		/** Responsive source set voor de avatar-src-afbeelding */
-		'avatarSrcset'?: NLDDByline['avatarSrcset'];
-		/** Alt-tekst voor de avatar-src-afbeelding; leeg = decoratief */
-		'avatar-alt'?: NLDDByline['avatarAlt'];
-		/** Alt-tekst voor de avatar-src-afbeelding; leeg = decoratief */
-		'avatarAlt'?: NLDDByline['avatarAlt'];
-	};
-
 	type NLDDCardProps = {
 		/** Vlakkleur van de kaart: `base` (standaard) op een gewone pagina-achtergrond, `tinted` wanneer de kaart juist mag opvallen tegen een base-surface */
 		'background'?: NLDDCard['background'];
@@ -448,6 +450,8 @@ declare module 'vue' {
 	type NLDDCheckboxProps = {
 		/** Checked state */
 		'checked'?: NLDDCheckbox['checked'];
+		/** Renders the box without the input: no focus, no name/value, nothing announced. For a control that owns the state elsewhere, such as a list row that is itself the checkbox; putting a real input in there would nest a control inside a control. */
+		'decorative'?: NLDDCheckbox['decorative'];
 		/** Disabled state */
 		'disabled'?: NLDDCheckbox['disabled'];
 		/** Indeterminate state (takes precedence over checked visually) */
@@ -526,10 +530,8 @@ declare module 'vue' {
 	};
 
 	type NLDDCodeViewerProps = {
-		/** Visual style. `box` (default) is a framed card with rounded corners, padding, fill, and a 1px border ring. `simple` drops the entire frame — use when embedding inside a parent surface. */
+		/** Visual style. The two `box` values are a framed card with rounded corners, padding, fill, and a 1px border ring, and differ in which surface they fill with; `box-tinted` is the default. `simple` drops the entire frame — use when embedding inside a parent surface. */
 		'variant'?: NLDDCodeViewer['variant'];
-		/** Surface fill when `variant="box"`. */
-		'background'?: NLDDCodeViewer['background'];
 		/** Grammar to highlight with. Empty disables highlighting. */
 		'language'?: NLDDCodeViewer['language'];
 		/** Hide the copy-to-clipboard button (shown by default). */
@@ -636,6 +638,16 @@ declare module 'vue' {
 		'lg-column-count'?: NLDDContainer['lgColumnCount'];
 		/** Column count when this container is lg-wide */
 		'lgColumnCount'?: NLDDContainer['lgColumnCount'];
+		/** 'full' (default, fills the parent) | 'fit-content' | a CSS length (e.g. '480px'). A container narrower than its parent stays where its parent puts it; use the parent's horizontal-alignment to move it. */
+		'width'?: NLDDContainer['width'];
+		/** Minimum width as a CSS length (e.g. '280px') */
+		'min-width'?: NLDDContainer['minWidth'];
+		/** Minimum width as a CSS length (e.g. '280px') */
+		'minWidth'?: NLDDContainer['minWidth'];
+		/** Maximum width as a CSS length (e.g. '480px') */
+		'max-width'?: NLDDContainer['maxWidth'];
+		/** Maximum width as a CSS length (e.g. '480px') */
+		'maxWidth'?: NLDDContainer['maxWidth'];
 		/** 'left' | 'center' | 'right' */
 		'horizontal-alignment'?: NLDDContainer['horizontalAlignment'];
 		/** 'left' | 'center' | 'right' */
@@ -953,10 +965,51 @@ declare module 'vue' {
 		'expanded'?: NLDDDropdown['expanded'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDDropdown['width'];
+		/** Accessible name, forwarded as aria-label to the slotted select */
+		'accessible-label'?: NLDDDropdown['accessibleLabel'];
+		/** Accessible name, forwarded as aria-label to the slotted select */
+		'accessibleLabel'?: NLDDDropdown['accessibleLabel'];
 		/** Bubbles up from the slotted select; detail: { value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
+	type NLDDFileFieldProps = {
+		/** Field size: 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
+		'size'?: NLDDFileField['size'];
+		/** Comma-separated list of accepted file types, forwarded to the input (e.g. ".pdf,image/*") */
+		'accept'?: NLDDFileField['accept'];
+		/** Allows choosing more than one file */
+		'multiple'?: NLDDFileField['multiple'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessible-label'?: NLDDFileField['accessibleLabel'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessibleLabel'?: NLDDFileField['accessibleLabel'];
+		/** Sets the id on the native input. Set automatically by nldd-form-field. */
+		'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 */
+		'invalid'?: NLDDFileField['invalid'];
+		/** Disabled state */
+		'disabled'?: NLDDFileField['disabled'];
+		/** Name for form submission */
+		'name'?: NLDDFileField['name'];
+		/** Marks the field required (invalid while no file is chosen) */
+		'required'?: NLDDFileField['required'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDFileField['translations'];
+		'files'?: NLDDFileField['files'];
+		'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. */
 		'label-alignment'?: NLDDForm['labelAlignment'];
@@ -1055,47 +1108,47 @@ declare module 'vue' {
 	};
 
 	type NLDDHeroProps = {
-		/** Positie van het tekstpaneel (default: 'bottom-left'); 'left'/'right' beslaan de volle hoogte */
+		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
 		'main-position'?: NLDDHero['mainPosition'];
-		/** Positie van het tekstpaneel (default: 'bottom-left'); 'left'/'right' beslaan de volle hoogte */
+		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
 		'mainPosition'?: NLDDHero['mainPosition'];
-		/** Breedte van het paneel (default: '1/2'); 'full' maakt een volle boven- of onderstrook en wordt bij 'left'/'right' genegeerd */
+		/** Width of the panel (default: '1/2'); 'full' makes a full top or bottom strip and is ignored with 'left'/'right' */
 		'main-width'?: NLDDHero['mainWidth'];
-		/** Breedte van het paneel (default: '1/2'); 'full' maakt een volle boven- of onderstrook en wordt bij 'left'/'right' genegeerd */
+		/** Width of the panel (default: '1/2'); 'full' makes a full top or bottom strip and is ignored with 'left'/'right' */
 		'mainWidth'?: NLDDHero['mainWidth'];
-		/** Vlakkleur van het paneel: 'base' (de base surface) of een categoriekleur — 'accent' (default) of een rijkskleur zoals 'lintblauw'|'donkerblauw'|'oranje' */
+		/** Surface color of the panel: 'base' (the base surface) or a category color — 'accent' (default) or a Rijkshuisstijl color such as 'lintblauw'|'donkerblauw'|'oranje' */
 		'main-background'?: NLDDHero['mainBackground'];
-		/** Vlakkleur van het paneel: 'base' (de base surface) of een categoriekleur — 'accent' (default) of een rijkskleur zoals 'lintblauw'|'donkerblauw'|'oranje' */
+		/** Surface color of the panel: 'base' (the base surface) or a category color — 'accent' (default) or a Rijkshuisstijl color such as 'lintblauw'|'donkerblauw'|'oranje' */
 		'mainBackground'?: NLDDHero['mainBackground'];
-		/** Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9'); default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak */
+		/** Aspect ratio of the media area (CSS form, '16/9' or '16:9'); default '21/9'. On md/lg it sets the height of the hero, on sm the height of the media area */
 		'media-aspect-ratio'?: NLDDHero['mediaAspectRatio'];
-		/** Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9'); default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak */
+		/** Aspect ratio of the media area (CSS form, '16/9' or '16:9'); default '21/9'. On md/lg it sets the height of the hero, on sm the height of the media area */
 		'mediaAspectRatio'?: NLDDHero['mediaAspectRatio'];
-		/** Body max-width; 'full' verwijdert de begrenzing (sectie-API) */
+		/** Body max-width; 'full' removes the bound (section API) */
 		'width'?: NLDDHero['width'];
-		/** Bron van het mediavlak (alternatief voor de media-slot); genegeerd zodra de media-slot gevuld is */
+		/** Source of the media area (an alternative to the media slot); ignored as soon as the media slot is filled */
 		'media-src'?: NLDDHero['mediaSrc'];
-		/** Bron van het mediavlak (alternatief voor de media-slot); genegeerd zodra de media-slot gevuld is */
+		/** Source of the media area (an alternative to the media slot); ignored as soon as the media slot is filled */
 		'mediaSrc'?: NLDDHero['mediaSrc'];
-		/** Responsive source set voor media-src */
+		/** Responsive source set for media-src */
 		'media-srcset'?: NLDDHero['mediaSrcset'];
-		/** Responsive source set voor media-src */
+		/** Responsive source set for media-src */
 		'mediaSrcset'?: NLDDHero['mediaSrcset'];
-		/** Source sizes-hint voor media-src */
+		/** Source sizes hint for media-src */
 		'media-sizes'?: NLDDHero['mediaSizes'];
-		/** Source sizes-hint voor media-src */
+		/** Source sizes hint for media-src */
 		'mediaSizes'?: NLDDHero['mediaSizes'];
-		/** Alt-tekst voor media-src; leeg = decoratief */
+		/** Alt text for media-src; empty means decorative */
 		'media-alt'?: NLDDHero['mediaAlt'];
-		/** Alt-tekst voor media-src; leeg = decoratief */
+		/** Alt text for media-src; empty means decorative */
 		'mediaAlt'?: NLDDHero['mediaAlt'];
-		/** Surface achter de hero (sectie-API) */
+		/** Surface behind the hero (section API) */
 		'background'?: NLDDHero['background'];
-		/** Kleurschema (sectie-API) */
+		/** Color scheme (section API) */
 		'scheme'?: NLDDHero['scheme'];
-		/** Blokpadding-override, ook per rand en responsief (sectie-API) */
+		/** Block padding override, also per edge and responsive (section API) */
 		'padding-block'?: NLDDHero['paddingBlock'];
-		/** Blokpadding-override, ook per rand en responsief (sectie-API) */
+		/** Block padding override, also per edge and responsive (section API) */
 		'paddingBlock'?: NLDDHero['paddingBlock'];
 		'padding-top'?: NLDDHero['paddingTop'];
 		'paddingTop'?: NLDDHero['paddingTop'];
@@ -1119,7 +1172,7 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDHero['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDHero['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDHero['lgPaddingBottom'];
-		/** Minimale hoogte van de sectie (sectie-API) */
+		/** Minimum height of the section (section API) */
 		'height'?: NLDDHero['height'];
 	};
 
@@ -1212,6 +1265,27 @@ declare module 'vue' {
 		'hideAbove'?: NLDDIconCell['hideAbove'];
 	};
 
+	type NLDDIdentityProps = {
+		/** Name line (e.g. "Jan Jansen and Piet Pietersen"); the fallback when the text slot is empty */
+		'text'?: NLDDIdentity['text'];
+		/** Supporting text under the name line (a role or a date, for instance); the fallback when the supporting-text slot is empty */
+		'supporting-text'?: NLDDIdentity['supportingText'];
+		/** Supporting text under the name line (a role or a date, for instance); the fallback when the supporting-text slot is empty */
+		'supportingText'?: NLDDIdentity['supportingText'];
+		/** Source of a single avatar (an alternative to the avatars slot); ignored as soon as the avatars slot is filled */
+		'avatar-src'?: NLDDIdentity['avatarSrc'];
+		/** Source of a single avatar (an alternative to the avatars slot); ignored as soon as the avatars slot is filled */
+		'avatarSrc'?: NLDDIdentity['avatarSrc'];
+		/** Responsive source set for the avatar-src image */
+		'avatar-srcset'?: NLDDIdentity['avatarSrcset'];
+		/** Responsive source set for the avatar-src image */
+		'avatarSrcset'?: NLDDIdentity['avatarSrcset'];
+		/** Alt text for the avatar-src image; empty means decorative */
+		'avatar-alt'?: NLDDIdentity['avatarAlt'];
+		/** Alt text for the avatar-src image; empty means decorative */
+		'avatarAlt'?: NLDDIdentity['avatarAlt'];
+	};
+
 	type NLDDImageProps = {
 		/** Image URL */
 		'src'?: NLDDImage['src'];
@@ -1365,18 +1439,14 @@ declare module 'vue' {
 	};
 
 	type NLDDListProps = {
-		/** Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, `box` a framed card with rounded corners, fill and inset border ring */
+		/** Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, the two `box` values a framed card with rounded corners, fill and inset border ring. `box-tinted` for a list on a plain page, `box-base` for one on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card) */
 		'variant'?: NLDDList['variant'];
-		/** Surface fill for `variant="box"` (default 'tinted'). Use `base` on an already-tinted parent. No effect with `variant="simple"`. */
-		'background'?: NLDDList['background'];
 		/** 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. */
 		'reorderable'?: NLDDList['reorderable'];
-		/** Hides the dividers between list items */
-		'no-dividers'?: NLDDList['noDividers'];
-		/** Hides the dividers between list items */
-		'noDividers'?: NLDDList['noDividers'];
+		/** 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. */
@@ -1595,7 +1665,7 @@ declare module 'vue' {
 		'shortcutWindows'?: NLDDMenuItem['shortcutWindows'];
 		'shortcut-linux'?: NLDDMenuItem['shortcutLinux'];
 		'shortcutLinux'?: NLDDMenuItem['shortcutLinux'];
-		/** Set by nldd-menu. Not part of the public API. */
+		/** Which menu owns this item, set by that nldd-menu. Not part of the public API. `null` until one claims it, and an unclaimed item carries no menu role. A menu role is a promise about what is around you, so an item cannot make it on its own. `nldd-toolbar-item` holds exactly such an item: the declaration of what belongs in the overflow menu, which the toolbar clones into the real menu when it collapses. The clone is claimed there and the declaration stays what it is. */
 		'menuVariant'?: NLDDMenuItem['menuVariant'];
 		'onMenuItemFocused'?: (event: CustomEvent) => void;
 		'onSubmenuOpen'?: (event: CustomEvent) => void;
@@ -1706,6 +1776,25 @@ declare module 'vue' {
 		'onSINGLE_COLUMN_CHANGE_EVENT'?: (event: CustomEvent) => void;
 	};
 
+	type NLDDNotificationProps = {
+		/** What kind of message this is; sets the icon color and the ARIA role (default: 'neutral') */
+		'variant'?: NLDDNotification['variant'];
+		/** Icon override. Default per variant: neutral → info-circle-filled, accent → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled */
+		'icon'?: NLDDNotification['icon'];
+		/** The message */
+		'text'?: NLDDNotification['text'];
+		/** A second line under the message */
+		'supporting-text'?: NLDDNotification['supportingText'];
+		/** A second line under the message */
+		'supportingText'?: NLDDNotification['supportingText'];
+		/** Milliseconds before it leaves once it is front of the deck (default: 10000). `0` keeps it until dismissed, which is what `critical` does regardless. */
+		'duration'?: NLDDNotification['duration'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDNotification['translations'];
+		/** Fired when the notification is dismissed, by the button, by Escape, or by its own clock. The consumer removes it. */
+		'onDismiss'?: (event: CustomEvent) => void;
+	};
+
 	type NLDDNumberFieldProps = {
 		/** Current value */
 		'value'?: NLDDNumberField['value'];
@@ -1941,37 +2030,37 @@ declare module 'vue' {
 	};
 
 	type NLDDPopoverProps = {
-		/** ID van het trigger-element voor positionering */
+		/** ID of the trigger element, used for positioning */
 		'anchor'?: NLDDPopover['anchor'];
 		/** Floating UI placement (default: 'bottom-start') */
 		'placement'?: NLDDPopover['placement'];
-		/** Expliciete width (default: 320px via --components-popover-default-width) */
+		/** Width as a CSS length (default: 320px through --components-popover-default-width). A content-based size (`fit-content`, `min-content`, `max-content`, `auto`) is refused: the popover is an inline-size container so slotted components can adapt to it, and its width cannot then come from that same content. Such a value is ignored, with a warning in DEV. */
 		'width'?: NLDDPopover['width'];
-		/** CSS top-positie. Wanneer gezet (alleen of samen met andere edge-attrs of `centered`) wordt Floating UI's anchor-positionering overgeslagen — de popover staat dan vrij op het scherm. De `anchor` blijft wel nodig voor ARIA-koppeling op de trigger. Geen effect op sm (bottom-sheet wint). */
+		/** CSS top position. When set (on its own, or together with other edge attributes or `centered`) Floating UI's anchor positioning is skipped and the popover stands free on the screen. The `anchor` is still needed for the ARIA link on the trigger. No effect on sm, where the bottom sheet wins. */
 		'top'?: NLDDPopover['top'];
-		/** CSS left-positie. Zie `top` voor semantiek. */
+		/** CSS left position. See `top` for the semantics. */
 		'left'?: NLDDPopover['left'];
-		/** CSS right-positie. Zie `top` voor semantiek. */
+		/** CSS right position. See `top` for the semantics. */
 		'right'?: NLDDPopover['right'];
-		/** CSS bottom-positie. Zie `top` voor semantiek. */
+		/** CSS bottom position. See `top` for the semantics. */
 		'bottom'?: NLDDPopover['bottom'];
-		/** Centreert beide assen op de viewport. Per as overrideable: `centered top="0"` = horizontaal gecentreerd, top-aligned. Mirrort CSS `place-items: center` met `align-items`/`justify-items` overrides. */
+		/** Centers both axes on the viewport. Overridable per axis: `centered top="0"` is centered horizontally, aligned to the top. Mirrors CSS `place-items: center` with `align-items`/`justify-items` overrides. */
 		'centered'?: NLDDPopover['centered'];
-		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
+		/** On an sm viewport (where the popover renders as a bottom sheet) fills the whole available height instead of shrinking to its content. No effect on md and up (anchored mode). Opt-in for content-heavy cases such as search results or long detail views; content-sized is the default, following the Apple and Material convention. */
 		'sm-full-height'?: NLDDPopover['smFullHeight'];
-		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
+		/** On an sm viewport (where the popover renders as a bottom sheet) fills the whole available height instead of shrinking to its content. No effect on md and up (anchored mode). Opt-in for content-heavy cases such as search results or long detail views; content-sized is the default, following the Apple and Material convention. */
 		'smFullHeight'?: NLDDPopover['smFullHeight'];
-		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Popover') als niet gezet — geef altijd een unieke, beschrijvende naam. */
+		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Popover') when unset — always give a unique, describing name. */
 		'accessible-label'?: NLDDPopover['accessibleLabel'];
-		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Popover') als niet gezet — geef altijd een unieke, beschrijvende naam. */
+		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Popover') when unset — always give a unique, describing name. */
 		'accessibleLabel'?: NLDDPopover['accessibleLabel'];
-		/** Override translation keys; unset keys vallen terug op de Nederlandse default. */
+		/** Override translation keys; unset keys fall back to the Dutch default. */
 		'translations'?: NLDDPopover['translations'];
 		'anchorElement'?: NLDDPopover['anchorElement'];
 		'open'?: NLDDPopover['open'];
-		/** Wanneer de popover wordt geopend */
+		/** When the popover opens */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** Wanneer de popover wordt gesloten */
+		/** When the popover closes */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -2070,6 +2159,8 @@ declare module 'vue' {
 	type NLDDRadioButtonProps = {
 		/** Checked state */
 		'checked'?: NLDDRadioButton['checked'];
+		/** Renders the shape without the input: no focus, no name/value, nothing announced. For a control that owns the state elsewhere, such as a list row that is itself the radio; putting a real input in there would nest a control inside a control. */
+		'decorative'?: NLDDRadioButton['decorative'];
 		/** Disabled state */
 		'disabled'?: NLDDRadioButton['disabled'];
 		/** Required state */
@@ -2112,6 +2203,10 @@ declare module 'vue' {
 		'disabled'?: NLDDRadioButtonGroup['disabled'];
 		/** Marks the group as required */
 		'required'?: NLDDRadioButtonGroup['required'];
+		/** Accessible name for the group, set as aria-label on the group */
+		'accessible-label'?: NLDDRadioButtonGroup['accessibleLabel'];
+		/** Accessible name for the group, set as aria-label on the group */
+		'accessibleLabel'?: NLDDRadioButtonGroup['accessibleLabel'];
 		/** Id of an external label element, set as aria-labelledby on the group */
 		'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
 		/** Id of an external label element, set as aria-labelledby on the group */
@@ -2314,6 +2409,14 @@ declare module 'vue' {
 	type NLDDSimpleSectionProps = {
 		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
 		'width'?: NLDDSimpleSection['width'];
+		/** Where the body's children sit across the body ('left' default). Use it to place something narrower than the body, such as a container with a max-width. */
+		'horizontal-alignment'?: NLDDSimpleSection['horizontalAlignment'];
+		/** Where the body's children sit across the body ('left' default). Use it to place something narrower than the body, such as a container with a max-width. */
+		'horizontalAlignment'?: NLDDSimpleSection['horizontalAlignment'];
+		/** Where the body's children sit down the section ('top' default). Only visible when the section is taller than its content. */
+		'vertical-alignment'?: NLDDSimpleSection['verticalAlignment'];
+		/** Where the body's children sit down the section ('top' default). Only visible when the section is taller than its content. */
+		'verticalAlignment'?: NLDDSimpleSection['verticalAlignment'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDSimpleSection['background'];
 		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
@@ -2456,13 +2559,13 @@ declare module 'vue' {
 	};
 
 	type NLDDStepIndicatorProps = {
-		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		/** Name of the nav; defaults to the i18n value ("Voortgang") */
 		'accessible-label'?: NLDDStepIndicator['accessibleLabel'];
-		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		/** Name of the nav; defaults to the i18n value ("Voortgang") */
 		'accessibleLabel'?: NLDDStepIndicator['accessibleLabel'];
-		/** 1-based nummer van de huidige stap (standaard 1) */
+		/** 1-based number of the current step (default 1) */
 		'current'?: NLDDStepIndicator['current'];
-		/** Overschrijf vertaalsleutels; niet gezette vallen terug op Nederlands */
+		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDStepIndicator['translations'];
 		'total'?: NLDDStepIndicator['total'];
 		/** The current step, clamped to the number of steps: an out-of-range `current` would otherwise mark every step past (or none at all). */
@@ -2471,13 +2574,13 @@ declare module 'vue' {
 	};
 
 	type NLDDStepIndicatorItemProps = {
-		/** `past` | `current` | `future`; overschrijft wat de ouder afleidt */
+		/** `past` | `current` | `future`; overrides what the parent derives */
 		'status'?: NLDDStepIndicatorItem['status'];
-		/** Label onder de bol */
+		/** Label under the disc */
 		'text'?: NLDDStepIndicatorItem['text'];
-		/** Icoon in de bol in plaats van het cijfer of het vinkje */
+		/** Icon in the disc instead of the number or the check mark */
 		'icon'?: NLDDStepIndicatorItem['icon'];
-		/** Maakt de stap een link (bijvoorbeeld terug naar een afgeronde stap) */
+		/** Makes the step a link (back to a completed step, for instance) */
 		'href'?: NLDDStepIndicatorItem['href'];
 		/** For flows without a URL per step (a wizard inside one window). Ignored once `href` is set: one step is one action, and a link outranks a button -- the same rule as nldd-card and nldd-avatar. */
 		'button'?: NLDDStepIndicatorItem['button'];
@@ -2500,6 +2603,10 @@ declare module 'vue' {
 		'size'?: NLDDStepper['size'];
 		/** Name for form submission; the value is submitted under this name */
 		'name'?: NLDDStepper['name'];
+		/** Accessible name for the spinbutton; falls back to a generic label */
+		'accessible-label'?: NLDDStepper['accessibleLabel'];
+		/** Accessible name for the spinbutton; falls back to a generic label */
+		'accessibleLabel'?: NLDDStepper['accessibleLabel'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDStepper['translations'];
 		'internals'?: NLDDStepper['internals'];
@@ -2619,19 +2726,19 @@ declare module 'vue' {
 	};
 
 	type NLDDTagProps = {
-		/** Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral') */
+		/** Color variant. Semantic: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkshuisstijl colors: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral') */
 		'color'?: NLDDTag['color'];
-		/** Tag grootte: 'sm' | 'md' (default: 'md') */
+		/** Tag size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDTag['size'];
-		/** Tag tekst (alternatief voor default slot) */
+		/** Tag text (alternative to the default slot) */
 		'text'?: NLDDTag['text'];
-		/** Icoon voor de tekst */
+		/** Icon before the text */
 		'icon'?: NLDDTag['icon'];
-		/** Wat zichtbaar is: 'text' | 'icon' | 'icon-and-text'. Onbepaald → auto-detect op basis van welke van text/icon aanwezig is. */
+		/** What is visible: 'text' | 'icon' | 'icon-and-text'. Unset → detected from which of text/icon is present. */
 		'variant'?: NLDDTag['variant'];
-		/** Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst. */
+		/** Accessible label for screen readers. Use this on icon-only tags without visible text. */
 		'accessible-label'?: NLDDTag['accessibleLabel'];
-		/** Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst. */
+		/** Accessible label for screen readers. Use this on icon-only tags without visible text. */
 		'accessibleLabel'?: NLDDTag['accessibleLabel'];
 	};
 
@@ -2707,8 +2814,6 @@ declare module 'vue' {
 		'resize'?: NLDDTextEditor['resize'];
 		/** 'simple' (default, bare) | 'input-field' (framed surface) */
 		'variant'?: NLDDTextEditor['variant'];
-		/** 'sans' (default) | 'mono' */
-		'font'?: NLDDTextEditor['font'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
 		'accessible-label'?: NLDDTextEditor['accessibleLabel'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
@@ -2862,19 +2967,19 @@ declare module 'vue' {
 	};
 
 	type NLDDTimelineTrackCellProps = {
-		/** Status van deze stap (standaard 'past'); dezelfde waarden als `nldd-step-indicator-item`. `none` tekent alleen de lijn, zonder stip */
+		/** Status of this step (default 'past'); the same values as `nldd-step-indicator-item`. `none` draws the line only, without a dot */
 		'status'?: NLDDTimelineTrackCell['status'];
-		/** Wat deze rij is: een `dot` (standaard) op een tijdlijn van gebeurtenissen, stip van 16px, of een `step` in een stappenlijst, stip van 24px waar een cijfer of icoon in past */
+		/** 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 */
 		'variant'?: NLDDTimelineTrackCell['variant'];
-		/** Deze rij hoort onder de vorige: een kleinere stip in dezelfde baan, dus het spoor loopt recht door en er springt niets in. De stip blijft leeg (een cijfer of icoon past er niet in en zou de rij tot een eigen stap maken); de hiërarchie zet je verder met de rij zelf, bijvoorbeeld een `nldd-text-cell` in plaats van een `nldd-title-cell` */
+		/** 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'];
-		/** Richting waarin de tijdlijn vooruit loopt: `down` (standaard) zet het verleden boven, `up` eronder. Alleen de huidige stap heeft een half spoor, dus alleen daar heeft dit effect */
+		/** 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'];
-		/** Plek in de reeks (standaard 'between'): bepaalt of de lijn boven, onder of aan beide kanten van de stip doorloopt */
+		/** 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 */
 		'position'?: NLDDTimelineTrackCell['position'];
-		/** Cijfer of korte tekst in de stip */
+		/** Number or short text in the dot */
 		'text'?: NLDDTimelineTrackCell['text'];
-		/** Icoonnaam in de stip; wint van `text` */
+		/** Icon name in the dot; wins over `text` */
 		'icon'?: NLDDTimelineTrackCell['icon'];
 		'hide-below'?: NLDDTimelineTrackCell['hideBelow'];
 		'hideBelow'?: NLDDTimelineTrackCell['hideBelow'];
@@ -2887,7 +2992,7 @@ declare module 'vue' {
 	type NLDDTitleProps = {
 		/** Visual size of the title: 1–6 (default: 3) */
 		'size'?: NLDDTitle['size'];
-		/** 'inherit' laat de titel de tekstkleur van de 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 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. */
 		'color'?: NLDDTitle['color'];
 	};
 
@@ -3093,6 +3198,10 @@ declare module 'vue' {
 	};
 
 	type NLDDToolbarTitleProps = {
+		/** Makes the mark and the name one link, for the place this window belongs to (usually the app's own start). The `action` slot stays outside it: a control inside a link is a control you cannot reach without following the link. */
+		'href'?: NLDDToolbarTitle['href'];
+		/** Where the link opens; only meaningful with `href`. `_blank` adds rel="noopener noreferrer" and a visually hidden "opens in a new tab" announcement. */
+		'target'?: NLDDToolbarTitle['target'];
 		/** Title text. */
 		'text'?: NLDDToolbarTitle['text'];
 		/** Secondary supporting text shown below the title. */
@@ -3111,18 +3220,20 @@ declare module 'vue' {
 		'max-width'?: NLDDToolbarTitle['maxWidth'];
 		/** Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row). */
 		'maxWidth'?: NLDDToolbarTitle['maxWidth'];
+		/** Override translation keys (the new-tab announcement); unset keys fall back to Dutch. */
+		'translations'?: NLDDToolbarTitle['translations'];
 	};
 
 	type NLDDTooltipProps = {
-		/** Tooltip tekst */
+		/** Tooltip text */
 		'text'?: NLDDTooltip['text'];
-		/** Forceer de tooltip zichtbaar, ongeacht hover/focus. Gebruik voor programmatische feedback (bv. "Gekopieerd"). Reset naar false om hover-gedrag te herstellen. */
+		/** 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. */
 		'open'?: NLDDTooltip['open'];
-		/** Positie: 'top' | 'bottom' | 'left' | 'right' (standaard: 'bottom'; op touch devices automatisch 'top') */
+		/** Position: 'top' | 'bottom' | 'left' | 'right' (default: 'bottom'; automatically 'top' on touch devices) */
 		'placement'?: NLDDTooltip['placement'];
-		/** Wanneer de tooltip verschijnt op hover: 'instant' — direct, zonder show-delay. 'default' — na de standaard show-delay (700ms). 'never' — tooltip wordt nooit getoond; hover/focus events worden genegeerd, aria-describedby wordt onderdrukt en een al zichtbare tooltip verdwijnt. Hide-delay en touch suppression blijven onder alle waarden van kracht. Focus-trigger is altijd instant. */
+		/** When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant. */
 		'timing'?: NLDDTooltip['timing'];
-		/** Wanneer een gebruiker Escape drukt terwijl `open=true` is. De consumer beheert dan de open-lifecycle (wij kunnen `open` niet eenzijdig wissen), dus dit event geeft de consumer de kans om `open` terug naar `false` te zetten. WCAG 1.4.13: persistent hover-/ focus-overlays moeten dismissible zijn zonder focus te verplaatsen. */
+		/** When a user presses Escape while `open=true`. The consumer owns the open lifecycle from there (we cannot clear `open` on our own), so this event is the consumer's chance to set `open` back to `false`. WCAG 1.4.13: a persistent hover or focus overlay has to be dismissible without moving focus. */
 		'onNlddTooltipDismiss'?: (event: CustomEvent) => void;
 	};
 
@@ -3284,9 +3395,11 @@ declare module 'vue' {
 		'nldd-activity-indicator': DefineComponent<NLDDActivityIndicatorProps>;
 		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. Set background="tinted" to give the whole application a tinted background. All descendants read --context-parent-background-color via --_background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll inside its pane (nested mode). The mode is derived from the outermost horizontal split view: one column means the document scrolls, several columns mean the panes do. An app without such a split view is a single column at every width and therefore scrolls the document too — nested scrolling would cost it the rubber-band and the collapsing browser toolbar on iOS for nothing. Set `--context-scroll-mode` on the `nldd-app-view` itself to override the derived mode; an inherited value loses from it. In nested scroll mode `overscroll-behavior: none` is set on `document.documentElement` and `document.body` while the app-view is connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s scroll target, this prevents iOS rubber-band on the viewport when scroll gestures land outside an `nldd-page` (e.g. on a top-bar). In root scroll mode the document itself is the scroller, so this is lifted to let the native rubber-band happen. Cleared on last disconnect. */
 		'nldd-app-view': DefineComponent<NLDDAppViewProps>;
-		/** Toont één persoon of organisatie als een compacte, ronde (persoon) of afgeronde (organisatie) representatie. De inhoud volgt een vaste terugvalketen: een afbeelding wanneer `src` laadt, anders de initialen (uit `initials` of afgeleid uit `name`), en anders een terugval-icoon. `type` bepaalt zowel de vorm als het terugval-icoon: `person` geeft een cirkel met een person-icoon, `organization` een afgeronde vierkant met een building-icoon. De vorm hoort dus bij de betekenis en is niet los instelbaar. Overschrijf het terugval-icoon desgewenst met `icon`. Zonder `size` schaalt de avatar mee met zijn container (net als `nldd-icon`); een vaste maat (dezelfde spacer-uitgelijnde schaal, 16 tot en met 96) is de uitzondering. De initialen en het icoon schalen mee. Brede initialen (WW, MMM) worden automatisch teruggeschaald zodat ze binnen de schijf blijven. Toegankelijkheid: het host-element draagt de betekenis. Met een `name` (en zonder `decorative`) krijgt het `role="img"` met de naam als label. Staat de naam al als tekst ernaast (bijvoorbeeld in een byline), zet dan `decorative` zodat de avatar voor hulpsoftware verborgen blijft. Een dode `src` valt automatisch terug op de initialen of het icoon, nooit op een gebroken-afbeelding-icoon. */
+		/** Shows one person or organization as a compact, round (person) or rounded (organization) representation. The content follows a fixed fallback chain: an image when `src` loads, otherwise the initials (from `initials` or derived from `name`), and otherwise a fallback icon. `type` sets both the shape and the fallback icon: `person` gives a circle with a person icon, `organization` a rounded square with a building icon. The shape belongs to the meaning and cannot be set on its own. Override the fallback icon with `icon` where that helps. Without `size` the avatar scales with its container, like `nldd-icon`; a fixed size (the same spacer-aligned scale, 16 through 96) is the exception. The initials and the icon scale along. Wide initials (WW, MMM) are scaled down automatically so they stay inside the shape. Accessibility: the host element carries the meaning. With a `name` (and without `decorative`) it gets `role="img"` with the name as its label. When the name already stands beside it as text, in an identity for instance, set `decorative` so the avatar stays hidden from assistive software. A dead `src` falls back to the initials or the icon, never to a broken-image icon. */
 		'nldd-avatar': DefineComponent<NLDDAvatarProps>;
-		/** Een notificatie-indicator, vaak voor ongelezen aantallen of statusdots. Kan tekst, een getal en/of een icoon tonen. Zonder inhoud verschijnt automatisch een stip. Gebruik in een hoek van een ander element (bijv. een icon) of standalone. */
+		/** Shows several avatars as one group: they overlap, and each one gets a ring in the surface color so they stay apart where they meet. The ring uses the same mechanism as the badge, so on a colored surface you hand the color over through `--context-parent-background-color`. Slot `nldd-avatar` elements, not bare `img`. An avatar already knows what to do with a dead image, when to fall back to initials, and how to show its name as a tooltip; a loose image would have to reproduce all of that and cannot do the last one. Set `decorative` when the names already stand beside the group as text; otherwise give every avatar a name, because the group itself describes nobody. The size applies to the whole group: it is imposed on the avatars, a slotted `img` included. That keeps the row on one line whatever a consumer hands over. */
+		'nldd-avatar-group': DefineComponent<NLDDAvatarGroupProps>;
+		/** Shows the state of something, or how much of it there is: a status, a number of unread messages, a dot saying something is new. What it says is decided by the system, and it changes without anyone touching it. A badge is never interactive. It shows text, a number and/or an icon; with no content it becomes a dot. Put it in a corner of another element (an icon, for instance) or on its own. For a property someone assigns to something, such as a category, a role or a certification, use `nldd-tag`. For standalone data the user works with, such as a chosen person or an active filter, use `nldd-token`. */
 		'nldd-badge': DefineComponent<NLDDBadgeProps>;
 		/** An inline notification with a tinted background per variant. Use for persistent, page-level feedback (e.g. an error summary at the top of a form). Banner is more visually present than nldd-inline-dialog — the tinted color catches the eye. If you need a quieter component, pick a different one rather than overriding the banner's ARIA. Layout: icon left, text + supporting text + optional rich content + actions in the center, optional dismiss button right. Buttons wrap to a second row on narrow viewports via nldd-button-group's flex wrapping. role and aria-live are set automatically from the variant: - critical → role="alert" (interrupts screen reader) - others → role="status" aria-live="polite" Not overridable — if you need a less prominent component, use one. aria-atomic="true" is also set so that updates to the structured region (icon + heading + supporting-text + actions) are announced as one unit rather than as a partial subtree. Trade-off: any programmatic content mutation re-reads the entire banner. Banners are designed for short, heading-scale copy — if you slot in a paragraph of rich body text and then toggle variant or supporting-text at runtime, AT will re-announce the whole thing. Keep banner content concise, or render long-form messages in a different surface. */
 		'nldd-banner': DefineComponent<NLDDBannerProps>;
@@ -3306,8 +3419,6 @@ 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 redactionele regel die auteurs of redacteuren toont: optionele avatar(s), een naamregel en ondersteunende tekst (bijvoorbeeld functie of datum). Alle onderdelen zijn optioneel. De naamregel en ondersteunende tekst kunnen als attribuut of als slot worden aangeleverd. Gebruik de slots voor rijkere inhoud, zoals een `<time datetime="…">` voor machine-leesbare datums of een link naar het auteursprofiel. Geslotte inhoud vervangt het bijbehorende attribuut (het attribuut is de fallback van de slot). Bij meerdere redacteuren overlappen de avatars elkaar subtiel; elke avatar krijgt een ring in de surface-kleur (zelfde mechaniek als badge) zodat ze visueel gescheiden blijven. Op een gekleurde ondergrond kan de ringkleur meegegeven worden via `--context-parent-background-color`. Op smalle breedtes (een sm-container, ≤ 640px) met meerdere avatars komt de avatarrij boven de namen te staan, zodat de tekst de volle breedte houdt; met één avatar blijft de byline op één regel. Avatars worden geslot als `<img slot="avatars">`. Zet `alt=""` wanneer de namen al in de tekst staan (decoratief); geef anders een beschrijvende alt-tekst op. Voor één avatar kun je in plaats van slotten ook `avatar-src` (met optioneel `avatar-srcset`) als attribuut meegeven; de afmetingen liggen vast (40px), dus `sizes` zet het component zelf. Meerdere avatars gaan altijd via de slot, en geslotte avatars hebben voorrang op `avatar-src`. */
-		'nldd-byline': DefineComponent<NLDDBylineProps>;
 		/** Een visueel afgebakende kaart met optionele header, body en footer secties. De kaart heeft een elevated look als standaard. Padding wordt overgelaten aan geneste containers. Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart); met `button` een knop (een overlay-button die een gewone, composed `click` geeft — een klik-listener of htmx-attribuut op de kaart zelf werkt dus direct, en Enter/Space doen het native). `href` wint als beide gezet zijn. Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met `position: relative; z-index: 1` om klikbaar te blijven. */
 		'nldd-card': DefineComponent<NLDDCardProps>;
 		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
@@ -3340,6 +3451,8 @@ declare module 'vue' {
 		'nldd-drag-handle-cell': DefineComponent<NLDDDragHandleCellProps>;
 		/** A visual wrapper around a native `<select>` element. The consumer provides a native `<select>` as a slotted child — this way the browser retains full control over form submission, accessibility and keyboard navigation, including `<optgroup>`, `data-*` attributes and dynamic changes to options. */
 		'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
+		/** 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 */
 		'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> */
@@ -3351,13 +3464,15 @@ declare module 'vue' {
 		'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>;
-		/** Een paginakop met een mediavlak en een tekstpaneel (de main) dat op zes posities kan staan. Alle vlakken zijn rechthoekig. Bij `main-width="full"` staat het mediavlak als losse strook boven of onder het paneel, niet erachter. Op mobiel stapelt de media altijd boven het volle-breedte paneel. Zonder media vult de main het volledige vlak; met `main-background="base"` krijgt dat vlak een rand zodat het zichtbaar blijft op de base-surface. Met `main-background` krijgt het paneel een vlakkleur uit de filled-categories; die leveren een pure witte of zwarte contentkleur mee, zodat componenten met `color="inherit"` (title, rich-text) gegarandeerd contrast houden. */
+		/** 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. */
 		'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. */
 		'nldd-icon-cell': DefineComponent<NLDDIconCellProps>;
+		/** An editorial line that shows authors or editors: optional avatar or avatars, a name line and supporting text (a role or a date, for instance). Every part is optional. The name line and the supporting text come in as an attribute or as a slot. Use the slots for richer content, such as a `<time datetime="…">` for a machine-readable date or a link to the author's profile. Slotted content replaces the matching attribute: the attribute is the slot's fallback. One avatar you slot as it is, and identity gives it its size. For more than one, slot an `nldd-avatar-group`: that overlaps them and draws the ring in the surface color. Identity does not build that group itself, because the avatars are the consumer's light DOM and a group can only style what arrives as its own child. Set the avatars to decorative (or an `img` to `alt=""`) when the names already stand in the text. On narrow widths (an sm container, 640px and under) with more than one avatar the row of avatars moves above the names, so the text keeps the full width. With one avatar the identity stays on a single line. For a single avatar you can also hand over `avatar-src` (with an optional `avatar-srcset`) as an attribute instead of slotting; its size is fixed at 40px. Slotted avatars take precedence over `avatar-src`. */
+		'nldd-identity': DefineComponent<NLDDIdentityProps>;
 		/** Wraps a native `<img>` with design-system styling: corner radius variants, aspect-ratio reservation, object-fit/position control, optional caption + credit. Renders as `<figure>` + `<figcaption>` only when a caption or credit is set — otherwise just the image, no extra wrapping. Hybrid source: the `src` attribute renders an internal `<img>`. To use a custom `<img>` or `<picture>` (e.g. with art-direction sources), slot it into the default slot and we'll style and wrap it like our own image. */
 		'nldd-image': DefineComponent<NLDDImageProps>;
 		/** An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width. */
@@ -3370,7 +3485,7 @@ declare module 'vue' {
 		'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. */
 		'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. The divider spans the content width by default, with one exception: a row that opens with an `nldd-icon-cell` followed by a text or title cell starts the divider at that text, so the line aligns with the words rather than the icon. Leading spacers are ignored when deciding this. 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 icon 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 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`). */
 		'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>;
@@ -3391,6 +3506,8 @@ declare module 'vue' {
 		'nldd-multi-line-text-field': DefineComponent<NLDDMultiLineTextFieldProps>;
 		/** A four-column layout with a primary sidebar, secondary sidebar, main content area, and inspector. The sidebars show navigation or lists, the main area shows primary content, and the inspector shows additional details or properties of the selection. Panes are shown automatically when content is slotted into them. */
 		'nldd-navigation-split-view': DefineComponent<NLDDNavigationSplitViewProps>;
+		/** A short message that arrives over the interface and leaves on its own: a save that worked, a request that failed. Not a banner, which stands in the page and stays there — this one floats, stacks, and goes away. It places itself. Write it wherever it belongs in your code and it moves to one shared region: top right from md, full width across the top below that. Nothing about the position is settable, so notifications from anywhere in an application land in the same place and stack in the same order. More than one is a deck, not a list: the front one is readable and the older ones peek out below it, so a burst of messages takes the room of roughly one. The newest is in front. Behind it a notification is a bare surface, cut to the height of the one in front; dismiss the front and it slides up into the place that came free while its message fades in, because it was standing there all along. Under the front notification sits a strip as wide as the deck and as tall as the deck is when it fans out. Pointing at it fans the deck out to fill it, which is the only hint that there is more here than the message you can read; clicking it, or moving focus into the region, lays the whole deck out as a list. Clicking or tabbing away puts it back. The notification itself is not a button: a click on the message you are reading does nothing. Only the front of the deck counts down, and only while the deck is closed: open means someone is reading. The rest wait, so nothing disappears from under the one you are reading. `critical` never leaves on its own: a failure is worth reading, and the count-down would take it away while you were. That also keeps this within WCAG 2.2.1, which allows a time limit when what disappears is not essential. The clock pauses while a pointer moves over the notification and while focus is inside it, and resumes where it left off rather than starting over. A pointer that merely happens to rest where the notification appears does not count: it never moved, so nobody is reading. role follows the variant: `critical` becomes role="alert", the rest role="status". Focus never moves on its own. Escape dismisses the notification that focus is in. */
+		'nldd-notification': DefineComponent<NLDDNotificationProps>;
 		/** A numeric input field with decrement and increment buttons. */
 		'nldd-number-field': DefineComponent<NLDDNumberFieldProps>;
 		/** A section with two equal columns side by side. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
@@ -3409,7 +3526,7 @@ declare module 'vue' {
 		'nldd-pagination': DefineComponent<NLDDPaginationProps>;
 		/** A password input field with visibility toggle and validation states. */
 		'nldd-password-field': DefineComponent<NLDDPasswordFieldProps>;
-		/** Een non-modal floating panel dat is verankerd aan een trigger-element. Gebouwd op de native Popover API (popover="auto") met Floating UI voor positionering. De browser regelt open/toggle/light-dismiss; deze component regelt alleen positionering en focus. Aanbevolen gebruik via popovertarget zodat de browser de toggle regelt: <nldd-button id="info-trigger" popovertarget="info-popover">Info</nldd-button> <nldd-popover id="info-popover" anchor="info-trigger" accessible-label="Info"> <nldd-container> <p>Inhoud van de popover.</p> </nldd-container> </nldd-popover> Voor een custom focus-target binnen de popover: zet `autofocus` op het gewenste child-element. Anders krijgt de popover-host zelf focus. */
+		/** A non-modal floating panel anchored to a trigger element. Built on the native Popover API (popover="auto") with Floating UI for positioning. The browser handles opening, toggling and light dismiss; this component only handles positioning and focus. The recommended use is through popovertarget, so the browser owns the toggle: <nldd-button id="info-trigger" popovertarget="info-popover">Info</nldd-button> <nldd-popover id="info-popover" anchor="info-trigger" accessible-label="Info"> <nldd-container> <p>Content of the popover.</p> </nldd-container> </nldd-popover> For a custom focus target inside the popover, put `autofocus` on the child you want. Without it the popover host itself takes focus. */
 		'nldd-popover': DefineComponent<NLDDPopoverProps>;
 		/** Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two modes: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads "X% voltooid". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged. */
 		'nldd-progress-bar': DefineComponent<NLDDProgressBarProps>;
@@ -3454,9 +3571,9 @@ declare module 'vue' {
 		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
 		/** Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur per variant. Gebruik voor persistente systeemtoestand: een storing, gepland onderhoud, een conceptweergave of een lopende opname. De balk toont bewust geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet alleen uit kleur volgt (WCAG 1.4.1). Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker op smallere schermen. Bij een lang bericht met veel informatie hoort alleen de kern in de balk; verwijs voor de rest naar een losse pagina of sheet (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen. De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button` (rendert een `<button>`; luister naar het native `click` event). Zonder beide is de balk statisch. Bij interactie verschijnt een chevron als affordance. Maximaal één actie per balk; meerdere acties of links in lopende tekst horen in nldd-banner. role en aria-live worden automatisch gezet op basis van de variant: - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader) - overige → role="status" aria-live="polite" Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander. Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in die regelmatig verandert (zoals een aftellende timer). */
 		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
-		/** Toont waar je staat in een proces van meerdere stappen: een rij bollen met een cijfer (of een vinkje op wat af is), een label eronder en een lijn die ze verbindt. De ouder houdt de waarheid vast: `current` (1-based) leidt de status van elk kind af — ervoor `past`, daarna `future`. Een kind kan dat overschrijven met een eigen `status`, voor flows die terugspringen of een stap overslaan. Alleen horizontaal. Wil je stappen onder elkaar, bouw dan een `nldd-list` met per rij een `nldd-timeline-track-cell` en een `nldd-title-cell`: verticale stappen dragen meestal meer dan een titel, en dat kan een lijstrij al. Onder de sm-breakpoint (container query, dus gemeten op het component zelf en niet op de viewport) klapt het om naar één regel tekst plus een segmentbalk. De volledige stappenlijst blijft dan in de DOM staan, alleen visueel verborgen, zodat hulpsoftware niet minder te horen krijgt dan een breed scherm laat zien. Toegankelijkheid: een `nav` met een label, daarin een `role="list"` met per stap een `role="listitem"`. De huidige stap krijgt `aria-current="step"` — het enige begrip dat WAI-ARIA hiervoor kent. "Afgerond" en "nog te doen" bestaan niet als ARIA-token en reizen daarom als visueel verborgen tekst mee. */
+		/** 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>;
-		/** Eén stap in een `nldd-step-indicator`. De ouder bepaalt de status en het volgnummer; die staan hier als interne state en niet als publieke API, op `status` na — dat overschrijft de afleiding uit `current`. */
+		/** One step in an `nldd-step-indicator`. The parent decides the status and the number; those live here as internal state rather than as public API, except for `status`, which overrides what `current` derives. */
 		'nldd-step-indicator-item': DefineComponent<NLDDStepIndicatorItemProps>;
 		/** A numeric control with increment and decrement buttons. */
 		'nldd-stepper': DefineComponent<NLDDStepperProps>;
@@ -3470,20 +3587,20 @@ declare module 'vue' {
 		/** Exports both NLDDTable and NLDDTableRow. A data table presented as a boxed surface (rounded corners, an inset border ring, a base or tinted fill) that aligns content into shared columns using a CSS grid + subgrid. Row dividers run full-bleed to the edges; the inline padding lives on the rows, so it insets the cell content but not the dividers. Column widths are defined ONCE on the table via the `columns` attribute (a CSS grid track list), like an HTML `<colgroup>`. Rows are `<nldd-table-row>` elements whose children are the existing `nldd-cell` family — every row uses `grid-template-columns: subgrid`, so all rows snap to the same columns. Header: put one `<nldd-table-row slot="header">` in the `header` slot. Its cells become column headers (role="columnheader"). Responsive: two complementary strategies. (1) Give columns a minimum width (e.g. `minmax(160px,1fr)`) — the table is its own scroll container, so it scrolls horizontally when too narrow (no wrapper needed). (2) Drop columns at breakpoints: provide `sm-columns`/`md-columns`/ `lg-columns` (shorter track lists) and hide the dropped columns' cells with `hide-below`/`hide-above` at the matching breakpoint. The table picks the track list for its own width via the standard sm/md/lg breakpoints. Selection and sorting are intentionally NOT built in: add a column with an `nldd-cell` + `nldd-checkbox` for selection, and drive sorting from an external control (e.g. a dropdown). */
 		'nldd-table': DefineComponent<NLDDTableProps>;
 		'nldd-table-row': DefineComponent<NLDDTableRowProps>;
-		/** Een compacte label voor categorieën, statussen of metadata. Niet interactief. Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>. */
+		/** 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>;
 		/** 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 ring. `font` is `sans` (default, best for prose) or `mono`. Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
+		/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus 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. */
 		'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. */
 		'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. Standaard is de cel een kaal spoor: een lijn met een stip per rij, voor een tijdlijn van gebeurtenissen. Met `variant="step"` wordt de stip groot genoeg voor een cijfer of icoon en heb je een stappenlijst onder elkaar, de verticale tegenhanger van `nldd-step-indicator`. De maat hoort bij de variant en niet bij de inhoud: elke stip in een lijst is even groot, anders verspringt het spoor. */
+		/** 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>;
-		/** A title bar with an optional overline, title, and subtitle on the left, and a slot for actions on the right. */
+		/** A title bar with an optional overline, title, and subtitle on the left, and a slot at the end of the title line on the right. */
 		'nldd-title': DefineComponent<NLDDTitleProps>;
 		/** A cell component for displaying a title with optional overline and subtitle 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"`. Each text region (overline, title, 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>`, `<nldd-icon>` or other components mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-title-cell': DefineComponent<NLDDTitleCellProps>;
@@ -3491,18 +3608,18 @@ declare module 'vue' {
 		'nldd-toggle-button': DefineComponent<NLDDToggleButtonProps>;
 		/** Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, size, and disabled state to all buttons. For type="radio" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type="checkbox" (multi-select), multiple buttons can be selected simultaneously. */
 		'nldd-toggle-button-group': DefineComponent<NLDDToggleButtonGroupProps>;
-		/** A token component representing a piece of data — such as a person in an address field or an active filter value. Optionally dismissable or interactive via a contextual menu. */
+		/** A self-contained piece of data the user is handling: a person in an address field, an active filter value. Alone among the three it can be operated, so it is optionally dismissable or interactive through a contextual menu. For something you only read, reach for `nldd-tag` (a trait someone assigned) or `nldd-badge` (a state or a count the system keeps). */
 		'nldd-token': DefineComponent<NLDDTokenProps>;
 		/** A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation. */
 		'nldd-token-field': DefineComponent<NLDDTokenFieldProps>;
 		'nldd-toolbar': DefineComponent<NLDDToolbarProps>;
 		'nldd-toolbar-item': DefineComponent<NLDDToolbarItemProps>;
 		'nldd-toolbar-title': DefineComponent<NLDDToolbarTitleProps>;
-		/** Wrapper component dat een tooltip toont bij hover of focus op het child element. Gebruikt `display: contents` zodat het de layout van het child niet beïnvloedt. */
+		/** 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. */
 		'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). */
+		/** 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>;