@nldd/design-system 0.8.96 → 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';
@@ -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. */
@@ -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). */
@@ -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). */
@@ -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). */
@@ -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 --_app-view-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. */
@@ -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,7 +3911,7 @@ declare module 'vue' {
 		'nldd-split-view-pane': DefineComponent<NLDDSplitViewPaneProps>;
 		/** A vertical split view with multiple stacked panes. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available height are automatically hidden. */
 		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
-		/** 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. 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>;

package/dist/utilities/page-section-mixin.d.ts

@@ -22,6 +22,10 @@ export type PageSectionPadding = '0' | '2' | '4' | '6' | '8' | '10' | '12' | '16
  * - **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's
  *   min-height (so the section is at least that tall) — mirroring how `width`
  *   maps to the body max-width.
+ * - **grow**: the section 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. nldd-page reads this and marks the growing section with
+ *   `data-growing`; it never writes `grow`, which stays the author's.
  *
  * @example
  * ```ts
@@ -43,6 +47,7 @@ export declare function PageSectionMixin<TBase extends Constructor<LitElement>>(
     lgPaddingTop?: PageSectionPadding;
     lgPaddingBottom?: PageSectionPadding;
     height?: string;
+    grow: boolean;
     _onSlotChange(e: Event): void;
 }>;
 export {};

package/dist/utilities/page-section-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-section-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAEtD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,kBAAkB,GAC3B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAC9D,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAyBhE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACrE,IAAI,EAAE,KAAK,GAiG0B,KAAK,GACzC,WAAW,CACV,UAAU,GAAG;IACZ,UAAU,EAAE,qBAAqB,CAAC;IAClC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC9B,CACD,CACF"}
+{"version":3,"file":"page-section-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAGtD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,kBAAkB,GAC3B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAC9D,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAyBhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACrE,IAAI,EAAE,KAAK,GAoG0B,KAAK,GACzC,WAAW,CACV,UAAU,GAAG;IACZ,UAAU,EAAE,qBAAqB,CAAC;IAClC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC9B,CACD,CACF"}

package/dist/utilities/page-section-mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
+import { reflectNonDefault } from './reflect-non-default.js';
 const BACKGROUND_TOKEN = {
     base: 'var(--semantics-surfaces-base-background-color)',
     tinted: 'var(--semantics-surfaces-tinted-background-color)',
@@ -47,6 +48,10 @@ const PADDING_KEYS = [
  * - **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's
  *   min-height (so the section is at least that tall) — mirroring how `width`
  *   maps to the body max-width.
+ * - **grow**: the section 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. nldd-page reads this and marks the growing section with
+ *   `data-growing`; it never writes `grow`, which stays the author's.
  *
  * @example
  * ```ts
@@ -58,6 +63,7 @@ export function PageSectionMixin(Base) {
         constructor() {
             super(...arguments);
             this.background = 'inherit';
+            this.grow = false;
         }
         updated(changed) {
             super.updated(changed);
@@ -121,11 +127,14 @@ export function PageSectionMixin(Base) {
         }
     }
     __decorate([
-        property({ type: String, reflect: true })
+        property({ reflect: true, converter: reflectNonDefault('inherit') })
     ], WithPageSection.prototype, "background", void 0);
     __decorate([
         property({ type: String, reflect: true })
     ], WithPageSection.prototype, "height", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], WithPageSection.prototype, "grow", void 0);
     __decorate([
         property({ type: String, reflect: true, attribute: 'padding-block' })
     ], WithPageSection.prototype, "paddingBlock", void 0);

package/dist/utilities/page-section-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-section-mixin.js","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"page-section-mixin.js","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"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"}