@nldd/design-system 0.8.91 → 0.8.93

package/dist/types/vue.d.ts

@@ -207,7 +207,7 @@ declare module 'vue' {
 		'button'?: NLDDAvatar['button'];
 		/** Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab" */
 		'target'?: NLDDAvatar['target'];
-		/** Link rel for href; defaults to 'noopener noreferrer' when target='_blank' */
+		/** Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDAvatar['rel'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDAvatar['translations'];
@@ -236,9 +236,9 @@ declare module 'vue' {
 		'size'?: NLDDBadge['size'];
 		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical' */
 		'color'?: NLDDBadge['color'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
 		'custom-color'?: NLDDBadge['customColor'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
 		'customColor'?: NLDDBadge['customColor'];
 		/** Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`. */
 		'pulse'?: NLDDBadge['pulse'];
@@ -340,9 +340,9 @@ declare module 'vue' {
 		'expandable'?: NLDDButton['expandable'];
 		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
 		'expanded'?: NLDDButton['expanded'];
-		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. An nldd-menu or nldd-popover in the `popup` slot, or anchored to this button, sets it itself from the first render; set it only for another kind of popup. */
 		'popup-type'?: NLDDButton['popupType'];
-		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. An nldd-menu or nldd-popover in the `popup` slot, or anchored to this button, sets it itself from the first render; set it only for another kind of popup. */
 		'popupType'?: NLDDButton['popupType'];
 		/** Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set) */
 		'type'?: NLDDButton['type'];
@@ -382,7 +382,7 @@ declare module 'vue' {
 		'href'?: NLDDButton['href'];
 		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the button adds a visually hidden "opens in new tab" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDButton['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		/** Link rel attribute, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDButton['translations'];
@@ -411,7 +411,7 @@ declare module 'vue' {
 	type NLDDButtonGroupProps = {
 		/** Button group size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDButtonGroup['size'];
-		/** Layout direction: 'horizontal' | 'vertical' (default: 'vertical') */
+		/** Layout direction: 'auto' | 'horizontal' | 'vertical' (default: 'auto') */
 		'orientation'?: NLDDButtonGroup['orientation'];
 	};
 
@@ -424,12 +424,12 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDCard['accessibleLabel'];
 		/** Makes the whole card a link to this URL (empty = no link) */
 		'href'?: NLDDCard['href'];
-		/** Makes the whole card a button; ignored when `href` is set */
-		'button'?: NLDDCard['button'];
 		/** Link target for href (e.g. '_blank'); adjusts rel automatically and adds an "Opent in nieuw tabblad" announcement for '_blank' */
 		'target'?: NLDDCard['target'];
-		/** Link rel for href; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDCard['rel'];
+		/** Makes the whole card a button; ignored when `href` is set */
+		'button'?: NLDDCard['button'];
 		/** Override translation keys (e.g. the "Opent in nieuw tabblad" announcement) */
 		'translations'?: NLDDCard['translations'];
 	};
@@ -449,14 +449,14 @@ declare module 'vue' {
 		'min-height'?: NLDDCell['minHeight'];
 		/** Minimum height as CSS length (e.g. '44px', '3rem') */
 		'minHeight'?: NLDDCell['minHeight'];
-		/** Vertical alignment of slotted content (default: 'center') */
-		'vertical-alignment'?: NLDDCell['verticalAlignment'];
-		/** Vertical alignment of slotted content (default: 'center') */
-		'verticalAlignment'?: NLDDCell['verticalAlignment'];
 		/** Horizontal alignment of slotted content (default: 'left') */
 		'horizontal-alignment'?: NLDDCell['horizontalAlignment'];
 		/** Horizontal alignment of slotted content (default: 'left') */
 		'horizontalAlignment'?: NLDDCell['horizontalAlignment'];
+		/** Vertical alignment of slotted content (default: 'center') */
+		'vertical-alignment'?: NLDDCell['verticalAlignment'];
+		/** Vertical alignment of slotted content (default: 'center') */
+		'verticalAlignment'?: NLDDCell['verticalAlignment'];
 		'hide-below'?: NLDDCell['hideBelow'];
 		'hideBelow'?: NLDDCell['hideBelow'];
 		'hide-above'?: NLDDCell['hideAbove'];
@@ -585,18 +585,6 @@ declare module 'vue' {
 	type NLDDCollectionProps = {
 		/** Layout mode: 'grid' | 'stack' | 'lanes' | 'horizontal-scroll' (default: 'grid') */
 		'layout'?: NLDDCollection['layout'];
-		/** Show load-more button in grid/stack (default: false) */
-		'show-load-more'?: NLDDCollection['showLoadMore'];
-		/** Show load-more button in grid/stack (default: false) */
-		'showLoadMore'?: NLDDCollection['showLoadMore'];
-		/** Number of visible items per page (default: 24) */
-		'max-items'?: NLDDCollection['maxItems'];
-		/** Number of visible items per page (default: 24) */
-		'maxItems'?: NLDDCollection['maxItems'];
-		/** Automatically load more items when the button becomes visible */
-		'lazy-load'?: NLDDCollection['lazyLoad'];
-		/** Automatically load more items when the button becomes visible */
-		'lazyLoad'?: NLDDCollection['lazyLoad'];
 		/** Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
 		'item-width'?: NLDDCollection['itemWidth'];
 		/** Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
@@ -615,8 +603,20 @@ declare module 'vue' {
 		'lg-gap'?: NLDDCollection['lgGap'];
 		/** Gap at lg, overriding `gap` there */
 		'lgGap'?: NLDDCollection['lgGap'];
+		/** Number of visible items per page (default: 24) */
+		'max-items'?: NLDDCollection['maxItems'];
+		/** Number of visible items per page (default: 24) */
+		'maxItems'?: NLDDCollection['maxItems'];
 		/** Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action' */
 		'translations'?: NLDDCollection['translations'];
+		/** Show load-more button in grid/stack (default: false) */
+		'show-load-more'?: NLDDCollection['showLoadMore'];
+		/** Show load-more button in grid/stack (default: false) */
+		'showLoadMore'?: NLDDCollection['showLoadMore'];
+		/** Automatically load more items when the button becomes visible */
+		'lazy-load'?: NLDDCollection['lazyLoad'];
+		/** Automatically load more items when the button becomes visible */
+		'lazyLoad'?: NLDDCollection['lazyLoad'];
 		/** When the load-more button is clicked */
 		'onLoadMore'?: (event: CustomEvent) => void;
 	};
@@ -708,15 +708,7 @@ declare module 'vue' {
 		'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' */
-		'horizontalAlignment'?: NLDDContainer['horizontalAlignment'];
-		/** 'top' | 'center' | 'bottom' */
-		'vertical-alignment'?: NLDDContainer['verticalAlignment'];
-		/** 'top' | 'center' | 'bottom' */
-		'verticalAlignment'?: NLDDContainer['verticalAlignment'];
-		/** Gap between children */
+		/** Gap between children. One distance for all of them, so it fits children of one kind; for a stack of different kinds, space each seam with nldd-spacer instead. */
 		'gap'?: NLDDContainer['gap'];
 		/** Gap at sm breakpoint */
 		'sm-gap'?: NLDDContainer['smGap'];
@@ -840,6 +832,14 @@ declare module 'vue' {
 		'lg-padding-left'?: NLDDContainer['lgPaddingLeft'];
 		/** Padding left at lg */
 		'lgPaddingLeft'?: NLDDContainer['lgPaddingLeft'];
+		/** 'left' | 'center' | 'right' */
+		'horizontal-alignment'?: NLDDContainer['horizontalAlignment'];
+		/** 'left' | 'center' | 'right' */
+		'horizontalAlignment'?: NLDDContainer['horizontalAlignment'];
+		/** 'top' | 'center' | 'bottom' */
+		'vertical-alignment'?: NLDDContainer['verticalAlignment'];
+		/** 'top' | 'center' | 'bottom' */
+		'verticalAlignment'?: NLDDContainer['verticalAlignment'];
 	};
 
 	type NLDDDateFieldProps = {
@@ -1128,8 +1128,8 @@ declare module 'vue' {
 		'width'?: NLDDFullBleedSection['width'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDFullBleedSection['background'];
-		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
-		'scheme'?: NLDDFullBleedSection['scheme'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDFullBleedSection['height'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
 		'padding-block'?: NLDDFullBleedSection['paddingBlock'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
@@ -1162,29 +1162,27 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDFullBleedSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDFullBleedSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDFullBleedSection['lgPaddingBottom'];
-		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
-		'height'?: NLDDFullBleedSection['height'];
 	};
 
 	type NLDDHeroProps = {
-		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
-		'main-position'?: NLDDHero['mainPosition'];
-		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
-		'mainPosition'?: NLDDHero['mainPosition'];
-		/** 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'];
-		/** Width of the panel (default: '1/2'); 'full' makes a full top or bottom strip and is ignored with 'left'/'right' */
-		'mainWidth'?: NLDDHero['mainWidth'];
+		/** Body max-width; 'full' removes the bound (section API) */
+		'width'?: NLDDHero['width'];
 		/** 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'];
 		/** 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'];
+		/** 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'];
+		/** Width of the panel (default: '1/2'); 'full' makes a full top or bottom strip and is ignored with 'left'/'right' */
+		'mainWidth'?: NLDDHero['mainWidth'];
+		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
+		'main-position'?: NLDDHero['mainPosition'];
+		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
+		'mainPosition'?: NLDDHero['mainPosition'];
 		/** 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 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' removes the bound (section API) */
-		'width'?: NLDDHero['width'];
 		/** Source of the media area (an alternative to the media slot); ignored as soon as the media slot is filled */
 		'media-src'?: NLDDHero['mediaSrc'];
 		/** Source of the media area (an alternative to the media slot); ignored as soon as the media slot is filled */
@@ -1203,8 +1201,8 @@ declare module 'vue' {
 		'mediaAlt'?: NLDDHero['mediaAlt'];
 		/** Surface behind the hero (section API) */
 		'background'?: NLDDHero['background'];
-		/** Color scheme (section API) */
-		'scheme'?: NLDDHero['scheme'];
+		/** Minimum height of the section (section API) */
+		'height'?: NLDDHero['height'];
 		/** Block padding override, also per edge and responsive (section API) */
 		'padding-block'?: NLDDHero['paddingBlock'];
 		/** Block padding override, also per edge and responsive (section API) */
@@ -1231,20 +1229,18 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDHero['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDHero['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDHero['lgPaddingBottom'];
-		/** Minimum height of the section (section API) */
-		'height'?: NLDDHero['height'];
 	};
 
 	type NLDDIconProps = {
-		/** The name of the icon to display */
-		'name'?: NLDDIcon['name'];
+		/** The name of the icon to display. The same attribute every other component that renders an icon takes. */
+		'icon'?: NLDDIcon['icon'];
 		/** `full` (the default) fills the container. `inherit` sizes the icon to the surrounding text (1em) and drops it onto that text's own line, for an icon set in a line of running text. Or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). */
 		'size'?: NLDDIcon['size'];
 		/** Functional (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or rijkskleur (`lintblauw`, `donkerblauw`, `hemelblauw`, `lichtblauw`, `paars`, `violet`, `robijnrood`, `roze`, `rood`, `oranje`, `donkergeel`, `geel`, `donkerbruin`, `bruin`, `donkergroen`, `groen`, `mosgroen`, `mintgroen`). Empty = inherit `color` from parent. */
 		'color'?: NLDDIcon['color'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know. It wins over `color`. */
 		'custom-color'?: NLDDIcon['customColor'];
-		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know. It wins over `color`. */
 		'customColor'?: NLDDIcon['customColor'];
 		/** Draw the icon on a filled square. `color` and `custom-color` then paint the box and the glyph takes the contrasting color, and `size` measures the box: the glyph is four fifths of it, the corner radius a fifth. */
 		'box'?: NLDDIcon['box'];
@@ -1277,9 +1273,9 @@ declare module 'vue' {
 		'no-tab'?: NLDDIconButton['noTab'];
 		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable. */
 		'noTab'?: NLDDIconButton['noTab'];
-		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. An nldd-menu or nldd-popover in the `popup` slot, or anchored to this button, sets it itself from the first render; set it only for another kind of popup. */
 		'popup-type'?: NLDDIconButton['popupType'];
-		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. An nldd-menu or nldd-popover in the `popup` slot, or anchored to this button, sets it itself from the first render; set it only for another kind of popup. */
 		'popupType'?: NLDDIconButton['popupType'];
 		/** Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px') */
 		'width'?: NLDDIconButton['width'];
@@ -1301,7 +1297,7 @@ declare module 'vue' {
 		'href'?: NLDDIconButton['href'];
 		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the "opens in new tab" announcement is folded into the aria-label for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDIconButton['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		/** Link rel attribute, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDIconButton['rel'];
 		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDIconButton['translations'];
@@ -1314,14 +1310,14 @@ declare module 'vue' {
 	};
 
 	type NLDDIconCellProps = {
-		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
-		'vertical-alignment'?: NLDDIconCell['verticalAlignment'];
-		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
-		'verticalAlignment'?: NLDDIconCell['verticalAlignment'];
 		/** Size: '16' | '20' | '24' | '32' (default: '24') */
 		'size'?: NLDDIconCell['size'];
 		/** Color variant of the icon (default: 'content') */
 		'color'?: NLDDIconCell['color'];
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'vertical-alignment'?: NLDDIconCell['verticalAlignment'];
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'verticalAlignment'?: NLDDIconCell['verticalAlignment'];
 		/** Icon name (renders `<nldd-icon>`). Takes precedence over the default slot. */
 		'icon'?: NLDDIconCell['icon'];
 		'hide-below'?: NLDDIconCell['hideBelow'];
@@ -1483,7 +1479,7 @@ declare module 'vue' {
 		'href'?: NLDDLink['href'];
 		/** Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
 		'target'?: NLDDLink['target'];
-		/** Link rel attribute; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel attribute; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDLink['rel'];
 		/** Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap. */
 		'size'?: NLDDLink['size'];
@@ -1516,8 +1512,6 @@ declare module 'vue' {
 		'variant'?: NLDDList['variant'];
 		/** A11y role and behavior (default 'list'). See the docblock above. */
 		'type'?: NLDDList['type'];
-		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus. */
-		'reorderable'?: NLDDList['reorderable'];
 		/** When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere */
 		'dividers'?: NLDDList['dividers'];
 		/** Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap. */
@@ -1528,6 +1522,8 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDList['accessibleLabel'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDList['translations'];
+		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus. */
+		'reorderable'?: NLDDList['reorderable'];
 		/** Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop */
 		'onNlddReorder'?: (event: CustomEvent) => void;
 		/** `type="listbox"`: search value changed; `{ value }`. Toggle `[hidden]` on items to filter. */
@@ -1537,30 +1533,38 @@ declare module 'vue' {
 	type NLDDListItemProps = {
 		/** Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone. */
 		'size'?: NLDDListItem['size'];
-		/** Marks the item as selected: it is one of the rows you picked. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
-		'selected'?: NLDDListItem['selected'];
-		/** Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current="page"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs. */
-		'current'?: NLDDListItem['current'];
+		/** Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three the item is a plain container with no action. */
+		'href'?: NLDDListItem['href'];
+		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
+		'target'?: NLDDListItem['target'];
+		/** Link rel forwarded to the `<a>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set */
+		'rel'?: NLDDListItem['rel'];
 		/** Renders the item as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
 		'button'?: NLDDListItem['button'];
 		/** Makes the whole row a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItem['checkbox'];
 		/** Makes the whole row one radio of a group: the action becomes a `role="radio"` button carrying `aria-checked`, and activation sets `checked` (never clears it) and fires `change`. Put the rows in an `nldd-list type="radiogroup"`, which is what makes them a set. Wins over `button`, loses to `href` and `checkbox`. The arrow keys move focus without checking, where a native radio group and `nldd-radio-button-group` check as they go: a row can carry more than a label, so stepping past one should not commit it. */
 		'radio'?: NLDDListItem['radio'];
+		/** Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility. */
+		'reorderable'?: NLDDListItem['reorderable'];
+		/** Marks the item as selected: it is one of the rows you picked. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
+		'selected'?: NLDDListItem['selected'];
 		/** Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on activation, a radio row only ever sets it */
 		'checked'?: NLDDListItem['checked'];
-		/** Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row. */
-		'disabled'?: NLDDListItem['disabled'];
 		/** Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segment marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live. */
 		'expanded'?: NLDDListItem['expanded'];
-		/** Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three the item is a plain container with no action. */
-		'href'?: NLDDListItem['href'];
-		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
-		'target'?: NLDDListItem['target'];
-		/** Link rel forwarded to the `<a>` (e.g. 'noopener noreferrer'); only applies with `href` */
-		'rel'?: NLDDListItem['rel'];
-		/** Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility. */
-		'reorderable'?: NLDDListItem['reorderable'];
+		/** Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current="page"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs. */
+		'current'?: NLDDListItem['current'];
+		/** Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row. */
+		'disabled'?: NLDDListItem['disabled'];
+		/** The divider starts at this cell instead of at the row's first text or title cell. On the leading cell it restores the full-width line. */
+		'divider-start'?: NLDDListItem['dividerStart'];
+		/** The divider starts at this cell instead of at the row's first text or title cell. On the leading cell it restores the full-width line. */
+		'dividerStart'?: NLDDListItem['dividerStart'];
+		/** The divider stops after this cell. With several markers the line runs from the first start to the last end. */
+		'divider-end'?: NLDDListItem['dividerEnd'];
+		/** The divider stops after this cell. With several markers the line runs from the first start to the last end. */
+		'dividerEnd'?: NLDDListItem['dividerEnd'];
 		'translations'?: NLDDListItem['translations'];
 		/** Nested rows sit in this item's `children` slot, not the list's, so a plain `querySelector` from the list walks past them. */
 		'childRows'?: NLDDListItem['childRows'];
@@ -1571,41 +1575,65 @@ declare module 'vue' {
 	};
 
 	type NLDDListItemSegmentProps = {
-		/** Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
-		'button'?: NLDDListItemSegment['button'];
+		/** `full` lets the segment grow to fill the row (default: 'fit-content') */
+		'width'?: NLDDListItemSegment['width'];
 		/** Renders the segment as an `<a>` with this URL. Wins over `checkbox` and `button`. */
 		'href'?: NLDDListItemSegment['href'];
 		/** Link target forwarded to the `<a>`; only applies with `href` */
 		'target'?: NLDDListItemSegment['target'];
-		/** Link rel forwarded to the `<a>`; only applies with `href` */
+		/** Link rel forwarded to the `<a>`, only with `href`; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDListItemSegment['rel'];
+		/** Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
+		'button'?: NLDDListItemSegment['button'];
 		/** Makes the segment a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItemSegment['checkbox'];
+		/** Marks the segment as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
+		'disclosure'?: NLDDListItemSegment['disclosure'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessible-label'?: NLDDListItemSegment['accessibleLabel'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessibleLabel'?: NLDDListItemSegment['accessibleLabel'];
 		/** Checked state of a `checkbox` segment; it toggles on activation */
 		'checked'?: NLDDListItemSegment['checked'];
 		/** Disclosure state, reflected as `aria-expanded` on the control, and painted: the segment stays lit a step above hover for as long as what it opened is on screen, so a menu reads as hanging off this row rather than floating over the list. Set it on the segment that opens something (a tree row's chevron, a menu). Leave it off entirely when the segment discloses nothing — an absent attribute emits no aria-expanded. */
 		'expanded'?: NLDDListItemSegment['expanded'];
-		/** Marks the segment as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
-		'disclosure'?: NLDDListItemSegment['disclosure'];
+		/** Type of popup this segment opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Becomes aria-haspopup on the control and makes aria-expanded permanent, so a row of identical "more" segments says what it opens before anything is open. An nldd-menu or nldd-popover anchored here sets it itself from the first render. */
+		'popup-type'?: NLDDListItemSegment['popupType'];
+		/** Type of popup this segment opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Becomes aria-haspopup on the control and makes aria-expanded permanent, so a row of identical "more" segments says what it opens before anything is open. An nldd-menu or nldd-popover anchored here sets it itself from the first render. */
+		'popupType'?: NLDDListItemSegment['popupType'];
+		/** ID of a popover this segment toggles; forwarded to the inner button. The IDL counterparts `popoverTargetElement` and `popoverTargetAction` work across shadow boundaries, as on nldd-icon-button. */
+		'popovertarget'?: NLDDListItemSegment['popovertarget'];
 		/** Marks the segment as the current page (`aria-current="page"`). The row it sits in paints itself as the current row from it, so on a segmented row this is the only place it has to be set. */
 		'current'?: NLDDListItemSegment['current'];
 		/** Switches the segment off: a `button` or `checkbox` segment stops responding and dims, a `href` segment gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). The arrow keys skip a row whose only segment is off. */
 		'disabled'?: NLDDListItemSegment['disabled'];
-		/** `full` lets the segment grow to fill the row (default: 'fit-content') */
-		'width'?: NLDDListItemSegment['width'];
-		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
-		'accessible-label'?: NLDDListItemSegment['accessibleLabel'];
-		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
-		'accessibleLabel'?: NLDDListItemSegment['accessibleLabel'];
+		/** The row's divider starts at this cell instead of at its first text or title cell. */
+		'divider-start'?: NLDDListItemSegment['dividerStart'];
+		/** The row's divider starts at this cell instead of at its first text or title cell. */
+		'dividerStart'?: NLDDListItemSegment['dividerStart'];
+		/** The row's divider stops after this cell. */
+		'divider-end'?: NLDDListItemSegment['dividerEnd'];
+		/** The row's divider stops after this cell. */
+		'dividerEnd'?: NLDDListItemSegment['dividerEnd'];
+		/** Direct element reference to that popover, for one living in another tree (an nldd-menu reparented to the body). IDL-only, like the counterpart on nldd-icon-button, so the browser still treats this segment's button as the popover's invoker. */
+		'popoverTargetElement'?: NLDDListItemSegment['popoverTargetElement'];
+		/** Action the browser performs on click, mirroring popovertargetaction. */
+		'popoverTargetAction'?: NLDDListItemSegment['popoverTargetAction'];
 		/** On a `checkbox` segment after it toggles; detail: { checked: boolean } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
 	type NLDDMenuProps = {
+		/** Explicit width, pinned exactly (sets --_width and clamps min/max to it). Leave unset to let the menu size to its content between a minimum and a viewport-aware maximum of min(100vw - inset, 640px). */
+		'width'?: NLDDMenu['width'];
 		/** ID of the anchor element. Positions the menu against it AND makes it a toggle: the menu listens on document click and opens/closes itself when the click lands on the anchor. Use this for a menu hung off a button. For a menu you open yourself (a type-ahead under a text field, say), set the `anchorElement` property instead — same positioning, no toggle. */
 		'anchor'?: NLDDMenu['anchor'];
 		/** Floating UI placement. Default: 'bottom-start'. */
 		'placement'?: NLDDMenu['placement'];
+		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
+		'max-items'?: NLDDMenu['maxItems'];
+		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
+		'maxItems'?: NLDDMenu['maxItems'];
 		/** Text of the default empty-state dialog. Falls back to Dutch i18n "Geen opties beschikbaar". */
 		'empty-text'?: NLDDMenu['emptyText'];
 		/** Text of the default empty-state dialog. Falls back to Dutch i18n "Geen opties beschikbaar". */
@@ -1614,12 +1642,6 @@ declare module 'vue' {
 		'empty-supporting-text'?: NLDDMenu['emptySupportingText'];
 		/** Supporting text of the default empty-state dialog. */
 		'emptySupportingText'?: NLDDMenu['emptySupportingText'];
-		/** Explicit width, pinned exactly (sets --_width and clamps min/max to it). Leave unset to let the menu size to its content between a minimum and a viewport-aware maximum of min(100vw - inset, 640px). */
-		'width'?: NLDDMenu['width'];
-		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
-		'max-items'?: NLDDMenu['maxItems'];
-		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
-		'maxItems'?: NLDDMenu['maxItems'];
 		/** Override one or more translation keys. Unset keys fall back to the Dutch default. */
 		'translations'?: NLDDMenu['translations'];
 		/** Custom filter function (query, item) => boolean. */
@@ -1696,32 +1718,32 @@ declare module 'vue' {
 	};
 
 	type NLDDMenuItemProps = {
+		/** Marks the item as destructive (red text; red highlight bg). Use for irreversible actions like "Delete". Color is the only built-in signal, so per WCAG 1.4.1 the item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's responsibility. */
+		'destructive'?: NLDDMenuItem['destructive'];
 		/** Display text. Supports **bold** markdown syntax. */
 		'text'?: NLDDMenuItem['text'];
-		/** A value of the item's own, read off the item in a `select` handler. The default filter matches on it as well as on `text` and `aliases`. Not a form value: this component is not form-associated. */
-		'value'?: NLDDMenuItem['value'];
-		/** Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled. */
-		'href'?: NLDDMenuItem['href'];
-		/** Space-separated alternative search terms. */
-		'aliases'?: NLDDMenuItem['aliases'];
 		/** Secondary label shown on the right side. */
 		'details'?: NLDDMenuItem['details'];
+		/** Icon name rendered before the text. */
+		'icon'?: NLDDMenuItem['icon'];
 		/** Keyboard shortcut hint shown on the right, e.g. 'Cmd+E'. Display only (rendered via nldd-keyboard-shortcut) — it does not bind the key; wire up the handling in your app. Hidden on touch-only devices, where it isn't invokable. */
 		'shortcut'?: NLDDMenuItem['shortcut'];
 		/** / shortcut-windows / shortcut-linux - Per-OS overrides for `shortcut`, picked by detected OS (falls back to `shortcut`). */
 		'shortcut-mac'?: NLDDMenuItem['shortcutMac'];
 		/** / shortcut-windows / shortcut-linux - Per-OS overrides for `shortcut`, picked by detected OS (falls back to `shortcut`). */
 		'shortcutMac'?: NLDDMenuItem['shortcutMac'];
-		/** Icon name rendered before the text (nldd-icon name). */
-		'icon'?: NLDDMenuItem['icon'];
+		/** Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled. */
+		'href'?: NLDDMenuItem['href'];
 		/** Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. */
 		'type'?: NLDDMenuItem['type'];
 		/** Selected state for checkbox and radio types. */
 		'selected'?: NLDDMenuItem['selected'];
-		/** Marks the item as destructive (red text; red highlight bg). Use for irreversible actions like "Delete". Color is the only built-in signal, so per WCAG 1.4.1 the item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's responsibility. */
-		'destructive'?: NLDDMenuItem['destructive'];
 		/** Disabled state. */
 		'disabled'?: NLDDMenuItem['disabled'];
+		/** A value of the item's own, read off the item in a `select` handler. The default filter matches on it as well as on `text` and `aliases`. Not a form value: this component is not form-associated. */
+		'value'?: NLDDMenuItem['value'];
+		/** Space-separated alternative search terms. */
+		'aliases'?: NLDDMenuItem['aliases'];
 		/** Query substring to bold-highlight in text. Set by menu's filter(); also settable by consumers. */
 		'query'?: NLDDMenuItem['query'];
 		/** 'match' | 'predictive' (default: 'predictive'). See text-cell for details. */
@@ -1743,25 +1765,27 @@ declare module 'vue' {
 	type NLDDModalDialogProps = {
 		/** Forwarded to nldd-inline-dialog; 'alert' forces icon and color */
 		'variant'?: NLDDModalDialog['variant'];
-		/** Forwarded to nldd-inline-dialog; absent when not set */
-		'icon'?: NLDDModalDialog['icon'];
+		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
+		'horizontal-alignment'?: NLDDModalDialog['horizontalAlignment'];
+		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
+		'horizontalAlignment'?: NLDDModalDialog['horizontalAlignment'];
 		/** Forwarded to nldd-inline-dialog; main text */
 		'text'?: NLDDModalDialog['text'];
 		/** Forwarded to nldd-inline-dialog; supporting text */
 		'supporting-text'?: NLDDModalDialog['supportingText'];
 		/** Forwarded to nldd-inline-dialog; supporting text */
 		'supportingText'?: NLDDModalDialog['supportingText'];
-		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
-		'horizontal-alignment'?: NLDDModalDialog['horizontalAlignment'];
-		/** Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered. */
-		'horizontalAlignment'?: NLDDModalDialog['horizontalAlignment'];
+		/** Forwarded to nldd-inline-dialog; absent when not set */
+		'icon'?: NLDDModalDialog['icon'];
 		/** Accessible name for the dialog (aria-label); falls back to text */
 		'accessible-label'?: NLDDModalDialog['accessibleLabel'];
 		/** Accessible name for the dialog (aria-label); falls back to text */
 		'accessibleLabel'?: NLDDModalDialog['accessibleLabel'];
+		/** Whether the dialog is open. Set it to open or close the dialog, as an alternative to show() and hide(). The dialog clears it itself when it closes another way (Escape, the backdrop), so bind it together with the close event. */
+		'open'?: NLDDModalDialog['open'];
 		/** When the dialog is opened */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** When the dialog is fully closed. Does not bubble: overlays nest, and a listener on one dialog asking about that dialog should not also hear the form it opened. */
+		/** When the dialog is fully closed. Does not bubble: overlays nest, and a listener on one dialog asking about that dialog should not also hear the form it opened. The dismiss button of an nldd-top-title-bar inside it fires `dismiss`, which bubbles; this component catches that itself, closes and fires `close`. Listen to `close` alone, or one click runs your handler twice. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -1824,10 +1848,6 @@ declare module 'vue' {
 	};
 
 	type NLDDNavigationSplitViewProps = {
-		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
-		'inspector-auto-hidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
-		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
-		'inspectorAutoHidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
 		/** Always show the inspector as a sheet regardless of available space */
 		'inspector-as-sheet'?: NLDDNavigationSplitView['inspectorAsSheet'];
 		/** Always show the inspector as a sheet regardless of available space */
@@ -1836,10 +1856,6 @@ declare module 'vue' {
 		'primary-sidebar-as-sheet'?: NLDDNavigationSplitView['primarySidebarAsSheet'];
 		/** Always show the primary sidebar as a sheet, keeping main visible at full width */
 		'primarySidebarAsSheet'?: NLDDNavigationSplitView['primarySidebarAsSheet'];
-		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
-		'sidebar-as-sheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
-		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
-		'sidebarAsSheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
 		/** Accessible name for the inspector sheet dialog (default: 'Details') */
 		'inspector-accessible-label'?: NLDDNavigationSplitView['inspectorAccessibleLabel'];
 		/** Accessible name for the inspector sheet dialog (default: 'Details') */
@@ -1848,6 +1864,14 @@ declare module 'vue' {
 		'primary-sidebar-accessible-label'?: NLDDNavigationSplitView['primarySidebarAccessibleLabel'];
 		/** Accessible name for the primary sidebar sheet dialog (default: 'Navigatie') */
 		'primarySidebarAccessibleLabel'?: NLDDNavigationSplitView['primarySidebarAccessibleLabel'];
+		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
+		'inspector-auto-hidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
+		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
+		'inspectorAutoHidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
+		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
+		'sidebar-as-sheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
+		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
+		'sidebarAsSheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
 		/** @deprecated alias for primary-sidebar-accessible-label (kept for backwards compatibility) */
 		'sidebar-accessible-label'?: NLDDNavigationSplitView['sidebarAccessibleLabel'];
 		/** @deprecated alias for primary-sidebar-accessible-label (kept for backwards compatibility) */
@@ -1917,8 +1941,8 @@ declare module 'vue' {
 		'width'?: NLDDOneHalfOneHalfSection['width'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDOneHalfOneHalfSection['background'];
-		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
-		'scheme'?: NLDDOneHalfOneHalfSection['scheme'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDOneHalfOneHalfSection['height'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
 		'padding-block'?: NLDDOneHalfOneHalfSection['paddingBlock'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
@@ -1951,8 +1975,6 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDOneHalfOneHalfSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDOneHalfOneHalfSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDOneHalfOneHalfSection['lgPaddingBottom'];
-		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
-		'height'?: NLDDOneHalfOneHalfSection['height'];
 	};
 
 	type NLDDOneThirdTwoThirdsSectionProps = {
@@ -1960,8 +1982,8 @@ declare module 'vue' {
 		'width'?: NLDDOneThirdTwoThirdsSection['width'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDOneThirdTwoThirdsSection['background'];
-		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
-		'scheme'?: NLDDOneThirdTwoThirdsSection['scheme'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDOneThirdTwoThirdsSection['height'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
 		'padding-block'?: NLDDOneThirdTwoThirdsSection['paddingBlock'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
@@ -1994,11 +2016,15 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDOneThirdTwoThirdsSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDOneThirdTwoThirdsSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDOneThirdTwoThirdsSection['lgPaddingBottom'];
-		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
-		'height'?: NLDDOneThirdTwoThirdsSection['height'];
 	};
 
 	type NLDDPageProps = {
+		/** Use a gray background instead of white */
+		'background'?: NLDDPage['background'];
+		/** Name of the landmark this page is: the region it becomes beside another page, or its main landmark */
+		'accessible-label'?: NLDDPage['accessibleLabel'];
+		/** Name of the landmark this page is: the region it becomes beside another page, or its main landmark */
+		'accessibleLabel'?: NLDDPage['accessibleLabel'];
 		/** Sticky header */
 		'sticky-header'?: NLDDPage['stickyHeader'];
 		/** Sticky header */
@@ -2007,8 +2033,8 @@ declare module 'vue' {
 		'sticky-footer'?: NLDDPage['stickyFooter'];
 		/** Sticky footer */
 		'stickyFooter'?: NLDDPage['stickyFooter'];
-		/** Use a gray background instead of white */
-		'background'?: NLDDPage['background'];
+		/** Whether this page carries the document's landmarks: 'auto' (default) derives it from where the page sits, 'page' keeps banner, main and contentinfo, 'region' drops all three */
+		'landmarks'?: NLDDPage['landmarks'];
 		'scrollTarget'?: NLDDPage['scrollTarget'];
 	};
 
@@ -2027,10 +2053,10 @@ declare module 'vue' {
 	};
 
 	type NLDDPageFooterLegalBarItemProps = {
-		/** Link target. When omitted, the item renders as plain text. */
-		'href'?: NLDDPageFooterLegalBarItem['href'];
 		/** Item label. Falls back to the default slot. */
 		'text'?: NLDDPageFooterLegalBarItem['text'];
+		/** Link target. When omitted, the item renders as plain text. */
+		'href'?: NLDDPageFooterLegalBarItem['href'];
 	};
 
 	type NLDDPaginationProps = {
@@ -2117,34 +2143,35 @@ declare module 'vue' {
 	};
 
 	type NLDDPopoverProps = {
+		/** 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'];
+		/** 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'];
+		/** 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'];
 		/** ID of the trigger element, used for positioning */
 		'anchor'?: NLDDPopover['anchor'];
 		/** Floating UI placement (default: 'bottom-start') */
 		'placement'?: NLDDPopover['placement'];
-		/** 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 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 position. See `top` for the semantics. */
-		'left'?: NLDDPopover['left'];
 		/** CSS right position. See `top` for the semantics. */
 		'right'?: NLDDPopover['right'];
 		/** CSS bottom position. See `top` for the semantics. */
 		'bottom'?: NLDDPopover['bottom'];
+		/** CSS left position. See `top` for the semantics. */
+		'left'?: NLDDPopover['left'];
 		/** 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'];
-		/** 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'];
-		/** 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'];
 		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Popover') when unset — always give a unique, describing name. */
 		'accessible-label'?: NLDDPopover['accessibleLabel'];
 		/** (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 fall back to the Dutch default. */
 		'translations'?: NLDDPopover['translations'];
-		'anchorElement'?: NLDDPopover['anchorElement'];
+		/** Whether the popover is open. Set it to open or close the popover, as an alternative to show() and hide(); opening needs an anchor, and without one it stays unset. The popover clears it itself when it closes another way (Escape, a click outside), so bind it together with the close event. */
 		'open'?: NLDDPopover['open'];
+		'anchorElement'?: NLDDPopover['anchorElement'];
 		/** When the popover opens */
 		'onOpen'?: (event: CustomEvent) => void;
 		/** When the popover closes. Does not bubble: overlays nest, and a listener on the sheet or window around this one should not hear it close. */
@@ -2321,55 +2348,55 @@ declare module 'vue' {
 	};
 
 	type NLDDRichTextProps = {
+		/** 'content' (the default) takes the system's own content colors, each element its own. 'inherit' lets all text follow the color of the surface instead (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. */
+		'color'?: NLDDRichText['color'];
 		/** Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose' */
 		'spacing'?: NLDDRichText['spacing'];
 		/** Centers the main column inside the container; without it, content is left-aligned */
 		'centered'?: NLDDRichText['centered'];
-		/** Opt-in automatic hyphenation for running text (p, li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for instance): without language information the browser does not hyphenate. An `overflow-wrap: break-word` safety net on p/li is always on, independent of this attribute, so long URLs and compounds break neatly instead of overflowing even without a dictionary. */
-		'hyphens'?: NLDDRichText['hyphens'];
-		/** 'content' (the default) takes the system's own content colors, each element its own. 'inherit' lets all text follow the color of the surface instead (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. */
-		'color'?: NLDDRichText['color'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDRichText['translations'];
+		/** Opt-in automatic hyphenation for running text (p, li, dd). Needs a correct `lang` on the page (`lang="nl"` on `<html>`, for instance): without language information the browser does not hyphenate. An `overflow-wrap: break-word` safety net on p/li is always on, independent of this attribute, so long URLs and compounds break neatly instead of overflowing even without a dictionary. */
+		'hyphens'?: NLDDRichText['hyphens'];
 	};
 
 	type NLDDSearchFieldProps = {
-		/** The search value */
-		'value'?: NLDDSearchField['value'];
+		/** Field size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDSearchField['size'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDSearchField['width'];
 		/** Placeholder text for the input */
 		'placeholder'?: NLDDSearchField['placeholder'];
-		/** Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible. */
+		/** Accessible name (aria-label) of the native input. Falls back to `placeholder`, and keeps it when a value is typed. That works while the placeholder names the field ('Zoek een gebruiker'); set this when the placeholder is an example instead ('bijv. Jansen'). */
 		'accessible-label'?: NLDDSearchField['accessibleLabel'];
-		/** Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible. */
+		/** Accessible name (aria-label) of the native input. Falls back to `placeholder`, and keeps it when a value is typed. That works while the placeholder names the field ('Zoek een gebruiker'); set this when the placeholder is an example instead ('bijv. Jansen'). */
 		'accessibleLabel'?: NLDDSearchField['accessibleLabel'];
-		/** Field size: 'sm' | 'md' (default: 'md') */
-		'size'?: NLDDSearchField['size'];
-		/** Disabled state */
-		'disabled'?: NLDDSearchField['disabled'];
-		/** Input name for form submission */
-		'name'?: NLDDSearchField['name'];
 		/** When set, shows a search button on the right */
 		'show-search-button'?: NLDDSearchField['showSearchButton'];
 		/** When set, shows a search button on the right */
 		'showSearchButton'?: NLDDSearchField['showSearchButton'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDSearchField['translations'];
-		/** Disables browser spellchecking on the inner input */
-		'no-spellcheck'?: NLDDSearchField['noSpellcheck'];
-		/** Disables browser spellchecking on the inner input */
-		'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
-		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
-		'width'?: NLDDSearchField['width'];
+		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
+		'invalid'?: NLDDSearchField['invalid'];
+		/** Disabled state */
+		'disabled'?: NLDDSearchField['disabled'];
+		/** Input name for form submission */
+		'name'?: NLDDSearchField['name'];
+		/** The search value */
+		'value'?: NLDDSearchField['value'];
 		/** Required state */
 		'required'?: NLDDSearchField['required'];
-		/** Regular expression the value has to match, as the native `pattern`. */
-		'pattern'?: NLDDSearchField['pattern'];
 		/** Fewest characters the value may have. */
 		'minlength'?: NLDDSearchField['minlength'];
 		/** Most characters the value may have. */
 		'maxlength'?: NLDDSearchField['maxlength'];
-		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. */
-		'invalid'?: NLDDSearchField['invalid'];
+		/** Regular expression the value has to match, as the native `pattern`. */
+		'pattern'?: NLDDSearchField['pattern'];
+		/** Disables browser spellchecking on the inner input */
+		'no-spellcheck'?: NLDDSearchField['noSpellcheck'];
+		/** Disables browser spellchecking on the inner input */
+		'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
 		/** Set by nldd-form-field. A consumer never writes this. */
 		'describedByElements'?: NLDDSearchField['describedByElements'];
 		'internals'?: NLDDSearchField['internals'];
@@ -2445,19 +2472,21 @@ declare module 'vue' {
 	};
 
 	type NLDDSheetProps = {
-		/** Sheet position: 'left' | 'right' | 'bottom' (default: 'right') */
-		'placement'?: NLDDSheet['placement'];
+		/** Custom width for side sheets (left/right) as a CSS length (e.g. '480px', '32rem'). Applied from the md breakpoint up; ignored on sm (bottom sheet) and for `placement="bottom"`. Clamped to `100vw - 2 * inset` so the sheet always fits. */
+		'width'?: NLDDSheet['width'];
 		/** Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+. */
 		'height'?: NLDDSheet['height'];
-		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
+		/** Sheet position: 'left' | 'right' | 'bottom' (default: 'right') */
+		'placement'?: NLDDSheet['placement'];
+		/** Accessible name for the dialog, forwarded as aria-label. Unset, the sheet takes the text of the nldd-top-title-bar inside it, and without one it is called 'Venster'. */
 		'accessible-label'?: NLDDSheet['accessibleLabel'];
-		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
+		/** Accessible name for the dialog, forwarded as aria-label. Unset, the sheet takes the text of the nldd-top-title-bar inside it, and without one it is called 'Venster'. */
 		'accessibleLabel'?: NLDDSheet['accessibleLabel'];
-		/** Custom width for side sheets (left/right) as a CSS length (e.g. '480px', '32rem'). Applied from the md breakpoint up; ignored on sm (bottom sheet) and for `placement="bottom"`. Clamped to `100vw - 2 * inset` so the sheet always fits. */
-		'width'?: NLDDSheet['width'];
+		/** Whether the sheet is open. Set it to open or close the sheet, as an alternative to show() and hide(). The sheet clears it itself when it closes another way (Escape, the backdrop, the close button of its title bar), so bind it together with the close event. */
+		'open'?: NLDDSheet['open'];
 		/** Fired when the sheet is opened */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** Fired when the sheet is fully closed. Does not bubble: overlays nest, and a listener on one sheet asking about that sheet should not also hear the form it opened. */
+		/** Fired when the sheet is fully closed. Does not bubble: overlays nest, and a listener on one sheet asking about that sheet should not also hear the form it opened. The dismiss button of an nldd-top-title-bar inside it fires `dismiss`, which bubbles; this component catches that itself, closes and fires `close`. Listen to `close` alone, or one click runs your handler twice. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
@@ -2472,28 +2501,28 @@ declare module 'vue' {
 	type NLDDSidebarSectionProps = {
 		/** Body max-width: 'full' removes the constraint; any CSS length overrides the default. */
 		'width'?: NLDDSidebarSection['width'];
-		/** Sticky top inset on lg (CSS length; default = 16px). */
-		'sticky-top'?: NLDDSidebarSection['stickyTop'];
-		/** Sticky top inset on lg (CSS length; default = 16px). */
-		'stickyTop'?: NLDDSidebarSection['stickyTop'];
-		/** Sticky bottom inset on lg (CSS length; default = 16px). */
-		'sticky-bottom'?: NLDDSidebarSection['stickyBottom'];
-		/** Sticky bottom inset on lg (CSS length; default = 16px). */
-		'stickyBottom'?: NLDDSidebarSection['stickyBottom'];
 		/** Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'. */
 		'sidebar-label'?: NLDDSidebarSection['sidebarLabel'];
 		/** Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'. */
 		'sidebarLabel'?: NLDDSidebarSection['sidebarLabel'];
+		/** Override translation keys (sheet title fallback, dismiss label); unset keys fall back to Dutch. */
+		'translations'?: NLDDSidebarSection['translations'];
 		/** Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false. */
 		'no-collapse'?: NLDDSidebarSection['noCollapse'];
 		/** Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false. */
 		'noCollapse'?: NLDDSidebarSection['noCollapse'];
-		/** Override translation keys (sheet title fallback, dismiss label); unset keys fall back to Dutch. */
-		'translations'?: NLDDSidebarSection['translations'];
+		/** Sticky top inset on lg (CSS length; default = 16px). */
+		'sticky-top'?: NLDDSidebarSection['stickyTop'];
+		/** Sticky top inset on lg (CSS length; default = 16px). */
+		'stickyTop'?: NLDDSidebarSection['stickyTop'];
+		/** Sticky bottom inset on lg (CSS length; default = 16px). */
+		'sticky-bottom'?: NLDDSidebarSection['stickyBottom'];
+		/** Sticky bottom inset on lg (CSS length; default = 16px). */
+		'stickyBottom'?: NLDDSidebarSection['stickyBottom'];
 		/** Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome. */
 		'collapsed'?: NLDDSidebarSection['collapsed'];
 		'background'?: NLDDSidebarSection['background'];
-		'scheme'?: NLDDSidebarSection['scheme'];
+		'height'?: NLDDSidebarSection['height'];
 		'padding-block'?: NLDDSidebarSection['paddingBlock'];
 		'paddingBlock'?: NLDDSidebarSection['paddingBlock'];
 		'padding-top'?: NLDDSidebarSection['paddingTop'];
@@ -2518,7 +2547,6 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDSidebarSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDSidebarSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDSidebarSection['lgPaddingBottom'];
-		'height'?: NLDDSidebarSection['height'];
 		/** The sidebar sheet opened. */
 		'onOpen'?: (event: CustomEvent) => void;
 		/** The sidebar sheet closed. */
@@ -2540,8 +2568,8 @@ declare module 'vue' {
 		'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). */
-		'scheme'?: NLDDSimpleSection['scheme'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDSimpleSection['height'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
 		'padding-block'?: NLDDSimpleSection['paddingBlock'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
@@ -2574,8 +2602,6 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDSimpleSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDSimpleSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDSimpleSection['lgPaddingBottom'];
-		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
-		'height'?: NLDDSimpleSection['height'];
 	};
 
 	type NLDDSkipLinkProps = {
@@ -2645,16 +2671,16 @@ declare module 'vue' {
 	};
 
 	type NLDDSplitViewPaneProps = {
-		/** The pane has content (default: false) */
-		'has-content'?: NLDDSplitViewPane['hasContent'];
-		/** The pane has content (default: false) */
-		'hasContent'?: NLDDSplitViewPane['hasContent'];
+		/** Use a tinted background color (cascades to descendants) */
+		'background'?: NLDDSplitViewPane['background'];
 		/** Hide the back button (set automatically by the split view) */
 		'hide-back'?: NLDDSplitViewPane['hideBack'];
 		/** Hide the back button (set automatically by the split view) */
 		'hideBack'?: NLDDSplitViewPane['hideBack'];
-		/** Use a tinted background color (cascades to descendants) */
-		'background'?: NLDDSplitViewPane['background'];
+		/** The pane has content (default: false) */
+		'has-content'?: NLDDSplitViewPane['hasContent'];
+		/** The pane has content (default: false) */
+		'hasContent'?: NLDDSplitViewPane['hasContent'];
 	};
 
 	type NLDDStackedSplitViewProps = {
@@ -2673,7 +2699,7 @@ declare module 'vue' {
 		'href'?: NLDDStatusBar['href'];
 		/** Link target (e.g. '_blank'); only used with href */
 		'target'?: NLDDStatusBar['target'];
-		/** Link rel; defaults to 'noopener noreferrer' with target='_blank' */
+		/** Link rel, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set */
 		'rel'?: NLDDStatusBar['rel'];
 		/** Makes the whole bar a button; ignored when href is set */
 		'button'?: NLDDStatusBar['button'];
@@ -2847,10 +2873,10 @@ declare module 'vue' {
 		'accessible-label'?: NLDDTable['accessibleLabel'];
 		/** Accessible name for the table. Strongly recommended — role="table" needs a name. A missing label is DEV-warned and a generic fallback name is used. */
 		'accessibleLabel'?: NLDDTable['accessibleLabel'];
-		/** Opt into row selection: body rows expose aria-selected (true/false). Without it, rows omit aria-selected so a non-selectable table isn't announced as selectable. */
-		'selectable'?: NLDDTable['selectable'];
 		/** Override translation keys; unset keys fall back to Dutch */
 		'translations'?: NLDDTable['translations'];
+		/** Opt into row selection: body rows expose aria-selected (true/false). Without it, rows omit aria-selected so a non-selectable table isn't announced as selectable. */
+		'selectable'?: NLDDTable['selectable'];
 	};
 
 	type NLDDTableRowProps = {
@@ -2859,6 +2885,8 @@ declare module 'vue' {
 	};
 
 	type NLDDTagProps = {
+		/** What is visible: 'text' | 'icon' | 'icon-and-text'. Unset → detected from which of text/icon is present. */
+		'variant'?: NLDDTag['variant'];
 		/** 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 size: 'sm' | 'md' (default: 'md') */
@@ -2867,8 +2895,6 @@ declare module 'vue' {
 		'text'?: NLDDTag['text'];
 		/** Icon before the text */
 		'icon'?: NLDDTag['icon'];
-		/** What is visible: 'text' | 'icon' | 'icon-and-text'. Unset → detected from which of text/icon is present. */
-		'variant'?: NLDDTag['variant'];
 		/** Accessible label for screen readers. Use this on icon-only tags without visible text. */
 		'accessible-label'?: NLDDTag['accessibleLabel'];
 		/** Accessible label for screen readers. Use this on icon-only tags without visible text. */
@@ -2921,12 +2947,12 @@ declare module 'vue' {
 		'verticalAlignment'?: NLDDTextCell['verticalAlignment'];
 		/** Main text content. Supports **bold** syntax for inline bold segments. Falls back to default slot. */
 		'text'?: NLDDTextCell['text'];
-		/** Optional overline text displayed above the main content. Supports **bold**. Falls back to `overline` slot. */
-		'overline'?: NLDDTextCell['overline'];
 		/** Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot. */
 		'supporting-text'?: NLDDTextCell['supportingText'];
 		/** Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot. */
 		'supportingText'?: NLDDTextCell['supportingText'];
+		/** Optional overline text displayed above the main content. Supports **bold**. Falls back to `overline` slot. */
+		'overline'?: NLDDTextCell['overline'];
 		/** Query substring to bold-highlight across text fields. Empty = no marking. */
 		'query'?: NLDDTextCell['query'];
 		/** 'match' | 'predictive' (default: 'predictive') */
@@ -3137,12 +3163,12 @@ declare module 'vue' {
 	};
 
 	type NLDDTimelineTrackCellProps = {
+		/** What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color */
+		'variant'?: NLDDTimelineTrackCell['variant'];
 		/** How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below */
 		'status'?: NLDDTimelineTrackCell['status'];
 		/** How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps */
 		'size'?: NLDDTimelineTrackCell['size'];
-		/** What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color */
-		'variant'?: NLDDTimelineTrackCell['variant'];
 		/** The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there */
 		'direction'?: NLDDTimelineTrackCell['direction'];
 		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `variant="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
@@ -3164,8 +3190,20 @@ declare module 'vue' {
 	type NLDDTitleProps = {
 		/** Visual size of the title: 1–6 (default: 3) */
 		'size'?: NLDDTitle['size'];
-		/** 'content' (the default) takes the system's own content colors. 'inherit' lets the title follow the text color of the surface instead (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. */
+		/** 'content' (the default) takes the system's own content colors. 'inherit' lets the title follow the text color of the surface instead (for colored areas such as the filled categories); overline and supporting-text get the same color at a lowered opacity. */
 		'color'?: NLDDTitle['color'];
+		/** Title text. Content in the default slot takes its place. */
+		'text'?: NLDDTitle['text'];
+		/** Text below the title. Content in the supporting-text slot takes its place. */
+		'supporting-text'?: NLDDTitle['supportingText'];
+		/** Text below the title. Content in the supporting-text slot takes its place. */
+		'supportingText'?: NLDDTitle['supportingText'];
+		/** Text above the title. Content in the overline slot takes its place. */
+		'overline'?: NLDDTitle['overline'];
+		/** Renders text as h1–h6; absent renders a p, for a title that is not a heading. */
+		'heading-level'?: NLDDTitle['headingLevel'];
+		/** Renders text as h1–h6; absent renders a p, for a title that is not a heading. */
+		'headingLevel'?: NLDDTitle['headingLevel'];
 	};
 
 	type NLDDTitleCellProps = {
@@ -3197,12 +3235,12 @@ declare module 'vue' {
 		'verticalAlignment'?: NLDDTitleCell['verticalAlignment'];
 		/** Title text content. Supports **bold** syntax for inline bold segments. Falls back to default slot. */
 		'text'?: NLDDTitleCell['text'];
-		/** Optional overline text displayed above the title. Supports **bold**. Falls back to `overline` slot. */
-		'overline'?: NLDDTitleCell['overline'];
 		/** Optional supporting text displayed below the title. Supports **bold**. Falls back to `supporting-text` slot. */
 		'supporting-text'?: NLDDTitleCell['supportingText'];
 		/** Optional supporting text displayed below the title. Supports **bold**. Falls back to `supporting-text` slot. */
 		'supportingText'?: NLDDTitleCell['supportingText'];
+		/** Optional overline text displayed above the title. Supports **bold**. Falls back to `overline` slot. */
+		'overline'?: NLDDTitleCell['overline'];
 		/** Heading level for the title element: 1–6 (default: none, renders a <p>) */
 		'heading-level'?: NLDDTitleCell['headingLevel'];
 		/** Heading level for the title element: 1–6 (default: none, renders a <p>) */
@@ -3287,20 +3325,22 @@ declare module 'vue' {
 		'text'?: NLDDToken['text'];
 		/** Control type (default: 'none') */
 		'control'?: NLDDToken['control'];
-		/** Reflects whether the token's menu is open (control="menu"); managed by the token. */
-		'expanded'?: NLDDToken['expanded'];
-		/** Disabled state */
-		'disabled'?: NLDDToken['disabled'];
-		/** Accessible label for the dismiss button (default: 'Verwijder') */
+		/** Accessible label for the dismiss button. Unset, it names the token: `Verwijder "{text}"`, so a row of tokens does not read as a row of identical buttons. */
 		'dismiss-text'?: NLDDToken['dismissText'];
-		/** Accessible label for the dismiss button (default: 'Verwijder') */
+		/** Accessible label for the dismiss button. Unset, it names the token: `Verwijder "{text}"`, so a row of tokens does not read as a row of identical buttons. */
 		'dismissText'?: NLDDToken['dismissText'];
-		/** Accessible label for the menu button (default: 'Toon opties') */
+		/** Accessible label for the menu button. Unset, it is `Toon opties voor "{text}"`. */
 		'menu-text'?: NLDDToken['menuText'];
-		/** Accessible label for the menu button (default: 'Toon opties') */
+		/** Accessible label for the menu button. Unset, it is `Toon opties voor "{text}"`. */
 		'menuText'?: NLDDToken['menuText'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDToken['translations'];
 		/** Inside a roving-focus container (e.g. nldd-token-field): the host is the single tab stop, so the trailing control is not separately tabbable. */
 		'roving'?: NLDDToken['roving'];
+		/** Reflects whether the token's menu is open (control="menu"); managed by the token. */
+		'expanded'?: NLDDToken['expanded'];
+		/** Disabled state */
+		'disabled'?: NLDDToken['disabled'];
 		/** When the dismiss button is clicked */
 		'onDismiss'?: (event: CustomEvent) => void;
 	};
@@ -3386,18 +3426,6 @@ 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. */
-		'supporting-text'?: NLDDToolbarTitle['supportingText'];
-		/** Secondary supporting text shown below the title. */
-		'supportingText'?: NLDDToolbarTitle['supportingText'];
-		/** Text alignment: 'left' | 'center' (default: 'left'). */
-		'align'?: NLDDToolbarTitle['align'];
 		/** Preferred (fluid) width as a CSS length or percentage; the title grows toward it and shrinks to min-width. */
 		'width'?: NLDDToolbarTitle['width'];
 		/** Minimum width as a CSS length (default: '0', so the title shrink-wraps its content and the next element sits against it). */
@@ -3408,6 +3436,18 @@ 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'];
+		/** Text alignment: 'left' | 'center' (default: 'left'). */
+		'align'?: NLDDToolbarTitle['align'];
+		/** Title text. */
+		'text'?: NLDDToolbarTitle['text'];
+		/** Secondary supporting text shown below the title. */
+		'supporting-text'?: NLDDToolbarTitle['supportingText'];
+		/** Secondary supporting text shown below the title. */
+		'supportingText'?: NLDDToolbarTitle['supportingText'];
+		/** 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'];
 		/** Override translation keys (the new-tab announcement); unset keys fall back to Dutch. */
 		'translations'?: NLDDToolbarTitle['translations'];
 	};
@@ -3472,12 +3512,16 @@ declare module 'vue' {
 	};
 
 	type NLDDTopTitleBarProps = {
-		/** Title of the bar, rendered as the h1 in the title group. */
+		/** Title of the bar, rendered as the heading in the title group. */
 		'text'?: NLDDTopTitleBar['text'];
-		/** Subtitle under the title. */
+		/** Text under the title. */
 		'supporting-text'?: NLDDTopTitleBar['supportingText'];
-		/** Subtitle under the title. */
+		/** Text under the title. */
 		'supportingText'?: NLDDTopTitleBar['supportingText'];
+		/** Heading level of the title: 1–6 (default: 1). Lower it where the bar is not the top of the page, such as a pane beside content that already has its h1. */
+		'heading-level'?: NLDDTopTitleBar['headingLevel'];
+		/** Heading level of the title: 1–6 (default: 1). Lower it where the bar is not the top of the page, such as a pane beside content that already has its h1. */
+		'headingLevel'?: NLDDTopTitleBar['headingLevel'];
 		/** Id of the element whose top edge triggers the compact state on scroll. Without it the state is static (see above). */
 		'collapse-anchor'?: NLDDTopTitleBar['collapseAnchor'];
 		/** Id of the element whose top edge triggers the compact state on scroll. Without it the state is static (see above). */
@@ -3505,8 +3549,8 @@ declare module 'vue' {
 		'width'?: NLDDTwoThirdsOneThirdSection['width'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDTwoThirdsOneThirdSection['background'];
-		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
-		'scheme'?: NLDDTwoThirdsOneThirdSection['scheme'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDTwoThirdsOneThirdSection['height'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
 		'padding-block'?: NLDDTwoThirdsOneThirdSection['paddingBlock'];
 		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
@@ -3539,8 +3583,6 @@ declare module 'vue' {
 		'lgPaddingTop'?: NLDDTwoThirdsOneThirdSection['lgPaddingTop'];
 		'lg-padding-bottom'?: NLDDTwoThirdsOneThirdSection['lgPaddingBottom'];
 		'lgPaddingBottom'?: NLDDTwoThirdsOneThirdSection['lgPaddingBottom'];
-		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
-		'height'?: NLDDTwoThirdsOneThirdSection['height'];
 	};
 
 	type NLDDValidationItemProps = {
@@ -3576,42 +3618,44 @@ declare module 'vue' {
 	};
 
 	type NLDDWindowProps = {
-		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
-		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
-		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
-		'noLightDismiss'?: NLDDWindow['noLightDismiss'];
-		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
-		'accessible-label'?: NLDDWindow['accessibleLabel'];
-		/** (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window. */
-		'accessibleLabel'?: NLDDWindow['accessibleLabel'];
-		/** Override translation keys; unset keys fall back to the Dutch default. */
-		'translations'?: NLDDWindow['translations'];
+		/** Color scheme (default 'inherit'). */
+		'scheme'?: NLDDWindow['scheme'];
+		/** CSS width (default: var(--components-window-default-width)) */
+		'width'?: NLDDWindow['width'];
+		/** CSS height (default: content height) */
+		'height'?: NLDDWindow['height'];
 		/** CSS top position of the top edge (e.g. '0', '100px') */
 		'top'?: NLDDWindow['top'];
-		/** CSS left position of the left edge */
-		'left'?: NLDDWindow['left'];
 		/** CSS right value */
 		'right'?: NLDDWindow['right'];
 		/** CSS bottom value */
 		'bottom'?: NLDDWindow['bottom'];
+		/** CSS left position of the left edge */
+		'left'?: NLDDWindow['left'];
 		/** Centers both axes on the viewport. Overridable per axis: `centered top="0"` is horizontally centered, top aligned. Mirrors CSS `place-items: center` with `align-items`/`justify-items` overrides. */
 		'centered'?: NLDDWindow['centered'];
-		/** CSS width (default: var(--components-window-default-width)) */
-		'width'?: NLDDWindow['width'];
-		/** CSS height (default: content height) */
-		'height'?: NLDDWindow['height'];
-		/** Color scheme (default 'inherit'). */
-		'scheme'?: NLDDWindow['scheme'];
+		/** Accessible name (aria-label). Unset, the window takes the text of the nldd-top-title-bar inside it, and without one the i18n default ('Venster'). Each window needs a unique, descriptive name, from either. */
+		'accessible-label'?: NLDDWindow['accessibleLabel'];
+		/** Accessible name (aria-label). Unset, the window takes the text of the nldd-top-title-bar inside it, and without one the i18n default ('Venster'). Each window needs a unique, descriptive name, from either. */
+		'accessibleLabel'?: NLDDWindow['accessibleLabel'];
+		/** Override translation keys; unset keys fall back to the Dutch default. */
+		'translations'?: NLDDWindow['translations'];
+		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
+		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
+		/** A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working. */
+		'noLightDismiss'?: NLDDWindow['noLightDismiss'];
+		/** Whether the window is open. Set it to open or close the window, as an alternative to show() and hide(). The window clears it itself when it closes another way (Escape, the backdrop, the close button of its title bar), so bind it together with the close event. */
+		'open'?: NLDDWindow['open'];
 		/** When the window opens */
 		'onOpen'?: (event: CustomEvent) => void;
-		/** When the window has fully closed. Does not bubble: overlays can sit inside each other, and a listener on one window should not also hear the form that opened it. */
+		/** When the window has fully closed. Does not bubble: overlays can sit inside each other, and a listener on one window should not also hear the form that opened it. The dismiss button of an nldd-top-title-bar inside it fires `dismiss`, which bubbles; this component catches that itself, closes and fires `close`. Listen to `close` alone, or one click runs your handler twice. */
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
 	export interface GlobalComponents {
 		/** Layout placeholder that fills its parent and centers an indeterminate activity indicator. By default the indicator is held back for 1000ms so brief loading states don't flash; once the delay passes it fades in. Set `timing="instant"` to skip the delay (the fade-in still plays) — this is what embedding components such as `nldd-button` use for their loading state. The default indicator is a simple icon-sized circle that follows the shared `--context-content-color` channel (set by list-item / table / menu on their content), falling back to `currentColor` wherever that channel is unset (buttons, rich-text, standalone) — so a spinner inside a cell tracks the row's state-aware content color, while embedders relying on currentColor are unaffected. An optional label sits below (hidden unless `show-text` is set). Drop a `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the `indicator` slot to override it. Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled icon glyph has), so a standalone spinner lines up with an icon or an `icon-aligned` `nldd-avatar` on the same grid — no extra option needed (unlike `nldd-avatar`, which fills edge-to-edge and opts in via `icon-aligned`). Overlay mode: put content in the default slot and the indicator wraps it — it becomes a `position: relative` container, renders the spinner over a dimming backdrop (opt out with `no-backdrop`), and makes the content `inert` so its controls can't be focused or clicked. Toggle loading with `complete` (`?complete=${!isLoading}`). With no slotted content it stays the standalone placeholder described above. Reconnect behavior: every `connectedCallback` resets the timer and hides the indicator again. If a consumer toggles the element via a conditional render (remove + re-insert) the indicator disappears and re-fades after another delay. Keep the element mounted and toggle visibility / `hidden` instead if you want the timer to run only once. Accessibility: while connected and not `complete` the host is a polite live region (`role="status"`). The label (`text`, or the translated "Laden" fallback) always renders as the region's content — visually hidden when `show-text` is off (the default) — so assistive tech announces the loading state when the indicator appears. Set `complete` (or unmount) to clear it. */
 		'nldd-activity-indicator': DefineComponent<NLDDActivityIndicatorProps>;
-		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. Set background="tinted" to give the whole application a tinted background. All descendants read --context-parent-background-color via --_background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. 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. */
+		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. The document font comes from the package stylesheet (`@nldd/design-system/styles`), not from this component: it gives `body` the body font and content color as soon as an app-view is on the page, inside `@layer reset` so any rule of your own wins. Import only the tokens (`/styles/tokens`) and text you write in the light DOM keeps the browser default. 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>;
 		/** 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>;
@@ -3635,11 +3679,11 @@ declare module 'vue' {
 		/** A horizontal container for grouping buttons with a neutral background. Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements. Renders nldd-button-bar-divider elements as internal dividers — no separate component needed. */
 		'nldd-button-bar': DefineComponent<NLDDButtonBarProps>;
 		'nldd-button-bar-divider': DefineComponent<anonymous_0Props>;
-		/** A container for grouping related buttons together, either horizontally or vertically. */
+		/** A container for grouping related buttons together, in a row or stacked. `auto`, the default, is a row on a container wide enough for one and a stack over the full width below the sm breakpoint, where two labels beside each other leave no room for either. The group is its own container, so it follows the width it was given rather than the width of the window: the same group is a row in a page and a stack in a sheet beside it. Being a container has one consequence to know: the width has to come from the parent, since a container may not size itself from what is inside it. In a parent that shrink-wraps its content (an inline-flex box, a float, a table cell, a flex item at `width: auto`) the group measures zero and its buttons are invisible. It says so once in development. Give the group or that parent a width. A stack fills the width with its buttons, except an `nldd-icon-button`, which keeps its own size: a bar with a single glyph in the middle is not a bigger target, only a wider one. */
 		'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
 		/** A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable. */
 		'nldd-card': DefineComponent<NLDDCardProps>;
-		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
+		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. For more than a line of text, such as paragraphs or markup, put an `nldd-rich-text` in it rather than loose text in the row. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
 		'nldd-cell': DefineComponent<NLDDCellProps>;
 		'nldd-checkbox': DefineComponent<NLDDCheckboxProps>;
 		/** A checkbox with an inline label for use in forms. Form-associated: participates in native form submission under `name` with `value` when checked (the inner nldd-checkbox sits in the shadow root and never joins the consumer's form; the field submits on its behalf). */
@@ -3648,11 +3692,11 @@ declare module 'vue' {
 		'nldd-code-editor': DefineComponent<NLDDCodeEditorProps>;
 		/** A read-only block of code/text built on a non-editable CodeMirror 6 view. Visually pairs with nldd-code-editor (same engine, same token palette). Whitespace is preserved; long lines scroll horizontally by default. Set `wrap` to break long lines onto the next visual line. Set `language` to one of the supported grammars (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python) to highlight the content. Without `language` the content renders plain. Grammars are loaded lazily on first use, so a page that never sets `language` ships zero grammar code. Token colors are the `--components-code-viewer-token-*` custom properties (shared with the editor via the CodeMirror highlight style). Override them per-instance to swap the theme. */
 		'nldd-code-viewer': DefineComponent<NLDDCodeViewerProps>;
-		/** A container for displaying collections of items. Supports grid, stack, lanes and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view. */
+		/** A container for displaying collections of items. Supports grid, stack, lanes and horizontal scroll layouts. Use it for a set of equal blocks, usually `nldd-card`s, instead of a CSS grid of your own: the collection sets the columns from `item-width` and the available width, and the gap per breakpoint. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view. */
 		'nldd-collection': DefineComponent<NLDDCollectionProps>;
 		/** A text input with autocomplete dropdown via nldd-menu. Add a slotted nldd-menu with nldd-menu-item children to provide options. The slotted nldd-menu keeps its default focus behavior (menu container receives focus) so that typing keeps focus on the input. The picker button moves focus to the menu explicitly on activation. Note: Only nldd-menu-item type="button" is supported. Radio and checkbox types are not supported in this context. */
 		'nldd-combo-box': DefineComponent<NLDDComboBoxProps>;
-		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that nldd-collection's lanes falls back to its own grid rather than to multicol: that component pages, and multicol redistributes the whole set every time load-more adds to it. */
+		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. The container owns the space around and between its children; use `nldd-spacer` only for a one-off gap between two different things. A block that is placed in more than one context gets no padding of its own: whoever places it wraps it in a container, so the inset is not counted twice. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that nldd-collection's lanes falls back to its own grid rather than to multicol: that component pages, and multicol redistributes the whole set every time load-more adds to it. */
 		'nldd-container': DefineComponent<NLDDContainerProps>;
 		/** A text field for a date, with an optional calendar in a popover. The value is always ISO (yyyy-mm-dd); on screen it shows the Dutch notation (dd-mm-yyyy). Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. */
 		'nldd-date-field': DefineComponent<NLDDDateFieldProps>;
@@ -3671,19 +3715,20 @@ declare module 'vue' {
 		'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
 		/** A file picker that reads as one control: an nldd-button flush in the corner of a tinted surface, the chosen file next to it, and a dismiss button to clear it again. It wraps a hidden native `<input type="file">`, which is what makes the picker open at all — a file dialog only opens from a user gesture on a real input. The surface deliberately does not look like an input field. A border with field semantics promises you can type into it; here you can only press a button, so it uses button and surface colors instead of `--semantics-input-fields-*`. The button keeps its own tinted background and therefore sits a shade darker in the surface, which is what marks it as the thing to press. Several files are summarized, not listed: "3 bestanden" with a single cross that clears all of them. Every pick replaces the whole FileList, and rebuilding it to add or drop one file means going through DataTransfer, which does not deduplicate (even the same File object twice yields two entries) — and a File has no id, so deduplicating would come down to guessing from name, size and last-modified. A list with a cross per file would promise an edit the platform does not support. A page that does want to show the files renders its own list from the `File[]` in the change event. */
 		'nldd-file-field': DefineComponent<NLDDFileFieldProps>;
-		/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit), required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - No shadowRoot: all children live in the light DOM (inside the inner <form>) - No Lit: a plain HTMLElement with manual attribute mirroring - **Requires a global stylesheet import**: the vertical rhythm rules live in `dist/css/form.css` (or `global.css`), not in a component-specific shadow stylesheet. Import it as part of your app's global CSS bundle. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute mirroring, and skips the migration. Children stay where your framework puts them, so there is no DOM shuffling to conflict with React/Vue/Angular reconciliation. **Framework interop:** In auto-wrap mode every direct child is moved into the inner form through a MutationObserver. That works fine for most React/Vue use cases, because frameworks only mutate the DOM when their virtual DOM changes. For edge cases (animation libraries that track DOM position, SSR hydration mismatches, frameworks that actively check sibling positions) use **user-provided form** mode instead. For programmatic manipulation, use the `form` getter so you work with the inner `<form>` element directly: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skips the migration overhead */
+		/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit), required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - No shadowRoot: all children live in the light DOM (inside the inner <form>) - No Lit: a plain HTMLElement with manual attribute mirroring - **Requires a global stylesheet import**: the vertical rhythm rules live in `dist/css/form.css` (or `global.css`), not in a component-specific shadow stylesheet. Import it as part of your app's global CSS bundle. **When a field turns red:** on submit the form marks every control the browser rejects with `invalid`, and clears it again once the value passes. Setting `invalid` yourself is fine, but do it on submit, not while someone is still typing, or a field turns red over a value that is not finished yet. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute mirroring, and skips the migration. Children stay where your framework puts them, so there is no DOM shuffling to conflict with React/Vue/Angular reconciliation. **Framework interop:** In auto-wrap mode every direct child is moved into the inner form through a MutationObserver. That works fine for most React/Vue use cases, because frameworks only mutate the DOM when their virtual DOM changes. For edge cases (animation libraries that track DOM position, SSR hydration mismatches, frameworks that actively check sibling positions) use **user-provided form** mode instead. For programmatic manipulation, use the `form` getter so you work with the inner `<form>` element directly: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skips the migration overhead */
 		'nldd-form': DefineComponent<NLDDFormProps>;
-		/** A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment="right"` or `"left"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
+		/** A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment="right"` or `"left"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Bewaar"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
 		'nldd-form-actions': DefineComponent<NLDDFormActionsProps>;
+		/** A field around one input: its label, supporting label, optional badge, validation and help text. It finds the input among its children, hands it the label as its accessible name and gives it an id, so you write no `for` or `id` yourself. Mark the optional fields with `optional`, not the required ones; the design guidelines say why. Put the requirements on a value in an nldd-validation-list inside the same field. What only your server knows, such as a password found in a breach, the app names in `unmet` on the input itself: see nldd-validation-list. */
 		'nldd-form-field': DefineComponent<NLDDFormFieldProps>;
 		'nldd-form-field-help-text': DefineComponent<NLDDFormFieldHelpTextProps>;
-		/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit). The light-DOM render works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> + <legend> is not reliably announced as the group label for slotted controls. A native fieldset/legend in the light DOM works correctly across all AT/browser combinations. **Differs from shadow components:** - No shadowRoot: all children live in the light DOM (inside the rendered <fieldset>). - No Lit: a plain HTMLElement with manual DOM mutation. - **Requires a global stylesheet import**: `dist/css/form-section.css` (or `global.css`). Form-section has no shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__subtitle">Subtitle</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: the title renders as a `<legend>`. Semantically that is a **group label**, not a heading. Screen readers announce it when the user enters the fieldset, but users jumping through headings with the H key skip it. Visually it looks like a heading, so use this component for *form grouping*, not as page structure. For real page headings, use a separate heading element above the form. **Supporting-text length**: the subtitle sits as a `<span>` inside the `<legend>` so a screen reader reads it along as the group label. Side effect: on every field entry within the section, the whole legend (title + subtitle) is spoken again. Keep `supporting-text` short (roughly 80 characters or less) and use it to introduce the group ("Vul je adresgegevens in"), not for detailed instructions. For a longer explanation on one specific field, use `nldd-form-field-help-text` on that field. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
+		/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit). The light-DOM render works around an NVDA + Firefox a11y bug where a shadow-DOM <fieldset> + <legend> is not reliably announced as the group label for slotted controls. A native fieldset/legend in the light DOM works correctly across all AT/browser combinations. **Differs from shadow components:** - No shadowRoot: all children live in the light DOM (inside the rendered <fieldset>). - No Lit: a plain HTMLElement with manual DOM mutation. - **Requires a global stylesheet import**: `dist/css/form-section.css` (or `global.css`). Form-section has no shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__supporting-text">Supporting text</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: the title renders as a `<legend>`. Semantically that is a **group label**, not a heading. Screen readers announce it when the user enters the fieldset, but users jumping through headings with the H key skip it. Visually it looks like a heading, so use this component for *form grouping*, not as page structure. For real page headings, use a separate heading element above the form. **Supporting-text length**: the supporting text sits as a `<span>` inside the `<legend>` so a screen reader reads it along as the group label. Side effect: on every field entry within the section, the whole legend (title + supporting text) is spoken again. Keep `supporting-text` short (roughly 80 characters or less) and use it to introduce the group ("Vul je adresgegevens in"), not for detailed instructions. For a longer explanation on one specific field, use `nldd-form-field-help-text` on that field. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
 		'nldd-form-section': DefineComponent<NLDDFormSectionProps>;
 		/** A section that spans the full width without horizontal padding. Useful for background colors, images, or other content that runs edge to edge. Vertical padding and gap adjust via container queries. */
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
 		/** A page header with a media area and a text panel (the main) that can stand in six positions. Every area is rectangular. With `main-width="full"` the media area sits as its own strip above or below the panel rather than behind it. On mobile the media always stacks above the full-width panel. Without media the main fills the whole area; with `main-background="base"` that area gets a border so it stays visible on the base surface. `main-background` gives the panel a surface color from the filled categories. Those carry a pure white or black content color along, so components with `color="inherit"` (title, rich-text) are guaranteed to keep their contrast. */
 		'nldd-hero': DefineComponent<NLDDHeroProps>;
-		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the design system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
+		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
 		'nldd-icon': DefineComponent<NLDDIconProps>;
 		'nldd-icon-button': DefineComponent<NLDDIconButtonProps>;
 		/** A cell component for displaying icons in lists with configurable alignment and size. Set `icon` to render an `nldd-icon` by name, or slot custom content as an escape hatch for non-standard iconography. */
@@ -3702,7 +3747,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. - `radiogroup` — `role="radiogroup"`, for a set of `nldd-list-item radio` rows: one choice, laid out as rows so each option can carry a count or a second line. The rows step out of the accessibility tree themselves (`role="none"`), so the radios are the group's own children. The arrows move focus here and activation checks, rather than the selection following focus as it does in `nldd-radio-button-group`. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role="list"`, `role="listitem"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. A list you walk through answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. It follows the type, which you can see before you touch a key. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
 		'nldd-list': DefineComponent<NLDDListProps>;
-		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
+		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. With one action, make the row itself the control (`href`, `button`, `checkbox` or `radio`): the whole row is then one hit area. With two or more, give each its own `nldd-list-item-segment` and leave the row without an action of its own. Both at once nests a control inside a control, and the item warns about that in development. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot an `nldd-checkbox decorative` (or any glyph) before the text: it only shows the state, since 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 segment inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one segment — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segment takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot a segment sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segment sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type="listbox"` list the segment renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts. */
 		'nldd-list-item-segment': DefineComponent<NLDDListItemSegmentProps>;
@@ -3718,12 +3763,12 @@ declare module 'vue' {
 		'nldd-menu-group': DefineComponent<NLDDMenuGroupProps>;
 		/** A single item within an nldd-menu. */
 		'nldd-menu-item': DefineComponent<NLDDMenuItemProps>;
-		/** A modal window with overlay backdrop, based on the native <dialog> element. Internally renders an <nldd-inline-dialog> for the visual structure. */
+		/** A modal window with overlay backdrop, based on the native <dialog> element. Internally renders an <nldd-inline-dialog> for the visual structure. Open and close it with `open`, bound to your state together with the close event: the dialog clears `open` itself when the user closes it. show() and hide() do the same for code without a binding. Keep the dialog in the DOM rather than mounting it when it opens, or the animations are skipped. */
 		'nldd-modal-dialog': DefineComponent<NLDDModalDialogProps>;
 		'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. */
+		/** 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. When they stop fitting, panes drop in a fixed order: the inspector goes first, then the primary sidebar collapses into the secondary sidebar. If that still does not fit, the view stacks and shows one pane at a time: main when it has content, otherwise the secondary sidebar, otherwise the primary sidebar. Use <code>nldd-split-view-pane</code> as direct children for automatic back button handling. */
 		'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. A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or nldd-modal-dialog paints in the browser's top layer, above the whole page and out of reach of any z-index, and while one is open everything outside it is inert. So the region goes in: into the topmost overlay that is open, and back down as they close. A notification already on screen travels with it, and one raised from inside a sheet is readable and reachable where it is raised. 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. */
+		/** 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 area: 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. A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or nldd-modal-dialog paints in the browser's top layer, above the whole page and out of reach of any z-index, and while one is open everything outside it is inert. So the area goes in: into the topmost overlay that is open, and back down as they close. A notification already on screen travels with it, and one raised from inside a sheet is readable and reachable where it is raised. 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 area, 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>;
@@ -3731,7 +3776,7 @@ declare module 'vue' {
 		'nldd-one-half-one-half-section': DefineComponent<NLDDOneHalfOneHalfSectionProps>;
 		/** A section with a 1/3 sidebar on the left and 2/3 main content on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
 		'nldd-one-third-two-thirds-section': DefineComponent<NLDDOneThirdTwoThirdsSectionProps>;
-		/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling, padded by the measured header height. That padding freezes once you scroll, so a collapsing bar cannot drag the content up under the cursor. In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. */
+		/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling, padded by the measured header height. That padding freezes once you scroll, so a collapsing bar cannot drag the content up under the cursor. In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. A page carries the landmarks of a document: its header is the banner, its content the main landmark, its footer the contentinfo. A document has one of each, so a page that sits beside another one cannot have them. Such a page renders a section and a plain div instead, which drops all three at once: a header inside sectioning content is no longer a banner. With `accessible-label` that section is a named region, so there is still one landmark to jump to; without a name it is no landmark at all, which beats an unnamed one. `landmarks` says which of the two a page is, and `auto` (the default) reads it off where the page sits: - in an overlay (nldd-sheet, nldd-modal-dialog, nldd-window, nldd-popover) a region, because the overlay is not the document; - in a pane of nldd-navigation-split-view, nldd-side-by-side-split-view or nldd-stacked-split-view a region, because those place pages beside each other; - anywhere else the page, including the `main` slot of an nldd-bar-split-view, which stacks bars around a single content area. So an app shell has no main until you say which pane holds the primary content, with `landmarks="page"` on that one page. Only the application knows which pane that is. Two pages that both render a main is invalid HTML, and the page says so in development. */
 		'nldd-page': DefineComponent<NLDDPageProps>;
 		/** The footer band at the bottom of a page. Hosts three optional rows in a fixed order: breadcrumbs (top), consumer-defined main content (middle), and a legal-bar (bottom). Dividers are drawn automatically between non-empty rows. Establishes its own container query (`page-footer-container`) so the responsive padding and gap react to the footer's own width, not the viewport. The host has `id="page-footer"` so a skip-link can target it directly. Use the sub-components `nldd-page-footer-legal-bar` and `nldd-page-footer-legal-bar-item` for the bottom row. */
 		'nldd-page-footer': DefineComponent<NLDDPageFooterProps>;
@@ -3743,7 +3788,7 @@ declare module 'vue' {
 		'nldd-pagination': DefineComponent<NLDDPaginationProps>;
 		/** A password input field with visibility toggle and validation states. */
 		'nldd-password-field': DefineComponent<NLDDPasswordFieldProps>;
-		/** 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. */
+		/** 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> To open it from your own state instead, bind `open` together with the close event: the popover clears `open` itself on light dismiss, Escape or a click on its anchor. It needs that anchor to open against. 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>;
@@ -3757,24 +3802,24 @@ declare module 'vue' {
 		'nldd-radio-button-field': DefineComponent<NLDDRadioButtonFieldProps>;
 		/** Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label. */
 		'nldd-radio-button-group': DefineComponent<NLDDRadioButtonGroupProps>;
-		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. Children are placed in three zones: text (headings, paragraphs, lists, blockquote, div/section) reads at the `main` size; media and tables (img, figure, video, iframe, table) get the `wide` accent; everything else, code blocks and every component, gets the full `full` span with `justify-self: start`, so the room is available without being forced. Overridable per child with `data-width="main" | "wide" | "full"`. In the left-aligned layout, wide and full read as a bleed to the right; with `centered` they are symmetrical. */
+		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. The rich text lays out its direct children in a grid: the vertical rhythm between headings, paragraphs and lists, and the width zones below, apply to those children only. A single wrapper `div` without `class`, `style`, `role` or `data-width`, as a markdown renderer or a component root produces it, is passed through with `display: contents`, so its children count as direct. Any other wrapper becomes a single grid item, and the paragraphs inside it lose their spacing. Children are placed in three zones: text (headings, paragraphs, lists, blockquote, div/section) reads at the `main` size; media and tables (img, figure, video, iframe, table) get the `wide` accent; everything else, code blocks and every component, gets the full `full` span with `justify-self: start`, so the room is available without being forced. Overridable per child with `data-width="main" | "wide" | "full"`. In the left-aligned layout, wide and full read as a bleed to the right; with `centered` they are symmetrical. */
 		'nldd-rich-text': DefineComponent<NLDDRichTextProps>;
 		/** A search input with a leading search icon, an optional dismiss button, and an optional search button. */
 		'nldd-search-field': DefineComponent<NLDDSearchFieldProps>;
 		/** A horizontal group of mutually exclusive (radio) or multi-select (checkbox) options. Exports both NLDDSegmentedControl and NLDDSegmentedControlItem. */
 		'nldd-segmented-control': DefineComponent<NLDDSegmentedControlProps>;
 		'nldd-segmented-control-item': DefineComponent<NLDDSegmentedControlItemProps>;
-		/** An overlay component that slides in from the side or bottom of the screen. Based on the native <dialog> element for built-in accessibility, focus management, and Escape key support. On small (sm) viewports the sheet always renders as a bottom sheet, regardless of the configured placement. Render the sheet at the document root (teleport/portal it to `document.body`), never inside a split view's content flow: as a slotted flex child it would steal pane height (see `nldd-split-view-pane`). */
+		/** An overlay component that slides in from the side or bottom of the screen. Based on the native <dialog> element for built-in accessibility, focus management, and Escape key support. On small (sm) viewports the sheet always renders as a bottom sheet, regardless of the configured placement. Render the sheet at the document root (teleport/portal it to `document.body`), never inside a split view's content flow: as a slotted flex child it would steal pane height (see `nldd-split-view-pane`). A sheet holds a whole nldd-page: an nldd-top-title-bar in its header slot, the content, and a footer when there are actions. The page behaves as it does anywhere else, with only the middle scrolling, and the text of the bar is also the sheet's accessible name. Do not build a header of your own. Open and close it with `open`, bound to your state together with the close event: the sheet clears `open` itself when the user closes it. show() and hide() do the same for code without a binding. Keep the sheet in the DOM rather than mounting it when it opens, or the animations are skipped. */
 		'nldd-sheet': DefineComponent<NLDDSheetProps>;
-		/** A horizontal split view with multiple equal panes side by side. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available width are automatically hidden. */
+		/** A horizontal split view with multiple equal panes side by side. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available width are automatically hidden, from right to left: `pane-1` is the last to go. Put the main content in `pane-1` and an inspector or detail in the last pane. */
 		'nldd-side-by-side-split-view': DefineComponent<NLDDSideBySideSplitViewProps>;
 		/** A page section with a left sidebar alongside the main content. - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets default to 16px; override with `sticky-top` / `sticky-bottom` so it clears other sticky page elements (e.g. a sticky header). - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed` attribute. The consumer owns the trigger: place any chrome (a button, a chosen-filters bar, …) wherever you want, show it only while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by reading `collapsed` / listening to `collapse-change`), and call `show()` / `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events. The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a "Sluit" button — overridable via the `sheet-top-title-bar` slot. The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the box (expanded) and the sheet (collapsed) so there is a single, never-duplicated copy — the light DOM (and its state) is preserved across the switch. The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the host), not the viewport — so a sidebar-section in a narrow column or a split-view pane collapses to the sheet just like one in a narrow viewport, and the sidebar never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow section then stacks the sidebar (full-width) above the main instead of using a sheet. Inherits block `padding` and `height` from PageSectionMixin. */
 		'nldd-sidebar-section': DefineComponent<NLDDSidebarSectionProps>;
-		/** A basic section with responsive padding and gap based on container size. Contains optional header and footer slots. The padding and spacing between slots adjust automatically via container queries. */
+		/** A basic section with responsive padding and gap based on container size. Contains optional header and footer slots. The padding and spacing between slots adjust automatically via container queries. Use one section per content block and repeat the section rather than building columns inside one: the section sets the reading width and the padding itself. For two columns there are nldd-one-half-one-half-section, nldd-two-thirds-one-third-section, nldd-one-third-two-thirds-section and nldd-sidebar-section. Give a section its surface with `background` instead of a background color of your own; that is how the components inside know which surface they are on. */
 		'nldd-simple-section': DefineComponent<NLDDSimpleSectionProps>;
 		/** Accessibility pattern that lets keyboard users skip past content. Wraps content in a default slot. Without href it focuses the first element after the skip link in the DOM (nextElementSibling). Make sure a focusable element follows the component, otherwise the skip link has no effect. */
 		'nldd-skip-link': DefineComponent<NLDDSkipLinkProps>;
-		/** Add explicit space between elements. Components in this design system have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
+		/** Add explicit space between elements. Components here have no margins of their own — all whitespace is set by a spacer. A spacer is fixed space between two different things. For padding around an area, or the gaps between the children of one area, use `nldd-container` with `padding` and `gap` instead. A `gap` sets one distance for every child, which is right while the children are of one kind: a row of buttons, a set of cards, the fields of a form. Put different kinds under each other and the right distance differs per seam, so set each one where it happens with a spacer. A heading over a list is the common case: the space under the heading should be smaller than the space above it, which keeps the heading with what it labels. A gap cannot tell the two apart, and evening them out reads as a strip of loose lines. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
 		'nldd-spacer': DefineComponent<NLDDSpacerProps>;
 		/** A cell component that provides fixed horizontal spacing within list items. */
 		'nldd-spacer-cell': DefineComponent<NLDDSpacerCellProps>;
@@ -3819,9 +3864,9 @@ declare module 'vue' {
 		'nldd-time-picker': DefineComponent<NLDDTimePickerProps>;
 		/** A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `variant="step"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the variant rather than to the content: every dot in a list is the same size, or the track would jump. */
 		'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
-		/** 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. */
+		/** A title bar with an optional overline, title, and supporting text on the left, and a slot at the end of the title line on the right. The title comes from `text`, with `heading-level` for its place in the heading structure. `size` is how it looks, `heading-level` what it is, and the two are set apart. `overline` and `supporting-text` go above and below it. Each of the three has a slot in the same place for content that is more than text, and a filled slot takes the place of the attribute. */
 		'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. */
+		/** A cell component for displaying a title with optional overline and supporting text 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>;
 		/** A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as "1 of 1" and stopped at by Tab. */
 		'nldd-toggle-button': DefineComponent<NLDDToggleButtonProps>;
@@ -3831,6 +3876,7 @@ declare module 'vue' {
 		'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>;
+		/** A row of controls that belong to a whole screen or pane, with an overflow menu for what does not fit. The toolbar measures itself: as the row runs out of room, items move into that menu, the lowest `priority` first, and items that share a priority move together. So the order in the HTML says where an item sits, and `priority` says how long it stays. Every item carries its own alternative for the menu, an nldd-menu-item in its `overflow` slot. Without one the action is simply gone once the item overflows, which on a wide screen you never see; the item warns about it in development. The toolbar's own `overflow` slot holds the actions that live in the menu at every width. */
 		'nldd-toolbar': DefineComponent<NLDDToolbarProps>;
 		'nldd-toolbar-item': DefineComponent<NLDDToolbarItemProps>;
 		'nldd-toolbar-title': DefineComponent<NLDDToolbarTitleProps>;
@@ -3842,10 +3888,11 @@ declare module 'vue' {
 		'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>;
+		/** One requirement of a value, with the rule that checks it. Give every item an id that names its field as well as its rule: an id has to be unique in the whole document, and `length` is the first thing three fields in one form will all reach for. Write the text as the requirement ("Minimaal 8 tekens"), not as the command ("Gebruik minimaal 8 tekens"): before a verdict it stands there as what the field wants, after one as what the value does not meet. */
 		'nldd-validation-item': DefineComponent<NLDDValidationItemProps>;
 		/** Nederlandse Digitale Dienst Validation List (Lit + TypeScript) Everything a value has to satisfy, in one list. A requirement you can state up front is an item with a rule, and it checks itself while you type. One only a server can decide is an item without a rule, and the app names it in `unmet` on the control. The list has two modes and `judging` is the switch. Before a verdict it shows its hints, which are the requirements of the field. After one it shows everything the value does not satisfy, and the hints are gone. It throws that switch itself the moment its control turns `invalid`, so when the field is judged is the consumer's decision, and the right moment is on submit. Hints are off by default. A phone number does not need its format spelled out before anyone has typed, while the rules for a password do. There are no checkmarks. The control already shows a validation icon of its own, and repeating that per line says the same thing three times. */
 		'nldd-validation-list': DefineComponent<NLDDValidationListProps>;
-		/** A floating window based on the native <dialog> element, positionable through CSS values. Always modal. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. */
+		/** A floating window based on the native <dialog> element, positionable through CSS values. Always modal. No header of its own: consumers use nldd-page with a sticky header inside for a title bar. The text of the nldd-top-title-bar in that header is also the window's accessible name. Open and close it with `open`, bound to your state together with the close event: the window clears `open` itself when the user closes it. show() and hide() do the same for code without a binding. Keep the window in the DOM rather than mounting it when it opens, or the animations are skipped. */
 		'nldd-window': DefineComponent<NLDDWindowProps>;
 	}
 }