@nldd/design-system 0.8.96 → 0.8.97

package/custom-elements.json

@@ -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"
           }
         },
         {
@@ -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 --_app-view-background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll inside its pane (nested mode). The mode is derived from the outermost horizontal split view: one column means the document scrolls, several columns mean the panes do. An app without such a split view is a single column at every width and therefore scrolls the document too — nested scrolling would cost it the rubber-band and the collapsing browser toolbar on iOS for nothing. Set `--context-scroll-mode` on the `nldd-app-view` itself to override the derived mode; an inherited value loses from it. In nested scroll mode `overscroll-behavior: none` is set on `document.documentElement` and `document.body` while the app-view is connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s scroll target, this prevents iOS rubber-band on the viewport when scroll gestures land outside an `nldd-page` (e.g. on a top-bar). In root scroll mode the document itself is the scroller, so this is lifted to let the native rubber-band happen. Cleared on last disconnect.",
-          "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": {
@@ -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": [
             {
@@ -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",
@@ -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": [
             {
@@ -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",