@nldd/design-system 0.8.95 → 0.8.97

package/dist/types/vue.d.ts

@@ -11,7 +11,6 @@
 
 import type { DefineComponent } from 'vue';
 import type { NLDDActivityIndicator } from '@nldd/design-system/activity-indicator';
-import type { NLDDAppView } from '@nldd/design-system/app-view';
 import type { NLDDAvatar } from '@nldd/design-system/avatar';
 import type { NLDDAvatarGroup } from '@nldd/design-system/avatar-group';
 import type { NLDDBadge } from '@nldd/design-system/badge';
@@ -94,6 +93,7 @@ import type { NLDDSearchField } from '@nldd/design-system/search-field';
 import type { NLDDSegmentedControl } from '@nldd/design-system/segmented-control';
 import type { NLDDSegmentedControlItem } from '@nldd/design-system/segmented-control';
 import type { NLDDSheet } from '@nldd/design-system/sheet';
+import type { NLDDShell } from '@nldd/design-system/shell';
 import type { NLDDSideBySideSplitView } from '@nldd/design-system/side-by-side-split-view';
 import type { NLDDSidebarSection } from '@nldd/design-system/sidebar-section';
 import type { NLDDSimpleSection } from '@nldd/design-system/simple-section';
@@ -105,8 +105,9 @@ import type { NLDDSplitViewDivider } from '@nldd/design-system/split-view-divide
 import type { NLDDSplitViewPane } from '@nldd/design-system/split-view-pane';
 import type { NLDDStackedSplitView } from '@nldd/design-system/stacked-split-view';
 import type { NLDDStatusBar } from '@nldd/design-system/status-bar';
-import type { NLDDStepIndicator } from '@nldd/design-system/step-indicator';
-import type { NLDDStepIndicatorItem } from '@nldd/design-system/step-indicator';
+import type { NLDDStepBar } from '@nldd/design-system/step-bar';
+import type { NLDDStepBarItem } from '@nldd/design-system/step-bar';
+import type { NLDDStepCell } from '@nldd/design-system/step-cell';
 import type { NLDDStepper } from '@nldd/design-system/stepper';
 import type { NLDDSwitch } from '@nldd/design-system/switch';
 import type { NLDDSwitchField } from '@nldd/design-system/switch-field';
@@ -121,7 +122,6 @@ import type { NLDDTextEditor } from '@nldd/design-system/text-editor';
 import type { NLDDTextField } from '@nldd/design-system/text-field';
 import type { NLDDTimeField } from '@nldd/design-system/time-field';
 import type { NLDDTimePicker } from '@nldd/design-system/time-picker';
-import type { NLDDTimelineTrackCell } from '@nldd/design-system/timeline-track-cell';
 import type { NLDDTitle } from '@nldd/design-system/title';
 import type { NLDDTitleCell } from '@nldd/design-system/title-cell';
 import type { NLDDToggleButton } from '@nldd/design-system/toggle-button';
@@ -161,11 +161,6 @@ declare module 'vue' {
 		'translations'?: NLDDActivityIndicator['translations'];
 	};
 
