@nldd/design-system 0.8.95 → 0.8.97

package/custom-elements.json

@@ -1864,7 +1864,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Explicit width, pinned exactly (sets --_width and clamps min/max to it).\nLeave unset to let the menu size to its content between a minimum and a\nviewport-aware maximum of min(100vw - inset, 640px).",
+              "description": "Explicit width, pinned exactly (sets --_menu-width and clamps min/max to it).\nLeave unset to let the menu size to its content between a minimum and a\nviewport-aware maximum of min(100vw - inset, 640px).",
               "attribute": "width",
               "reflects": true
             },
@@ -1904,7 +1904,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Maximum number of visible items before the menu scrolls.\nSets --_max-items internally. Default: 0 (no limit).",
+              "description": "Maximum number of visible items before the menu scrolls.\nSets --_menu-max-items internally. Default: 0 (no limit).",
               "attribute": "max-items"
             },
             {
@@ -2049,7 +2049,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Explicit width, pinned exactly (sets --_width and clamps min/max to it).\nLeave unset to let the menu size to its content between a minimum and a\nviewport-aware maximum of min(100vw - inset, 640px).",
+              "description": "Explicit width, pinned exactly (sets --_menu-width and clamps min/max to it).\nLeave unset to let the menu size to its content between a minimum and a\nviewport-aware maximum of min(100vw - inset, 640px).",
               "name": "width",
               "default": "''",
               "fieldName": "width"
@@ -2076,7 +2076,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "Maximum number of visible items before the menu scrolls.\nSets --_max-items internally. Default: 0 (no limit).",
+              "description": "Maximum number of visible items before the menu scrolls.\nSets --_menu-max-items internally. Default: 0 (no limit).",
               "name": "max-items",
               "default": "0",
               "fieldName": "maxItems"
@@ -3490,7 +3490,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDCodeViewer",
           "members": [
             {
@@ -3970,7 +3970,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDImage",
           "members": [
             {
@@ -4296,7 +4296,7 @@
               },
               "default": "''",
               "fieldName": "lqip",
-              "description": "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."
+              "description": "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."
             },
             {
               "name": "translations",
@@ -4662,7 +4662,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDRichText",
           "members": [
             {
@@ -4759,7 +4759,7 @@
               },
               "default": "false",
               "fieldName": "hyphens",
-              "description": "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."
+              "description": "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."
             }
           ],
           "superclass": {
@@ -6709,10 +6709,10 @@
         },
         {
           "kind": "js",
-          "name": "NLDDAppView",
+          "name": "NLDDShell",
           "declaration": {
-            "name": "NLDDAppView",
-            "module": "./layout/app-view/app-view.js"
+            "name": "NLDDShell",
+            "module": "./layout/shell/shell.js"
           }
         },
         {
@@ -7021,10 +7021,10 @@
         },
         {
           "kind": "js",
-          "name": "NLDDTimelineTrackCell",
+          "name": "NLDDStepCell",
           "declaration": {
-            "name": "NLDDTimelineTrackCell",
-            "module": "./lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js"
+            "name": "NLDDStepCell",
+            "module": "./lists-and-tables/cells/step-cell/step-cell.js"
           }
         },
         {
@@ -7189,18 +7189,18 @@
         },
         {
           "kind": "js",
-          "name": "NLDDStepIndicator",
+          "name": "NLDDStepBar",
           "declaration": {
-            "name": "NLDDStepIndicator",
-            "module": "./status-and-feedback/step-indicator/step-indicator.js"
+            "name": "NLDDStepBar",
+            "module": "./status-and-feedback/step-bar/step-bar.js"
           }
         },
         {
           "kind": "js",
-          "name": "NLDDStepIndicatorItem",
+          "name": "NLDDStepBarItem",
           "declaration": {
-            "name": "NLDDStepIndicatorItem",
-            "module": "./status-and-feedback/step-indicator/step-indicator.js"
+            "name": "NLDDStepBarItem",
+            "module": "./status-and-feedback/step-bar/step-bar.js"
           }
         },
         {
@@ -22115,7 +22115,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "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.",
+              "description": "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.",
               "fieldName": "selectedIcon"
             },
             {
@@ -22786,70 +22786,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/layout/app-view/app-view.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "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.",
-          "name": "NLDDAppView",
-          "members": [
-            {
-              "kind": "field",
-              "name": "background",
-              "type": {
-                "text": "'base' | 'tinted'"
-              },
-              "default": "'base'",
-              "attribute": "background",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "background",
-              "type": {
-                "text": "'base' | 'tinted'"
-              },
-              "default": "'base'",
-              "fieldName": "background",
-              "description": "Background color (cascades to descendants)"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "nldd-app-view",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "",
-              "description": "Default slot for the application content"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NLDDAppView",
-          "declaration": {
-            "name": "NLDDAppView",
-            "module": "src/components/layout/app-view/app-view.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nldd-app-view",
-          "declaration": {
-            "name": "NLDDAppView",
-            "module": "src/components/layout/app-view/app-view.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/layout/box/box.ts",
@@ -22878,7 +22814,7 @@
               },
               "default": "'tinted'",
               "fieldName": "background",
-              "description": "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."
+              "description": "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."
             }
           ],
           "superclass": {
@@ -23350,7 +23286,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDContainer",
           "members": [
             {
@@ -24483,6 +24419,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -24675,6 +24625,19 @@
               },
               "description": "Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width)."
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -24865,7 +24828,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDHero",
           "members": [
             {
@@ -24879,6 +24842,16 @@
               "attribute": "width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "HeroLayout"
+              },
+              "default": "'overlap'",
+              "attribute": "layout",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "mainBackground",
@@ -24895,7 +24868,7 @@
               "type": {
                 "text": "HeroMainWidth"
               },
-              "default": "'1/2'",
+              "default": "'auto'",
               "attribute": "main-width",
               "reflects": true
             },
@@ -24920,6 +24893,26 @@
               "attribute": "media-aspect-ratio",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "overlapSize",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "overlap-size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mediaHeight",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "media-height",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "mediaSrc",
@@ -24984,6 +24977,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -25151,6 +25158,15 @@
               "description": "Body max-width; 'full' removes the bound (section API)",
               "fieldName": "width"
             },
+            {
+              "name": "layout",
+              "type": {
+                "text": "HeroLayout"
+              },
+              "default": "'overlap'",
+              "fieldName": "layout",
+              "description": "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"
+            },
             {
               "name": "main-background",
               "type": {
@@ -25165,9 +25181,9 @@
               "type": {
                 "text": "HeroMainWidth"
               },
-              "default": "'1/2'",
+              "default": "'auto'",
               "fieldName": "mainWidth",
-              "description": "Width of the panel (default: '1/2'); 'full' makes a full top or bottom strip and is ignored with 'left'/'right'"
+              "description": "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'"
             },
             {
               "name": "main-position",
@@ -25187,6 +25203,24 @@
               "description": "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",
               "fieldName": "mediaAspectRatio"
             },
+            {
+              "name": "overlap-size",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "overlapSize",
+              "description": "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"
+            },
+            {
+              "name": "media-height",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "mediaHeight",
+              "description": "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"
+            },
             {
               "name": "media-src",
               "type": {
@@ -25245,8 +25279,20 @@
               "inheritedFrom": {
                 "name": "PageSectionMixin",
                 "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Minimum height of the section (section API)"
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
             },
             {
               "name": "padding-block",
@@ -25445,6 +25491,16 @@
               "attribute": "width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "verticalAlignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "attribute": "vertical-alignment",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "background",
@@ -25472,6 +25528,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -25639,6 +25709,15 @@
               "description": "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.",
               "fieldName": "width"
             },
+            {
+              "name": "vertical-alignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "fieldName": "verticalAlignment",
+              "description": "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."
+            },
             {
               "name": "background",
               "type": {
@@ -25664,6 +25743,19 @@
               },
               "description": "Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width)."
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -25876,6 +25968,16 @@
               "attribute": "width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "verticalAlignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "attribute": "vertical-alignment",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "background",
@@ -25903,6 +26005,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -26070,6 +26186,15 @@
               "description": "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.",
               "fieldName": "width"
             },
+            {
+              "name": "vertical-alignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "fieldName": "verticalAlignment",
+              "description": "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."
+            },
             {
               "name": "background",
               "type": {
@@ -26095,6 +26220,19 @@
               },
               "description": "Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width)."
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -26297,8 +26435,8 @@
           "type": {
             "text": "object"
           },
-          "default": "{ background: 'inherit', width: '', height: '', paddingBlock: '', paddingTop: '', paddingBottom: '', smPaddingBlock: '', smPaddingTop: '', smPaddingBottom: '', mdPaddingBlock: '', mdPaddingTop: '', mdPaddingBottom: '', lgPaddingBlock: '', lgPaddingTop: '', lgPaddingBottom: '', }",
-          "description": "Shared Storybook controls for the PageSectionMixin surface API\n(background, width, height and the 12 block-padding overrides).\nSpread into a section story's `args` / `argTypes`, and bind onto the host\nelement in `render` with the `pageSectionAttrs` directive."
+          "default": "{ background: 'inherit', width: '', height: '', grow: false, paddingBlock: '', paddingTop: '', paddingBottom: '', smPaddingBlock: '', smPaddingTop: '', smPaddingBottom: '', mdPaddingBlock: '', mdPaddingTop: '', mdPaddingBottom: '', lgPaddingBlock: '', lgPaddingTop: '', lgPaddingBottom: '', }",
+          "description": "Shared Storybook controls for the PageSectionMixin surface API\n(background, width, height, grow and the 12 block-padding overrides).\nSpread into a section story's `args` / `argTypes`, and bind onto the host\nelement in `render` with the `pageSectionAttrs` directive."
         },
         {
           "kind": "variable",
@@ -26306,7 +26444,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ background: { control: { type: 'select' }, options: ['inherit', 'base', 'tinted'], description: 'Oppervlak: \"inherit\" laat het oppervlak van de ouder doorschijnen, \"base\" en \"tinted\" tekenen een eigen oppervlak dat naar de inhoud cascadeert', table: { defaultValue: { summary: 'inherit' } }, }, width: { control: 'text', description: 'Maximale breedte van de inhoud: \"full\" haalt de grens weg, een CSS-lengte (bv. \"480px\") vervangt hem', }, height: { control: 'text', description: 'Minimale hoogte van de sectie, als CSS-lengte (bv. \"400px\" of \"100dvh\")', }, paddingBlock: paddingControl('padding-block', 'Padding boven en onder (token 0 tot 96, \"0\" haalt hem weg)'), paddingTop: paddingControl('padding-top', 'Alleen de padding boven'), paddingBottom: paddingControl('padding-bottom', 'Alleen de padding onder'), smPaddingBlock: paddingControl('sm-padding-block', 'Padding boven en onder op sm (tot 640px)'), smPaddingTop: paddingControl('sm-padding-top', 'Padding boven op sm (tot 640px)'), smPaddingBottom: paddingControl('sm-padding-bottom', 'Padding onder op sm (tot 640px)'), mdPaddingBlock: paddingControl('md-padding-block', 'Padding boven en onder op md (641 tot 1007px)'), mdPaddingTop: paddingControl('md-padding-top', 'Padding boven op md (641 tot 1007px)'), mdPaddingBottom: paddingControl('md-padding-bottom', 'Padding onder op md (641 tot 1007px)'), lgPaddingBlock: paddingControl('lg-padding-block', 'Padding boven en onder op lg (vanaf 1008px)'), lgPaddingTop: paddingControl('lg-padding-top', 'Padding boven op lg (vanaf 1008px)'), lgPaddingBottom: paddingControl('lg-padding-bottom', 'Padding onder op lg (vanaf 1008px)'), }"
+          "default": "{ background: { control: { type: 'select' }, options: ['inherit', 'base', 'tinted'], description: 'Oppervlak: \"inherit\" laat het oppervlak van de ouder doorschijnen, \"base\" en \"tinted\" tekenen een eigen oppervlak dat naar de inhoud cascadeert', table: { defaultValue: { summary: 'inherit' } }, }, width: { control: 'text', description: 'Maximale breedte van de inhoud: \"full\" haalt de grens weg, een CSS-lengte (bv. \"480px\") vervangt hem', }, height: { control: 'text', description: 'Minimale hoogte van de sectie, als CSS-lengte (bv. \"400px\" of \"100dvh\")', }, grow: { control: 'boolean', description: 'Neemt de hoogte die de pagina over heeft, zodat de footer onderaan staat. Zonder `grow` groeit de laatste sectie van een `nldd-page`.', table: { defaultValue: { summary: false } }, }, paddingBlock: paddingControl('padding-block', 'Padding boven en onder (token 0 tot 96, \"0\" haalt hem weg)'), paddingTop: paddingControl('padding-top', 'Alleen de padding boven'), paddingBottom: paddingControl('padding-bottom', 'Alleen de padding onder'), smPaddingBlock: paddingControl('sm-padding-block', 'Padding boven en onder op sm (tot 640px)'), smPaddingTop: paddingControl('sm-padding-top', 'Padding boven op sm (tot 640px)'), smPaddingBottom: paddingControl('sm-padding-bottom', 'Padding onder op sm (tot 640px)'), mdPaddingBlock: paddingControl('md-padding-block', 'Padding boven en onder op md (641 tot 1007px)'), mdPaddingTop: paddingControl('md-padding-top', 'Padding boven op md (641 tot 1007px)'), mdPaddingBottom: paddingControl('md-padding-bottom', 'Padding onder op md (641 tot 1007px)'), lgPaddingBlock: paddingControl('lg-padding-block', 'Padding boven en onder op lg (vanaf 1008px)'), lgPaddingTop: paddingControl('lg-padding-top', 'Padding boven op lg (vanaf 1008px)'), lgPaddingBottom: paddingControl('lg-padding-bottom', 'Padding onder op lg (vanaf 1008px)'), }"
         },
         {
           "kind": "variable",
@@ -26347,7 +26485,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDSidebarSection",
           "members": [
             {
@@ -26476,6 +26614,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -26734,6 +26886,19 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -26990,6 +27155,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -27200,6 +27379,19 @@
               },
               "description": "Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width)."
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -27404,6 +27596,16 @@
               "attribute": "width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "verticalAlignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "attribute": "vertical-alignment",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "background",
@@ -27431,6 +27633,20 @@
                 "module": "src/utilities/page-section-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -27598,6 +27814,15 @@
               "description": "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.",
               "fieldName": "width"
             },
+            {
+              "name": "vertical-alignment",
+              "type": {
+                "text": "'top' | 'center' | 'bottom'"
+              },
+              "default": "'top'",
+              "fieldName": "verticalAlignment",
+              "description": "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."
+            },
             {
               "name": "background",
               "type": {
@@ -27623,6 +27848,19 @@
               },
               "description": "Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width)."
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow",
+              "inheritedFrom": {
+                "name": "PageSectionMixin",
+                "module": "src/utilities/page-section-mixin.ts"
+              },
+              "description": "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."
+            },
             {
               "name": "padding-block",
               "type": {
@@ -27821,7 +28059,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
+          "description": "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.",
           "name": "NLDDPage",
           "members": [
             {
@@ -28150,7 +28388,7 @@
                 "text": "string | undefined"
               },
               "fieldName": "width",
-              "description": "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."
+              "description": "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."
             },
             {
               "name": "sm-full-height",
@@ -28469,6 +28707,70 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/layout/shell/shell.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "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.",
+          "name": "NLDDShell",
+          "members": [
+            {
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "'base' | 'tinted'"
+              },
+              "default": "'base'",
+              "attribute": "background",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "background",
+              "type": {
+                "text": "'base' | 'tinted'"
+              },
+              "default": "'base'",
+              "fieldName": "background",
+              "description": "Background color (cascades to descendants)"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "nldd-shell",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot for the application content"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NLDDShell",
+          "declaration": {
+            "name": "NLDDShell",
+            "module": "src/components/layout/shell/shell.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nldd-shell",
+          "declaration": {
+            "name": "NLDDShell",
+            "module": "src/components/layout/shell/shell.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/layout/spacer/spacer.ts",
@@ -29454,7 +29756,7 @@
                 "text": "string | undefined"
               },
               "fieldName": "width",
-              "description": "CSS width (default: var(--components-window-default-width))"
+              "description": "CSS width (default: 640px)"
             },
             {
               "name": "height",
@@ -30345,88 +30647,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/lists-and-tables/cells/text-cell/text-cell.ts",
+      "path": "src/components/lists-and-tables/cells/step-cell/step-cell.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment=\"center\"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment=\"top\"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is.",
-          "name": "NLDDTextCell",
+          "description": "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.",
+          "name": "NLDDStepCell",
           "members": [
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "default": "'md'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "Color"
-              },
-              "default": "'content'",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "width",
+              "name": "level",
               "type": {
-                "text": "string"
+                "text": "Level"
               },
-              "default": "'full'",
-              "attribute": "width",
+              "default": "'major'",
+              "description": "What stands in the lane: a whole dot, a smaller one, or nothing.\n\nA rank rather than a measurement — the cell picks the sizes, so the scale\ncan change later without every consumer following. `minor` is a row that\nbelongs under the one above it, and its dot stays empty: a number would not\nfit and would make the row a step of its own, so carry that hierarchy in\nthe row instead, with an `nldd-text-cell` rather than an `nldd-title-cell`.\n`none` is a row that carries what a step holds rather than being one.",
+              "attribute": "level",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "minWidth",
+              "name": "status",
               "type": {
-                "text": "string | undefined"
+                "text": "Status"
               },
-              "attribute": "min-width",
+              "default": "'past'",
+              "attribute": "status",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxWidth",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "Size"
               },
-              "attribute": "max-width",
+              "default": "'sm'",
+              "description": "How wide the lane is, and with it how big the dot. One size per list: a\nlane that changes width halfway bends the track.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "minHeight",
+              "name": "direction",
               "type": {
-                "text": "string | undefined"
+                "text": "Direction"
               },
-              "attribute": "min-height",
+              "default": "'down'",
+              "description": "Which way the timeline moves forward. The cell only knows its own step, so\nit cannot tell which neighbor came first: with `up` (newest at the top)\nthe traveled half of the track is the one below the marker. Only the\ncurrent step has a half-and-half track, so this is the only row where it\nchanges anything.",
+              "attribute": "direction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "horizontalAlignment",
+              "name": "position",
               "type": {
-                "text": "HorizontalAlignment"
+                "text": "Position"
               },
-              "default": "'left'",
-              "attribute": "horizontal-alignment",
+              "default": "'between'",
+              "attribute": "position",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "verticalAlignment",
+              "name": "line",
               "type": {
-                "text": "VerticalAlignment"
+                "text": "Line"
               },
-              "default": "'center'",
-              "attribute": "vertical-alignment",
+              "default": "'auto'",
+              "description": "Which halves of the track you have covered, for when the status gets it\nwrong.\n\nIt reads one row at a time, and a row that opens a group of its own is\nnot the end of the going: the step you are on sits inside it, further\ndown. Nothing in the cell can see that, and a cell that read its\nneighbours would break the moment rows come and go. So the consumer says\nit, and says it for both halves at once: the ones named are covered and\nthe other one is still ahead.\n\nThis is about fill, not about place. Where you stand in the series is what\n`position` says, and that keeps deciding which halves are drawn — naming a\nfill does not take a half away. It can add one, though: calling a half\ncovered draws it, even where the position left it out.",
+              "attribute": "line",
               "reflects": true
             },
             {
@@ -30436,47 +30725,25 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "supportingText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "supporting-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "overline",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "overline",
-              "reflects": true
+              "attribute": "text"
             },
             {
               "kind": "field",
-              "name": "query",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "query",
-              "reflects": true
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "queryMarkMode",
+              "name": "showsContent",
               "type": {
-                "text": "QueryMarkMode"
+                "text": "boolean"
               },
-              "default": "'predictive'",
-              "attribute": "query-mark-mode"
+              "description": "Only a whole dot in a wide lane has room to read a number in: a minor one is\nsmaller still, and would claim to be a step of its own.",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -30507,73 +30774,58 @@
           ],
           "attributes": [
             {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "default": "'md'",
-              "fieldName": "size",
-              "description": "Cell size: 'sm' | 'md' (default: 'md')"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "Color"
-              },
-              "default": "'content'",
-              "fieldName": "color",
-              "description": "Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state."
-            },
-            {
-              "name": "width",
+              "name": "level",
               "type": {
-                "text": "string"
+                "text": "Level"
               },
-              "default": "'full'",
-              "fieldName": "width",
-              "description": "'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full'"
+              "default": "'major'",
+              "description": "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",
+              "fieldName": "level"
             },
             {
-              "name": "min-width",
+              "name": "status",
               "type": {
-                "text": "string | undefined"
+                "text": "Status"
               },
-              "fieldName": "minWidth",
-              "description": "Minimum width as CSS length (e.g. '80px', '5rem')"
+              "default": "'past'",
+              "fieldName": "status",
+              "description": "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"
             },
             {
-              "name": "max-width",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "Size"
               },
-              "fieldName": "maxWidth",
-              "description": "Maximum width as CSS length (e.g. '200px', '20rem')"
+              "default": "'sm'",
+              "description": "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",
+              "fieldName": "size"
             },
             {
-              "name": "min-height",
+              "name": "direction",
               "type": {
-                "text": "string | undefined"
+                "text": "Direction"
               },
-              "fieldName": "minHeight",
-              "description": "Minimum height as CSS length (e.g. '44px', '3rem')"
+              "default": "'down'",
+              "description": "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",
+              "fieldName": "direction"
             },
             {
-              "name": "horizontal-alignment",
+              "name": "position",
               "type": {
-                "text": "HorizontalAlignment"
+                "text": "Position"
               },
-              "default": "'left'",
-              "fieldName": "horizontalAlignment",
-              "description": "Horizontal alignment: 'left' | 'center' | 'right' (default: 'left')"
+              "default": "'between'",
+              "fieldName": "position",
+              "description": "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"
             },
             {
-              "name": "vertical-alignment",
+              "name": "line",
               "type": {
-                "text": "VerticalAlignment"
+                "text": "Line"
               },
-              "default": "'center'",
-              "fieldName": "verticalAlignment",
-              "description": "Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')"
+              "default": "'auto'",
+              "description": "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",
+              "fieldName": "line"
             },
             {
               "name": "text",
@@ -30582,43 +30834,16 @@
               },
               "default": "''",
               "fieldName": "text",
-              "description": "Main text content. Supports **bold** syntax for inline bold segments. Falls back to default slot."
-            },
-            {
-              "name": "supporting-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "supportingText",
-              "description": "Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot."
-            },
-            {
-              "name": "overline",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "overline",
-              "description": "Optional overline text displayed above the main content. Supports **bold**. Falls back to `overline` slot."
+              "description": "Number or short text in the dot"
             },
             {
-              "name": "query",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "query",
-              "description": "Query substring to bold-highlight across text fields. Empty = no marking."
-            },
-            {
-              "name": "query-mark-mode",
-              "type": {
-                "text": "QueryMarkMode"
-              },
-              "default": "'predictive'",
-              "fieldName": "queryMarkMode",
-              "description": "'match' | 'predictive' (default: 'predictive')"
+              "fieldName": "icon",
+              "description": "Icon name in the dot; wins over `text`"
             },
             {
               "name": "hide-below",
@@ -30653,20 +30878,12 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-text-cell",
+          "tagName": "nldd-step-cell",
           "customElement": true,
           "slots": [
-            {
-              "name": "overline",
-              "description": "Rich content for the overline region. Overrides the `overline` attribute when content is assigned."
-            },
             {
               "name": "",
-              "description": "(default) Rich content for the main text region. Overrides the `text` attribute when content is assigned."
-            },
-            {
-              "name": "supporting-text",
-              "description": "Rich content for the supporting text region. Overrides the `supporting-text` attribute when content is assigned."
+              "description": "Custom content in the dot (an alternative to `text` and `icon`)"
             }
           ]
         }
@@ -30674,93 +30891,106 @@
       "exports": [
         {
           "kind": "js",
-          "name": "NLDDTextCell",
+          "name": "NLDDStepCell",
           "declaration": {
-            "name": "NLDDTextCell",
-            "module": "src/components/lists-and-tables/cells/text-cell/text-cell.ts"
+            "name": "NLDDStepCell",
+            "module": "src/components/lists-and-tables/cells/step-cell/step-cell.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-text-cell",
+          "name": "nldd-step-cell",
           "declaration": {
-            "name": "NLDDTextCell",
-            "module": "src/components/lists-and-tables/cells/text-cell/text-cell.ts"
+            "name": "NLDDStepCell",
+            "module": "src/components/lists-and-tables/cells/step-cell/step-cell.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.ts",
+      "path": "src/components/lists-and-tables/cells/text-cell/text-cell.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "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.",
-          "name": "NLDDTimelineTrackCell",
+          "description": "A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment=\"center\"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment=\"top\"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is.",
+          "name": "NLDDTextCell",
           "members": [
             {
               "kind": "field",
-              "name": "level",
+              "name": "size",
               "type": {
-                "text": "Level"
+                "text": "Size"
               },
-              "default": "'major'",
-              "description": "What stands in the lane: a whole dot, a smaller one, or nothing.\n\nA rank rather than a measurement — the cell picks the sizes, so the scale\ncan change later without every consumer following. `minor` is a row that\nbelongs under the one above it, and its dot stays empty: a number would not\nfit and would make the row a step of its own, so carry that hierarchy in\nthe row instead, with an `nldd-text-cell` rather than an `nldd-title-cell`.\n`none` is a row that carries what a step holds rather than being one.",
-              "attribute": "level",
+              "default": "'md'",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "status",
+              "name": "color",
               "type": {
-                "text": "Status"
+                "text": "Color"
               },
-              "default": "'past'",
-              "attribute": "status",
+              "default": "'content'",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "Size"
+                "text": "string"
               },
-              "default": "'sm'",
-              "description": "How wide the lane is, and with it how big the dot. One size per list: a\nlane that changes width halfway bends the track.",
-              "attribute": "size",
+              "default": "'full'",
+              "attribute": "width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "minWidth",
               "type": {
-                "text": "Direction"
+                "text": "string | undefined"
               },
-              "default": "'down'",
-              "description": "Which way the timeline moves forward. The cell only knows its own step, so\nit cannot tell which neighbor came first: with `up` (newest at the top)\nthe traveled half of the track is the one below the marker. Only the\ncurrent step has a half-and-half track, so this is the only row where it\nchanges anything.",
-              "attribute": "direction",
+              "attribute": "min-width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "maxWidth",
               "type": {
-                "text": "Position"
+                "text": "string | undefined"
               },
-              "default": "'between'",
-              "attribute": "position",
+              "attribute": "max-width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "line",
+              "name": "minHeight",
               "type": {
-                "text": "Line"
+                "text": "string | undefined"
               },
-              "default": "'auto'",
-              "description": "Which halves of the track you have covered, for when the status gets it\nwrong.\n\nIt reads one row at a time, and a row that opens a group of its own is\nnot the end of the going: the step you are on sits inside it, further\ndown. Nothing in the cell can see that, and a cell that read its\nneighbours would break the moment rows come and go. So the consumer says\nit, and says it for both halves at once: the ones named are covered and\nthe other one is still ahead.\n\nThis is about fill, not about place. Where you stand in the series is what\n`position` says, and that keeps deciding which halves are drawn — naming a\nfill does not take a half away. It can add one, though: calling a half\ncovered draws it, even where the position left it out.",
-              "attribute": "line",
+              "attribute": "min-height",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "HorizontalAlignment"
+              },
+              "default": "'left'",
+              "attribute": "horizontal-alignment",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "verticalAlignment",
+              "type": {
+                "text": "VerticalAlignment"
+              },
+              "default": "'center'",
+              "attribute": "vertical-alignment",
               "reflects": true
             },
             {
@@ -30770,25 +31000,47 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "text"
+              "attribute": "text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "supportingText",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "icon"
+              "attribute": "supporting-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "showsContent",
+              "name": "overline",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Only a whole dot in a wide lane has room to read a number in: a minor one is\nsmaller still, and would claim to be a step of its own.",
-              "readonly": true
+              "default": "''",
+              "attribute": "overline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "query",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "query",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "queryMarkMode",
+              "type": {
+                "text": "QueryMarkMode"
+              },
+              "default": "'predictive'",
+              "attribute": "query-mark-mode"
             },
             {
               "kind": "field",
@@ -30819,58 +31071,73 @@
           ],
           "attributes": [
             {
-              "name": "level",
+              "name": "size",
               "type": {
-                "text": "Level"
+                "text": "Size"
               },
-              "default": "'major'",
-              "description": "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",
-              "fieldName": "level"
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "Cell size: 'sm' | 'md' (default: 'md')"
             },
             {
-              "name": "status",
+              "name": "color",
               "type": {
-                "text": "Status"
+                "text": "Color"
               },
-              "default": "'past'",
-              "fieldName": "status",
-              "description": "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"
+              "default": "'content'",
+              "fieldName": "color",
+              "description": "Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state."
             },
             {
-              "name": "size",
+              "name": "width",
               "type": {
-                "text": "Size"
+                "text": "string"
               },
-              "default": "'sm'",
-              "description": "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",
-              "fieldName": "size"
+              "default": "'full'",
+              "fieldName": "width",
+              "description": "'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full'"
             },
             {
-              "name": "direction",
+              "name": "min-width",
               "type": {
-                "text": "Direction"
+                "text": "string | undefined"
               },
-              "default": "'down'",
-              "description": "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",
-              "fieldName": "direction"
+              "fieldName": "minWidth",
+              "description": "Minimum width as CSS length (e.g. '80px', '5rem')"
             },
             {
-              "name": "position",
+              "name": "max-width",
               "type": {
-                "text": "Position"
+                "text": "string | undefined"
               },
-              "default": "'between'",
-              "fieldName": "position",
-              "description": "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"
+              "fieldName": "maxWidth",
+              "description": "Maximum width as CSS length (e.g. '200px', '20rem')"
             },
             {
-              "name": "line",
+              "name": "min-height",
               "type": {
-                "text": "Line"
+                "text": "string | undefined"
               },
-              "default": "'auto'",
-              "description": "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",
-              "fieldName": "line"
+              "fieldName": "minHeight",
+              "description": "Minimum height as CSS length (e.g. '44px', '3rem')"
+            },
+            {
+              "name": "horizontal-alignment",
+              "type": {
+                "text": "HorizontalAlignment"
+              },
+              "default": "'left'",
+              "fieldName": "horizontalAlignment",
+              "description": "Horizontal alignment: 'left' | 'center' | 'right' (default: 'left')"
+            },
+            {
+              "name": "vertical-alignment",
+              "type": {
+                "text": "VerticalAlignment"
+              },
+              "default": "'center'",
+              "fieldName": "verticalAlignment",
+              "description": "Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')"
             },
             {
               "name": "text",
@@ -30879,16 +31146,43 @@
               },
               "default": "''",
               "fieldName": "text",
-              "description": "Number or short text in the dot"
+              "description": "Main text content. Supports **bold** syntax for inline bold segments. Falls back to default slot."
             },
             {
-              "name": "icon",
+              "name": "supporting-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "icon",
-              "description": "Icon name in the dot; wins over `text`"
+              "fieldName": "supportingText",
+              "description": "Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot."
+            },
+            {
+              "name": "overline",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "overline",
+              "description": "Optional overline text displayed above the main content. Supports **bold**. Falls back to `overline` slot."
+            },
+            {
+              "name": "query",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "query",
+              "description": "Query substring to bold-highlight across text fields. Empty = no marking."
+            },
+            {
+              "name": "query-mark-mode",
+              "type": {
+                "text": "QueryMarkMode"
+              },
+              "default": "'predictive'",
+              "fieldName": "queryMarkMode",
+              "description": "'match' | 'predictive' (default: 'predictive')"
             },
             {
               "name": "hide-below",
@@ -30923,12 +31217,20 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-timeline-track-cell",
+          "tagName": "nldd-text-cell",
           "customElement": true,
           "slots": [
+            {
+              "name": "overline",
+              "description": "Rich content for the overline region. Overrides the `overline` attribute when content is assigned."
+            },
             {
               "name": "",
-              "description": "Custom content in the dot (an alternative to `text` and `icon`)"
+              "description": "(default) Rich content for the main text region. Overrides the `text` attribute when content is assigned."
+            },
+            {
+              "name": "supporting-text",
+              "description": "Rich content for the supporting text region. Overrides the `supporting-text` attribute when content is assigned."
             }
           ]
         }
@@ -30936,18 +31238,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "NLDDTimelineTrackCell",
+          "name": "NLDDTextCell",
           "declaration": {
-            "name": "NLDDTimelineTrackCell",
-            "module": "src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.ts"
+            "name": "NLDDTextCell",
+            "module": "src/components/lists-and-tables/cells/text-cell/text-cell.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-timeline-track-cell",
+          "name": "nldd-text-cell",
           "declaration": {
-            "name": "NLDDTimelineTrackCell",
-            "module": "src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.ts"
+            "name": "NLDDTextCell",
+            "module": "src/components/lists-and-tables/cells/text-cell/text-cell.ts"
           }
         }
       ]
@@ -31478,6 +31780,17 @@
               "attribute": "current",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "currentType",
+              "type": {
+                "text": "'page' | 'step' | 'location' | 'date' | 'time' | 'true'"
+              },
+              "default": "'page'",
+              "description": "The `aria-current` value of a current segment; see nldd-list-item's `current-type`.",
+              "attribute": "current-type",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -31621,11 +31934,20 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "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.",
+              "description": "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.",
               "name": "current",
               "default": "false",
               "fieldName": "current"
             },
+            {
+              "type": {
+                "text": "'page' | 'step' | 'location' | 'date' | 'time' | 'true'"
+              },
+              "description": "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.",
+              "name": "current-type",
+              "default": "'page'",
+              "fieldName": "currentType"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -31683,7 +32005,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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`).",
+          "description": "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`).",
           "name": "NLDDListItem",
           "slots": [
             {
@@ -31822,6 +32144,17 @@
               "attribute": "current",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "currentType",
+              "type": {
+                "text": "'page' | 'step' | 'location' | 'date' | 'time' | 'true'"
+              },
+              "default": "'page'",
+              "description": "What kind of \"current\" this row is, for `aria-current`.\n\n`page` fits a menu of pages, but a table of contents points at sections\nof the page you are already on: there every row would announce itself as\n\"the current page\". `location` says \"you are here\" instead.",
+              "attribute": "current-type",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -31964,7 +32297,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "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`.",
+              "description": "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`.",
               "name": "selected",
               "default": "false",
               "fieldName": "selected"
@@ -31990,11 +32323,20 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "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.",
+              "description": "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.",
               "name": "current",
               "default": "false",
               "fieldName": "current"
             },
+            {
+              "type": {
+                "text": "'page' | 'step' | 'location' | 'date' | 'time' | 'true'"
+              },
+              "description": "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.",
+              "name": "current-type",
+              "default": "'page'",
+              "fieldName": "currentType"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -33596,6 +33938,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "icon",
+              "description": "Takes the place of the icon: an `nldd-avatar` for the person who is signed in, for instance. It gets the size of an icon, and follows `content-priority` and `icon-only` as the icon does. Wins over `icon`."
+            },
             {
               "name": "",
               "description": "Content of the expandable popover. Wrap items in an `<nldd-menu>` so this component does not have to duplicate the menu API (variant, accessible-label, translations, filterFn and so on). Event listeners on items work directly, because nothing is cloned anymore."
@@ -37154,7 +37500,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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).",
+          "description": "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).",
           "name": "NLDDStatusBar",
           "members": [
             {
@@ -37302,12 +37648,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/status-and-feedback/step-indicator/step-indicator.ts",
+      "path": "src/components/status-and-feedback/step-bar/step-bar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "One step in an `nldd-step-indicator`. `status=\"current\"` marks the step you\nare on; the parent derives the status of the others and the number of each,\nwhich live here as internal state rather than as public API. `past` and\n`future` override what is derived for this step.",
-          "name": "NLDDStepIndicatorItem",
+          "description": "One step in an `nldd-step-bar`. `status=\"current\"` marks the step you\nare on; the parent derives the status of the others and the number of each,\nwhich live here as internal state rather than as public API. `past` and\n`future` override what is derived for this step.",
+          "name": "NLDDStepBarItem",
           "slots": [
             {
               "description": "Label (an alternative to `text`)",
@@ -37319,7 +37665,7 @@
               "kind": "field",
               "name": "status",
               "type": {
-                "text": "StepIndicatorStatus | undefined"
+                "text": "StepBarStatus | undefined"
               },
               "attribute": "status",
               "reflects": true
@@ -37368,7 +37714,7 @@
               "kind": "field",
               "name": "resolvedStatus",
               "type": {
-                "text": "StepIndicatorStatus"
+                "text": "StepBarStatus"
               },
               "description": "The status that counts. An own `past` or `future` wins over the derived\none. An own `current` is what the parent derives from, so the derived\nstatus already says it, and on a step that lost to a later one it does not\nhold.",
               "readonly": true
@@ -37377,7 +37723,7 @@
           "attributes": [
             {
               "type": {
-                "text": "StepIndicatorStatus | undefined"
+                "text": "StepBarStatus | undefined"
               },
               "description": "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",
               "name": "status",
@@ -37424,13 +37770,13 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-step-indicator-item",
+          "tagName": "nldd-step-bar-item",
           "customElement": true
         },
         {
           "kind": "class",
-          "description": "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.",
-          "name": "NLDDStepIndicator",
+          "description": "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.",
+          "name": "NLDDStepBar",
           "members": [
             {
               "kind": "field",
@@ -37462,7 +37808,7 @@
               "kind": "field",
               "name": "currentItem",
               "type": {
-                "text": "NLDDStepIndicatorItem | undefined"
+                "text": "NLDDStepBarItem | undefined"
               },
               "readonly": true
             },
@@ -37517,12 +37863,12 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-step-indicator",
+          "tagName": "nldd-step-bar",
           "customElement": true,
           "slots": [
             {
               "name": "",
-              "description": "`nldd-step-indicator-item` children"
+              "description": "`nldd-step-bar-item` children"
             }
           ]
         }
@@ -37530,34 +37876,34 @@
       "exports": [
         {
           "kind": "js",
-          "name": "NLDDStepIndicatorItem",
+          "name": "NLDDStepBarItem",
           "declaration": {
-            "name": "NLDDStepIndicatorItem",
-            "module": "src/components/status-and-feedback/step-indicator/step-indicator.ts"
+            "name": "NLDDStepBarItem",
+            "module": "src/components/status-and-feedback/step-bar/step-bar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-step-indicator-item",
+          "name": "nldd-step-bar-item",
           "declaration": {
-            "name": "NLDDStepIndicatorItem",
-            "module": "src/components/status-and-feedback/step-indicator/step-indicator.ts"
+            "name": "NLDDStepBarItem",
+            "module": "src/components/status-and-feedback/step-bar/step-bar.ts"
           }
         },
         {
           "kind": "js",
-          "name": "NLDDStepIndicator",
+          "name": "NLDDStepBar",
           "declaration": {
-            "name": "NLDDStepIndicator",
-            "module": "src/components/status-and-feedback/step-indicator/step-indicator.ts"
+            "name": "NLDDStepBar",
+            "module": "src/components/status-and-feedback/step-bar/step-bar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-step-indicator",
+          "name": "nldd-step-bar",
           "declaration": {
-            "name": "NLDDStepIndicator",
-            "module": "src/components/status-and-feedback/step-indicator/step-indicator.ts"
+            "name": "NLDDStepBar",
+            "module": "src/components/status-and-feedback/step-bar/step-bar.ts"
           }
         }
       ]
@@ -38337,7 +38683,7 @@
       "declarations": [
         {
           "kind": "mixin",
-          "description": "Shared surface controls for the page-section components. Adds three\northogonal capabilities, all written as inline host styles / custom\nproperties (no per-component CSS needed for the background — custom\nproperties inherit through the shadow boundary into the section's block\nelement and slotted content):\n\n- **background**: `inherit` (the default — transparent, shows the ancestor's\n  surface) | `base` (the base surface color) | `tinted`. Setting\n  `base`/`tinted` also cascades `--context-parent-background-color` so\n  descendants (cards, nested sections) read the same surface.\n- **block padding**: `padding-block` (both edges) with `padding-top`\n  / `padding-bottom` per-edge overrides, each with responsive `sm-` /\n  `md-` / `lg-` variants (12 attrs total). Token scale `0`–`96`; `0` strips\n  the padding. Per breakpoint the section CSS resolves: scope override →\n  base override → responsive default. The inline (gutter) padding stays\n  design-controlled.\n- **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's\n  min-height (so the section is at least that tall) — mirroring how `width`\n  maps to the body max-width.",
+          "description": "Shared surface controls for the page-section components. Adds three\northogonal capabilities, all written as inline host styles / custom\nproperties (no per-component CSS needed for the background — custom\nproperties inherit through the shadow boundary into the section's block\nelement and slotted content):\n\n- **background**: `inherit` (the default — transparent, shows the ancestor's\n  surface) | `base` (the base surface color) | `tinted`. Setting\n  `base`/`tinted` also cascades `--context-parent-background-color` so\n  descendants (cards, nested sections) read the same surface.\n- **block padding**: `padding-block` (both edges) with `padding-top`\n  / `padding-bottom` per-edge overrides, each with responsive `sm-` /\n  `md-` / `lg-` variants (12 attrs total). Token scale `0`–`96`; `0` strips\n  the padding. Per breakpoint the section CSS resolves: scope override →\n  base override → responsive default. The inline (gutter) padding stays\n  design-controlled.\n- **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's\n  min-height (so the section is at least that tall) — mirroring how `width`\n  maps to the body max-width.\n- **grow**: the section takes the height the page has left, so the footer\n  sits at the bottom of a short page. Without it, nldd-page lets its last\n  section grow. nldd-page reads this and marks the growing section with\n  `data-growing`; it never writes `grow`, which stays the author's.",
           "name": "PageSectionMixin",
           "members": [
             {
@@ -38359,6 +38705,16 @@
               "attribute": "height",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "paddingBlock",
@@ -38555,6 +38911,14 @@
               },
               "fieldName": "height"
             },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow"
+            },
             {
               "name": "padding-block",
               "type": {
@@ -39287,7 +39651,7 @@
             "text": "string"
           },
           "default": "'nldd-single-column-change'",
-          "description": "Bubbling + composed event a horizontal split view fires when it collapses to\n(or expands out of) a single visible column. nldd-app-view listens for it to\nderive the document-vs-nested scroll mode."
+          "description": "Bubbling + composed event a horizontal split view fires when it collapses to\n(or expands out of) a single visible column. nldd-shell listens for it to\nderive the document-vs-nested scroll mode."
         },
         {
           "kind": "function",
@@ -39305,11 +39669,35 @@
               }
             }
           ],
-          "description": "Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the\nconsumer's light tree so this reaches across the slot boundaries), or null\nwhen a layer is used stand-alone (e.g. a bare page in the docs).\n\nAn overlay ends the search: a sheet or a modal dialog is its own scroll\ncontainer and its own top edge, so a page inside one owns its scroller\nwhatever the app around it does. Without this the app-view would push its\nroot mode straight through the overlay and the page's sticky header would\nstick against the document, over the content of the overlay. The overlays\nreset --context-scroll-mode as well, which is what the stand-alone read\nbelow then finds."
+          "description": "Nearest ancestor shell (light-DOM `closest`; slotted layers stay in the\nconsumer's light tree so this reaches across the slot boundaries), or null\nwhen a layer is used stand-alone (e.g. a bare page in the docs).\n\nAn overlay ends the search: a sheet or a modal dialog is its own scroll\ncontainer and its own top edge, so a page inside one owns its scroller\nwhatever the app around it does. Without this the shell would push its\nroot mode straight through the overlay and the page's sticky header would\nstick against the document, over the content of the overlay. The overlays\nreset --context-scroll-mode as well, which is what the stand-alone read\nbelow then finds."
+        },
+        {
+          "kind": "function",
+          "name": "whenScrollModeProviderDefined",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "adopt",
+              "type": {
+                "text": "(provider: ScrollModeProvider) => void"
+              }
+            }
+          ],
+          "description": "Hands `adopt` the provider above `host` once it is defined, when it was not\nyet at the moment `host` connected.\n\nCustom elements upgrade in the order their modules are defined, and an app\ndoes not control that: importing nldd-sidebar-section defines nldd-page, and\na route that loads before its shell defines the page before the shell. The\nprovider is then in the DOM but has no `registerScrollConsumer` yet, so\nfindScrollModeProvider returns null and the layer starts out stand-alone.\nThis lets it register as soon as the provider is defined. Nothing happens\nwhen the host has left the DOM by then, or sits under another provider."
         },
         {
           "kind": "class",
-          "description": "Reads the inherited `--context-scroll-mode` and reflects it to the host's\n`[data-scroll]` attribute so CSS can branch.\n\nIn root-scroll mode the DOCUMENT scrolls (see nldd-app-view): every layout\nlayer between the document and an nldd-page — app-view, the split views and\ntheir panes — must flow (overflow: visible) instead of clipping, so the page's\nsticky header/footer can stick against the document. Rather than duplicate the\nread-and-reflect logic in each of those components, they share this controller.\n\nThe mode is derived upstream by nldd-app-view. When an app-view is present the\nhost registers as a consumer and app-view pushes an authoritative re-read on\nevery change (a bare `--context-scroll-mode` update would otherwise not reach\nthe resize-polling layers in time — rAF runs before ResizeObserver). Without\nan app-view (a stand-alone page), it falls back to re-reading on window resize\nso a manual/media-query override still works. `nldd-page` keeps its own inline\nlogic because it also has to re-wire scroll listeners.",
+          "description": "Reads the inherited `--context-scroll-mode` and reflects it to the host's\n`[data-scroll]` attribute so CSS can branch.\n\nIn root-scroll mode the DOCUMENT scrolls (see nldd-shell): every layout\nlayer between the document and an nldd-page — shell, the split views and\ntheir panes — must flow (overflow: visible) instead of clipping, so the page's\nsticky header/footer can stick against the document. Rather than duplicate the\nread-and-reflect logic in each of those components, they share this controller.\n\nThe mode is derived upstream by nldd-shell. When a shell is present the\nhost registers as a consumer and shell pushes an authoritative re-read on\nevery change (a bare `--context-scroll-mode` update would otherwise not reach\nthe resize-polling layers in time — rAF runs before ResizeObserver). Without\na shell (a stand-alone page), it falls back to re-reading on window resize\nso a manual/media-query override still works. `nldd-page` keeps its own inline\nlogic because it also has to re-wire scroll listeners.",
           "name": "ScrollModeController",
           "members": [
             {
@@ -39365,6 +39753,12 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "_adopt",
+              "privacy": "private",
+              "description": "Switches from stand-alone to push once a provider that was not yet\ndefined at connect is."
+            },
             {
               "kind": "method",
               "name": "hostDisconnected",
@@ -39391,7 +39785,7 @@
                   }
                 }
               ],
-              "description": "ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is\npassed it is applied directly; this is race-free, whereas re-reading\n`getComputedStyle` during a synchronous push can return a stale value for a\ndeeply-nested host (the var may not have propagated through an ancestor's\npending re-render yet). With no argument (resize / no app-view) the inherited\nvar is re-read instead."
+              "description": "ScrollModeConsumer — nldd-shell pushes the mode it derived. When a mode is\npassed it is applied directly; this is race-free, whereas re-reading\n`getComputedStyle` during a synchronous push can return a stale value for a\ndeeply-nested host (the var may not have propagated through an ancestor's\npending re-render yet). With no argument (resize / no shell) the inherited\nvar is re-read instead."
             },
             {
               "kind": "method",
@@ -39438,6 +39832,14 @@
             "module": "src/utilities/scroll-mode-controller.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "whenScrollModeProviderDefined",
+          "declaration": {
+            "name": "whenScrollModeProviderDefined",
+            "module": "src/utilities/scroll-mode-controller.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ScrollModeController",