-	type NLDDAppViewProps = {
-		/** Background color (cascades to descendants) */
-		'background'?: NLDDAppView['background'];
-	};
-
 	type NLDDAvatarProps = {
 		/** `person` (circle, person icon) or `organization` (rounded, building icon); default `person` */
 		'type'?: NLDDAvatar['type'];
@@ -295,7 +290,7 @@ declare module 'vue' {
 	};
 
 	type NLDDBoxProps = {
-		/** Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — color is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
+		/** Which surface this box draws, named as it is on nldd-shell, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — color is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
 		'background'?: NLDDBox['background'];
 	};
 
@@ -1138,6 +1133,8 @@ declare module 'vue' {
 		'background'?: NLDDFullBleedSection['background'];
 		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
 		'height'?: NLDDFullBleedSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDFullBleedSection['grow'];
 		/** 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). */
@@ -1175,13 +1172,15 @@ declare module 'vue' {
 	type NLDDHeroProps = {
 		/** Body max-width; 'full' removes the bound (section API) */
 		'width'?: NLDDHero['width'];
+		/** How the panel relates to the image (default: 'overlap'). 'contained' keeps it on the image, in any of the eight positions; 'overlap' lets it fall `overlap-size` over the bottom of the image and run on below as far as its content needs, so the image keeps its height whatever the content. In 'overlap' the image has a fixed height (320px on md, 400px on lg) unless `media-height` or `media-aspect-ratio` is set, and only the horizontal side of `main-position` counts. A panel shorter than `overlap-size` ends inside the image and says so in development */
+		'layout'?: NLDDHero['layout'];
 		/** 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' */
+		/** Width of the panel (default: 'auto'). 'auto' follows the content, between 480px and 640px and never wider than the image allows: a short title gets a narrow panel, a paragraph runs on to a readable line length. 'full' makes a strip across the whole image, at the top or the bottom, and is ignored with 'left'/'right'. Any CSS width (e.g. '560px', '60%') sets it exactly on md and lg, still never wider than the image allows; an invalid value falls back to 'auto' */
 		'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' */
+		/** Width of the panel (default: 'auto'). 'auto' follows the content, between 480px and 640px and never wider than the image allows: a short title gets a narrow panel, a paragraph runs on to a readable line length. 'full' makes a strip across the whole image, at the top or the bottom, and is ignored with 'left'/'right'. Any CSS width (e.g. '560px', '60%') sets it exactly on md and lg, still never wider than the image allows; an invalid value falls back to 'auto' */
 		'mainWidth'?: NLDDHero['mainWidth'];
 		/** Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height */
 		'main-position'?: NLDDHero['mainPosition'];
@@ -1191,6 +1190,14 @@ declare module 'vue' {
 		'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'];
+		/** With layout="overlap": how far the panel falls over the bottom of the image, any CSS length (default: 160px). The overlap stays the same whatever the height of the image; a panel shorter than this ends inside the image */
+		'overlap-size'?: NLDDHero['overlapSize'];
+		/** With layout="overlap": how far the panel falls over the bottom of the image, any CSS length (default: 160px). The overlap stays the same whatever the height of the image; a panel shorter than this ends inside the image */
+		'overlapSize'?: NLDDHero['overlapSize'];
+		/** Fixed height of the media area, any CSS length (e.g. '320px', '40vh'); wins over media-aspect-ratio. An invalid value falls back to the ratio */
+		'media-height'?: NLDDHero['mediaHeight'];
+		/** Fixed height of the media area, any CSS length (e.g. '320px', '40vh'); wins over media-aspect-ratio. An invalid value falls back to the ratio */
+		'mediaHeight'?: NLDDHero['mediaHeight'];
 		/** 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 */
@@ -1209,8 +1216,9 @@ declare module 'vue' {
 		'mediaAlt'?: NLDDHero['mediaAlt'];
 		/** Surface behind the hero (section API) */
 		'background'?: NLDDHero['background'];
-		/** Minimum height of the section (section API) */
 		'height'?: NLDDHero['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDHero['grow'];
 		/** Block padding override, also per edge and responsive (section API) */
 		'padding-block'?: NLDDHero['paddingBlock'];
 		/** Block padding override, also per edge and responsive (section API) */
@@ -1400,7 +1408,7 @@ declare module 'vue' {
 		'credit'?: NLDDImage['credit'];
 		/** Decorative image: alt is forced empty + aria-hidden */
 		'decorative'?: NLDDImage['decorative'];
-		/** Low-quality image placeholder as a CSV string `"base,c1,c2,c3,c4,c5,c6"` — seven 0-255 bytes, each packing an 8-bit Oklab triplet (2 bits L, 3 bits a, 3 bits b). The first is the base color shown outside the cell gradients; the other six are per-cell colors in row-major 3×2 order. Generate via the encoder in `lqip-encoder.ts` or via the "LQIP encoder tool" Storybook story. Extends Lean Rada's CSS-only LQIP (https://leanrada.com/notes/css-only-lqip/) with per-cell hue — Lean's original format encodes grayscale cells only; ours encodes a color per cell so multi-color subjects survive the placeholder. */
+		/** Loading preview (LQIP, low-quality image placeholder) as a CSV string `"base,c1,c2,c3,c4,c5,c6"` — seven 0-255 bytes, each packing an 8-bit Oklab triplet (2 bits L, 3 bits a, 3 bits b). The first is the base color shown outside the cell gradients; the other six are per-cell colors in row-major 3×2 order. Generate via the encoder in `lqip-encoder.ts` or via the "LQIP encoder tool" Storybook story. Extends Lean Rada's CSS-only LQIP (https://leanrada.com/notes/css-only-lqip/) with per-cell hue — Lean's original format encodes grayscale cells only; ours encodes a color per cell so multi-color subjects survive the preview. */
 		'lqip'?: NLDDImage['lqip'];
 		/** Override translation keys (e.g. the message shown when the image fails to load); unset keys fall back to Dutch. */
 		'translations'?: NLDDImage['translations'];
@@ -1559,14 +1567,18 @@ declare module 'vue' {
 		'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`. */
+		/** 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` on the inner action, with `current-type` as its value; 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'];
 		/** 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'];
-		/** 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. */
+		/** 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` on the inner action, with `current-type` as its value. 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'];
+		/** The `aria-current` value a `current` or `selected` row puts on its action in a `navigation` parent (default 'page'). Use 'location' for a table of contents, whose rows point at sections of the page you are on. */
+		'current-type'?: NLDDListItem['currentType'];
+		/** The `aria-current` value a `current` or `selected` row puts on its action in a `navigation` parent (default 'page'). Use 'location' for a table of contents, whose rows point at sections of the page you are on. */
+		'currentType'?: NLDDListItem['currentType'];
 		/** 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. */
@@ -1615,8 +1627,12 @@ declare module 'vue' {
 		'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. */
+		/** Marks the segment as the current one, with `aria-current` set to `current-type`. 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'];
+		/** The `aria-current` value of a `current` segment (default 'page'). Use 'location' for a table of contents, whose rows point at sections of the page you are on. */
+		'current-type'?: NLDDListItemSegment['currentType'];
+		/** The `aria-current` value of a `current` segment (default 'page'). Use 'location' for a table of contents, whose rows point at sections of the page you are on. */
+		'currentType'?: NLDDListItemSegment['currentType'];
 		/** 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'];
 		/** The row's divider starts at this cell instead of at its first text or title cell. */
@@ -1636,15 +1652,15 @@ declare module 'vue' {
 	};
 
 	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). */
+		/** Explicit width, pinned exactly (sets --_menu-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). */
+		/** Maximum number of visible items before the menu scrolls. Sets --_menu-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). */
+		/** Maximum number of visible items before the menu scrolls. Sets --_menu-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'];
@@ -1953,10 +1969,16 @@ declare module 'vue' {
 	type NLDDOneHalfOneHalfSectionProps = {
 		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
 		'width'?: NLDDOneHalfOneHalfSection['width'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'vertical-alignment'?: NLDDOneHalfOneHalfSection['verticalAlignment'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'verticalAlignment'?: NLDDOneHalfOneHalfSection['verticalAlignment'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDOneHalfOneHalfSection['background'];
 		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
 		'height'?: NLDDOneHalfOneHalfSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDOneHalfOneHalfSection['grow'];
 		/** 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). */
@@ -1994,10 +2016,16 @@ declare module 'vue' {
 	type NLDDOneThirdTwoThirdsSectionProps = {
 		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
 		'width'?: NLDDOneThirdTwoThirdsSection['width'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'vertical-alignment'?: NLDDOneThirdTwoThirdsSection['verticalAlignment'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'verticalAlignment'?: NLDDOneThirdTwoThirdsSection['verticalAlignment'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDOneThirdTwoThirdsSection['background'];
 		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
 		'height'?: NLDDOneThirdTwoThirdsSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDOneThirdTwoThirdsSection['grow'];
 		/** 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). */
@@ -2157,7 +2185,7 @@ 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 as a CSS length (default: 320px). 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'];
@@ -2370,7 +2398,7 @@ declare module 'vue' {
 		'centered'?: NLDDRichText['centered'];
 		/** 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. */
+		/** 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 headings, p and li is always on, independent of this attribute, so a word wider than the column breaks instead of overflowing, without a hyphen; headings never get one. */
 		'hyphens'?: NLDDRichText['hyphens'];
 	};
 
@@ -2508,6 +2536,11 @@ declare module 'vue' {
 		'onClose'?: (event: CustomEvent) => void;
 	};
 
+	type NLDDShellProps = {
+		/** Background color (cascades to descendants) */
+		'background'?: NLDDShell['background'];
+	};
+
 	type NLDDSideBySideSplitViewProps = {
 		/** Use a tinted background color (cascades to descendants) */
 		'background'?: NLDDSideBySideSplitView['background'];
@@ -2541,6 +2574,8 @@ declare module 'vue' {
 		'collapsed'?: NLDDSidebarSection['collapsed'];
 		'background'?: NLDDSidebarSection['background'];
 		'height'?: NLDDSidebarSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDSidebarSection['grow'];
 		'padding-block'?: NLDDSidebarSection['paddingBlock'];
 		'paddingBlock'?: NLDDSidebarSection['paddingBlock'];
 		'padding-top'?: NLDDSidebarSection['paddingTop'];
@@ -2588,6 +2623,8 @@ declare module 'vue' {
 		'background'?: NLDDSimpleSection['background'];
 		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
 		'height'?: NLDDSimpleSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDSimpleSection['grow'];
 		/** 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). */
@@ -2723,33 +2760,58 @@ declare module 'vue' {
 		'button'?: NLDDStatusBar['button'];
 	};
 
-	type NLDDStepIndicatorProps = {
-		'current'?: NLDDStepIndicator['current'];
+	type NLDDStepBarProps = {
+		'current'?: NLDDStepBar['current'];
 		/** Name of the nav; defaults to the i18n value ("Voortgang") */
-		'accessible-label'?: NLDDStepIndicator['accessibleLabel'];
+		'accessible-label'?: NLDDStepBar['accessibleLabel'];
 		/** Name of the nav; defaults to the i18n value ("Voortgang") */
-		'accessibleLabel'?: NLDDStepIndicator['accessibleLabel'];
+		'accessibleLabel'?: NLDDStepBar['accessibleLabel'];
 		/** Override translation keys; unset keys fall back to Dutch */
-		'translations'?: NLDDStepIndicator['translations'];
-		'total'?: NLDDStepIndicator['total'];
+		'translations'?: NLDDStepBar['translations'];
+		'total'?: NLDDStepBar['total'];
 		/** 1-based position of the last item with `status="current"`, or 1 when none has it. */
-		'resolvedCurrent'?: NLDDStepIndicator['resolvedCurrent'];
-		'currentItem'?: NLDDStepIndicator['currentItem'];
+		'resolvedCurrent'?: NLDDStepBar['resolvedCurrent'];
+		'currentItem'?: NLDDStepBar['currentItem'];
 	};
 
-	type NLDDStepIndicatorItemProps = {
+	type NLDDStepBarItemProps = {
 		/** How far along this step is. `current` marks the step you are on (`aria-current="step"`) and the parent derives the others from it: with none marked step 1 is current, with more than one the last wins. `past` and `future` override what is derived for this step only */
-		'status'?: NLDDStepIndicatorItem['status'];
+		'status'?: NLDDStepBarItem['status'];
 		/** Label under the disc */
-		'text'?: NLDDStepIndicatorItem['text'];
+		'text'?: NLDDStepBarItem['text'];
 		/** Icon in the disc instead of the number or the check mark */
-		'icon'?: NLDDStepIndicatorItem['icon'];
+		'icon'?: NLDDStepBarItem['icon'];
 		/** Makes the step a link (back to a completed step, for instance) */
-		'href'?: NLDDStepIndicatorItem['href'];
+		'href'?: NLDDStepBarItem['href'];
 		/** For flows without a URL per step (a wizard inside one window). Ignored once `href` is set: one step is one action, and a link outranks a button -- the same rule as nldd-card and nldd-avatar. */
-		'button'?: NLDDStepIndicatorItem['button'];
+		'button'?: NLDDStepBarItem['button'];
 		/** The status that counts. An own `past` or `future` wins over the derived one. An own `current` is what the parent derives from, so the derived status already says it, and on a step that lost to a later one it does not hold. */
-		'resolvedStatus'?: NLDDStepIndicatorItem['resolvedStatus'];
+		'resolvedStatus'?: NLDDStepBarItem['resolvedStatus'];
+	};
+
+	type NLDDStepCellProps = {
+		/** 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 */
+		'level'?: NLDDStepCell['level'];
+		/** How far along this row is (default 'past'); the same values as `nldd-step-bar-item`. It colors the dot and the track around it: covered above where you are, still ahead below */
+		'status'?: NLDDStepCell['status'];
+		/** How wide the lane is and so how big the dot: `sm` (default, 16px) for steps without a number, `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'?: NLDDStepCell['size'];
+		/** 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'?: NLDDStepCell['direction'];
+		/** Place of the row in the list as it stands on screen (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `first` is the top row and only has a line below, `last` the bottom row and only has a line above, also with `direction="up"`: position is about where the row stands, `direction` about which way time runs. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
+		'position'?: NLDDStepCell['position'];
+		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
+		'line'?: NLDDStepCell['line'];
+		/** Number or short text in the dot */
+		'text'?: NLDDStepCell['text'];
+		/** Icon name in the dot; wins over `text` */
+		'icon'?: NLDDStepCell['icon'];
+		'hide-below'?: NLDDStepCell['hideBelow'];
+		'hideBelow'?: NLDDStepCell['hideBelow'];
+		'hide-above'?: NLDDStepCell['hideAbove'];
+		'hideAbove'?: NLDDStepCell['hideAbove'];
+		/** Only a whole dot in a wide lane has room to read a number in: a minor one is smaller still, and would claim to be a step of its own. */
+		'showsContent'?: NLDDStepCell['showsContent'];
 	};
 
 	type NLDDStepperProps = {
@@ -3187,31 +3249,6 @@ declare module 'vue' {
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
-	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 */
-		'level'?: NLDDTimelineTrackCell['level'];
-		/** 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'];
-		/** 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 of the row in the list as it stands on screen (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `first` is the top row and only has a line below, `last` the bottom row and only has a line above, also with `direction="up"`: position is about where the row stands, `direction` about which way time runs. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
-		'position'?: NLDDTimelineTrackCell['position'];
-		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
-		'line'?: NLDDTimelineTrackCell['line'];
-		/** Number or short text in the dot */
-		'text'?: NLDDTimelineTrackCell['text'];
-		/** Icon name in the dot; wins over `text` */
-		'icon'?: NLDDTimelineTrackCell['icon'];
-		'hide-below'?: NLDDTimelineTrackCell['hideBelow'];
-		'hideBelow'?: NLDDTimelineTrackCell['hideBelow'];
-		'hide-above'?: NLDDTimelineTrackCell['hideAbove'];
-		'hideAbove'?: NLDDTimelineTrackCell['hideAbove'];
-		/** Only a whole dot in a wide lane has room to read a number in: a minor one is smaller still, and would claim to be a step of its own. */
-		'showsContent'?: NLDDTimelineTrackCell['showsContent'];
-	};
-
 	type NLDDTitleProps = {
 		/** Visual size of the title: 1–6 (default: 3) */
 		'size'?: NLDDTitle['size'];
@@ -3307,9 +3344,9 @@ declare module 'vue' {
 		'text'?: NLDDToggleButton['text'];
 		/** Icon name for nldd-icon */
 		'icon'?: NLDDToggleButton['icon'];
-		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows. */
+		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one, or with `variant="text"` where the icon does not render, they fill, so the state always shows. */
 		'selected-icon'?: NLDDToggleButton['selectedIcon'];
-		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows. */
+		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one, or with `variant="text"` where the icon does not render, they fill, so the state always shows. */
 		'selectedIcon'?: NLDDToggleButton['selectedIcon'];
 		/** What renders: text, icon, or both. Unset → auto-detect from text/icon attributes. */
 		'variant'?: NLDDToggleButton['variant'];
@@ -3584,10 +3621,16 @@ declare module 'vue' {
 	type NLDDTwoThirdsOneThirdSectionProps = {
 		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
 		'width'?: NLDDTwoThirdsOneThirdSection['width'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'vertical-alignment'?: NLDDTwoThirdsOneThirdSection['verticalAlignment'];
+		/** Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other. */
+		'verticalAlignment'?: NLDDTwoThirdsOneThirdSection['verticalAlignment'];
 		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
 		'background'?: NLDDTwoThirdsOneThirdSection['background'];
 		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
 		'height'?: NLDDTwoThirdsOneThirdSection['height'];
+		/** Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow. */
+		'grow'?: NLDDTwoThirdsOneThirdSection['grow'];
 		/** 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). */
@@ -3657,7 +3700,7 @@ declare module 'vue' {
 	type NLDDWindowProps = {
 		/** Color scheme (default 'inherit'). */
 		'scheme'?: NLDDWindow['scheme'];
-		/** CSS width (default: var(--components-window-default-width)) */
+		/** CSS width (default: 640px) */
 		'width'?: NLDDWindow['width'];
 		/** CSS height (default: content height) */
 		'height'?: NLDDWindow['height'];
@@ -3692,8 +3735,6 @@ declare module 'vue' {
 	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. 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>;
 		/** Shows several avatars as one group: they overlap, and each one gets a ring in the surface color so they stay apart where they meet. The ring uses the same mechanism as the badge, so on a colored surface you hand the color over through `--context-parent-background-color`. Slot `nldd-avatar` elements, not bare `img`. An avatar already knows what to do with a dead image, when to fall back to initials, and how to show its name as a tooltip; a loose image would have to reproduce all of that and cannot do the last one. Set `decorative` when the names already stand beside the group as text; otherwise give every avatar a name, because the group itself describes nobody. The size applies to the whole group: it is imposed on the avatars, a slotted `img` included. That keeps the row on one line whatever a consumer hands over. */
@@ -3727,13 +3768,13 @@ declare module 'vue' {
 		'nldd-checkbox-field': DefineComponent<NLDDCheckboxFieldProps>;
 		/** A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `appearance="simple"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `appearance="input-field"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line). */
 		'nldd-code-editor': DefineComponent<NLDDCodeEditorProps>;
-		/** 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. */
+		/** 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 `--semantics-code-syntax-*` 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. 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. 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. */
+		/** 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 `--_container-slot-order` / `--_container-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>;
@@ -3763,7 +3804,7 @@ declare module 'vue' {
 		'nldd-form-section': DefineComponent<NLDDFormSectionProps>;
 		/** A section that spans the full width without horizontal padding. Useful for background colors, images, or other content that runs edge to edge. Vertical padding and gap adjust via container queries. */
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
-		/** 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. */
+		/** The section that says what a page is for: it names the main goal of what you can find there, draws the eye and is the visual welcome. It has a media area and a text panel (the main) that can stand in eight positions. Every area is rectangular. Use it on pages where a visitor first has to know where they are, such as a home or a topic page; where the title already does that, a section with a title is enough. The image in a hero sets the mood and is never the main content, so the panel always stands on it. Over an image the panel keeps a section gap from its edges, so it reads as a panel on the image rather than a frame cut out of it; with `main-width="full"` it is a strip across the whole image, the same gap from the sides. On mobile the image comes first and the panel below it, indented by the section gap and overlapping the image by 48px. For an image beside text without that relation, use a section with an image beside text instead. 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. The hero is the head of a page and sits right under the top bar, so its top padding is half that of the other page sections: the full distance is meant to separate two sections, and under the top bar it reads as a gap. The bottom keeps the full distance to the section below. Set `padding-top` to place a hero elsewhere. By default the panel falls over the bottom of the image and runs on below it (`layout="overlap"`), so the image keeps its height whatever the content. `layout="contained"` keeps the panel on the image, for a short panel or one that stands at the top or along a side. The height of a hero comes from its image: `media-aspect-ratio`, or a fixed `media-height`. The `height` of the other page sections is not used here: as a minimum height for the whole hero it stretched the panel once that sat below the image. A hero given `height` says so in development. `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 system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
 		'nldd-icon': DefineComponent<NLDDIconProps>;
@@ -3772,7 +3813,7 @@ declare module 'vue' {
 		'nldd-icon-cell': DefineComponent<NLDDIconCellProps>;
 		/** An editorial line that shows authors or editors: optional avatar or avatars, a name line and supporting text (a role or a date, for instance). Every part is optional. The name line and the supporting text come in as an attribute or as a slot. Use the slots for richer content, such as a `<time datetime="…">` for a machine-readable date or a link to the author's profile. Slotted content replaces the matching attribute: the attribute is the slot's fallback. One avatar you slot as it is, and identity gives it its size. For more than one, slot an `nldd-avatar-group`: that overlaps them and draws the ring in the surface color. Identity does not build that group itself, because the avatars are the consumer's light DOM and a group can only style what arrives as its own child. Set the avatars to decorative (or an `img` to `alt=""`) when the names already stand in the text. On narrow widths (an sm container, 640px and under) with more than one avatar the row of avatars moves above the names, so the text keeps the full width. With one avatar the identity stays on a single line. For a single avatar you can also hand over `avatar-src` (with an optional `avatar-srcset`) as an attribute instead of slotting; its size is fixed at 40px. Slotted avatars take precedence over `avatar-src`. */
 		'nldd-identity': DefineComponent<NLDDIdentityProps>;
-		/** Wraps a native `<img>` with design-system styling: corner radius variants, aspect-ratio reservation, object-fit/position control, optional caption + credit. Renders as `<figure>` + `<figcaption>` only when a caption or credit is set — otherwise just the image, no extra wrapping. Hybrid source: the `src` attribute renders an internal `<img>`. To use a custom `<img>` or `<picture>` (e.g. with art-direction sources), slot it into the default slot and we'll style and wrap it like our own image. */
+		/** Wraps a native `<img>` with design-system styling: corner radius variants, aspect-ratio reservation, object-fit/position control, optional caption + credit. Renders as `<figure>` + `<figcaption>` only when a caption or credit is set — otherwise just the image, no extra wrapping. Hybrid source: the `src` attribute renders an internal `<img>`. To use a custom `<img>` or `<picture>` (e.g. with art-direction sources), slot it into the default slot and we'll style and wrap it like our own image. Without an image (no `src`, `srcset`, `lqip` or slotted media) it shows a neutral area with an image icon, in the box, shape and caption a real image would get: a place where an image belongs, for a prototype or a pattern, or an image someone forgot. Without `aspect-ratio` that area is 16/9. While the built-in `<img>` loads without an `lqip`, the same area shows without the icon, and it goes once the image is in. */
 		'nldd-image': DefineComponent<NLDDImageProps>;
 		/** An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width. */
 		'nldd-inline-dialog': DefineComponent<NLDDInlineDialogProps>;
@@ -3784,7 +3825,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. 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`). */
+		/** 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` on the inner `<a>` / `<button>` when `current` or `selected`, with `current-type` as its value (`page` unless set) - `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>;
@@ -3813,7 +3854,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 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. */
+		/** 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-shell) 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>;
@@ -3839,7 +3880,7 @@ declare module 'vue' {
 		'nldd-radio-button-field': DefineComponent<NLDDRadioButtonFieldProps>;
 		/** Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label. */
 		'nldd-radio-button-group': DefineComponent<NLDDRadioButtonGroupProps>;
-		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. 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. */
+		/** 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-rich-text-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. The headings keep one size on every width, the one they have on a phone. A heading in running text sits in a column as wide as a line of reading, on any screen, so its relation to the text beside it does not change and it has no reason to grow. Growing, an h2 on a wide screen was more than twice the size of the text, and an article broke into blocks at every heading. Page and section titles do grow: use nldd-title for those. Children are placed in three zones. A child belongs to the text unless it is listed, so it reads at the `main` size and is never wider than a line: text (headings, paragraphs, lists, blockquote, div/section) and every component that is not named below, such as nldd-box, nldd-card, nldd-banner, nldd-list and a button, and code (pre, nldd-code-viewer), which scrolls inside its block when a line is longer. Media, tables and a step bar (img, figure, video, iframe, table, nldd-table, nldd-image, nldd-step-bar) get the `wide` accent. What needs the room gets the `full` span: hr, nldd-collection and nldd-container. A child takes the room it needs inside its zone (`justify-self: start`), so the room is available without being forced. Overridable per child with `data-rich-text-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>;
@@ -3848,9 +3889,11 @@ declare module 'vue' {
 		'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`). 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>;
+		/** 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 a shell 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 --_shell-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 shell 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-shell` 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 shell 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-shell': DefineComponent<NLDDShellProps>;
 		/** 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. */
+		/** A page section with a left sidebar alongside the main content. - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable box (max-width 320px) beside the main content. It takes the surface of the section around it and is edged by a divider line, so it reads as a block without drawing the eye away from the main. 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. 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>;
@@ -3868,12 +3911,14 @@ declare module 'vue' {
 		'nldd-split-view-pane': DefineComponent<NLDDSplitViewPaneProps>;
 		/** A vertical split view with multiple stacked panes. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available height are automatically hidden. */
 		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
-		/** A narrow, page-wide status bar (24px) with a deep background color per variant. Use it for persistent system state: an outage, planned maintenance, a draft view or a recording in progress. The bar deliberately shows no icon and supports text only. The text itself has to name the status ("Storing: …", "Gepland onderhoud …"), so the meaning does not follow from color alone (WCAG 1.4.1). Keep the text short: the bar shows one line and truncates with an ellipsis, certainly on narrower screens. For a long message with a lot of information only the essence belongs in the bar. Point to a separate page or sheet for the rest (through `href` or `button`, for instance), where the user can read on. The whole bar can be clickable: set `href` (renders an `<a>`) or `button` (renders a `<button>`; listen for the native `click` event). Without either the bar is static. On interaction a chevron appears as an affordance. One action per bar at most; several actions, or links in running text, belong in nldd-banner. role and aria-live are set automatically from the variant: - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader) - others → role="status" aria-live="polite" Not overridable. If you need a quieter component, pick a different one. Use `critical` only for a real emergency: role="alert" interrupts the screen reader on every change of the content, so do not put text in it that changes regularly (a counting-down timer, for example). */
+		/** A narrow, page-wide status bar (24px) with a deep background color per variant. Use it for persistent system state: an outage, planned maintenance, a draft view or a recording in progress. The bar deliberately shows no icon and supports text only. The text itself has to name the status ("Storing: …", "Gepland onderhoud …"), so the meaning does not follow from color alone (WCAG 1.4.1). Keep the text short: the bar shows one line and truncates with an ellipsis, certainly on narrower screens. For a long message with a lot of information only the essence belongs in the bar. Point to a separate page or sheet for the rest (through `href` or `button`, for instance), where the user can read on. The whole bar can be clickable: set `href` (renders an `<a>`) or `button` (renders a `<button>`; listen for the native `click` event). Without either the bar is static. On interaction a chevron appears as an affordance. One action per bar at most; several actions, or links in running text, belong in nldd-banner. The bar is the first thing on the screen: above nldd-top-navigation-bar or nldd-top-title-bar, across the whole app, also when a split view shows several panes. It reports the state of the service, not of one page, so it never sits inside the content or below a top bar. Below a top bar it says so in development. role and aria-live are set automatically from the variant: - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader) - others → role="status" aria-live="polite" Not overridable. If you need a quieter component, pick a different one. Use `critical` only for a real emergency: role="alert" interrupts the screen reader on every change of the content, so do not put text in it that changes regularly (a counting-down timer, for example). */
 		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
-		/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. Mark the step you are on with `status="current"`. The parent derives the rest from its position: `past` before it, `future` after. With none marked, step 1 is current. With more than one, the last one wins and a warning goes to the console in a dev build: a flow that forgets to clear the previous step still points at the furthest one. A `status="past"` or `status="future"` on another step overrides what is derived for that step, for flows that jump back or skip a step. One attribute, the same three values as `nldd-timeline-track-cell`, so a flow reads in one vocabulary whether it runs across or down. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
-		'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
-		/** One step in an `nldd-step-indicator`. `status="current"` marks the step you are on; the parent derives the status of the others and the number of each, which live here as internal state rather than as public API. `past` and `future` override what is derived for this step. */
-		'nldd-step-indicator-item': DefineComponent<NLDDStepIndicatorItemProps>;
+		/** Shows where you are in a process of several steps: a row of discs with a number (or a check mark on what is done), a label under each and a line connecting them. Other systems call this a stepper or a progress indicator. Mark the step you are on with `status="current"`. The parent derives the rest from its position: `past` before it, `future` after. With none marked, step 1 is current. With more than one, the last one wins and a warning goes to the console in a dev build: a flow that forgets to clear the previous step still points at the furthest one. A `status="past"` or `status="future"` on another step overrides what is derived for that step, for flows that jump back or skip a step. One attribute, the same three values as `nldd-step-cell`, so a flow reads in one vocabulary whether it runs across or down. Horizontal only. For steps under each other, build an `nldd-list` with an `nldd-step-cell` and an `nldd-title-cell` per row: vertical steps usually carry more than a title, and a list row already does that. Below the sm breakpoint (a container query, so measured on the component itself rather than on the viewport) it folds into one line of text plus a segmented bar. The full list of steps stays in the DOM, only visually hidden, so assistive software hears no less than a wide screen shows. Accessibility: a `nav` with a label, holding a `role="list"` with a `role="listitem"` per step. The current step gets `aria-current="step"`, the only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as ARIA tokens and travel along as visually hidden text instead. */
+		'nldd-step-bar': DefineComponent<NLDDStepBarProps>;
+		/** One step in an `nldd-step-bar`. `status="current"` marks the step you are on; the parent derives the status of the others and the number of each, which live here as internal state rather than as public API. `past` and `future` override what is derived for this step. */
+		'nldd-step-bar-item': DefineComponent<NLDDStepBarItemProps>;
+		/** A cell that draws steps under each other in an `nldd-list`: a vertical track with a dot per row, colored by how far along each step is. It is the vertical counterpart of `nldd-step-bar`, with the same `status` values. Other systems call this a stepper, a progress list or a timeline. 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 dot is small and empty, for steps without a number, such as the moments in the history of a case. With `size="md"` it grows big enough for a number or an icon. The size belongs to the lane rather than to the content: every dot in a list is the same size, or the track would jump. */
+		'nldd-step-cell': DefineComponent<NLDDStepCellProps>;
 		/** A numeric control with increment and decrement buttons. */
 		'nldd-stepper': DefineComponent<NLDDStepperProps>;
 		/** A toggle control for on/off settings. Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label. Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility. */
@@ -3899,8 +3944,6 @@ declare module 'vue' {
 		'nldd-time-field': DefineComponent<NLDDTimeFieldProps>;
 		/** Two columns, hours and minutes, that slide like a wheel past the selection in the middle. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-time-field. Values are always 24-hour `HH:mm`. Scrolling is choosing: whatever comes to rest in the middle is the value. The keyboard drives that same selection, because that is what a wheel is: hour and minute are each a spinbutton. The columns underneath are aria-hidden, so the same values are not read out twice. */
 		'nldd-time-picker': DefineComponent<NLDDTimePickerProps>;
-		/** A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `size="md"` 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 lane 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 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 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. */