@nldd/design-system 0.8.96 → 0.8.97

package/dist/components/components.js

@@ -3,8 +3,8 @@ import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-CPa5
 import { i as linkRel, n as setTranslations, r as translate, t as withTranslations } from "./with-translations-C8_0-9y8.js";
 import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-mevRsl4C.js";
-import { t as NLDDIcon } from "./icon-DQHT2C7z.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-NN0SrgS3.js";
+import { t as NLDDIcon } from "./icon-D_ZGezHx.js";
 import { n as isPointerMode, r as isTouchMode, t as isKeyboardMode } from "./input-modality-DhTeUxKi.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { t as VisibilityMixin } from "./visibility-mixin-Crbt8PFP.js";
@@ -2282,6 +2282,7 @@ var textCellStyles = css`
 		color: var(--_text-cell-secondary-color);
 		font: var(--_text-cell-secondary-font);
 		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 
 	.text-cell__text {
@@ -2309,6 +2310,7 @@ var textCellStyles = css`
 		color: var(--_text-cell-secondary-color);
 		font: var(--_text-cell-secondary-font);
 		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 `;
 //#endregion
@@ -8441,8 +8443,8 @@ __decorate([property({
 	attribute: "lg-column-count"
 })], NLDDContainer.prototype, "lgColumnCount", void 0);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDContainer.prototype, "width", void 0);
 __decorate([property({
 	type: String,
@@ -10474,6 +10476,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.selected = false;
 		this.checked = false;
 		this.current = false;
+		this.currentType = "page";
 		this.disabled = false;
 		this._showChildren = false;
 		this._parentType = "list";
@@ -10643,7 +10646,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	/**
 	* A segment marked `current` makes the whole row the current one.
 	*
-	* A row cut into segments has no control of its own, so `aria-current="page"`
+	* A row cut into segments has no control of its own, so `aria-current`
 	* belongs on the segment that holds the link. Written there, the row would
 	* stay unpainted and the consumer had to set `current` twice, once for the
 	* semantics and once for the color, with nothing to catch the two drifting
@@ -10728,7 +10731,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		});
 	}
 	updated(changed) {
-		if (changed.has("selected") || changed.has("current") || changed.has("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
+		if (changed.has("selected") || changed.has("current") || changed.has("currentType") || changed.has("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
 		if (changed.has("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href")) {
 			this._updateInteractive();
 			this._warnOnNestedControl();
@@ -10822,7 +10825,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 			this.removeAttribute("aria-selected");
 		}
 		const action = this._action;
-		if (this._parentType === "navigation" && (this.current || this.selected) && action) action.setAttribute("aria-current", "page");
+		if (this._parentType === "navigation" && (this.current || this.selected) && action) action.setAttribute("aria-current", this.currentType);
 		else action?.removeAttribute("aria-current");
 	}
 	/**
@@ -11096,6 +11099,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItem.prototype, "current", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "current-type",
+	converter: reflectNonDefault("page")
+})], NLDDListItem.prototype, "currentType", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -12468,9 +12476,13 @@ var imageStyles = css`
 		--_image-error-padding: var(--primitives-space-8);
 		--_image-error-gap: var(--primitives-space-2);
 		--_image-caption-row-gap: var(--primitives-space-8);
+		--_image-pending-background-color: var(--semantics-categories-neutral-tinted-background-color);
+		--_image-empty-icon-size: var(--primitives-space-32);
+		--_image-empty-icon-color: light-dark(var(--primitives-color-neutral-450), var(--primitives-color-neutral-550));
 		--_image-object-fit: cover;
 		--_image-object-position: center;
 		--_image-max-width: 100%;
+		--_image-media-height: var(--context-image-height, auto);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -12531,6 +12543,7 @@ var imageStyles = css`
 		position: relative;
 		overflow: hidden;
 		max-width: 100%;
+		height: var(--_image-media-height);
 		border-radius: var(--_image-corner-radius);
 	}
 
@@ -12799,6 +12812,37 @@ var imageStyles = css`
 	}
 
 
+	/* # Empty and loading */
+
+	.image__media.is-loading {
+		background-color: var(--_image-pending-background-color);
+	}
+
+	.image__media--empty {
+		display: flex;
+		background-color: var(--_image-pending-background-color);
+		width: 100%;
+		height: 100%;
+		aspect-ratio: 16 / 9;
+		align-items: center;
+		justify-content: center;
+	}
+
+	@media (forced-colors: active) {
+		.image__media--empty {
+			outline: 1px solid CanvasText;
+			outline-offset: -1px;
+		}
+	}
+
+	.image__empty-icon {
+		display: block;
+		width: var(--_image-empty-icon-size);
+		height: var(--_image-empty-icon-size);
+		color: var(--_image-empty-icon-color);
+	}
+
+
 	/* # Error state
 	   Centred icon + alt-text shown when the image fails to load. The media is
 	   painted gray (--_image-background-color) via :host([errored]) so the icon and
@@ -12875,8 +12919,11 @@ function imageTemplate(component) {
 			mediaStyles[`--context-lqip-c${i + 1}`] = String(cell);
 		});
 	}
+	const isEmpty = component._isEmpty;
 	const mediaClasses = classMap({
 		"image__media": true,
+		"image__media--empty": isEmpty,
+		"is-loading": !isEmpty && !hasLqip && !component._hasSlottedMedia && !component._imageLoaded && !component._imageErrored,
 		"image__media--lqip": hasLqip && !component._imageErrored
 	});
 	const fallbackImg = html`
@@ -12915,8 +12962,10 @@ function imageTemplate(component) {
 	const media = html`
 		<div class=${mediaClasses}
 			style=${styleMap(mediaStyles)}
+			aria-hidden=${isEmpty ? "true" : nothing}
 		>
-			<slot @slotchange=${component._onMediaSlotChange}>${fallbackImg}</slot>
+			<slot @slotchange=${component._onMediaSlotChange}>${isEmpty ? nothing : fallbackImg}</slot>
+			${isEmpty ? html`<span class="image__empty-icon"><nldd-icon icon="image"></nldd-icon></span>` : nothing}
 			${errorOverlay}
 			${liveRegion}
 		</div>
@@ -12955,6 +13004,13 @@ var nlddImageTranslations = {
 * 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.
+*
 * @element nldd-image
 *
 * @attr {string} src - Image URL
@@ -12982,7 +13038,7 @@ var nlddImageTranslations = {
 * @attr {string} caption - Caption text shown below the image
 * @attr {string} credit - Smaller credit/attribution text shown beside the caption
 * @attr {boolean} decorative - Decorative image: alt is forced empty + aria-hidden
-* @attr {string} lqip - Low-quality image placeholder as a CSV string
+* @attr {string} lqip - 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
@@ -12991,10 +13047,14 @@ var nlddImageTranslations = {
 *   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.
+*   preview.
 * @attr {object} translations - Override translation keys (e.g. the message
 *   shown when the image fails to load); unset keys fall back to Dutch.
 *
+* A parent that gives the image a fixed box, such as the media area of
+* nldd-hero, sets `--context-image-height: 100%` on it, so the image fills that
+* box instead of taking the height of the photo.
+*
 * @slot - Custom `<img>`, `<picture>` or inline `<svg>` (overrides the src-based default). An inline svg keeps its own colors and scales by its viewBox, so a drawing gets the same box, ratio and caption as a photo. Slotted media carries its own text alternative: an `alt` on the img (empty when it conveys nothing), or `role="img"` with an `aria-label`, `aria-labelledby` or `<title>` on the svg.
 *   The internal `error` listener is attached only to the built-in `<img>`, so
 *   slotted content does not trigger the error-state overlay automatically.
@@ -13028,6 +13088,7 @@ var _NLDDImage = class NLDDImage extends LitElement {
 		this._warnedWidth = false;
 		this._warnedAlt = false;
 		this._onMediaSlotChange = () => {
+			this.requestUpdate();
 			this._warnMissingAlt();
 		};
 		this._onImageLoad = () => {
@@ -13131,6 +13192,15 @@ var _NLDDImage = class NLDDImage extends LitElement {
 	_slottedMedia() {
 		return ((this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements() ?? []).flatMap((el) => el instanceof HTMLSlotElement ? el.assignedElements({ flatten: true }) : [el]);
 	}
+	/** Whether anything sits in the default slot. Read off the light DOM, so
+	*  the first render already knows and an image does not flash empty. */
+	get _hasSlottedMedia() {
+		return Array.from(this.children).some((el) => !el.hasAttribute("slot"));
+	}
+	/** No image at all: the component shows where one belongs. */
+	get _isEmpty() {
+		return !this.src && !this.srcset && !this._parsedLqip && !this._hasSlottedMedia;
+	}
 	firstUpdated() {
 		const img = this.shadowRoot?.querySelector(".image__img");
 		if (img?.complete && img.naturalWidth > 0) this._imageLoaded = true;
@@ -13152,8 +13222,8 @@ var _NLDDImage = class NLDDImage extends LitElement {
 };
 var NLDDImage = (_NLDDImage.styles = imageStyles, _NLDDImage);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDImage.prototype, "src", void 0);
 __decorate([property({ type: String })], NLDDImage.prototype, "alt", void 0);
 __decorate([property({ type: String })], NLDDImage.prototype, "srcset", void 0);
@@ -13225,18 +13295,30 @@ var nlddRichTextTranslations = { "components.rich-text.table-scroll-label": "Scr
 * 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
+* 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.
 *
+* ## Headings
+* 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.
+*
 * ## Width zones
-* 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
+* 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.
 *
@@ -13252,11 +13334,12 @@ var nlddRichTextTranslations = { "components.rich-text.table-scroll-label": "Scr
 * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
 * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
 * @attr {boolean} hyphens - 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.
+*   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.
 */
 var MANAGED_LABEL_ATTR = "data-nldd-managed-label";
 var NLDDRichText = class NLDDRichText extends LitElement {
@@ -38126,39 +38209,61 @@ NLDDTokenField = _NLDDTokenField = __decorate([customElement("nldd-token-field")
 //#endregion
 //#region src/utilities/scroll-mode-controller.ts
 /** Bubbling + composed event a horizontal split view fires when it collapses to
-*  (or expands out of) a single visible column. nldd-app-view listens for it to
+*  (or expands out of) a single visible column. nldd-shell listens for it to
 *  derive the document-vs-nested scroll mode. */
 var SINGLE_COLUMN_CHANGE_EVENT = "nldd-single-column-change";
-/** Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the
+var PROVIDER_SELECTOR = "nldd-shell, nldd-sheet, nldd-modal-dialog";
+/** Nearest ancestor shell (light-DOM `closest`; slotted layers stay in the
 *  consumer's light tree so this reaches across the slot boundaries), or null
 *  when a layer is used stand-alone (e.g. a bare page in the docs).
 *
 *  An overlay ends the search: a sheet or a modal dialog is its own scroll
 *  container and its own top edge, so a page inside one owns its scroller
-*  whatever the app around it does. Without this the app-view would push its
+*  whatever the app around it does. Without this the shell would push its
 *  root mode straight through the overlay and the page's sticky header would
 *  stick against the document, over the content of the overlay. The overlays
 *  reset --context-scroll-mode as well, which is what the stand-alone read
 *  below then finds. */
 function findScrollModeProvider(host) {
-	const el = host.closest?.("nldd-app-view, nldd-sheet, nldd-modal-dialog");
+	const el = host.closest?.(PROVIDER_SELECTOR);
 	return el && "registerScrollConsumer" in el ? el : null;
 }
 /**
+* Hands `adopt` the provider above `host` once it is defined, when it was not
+* yet at the moment `host` connected.
+*
+* Custom elements upgrade in the order their modules are defined, and an app
+* does not control that: importing nldd-sidebar-section defines nldd-page, and
+* a route that loads before its shell defines the page before the shell. The
+* provider is then in the DOM but has no `registerScrollConsumer` yet, so
+* findScrollModeProvider returns null and the layer starts out stand-alone.
+* This lets it register as soon as the provider is defined. Nothing happens
+* when the host has left the DOM by then, or sits under another provider.
+*/
+function whenScrollModeProviderDefined(host, adopt) {
+	const el = host.closest?.(PROVIDER_SELECTOR);
+	if (!el || "registerScrollConsumer" in el) return;
+	customElements.whenDefined(el.localName).then(() => {
+		if (!host.isConnected) return;
+		const provider = findScrollModeProvider(host);
+		if (provider && provider === el) adopt(provider);
+	});
+}
+/**
 * Reads the inherited `--context-scroll-mode` and reflects it to the host's
 * `[data-scroll]` attribute so CSS can branch.
 *
-* In root-scroll mode the DOCUMENT scrolls (see nldd-app-view): every layout
-* layer between the document and an nldd-page — app-view, the split views and
+* In root-scroll mode the DOCUMENT scrolls (see nldd-shell): every layout
+* layer between the document and an nldd-page — shell, the split views and
 * their panes — must flow (overflow: visible) instead of clipping, so the page's
 * sticky header/footer can stick against the document. Rather than duplicate the
 * read-and-reflect logic in each of those components, they share this controller.
 *
-* The mode is derived upstream by nldd-app-view. When an app-view is present the
-* host registers as a consumer and app-view pushes an authoritative re-read on
+* The mode is derived upstream by nldd-shell. When a shell is present the
+* host registers as a consumer and shell pushes an authoritative re-read on
 * every change (a bare `--context-scroll-mode` update would otherwise not reach
 * the resize-polling layers in time — rAF runs before ResizeObserver). Without
-* an app-view (a stand-alone page), it falls back to re-reading on window resize
+* a shell (a stand-alone page), it falls back to re-reading on window resize
 * so a manual/media-query override still works. `nldd-page` keeps its own inline
 * logic because it also has to re-wire scroll listeners.
 */
@@ -38167,6 +38272,12 @@ var ScrollModeController = class {
 		this.mode = "nested";
 		this._raf = 0;
 		this._provider = null;
+		this._adopt = (provider) => {
+			if (this._provider) return;
+			window.removeEventListener("resize", this._onResize);
+			this._provider = provider;
+			provider.registerScrollConsumer(this);
+		};
 		this._onResize = () => {
 			if (this._raf) return;
 			this._raf = requestAnimationFrame(() => {
@@ -38184,6 +38295,7 @@ var ScrollModeController = class {
 		else {
 			window.addEventListener("resize", this._onResize, { passive: true });
 			this.read();
+			whenScrollModeProviderDefined(this._host, this._adopt);
 		}
 	}
 	hostDisconnected() {
@@ -38194,11 +38306,11 @@ var ScrollModeController = class {
 		if (this._raf) cancelAnimationFrame(this._raf);
 	}
 	/**
-	* ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is
+	* ScrollModeConsumer — nldd-shell pushes the mode it derived. When a mode is
 	* passed it is applied directly; this is race-free, whereas re-reading
 	* `getComputedStyle` during a synchronous push can return a stale value for a
 	* deeply-nested host (the var may not have propagated through an ancestor's
-	* pending re-render yet). With no argument (resize / no app-view) the inherited
+	* pending re-render yet). With no argument (resize / no shell) the inherited
 	* var is re-read instead.
 	*/
 	readScrollMode(mode) {
@@ -38217,8 +38329,8 @@ var ScrollModeController = class {
 	}
 };
 //#endregion
-//#region src/components/layout/app-view/app-view.styles.ts
-var appViewStyles = css`
+//#region src/components/layout/shell/shell.styles.ts
+var shellStyles = css`
 	:host {
 		box-sizing: border-box;
 	}
@@ -38228,10 +38340,10 @@ var appViewStyles = css`
 
 	:host {
 		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
-		--_app-view-background-color: var(--context-parent-background-color);
+		--_shell-background-color: var(--context-parent-background-color);
 
 		display: flex;
-		background-color: var(--_app-view-background-color);
+		background-color: var(--_shell-background-color);
 		width: 100%;
 		height: 100%;
 	}
@@ -38242,11 +38354,11 @@ var appViewStyles = css`
 
 	:host([background="tinted"]) {
 		--context-parent-background-color: var(--semantics-surfaces-tinted-background-color);
-		--_app-view-background-color: var(--semantics-surfaces-tinted-background-color);
+		--_shell-background-color: var(--semantics-surfaces-tinted-background-color);
 	}
 
 	/* Root-scroll mode — the DOCUMENT scrolls (see ScrollModeController +
-	   --context-scroll-mode). The app-view is the outermost DS layer, so it grows
+	   --context-scroll-mode). The shell is the outermost DS layer, so it grows
 	   with its content (min-height fills the viewport for short pages), letting a
 	   descendant nldd-page's sticky layers stick against the document. */
 	:host([data-scroll="root"]) {
@@ -38257,7 +38369,7 @@ var appViewStyles = css`
 
 	/* # Block */
 
-	.app-view {
+	.shell {
 		display: flex;
 		min-width: 0;
 		min-height: 0;
@@ -38270,7 +38382,7 @@ var appViewStyles = css`
 
 	/* Root-scroll mode — row axis untouched (this is a column block but a row item
 	   of the host); only stop clipping so descendant sticky layers can escape. */
-	:host([data-scroll="root"]) .app-view {
+	:host([data-scroll="root"]) .shell {
 		overflow: visible;
 	}
 
@@ -38295,18 +38407,18 @@ var appViewStyles = css`
 	}
 `;
 //#endregion
-//#region src/components/layout/app-view/app-view.template.ts
-function appViewTemplate(_component) {
+//#region src/components/layout/shell/shell.template.ts
+function shellTemplate(_component) {
 	return html`
-		<div class="app-view">
+		<div class="shell">
 			<slot></slot>
 		</div>
 	`;
 }
 //#endregion
-//#region src/components/layout/app-view/app-view.ts
+//#region src/components/layout/shell/shell.ts
 /**
-* Nederlandse Digitale Dienst App View Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Shell Component (Lit + TypeScript)
 *
 * The required root shell of a Nederlandse Digitale Dienst application. Always contains
 * a split view or an nldd-page as direct content.
@@ -38314,20 +38426,20 @@ function appViewTemplate(_component) {
 * ## Typography
 * 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
+* 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.
 *
 * ## Background color
 * Set background="tinted" to give the whole application a tinted background.
-* All descendants read --context-parent-background-color via --_app-view-background-color automatically.
+* 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 app-view disconnects.
+* Cleared when the shell disconnects.
 *
 * ## Scroll mode
 * The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll
@@ -38336,31 +38448,31 @@ function appViewTemplate(_component) {
 * 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
+* Set `--context-scroll-mode` on the `nldd-shell` itself to override the
 * derived mode; an inherited value loses from it.
 *
 * ## Overscroll
 * In nested scroll mode `overscroll-behavior: none` is set on
-* `document.documentElement` and `document.body` while the app-view is
+* `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.
 *
-* @element nldd-app-view
+* @element nldd-shell
 *
 * @attr {'base'|'tinted'} background - Background color (cascades to descendants)
 *
 * @slot - Default slot for the application content
 */
-var _NLDDAppView;
+var _NLDDShell;
 var _connectedStack = [];
 function _currentOwner() {
 	for (let i = _connectedStack.length - 1; i >= 0; i--) if (_connectedStack[i].isConnected) return _connectedStack[i];
 	return null;
 }
-var NLDDAppView = (_NLDDAppView = class NLDDAppView extends LitElement {
+var NLDDShell = (_NLDDShell = class NLDDShell extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.background = "base";
@@ -38390,7 +38502,7 @@ var NLDDAppView = (_NLDDAppView = class NLDDAppView extends LitElement {
 	* split view and push it to every registered layer. Without such a split view
 	* the app is a single column at any width, so it scrolls the document: nested
 	* scrolling costs you the rubber-band and the collapsing browser toolbar on
-	* iOS for nothing. Set `--context-scroll-mode: nested` on the `nldd-app-view`
+	* iOS for nothing. Set `--context-scroll-mode: nested` on the `nldd-shell`
 	* itself to override (an inherited value loses from the derived one).
 	*/
 	_evaluateScrollMode() {
@@ -38443,14 +38555,14 @@ var NLDDAppView = (_NLDDAppView = class NLDDAppView extends LitElement {
 		document.body.style.backgroundColor = `var(${token})`;
 	}
 	render() {
-		return appViewTemplate(this);
+		return shellTemplate(this);
 	}
-}, _NLDDAppView.styles = appViewStyles, _NLDDAppView);
+}, _NLDDShell.styles = shellStyles, _NLDDShell);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("base")
-})], NLDDAppView.prototype, "background", void 0);
-NLDDAppView = __decorate([customElement("nldd-app-view")], NLDDAppView);
+})], NLDDShell.prototype, "background", void 0);
+NLDDShell = __decorate([customElement("nldd-shell")], NLDDShell);
 //#endregion
 //#region src/components/layout/split-views/bar-split-view/bar-split-view.styles.ts
 var barSplitViewStyles = css`
@@ -39446,7 +39558,7 @@ var _NLDDNavigationSplitView = class NLDDNavigationSplitView extends LitElement
 		return this.querySelector(":scope > [slot=\"inspector\"]") !== null;
 	}
 	/**
-	* True when collapsed to a single visible pane (full-stack). nldd-app-view
+	* True when collapsed to a single visible pane (full-stack). nldd-shell
 	* reads this — and listens for the `single-column-change` event below — to
 	* switch the whole app to document-level scroll.
 	* @internal
@@ -39892,7 +40004,7 @@ var _NLDDSideBySideSplitView = class NLDDSideBySideSplitView extends LitElement
 		if (changed.has("panes")) this._updateVisiblePanes();
 	}
 	/**
-	* True when only one pane fits. nldd-app-view reads this — and listens for the
+	* True when only one pane fits. nldd-shell reads this — and listens for the
 	* `single-column-change` event below — to switch to document-level scroll.
 	* @internal
 	*/
@@ -40339,7 +40451,7 @@ var pageStyles = css`
 		overflow: hidden;
 	}
 
-	/* Root-scroll mode: the DOCUMENT scrolls (see nldd-app-view), not the page.
+	/* Root-scroll mode: the DOCUMENT scrolls (see nldd-shell), not the page.
 	   The page stops owning an inner scroll container and its sticky-header/footer
 	   stick against the document, offset by the insets above and below
 	   (--context-inset-top/bottom, published by any bars outside the page). The mode is derived upstream and
@@ -40548,7 +40660,7 @@ function pageTemplate(component) {
 * 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
+* 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.
@@ -40632,7 +40744,15 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._insetObserver = null;
 		this._headerFullHeight = 0;
 		this._mainSlot = null;
+		this._mainAttrObserver = null;
 		this._resizeRaf = 0;
+		this._adoptScrollProvider = (provider) => {
+			if (this._scrollProvider) return;
+			window.removeEventListener("resize", this._onResize);
+			this._scrollProvider = provider;
+			provider.registerScrollConsumer(this);
+			if (this.hasUpdated) this._configureScroll();
+		};
 		this._onResize = () => {
 			if (this._resizeRaf) return;
 			this._resizeRaf = requestAnimationFrame(() => {
@@ -40648,8 +40768,9 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			if (!slot) return;
 			const items = slot.assignedElements();
 			const visible = items.filter((el) => !el.hasAttribute("hidden"));
-			const last = visible[visible.length - 1];
-			items.forEach((el) => el.classList.toggle("is-last", el === last));
+			const chosen = visible.filter((el) => el.hasAttribute("grow"));
+			const growing = chosen.length > 0 ? chosen : visible.slice(-1);
+			items.forEach((el) => el.toggleAttribute("data-growing", growing.includes(el)));
 		};
 	}
 	/** True when this page renders a section instead of the document landmarks. @internal */
@@ -40725,6 +40846,7 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 				this._readScrollMode();
 				this._configureScroll();
 			}
+			whenScrollModeProviderDefined(this, this._adoptScrollProvider);
 		}
 	}
 	disconnectedCallback() {
@@ -40748,8 +40870,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._warnOnSecondMain();
 	}
 	/**
-	* ScrollModeConsumer — nldd-app-view pushes the derived mode here; called with
-	* no argument (resize / no app-view) it re-reads the inherited var. @internal
+	* ScrollModeConsumer — nldd-shell pushes the derived mode here; called with
+	* no argument (resize / no shell) it re-reads the inherited var. @internal
 	*/
 	readScrollMode(mode) {
 		if (this._readScrollMode(mode)) this._configureScroll();
@@ -40844,6 +40966,14 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._mainSlot = slot;
 		if (!slot) return;
 		slot.addEventListener("slotchange", this._updateMainItems);
+		this._mainAttrObserver = new MutationObserver((records) => {
+			if (records.some((record) => record.target.parentElement === this)) this._updateMainItems();
+		});
+		this._mainAttrObserver.observe(this, {
+			attributes: true,
+			attributeFilter: ["grow", "hidden"],
+			subtree: true
+		});
 		this._updateMainItems();
 	}
 	_teardownMainSlotListener() {
@@ -40851,6 +40981,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			this._mainSlot.removeEventListener("slotchange", this._updateMainItems);
 			this._mainSlot = null;
 		}
+		this._mainAttrObserver?.disconnect();
+		this._mainAttrObserver = null;
 	}
 	render() {
 		return pageTemplate(this);
@@ -40932,6 +41064,10 @@ var PADDING_KEYS = [
 * - **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's
 *   min-height (so the section is at least that tall) — mirroring how `width`
 *   maps to the body max-width.
+* - **grow**: the section takes the height the page has left, so the footer
+*   sits at the bottom of a short page. Without it, nldd-page lets its last
+*   section grow. nldd-page reads this and marks the growing section with
+*   `data-growing`; it never writes `grow`, which stays the author's.
 *
 * @example
 * ```ts
@@ -40943,6 +41079,7 @@ function PageSectionMixin(Base) {
 		constructor(..._args) {
 			super(..._args);
 			this.background = "inherit";
+			this.grow = false;
 		}
 		updated(changed) {
 			super.updated(changed);
@@ -40989,13 +41126,17 @@ function PageSectionMixin(Base) {
 		}
 	}
 	__decorate([property({
-		type: String,
-		reflect: true
+		reflect: true,
+		converter: reflectNonDefault("inherit")
 	})], WithPageSection.prototype, "background", void 0);
 	__decorate([property({
 		type: String,
 		reflect: true
 	})], WithPageSection.prototype, "height", void 0);
+	__decorate([property({
+		type: Boolean,
+		reflect: true
+	})], WithPageSection.prototype, "grow", void 0);
 	__decorate([property({
 		type: String,
 		reflect: true,
@@ -41097,8 +41238,8 @@ var simpleSectionStyles = css`
 		display: none;
 	}
 
-	:host(:last-child),
-	:host(.is-last) {
+	:host([data-growing]),
+	:host([grow]) {
 		flex-grow: 1;
 	}
 
@@ -41244,6 +41385,7 @@ function simpleSectionTemplate(component) {
 * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
 * @attr {string} [width] - 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.
 * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+* @attr {boolean} grow - 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.
 * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
 * @attr {string} [padding-top] - Top padding override.
 * @attr {string} [padding-bottom] - Bottom padding override.
@@ -41277,8 +41419,8 @@ var _NLDDSimpleSection = class NLDDSimpleSection extends PageSectionMixin(LitEle
 };
 var NLDDSimpleSection = (_NLDDSimpleSection.styles = simpleSectionStyles, _NLDDSimpleSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDSimpleSection.prototype, "width", void 0);
 __decorate([property({
 	reflect: true,
@@ -41320,10 +41462,19 @@ var heroStyles = css`
 		--_hero-lg-padding-bottom: initial;
 		--_hero-max-width: var(--semantics-page-sections-body-max-width);
 		--_hero-media-aspect-ratio: 21 / 9;
-		--_hero-main-width: 50%;
+		--_hero-media-height: auto;
+		--_hero-main-min-width: var(--primitives-area-480);
+		--_hero-main-max-width: var(--primitives-area-640);
+		--_hero-main-width: auto;
 		--_hero-main-background-color: var(--semantics-categories-accent-reference-background-color);
 		--_hero-main-content-color: var(--semantics-categories-accent-reference-content-color);
 		--_hero-main-padding: var(--primitives-space-16);
+		--_hero-main-inset: var(--primitives-space-0);
+		--_hero-sm-main-inset: var(--semantics-page-sections-sm-gap);
+		--_hero-sm-main-overlap: var(--primitives-space-48);
+		--_hero-overlap-size: initial;
+		--_hero-default-overlap-size: var(--primitives-space-0);
+		--_hero-default-media-height: auto;
 
 		${inheritedTextReset}
 		display: flex;
@@ -41336,8 +41487,8 @@ var heroStyles = css`
 		display: none;
 	}
 
-	:host(:last-child),
-	:host(.is-last) {
+	:host([data-growing]),
+	:host([grow]) {
 		flex-grow: 1;
 	}
 
@@ -41345,18 +41496,6 @@ var heroStyles = css`
 		--_hero-max-width: none;
 	}
 
-	:host([main-width="2/3"]) {
-		--_hero-main-width: 66.667%;
-	}
-
-	:host([main-width="3/4"]) {
-		--_hero-main-width: 75%;
-	}
-
-	:host([main-width="full"]) {
-		--_hero-main-width: 100%;
-	}
-
 	:host([main-background="base"]) {
 		--_hero-main-background-color: var(--semantics-surfaces-base-background-color);
 		--_hero-main-content-color: var(--semantics-content-color);
@@ -41469,21 +41608,27 @@ var heroStyles = css`
 
 		@container (max-width: ${smMax$11}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-sm-margin-block) / 2)));
 			padding-bottom: var(--_hero-sm-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-sm-margin-block)));
 		}
 
 		@container (min-width: ${mdMin$10}) and (max-width: ${mdMax$8}) {
 			--_hero-main-padding: var(--primitives-space-24);
+			--_hero-main-inset: var(--semantics-page-sections-md-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-320);
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-md-margin-block) / 2)));
 			padding-bottom: var(--_hero-md-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin$9}) {
 			--_hero-main-padding: var(--primitives-space-32);
+			--_hero-main-inset: var(--semantics-page-sections-lg-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-400);
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-lg-margin-block) / 2)));
 			padding-bottom: var(--_hero-lg-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
@@ -41499,13 +41644,16 @@ var heroStyles = css`
 	.hero__body {
 		display: grid;
 		position: relative;
-		background-color: var(--_hero-main-background-color);
 		width: 100%;
 		max-width: var(--_hero-max-width);
 		flex-grow: 1;
 		grid-template-columns: 100%;
 	}
 
+	:host(:not([data-has-media])) .hero__body {
+		background-color: var(--_hero-main-background-color);
+	}
+
 	/* Without media a base-colored panel would be invisible on the base surface;
 	   give it a full border so the rectangle reads. */
 	:host(:not([data-has-media])[main-background="base"]) .hero__body {
@@ -41518,9 +41666,10 @@ var heroStyles = css`
 	   (instead of aspect-ratio on the body) keeps growth content-driven
 	   rather than rigidly tied to the width. align-self: start stops the
 	   stretch fit from cancelling the ratio. */
-	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
+	:host([data-has-media]) .hero__body::before {
 		@container (min-width: ${mdMin$10}) {
 			content: '';
+			height: var(--_hero-media-height);
 			aspect-ratio: var(--_hero-media-aspect-ratio);
 			grid-area: 1 / 1;
 			align-self: start;
@@ -41554,7 +41703,11 @@ var heroStyles = css`
 		object-fit: cover !important;
 	}
 
+	/* Two heights: the host fills the media area, and the variable makes the
+	   image inside the host fill the host. Without either one it collapses. */
 	.hero__media ::slotted(nldd-image) {
+		--context-image-height: 100%;
+
 		display: block !important;
 		width: 100% !important;
 		height: 100% !important;
@@ -41583,7 +41736,9 @@ var heroStyles = css`
 		align-self: end;
 		justify-self: start;
 		background-color: var(--_hero-main-background-color);
-		width: var(--_hero-main-width);
+		width: fit-content;
+		min-width: min(var(--_hero-main-min-width), 100% - 2 * var(--_hero-main-inset));
+		max-width: min(var(--_hero-main-max-width), 100% - 2 * var(--_hero-main-inset));
 		padding: var(--_hero-main-padding);
 		flex-direction: column;
 		color: var(--_hero-main-content-color);
@@ -41591,6 +41746,26 @@ var heroStyles = css`
 
 	:host(:not([data-has-media])) .hero__main {
 		width: 100%;
+		min-width: 0;
+		max-width: none;
+	}
+
+	:host([data-has-media]) .hero__main {
+		margin: var(--_hero-main-inset);
+	}
+
+	:host([data-has-media][data-main-width-length]) .hero__main {
+		@container (min-width: ${mdMin$10}) {
+			width: var(--_hero-main-width);
+			min-width: 0;
+			max-width: calc(100% - 2 * var(--_hero-main-inset));
+		}
+	}
+
+	:host([data-has-media][main-width="full"]) .hero__main {
+		width: auto;
+		max-width: none;
+		justify-self: stretch;
 	}
 
 	:host([main-position="top-left"]) .hero__main {
@@ -41606,6 +41781,15 @@ var heroStyles = css`
 		justify-self: end;
 	}
 
+	:host([main-position="bottom-center"]) .hero__main {
+		justify-self: center;
+	}
+
+	:host([main-position="top-center"]) .hero__main {
+		align-self: start;
+		justify-self: center;
+	}
+
 	:host([main-position="left"]) .hero__main {
 		align-self: stretch;
 	}
@@ -41622,32 +41806,38 @@ var heroStyles = css`
 	}
 
 
-	/* # Full-width strip (md+)
-	   With main-width="full" the panel is a full top or bottom strip and the
-	   media stacks on the opposite side instead of sitting behind it. Switch the
-	   body to a column so the two blocks stack: a bottom panel keeps the media on
-	   top, a top panel (column-reverse) drops it below. The media keeps the
-	   overlay's 21/9 strip. Below sm every layout already stacks, so this only
-	   targets md and up. */
+	/* # Overlap (md+) — the media keeps a fixed height; the panel sits in the
+	   row below it, pulled up over it by the overlap size. */
 
 	@container (min-width: ${mdMin$10}) {
-		:host([data-has-media][main-width="full"]) .hero__body {
-			display: flex;
-			flex-direction: column;
+		:host([data-has-media]:not([layout="contained"])) .hero__body::before {
+			content: none;
+		}
+
+		:host([data-has-media]:not([layout="contained"])) .hero__media {
+			position: relative;
+			width: 100%;
+			height: var(--_hero-media-height);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
+			grid-area: 1 / 1;
+			align-self: start;
 		}
 
-		:host([data-has-media][main-width="full"]:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
+		:host([data-has-media]:not([layout="contained"]):not([media-height], [media-aspect-ratio])) .hero__media {
+			height: var(--_hero-default-media-height);
 		}
 
-		:host([data-has-media][main-width="full"]) .hero__media {
-			position: static;
-			aspect-ratio: var(--_hero-media-aspect-ratio);
+		:host([data-has-media]:not([layout="contained"])) .hero__main {
+			margin-top: calc(-1 * var(--_hero-overlap-size, var(--_hero-default-overlap-size)));
+			margin-bottom: 0;
+			grid-area: 2 / 1;
+			align-self: start;
 		}
 	}
 
 
-	/* # Mobile — stack media over a full-width panel. */
+	/* # Mobile — the media on top, the panel below it, indented and overlapping
+	   it a little. */
 
 	@container (max-width: ${smMax$11}) {
 		.hero__body {
@@ -41655,18 +41845,24 @@ var heroStyles = css`
 			flex-direction: column;
 		}
 
-		:host(:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
-		}
-
 		.hero__media {
 			position: static;
+			width: 100%;
+			height: var(--_hero-media-height);
 			overflow: hidden;
 			aspect-ratio: var(--_hero-media-aspect-ratio);
 		}
 
 		.hero__main {
 			width: 100%;
+			min-width: 0;
+			max-width: none;
+		}
+
+		:host([data-has-media]) .hero__main {
+			margin: calc(-1 * var(--_hero-sm-main-overlap)) var(--_hero-sm-main-inset) 0;
+			width: auto;
+			align-self: stretch;
 		}
 	}
 `;
@@ -41705,15 +41901,40 @@ function heroTemplate(component) {
 /**
 * Nederlandse Digitale Dienst Hero Component (Lit + TypeScript)
 *
-* 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
+* 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.
@@ -41722,17 +41943,19 @@ function heroTemplate(component) {
 *
 * @attr {'inherit'|'base'|'tinted'} background - Surface behind the hero (section API)
 * @attr {string} width - Body max-width; 'full' removes the bound (section API)
-* @attr {string} height - Minimum height of the section (section API)
+* @attr {boolean} grow - 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.
 * @attr {string} padding-block - Block padding override, also per edge and responsive (section API)
+* @attr {'contained'|'overlap'} layout - 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
 * @attr {string} main-background - Surface color of the panel: 'base' (the base surface)
 *   or a category color — 'accent' (default) or a Rijkshuisstijl color such as
 *   'lintblauw'|'donkerblauw'|'oranje'
-* @attr {'1/2'|'2/3'|'3/4'|'full'} main-width - Width of the panel (default: '1/2');
-*   'full' makes a full top or bottom strip and is ignored with 'left'/'right'
-* @attr {'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left'|'right'} main-position -
+* @attr {string} main-width - 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'
+* @attr {'top-left'|'top-center'|'top-right'|'bottom-left'|'bottom-center'|'bottom-right'|'left'|'right'} main-position -
 *   Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height
+* @attr {string} overlap-size - 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
 * @attr {string} media-aspect-ratio - 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
+* @attr {string} media-height - 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
 * @attr {string} media-src - Source of the media area (an alternative to the media slot);
 *   ignored as soon as the media slot is filled
 * @attr {string} media-srcset - Responsive source set for media-src
@@ -41744,19 +41967,42 @@ function heroTemplate(component) {
 *   otherwise give a describing alt text.
 * @slot - Content of the text panel (nldd-title and nldd-rich-text with color="inherit", for instance)
 */
-var _NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
+var _NLDDHero;
+var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer"
+]);
+/**
+* Whether `property` takes `value` as a value of its own. CSS.supports alone
+* also says yes to the CSS-wide keywords, for any property; written into a
+* custom property those would not fall back to the default but resolve to
+* something else.
+*/
+function takesValue(property, value) {
+	return !CSS_WIDE_KEYWORDS.has(value.trim().toLowerCase()) && CSS.supports(property, value);
+}
+var NLDDHero = (_NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.width = "";
+		this.layout = "overlap";
 		this.mainBackground = "accent";
-		this.mainWidth = "1/2";
+		this.mainWidth = "auto";
 		this.mainPosition = "bottom-left";
 		this.mediaAspectRatio = "";
+		this.overlapSize = "";
+		this.mediaHeight = "";
 		this.mediaSrc = "";
 		this.mediaSrcset = "";
 		this.mediaSizes = "";
 		this.mediaAlt = "";
 		this._slotHasMedia = false;
+		this._warnedHeight = false;
+		this._overlapObserver = null;
+		this._warnedOverlap = false;
 	}
 	/** Media is present when the slot has content or media-src is set. */
 	get _hasMedia() {
@@ -41766,19 +42012,75 @@ var _NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
 		super.willUpdate(changed);
 		this.toggleAttribute("data-has-media", this._hasMedia);
 	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._overlapObserver?.disconnect();
+		this._overlapObserver = null;
+		this._warnedOverlap = false;
+	}
 	updated(changed) {
 		super.updated(changed);
 		if (changed.has("width")) {
 			const w = this.width;
-			if (w && w !== "full" && CSS.supports("max-width", w)) this.style.setProperty("--_hero-max-width", w);
+			if (w && w !== "full" && takesValue("max-width", w)) this.style.setProperty("--_hero-max-width", w);
 			else this.style.removeProperty("--_hero-max-width");
 		}
+		if (changed.has("mainWidth")) {
+			const width = (this.mainWidth ?? "").trim();
+			const valid = width !== "" && width !== "auto" && width !== "full" && takesValue("width", width);
+			if (valid) this.style.setProperty("--_hero-main-width", width);
+			else this.style.removeProperty("--_hero-main-width");
+			this.toggleAttribute("data-main-width-length", valid);
+		}
+		if (changed.has("overlapSize")) {
+			const size = (this.overlapSize ?? "").trim();
+			if (size && takesValue("margin-top", size)) this.style.setProperty("--_hero-overlap-size", size);
+			else this.style.removeProperty("--_hero-overlap-size");
+		}
+		if (changed.has("mediaHeight")) {
+			const height = (this.mediaHeight ?? "").trim();
+			if (height && takesValue("height", height)) this.style.setProperty("--_hero-media-height", height);
+			else this.style.removeProperty("--_hero-media-height");
+		}
+		if (changed.has("height") && this.height) this.style.removeProperty("min-height");
 		if (changed.has("mediaAspectRatio")) {
 			const ratio = (this.mediaAspectRatio ?? "").replace(":", "/").trim();
-			if (ratio && CSS.supports("aspect-ratio", ratio)) this.style.setProperty("--_hero-media-aspect-ratio", ratio);
+			if (ratio && takesValue("aspect-ratio", ratio)) this.style.setProperty("--_hero-media-aspect-ratio", ratio);
 			else this.style.removeProperty("--_hero-media-aspect-ratio");
 		}
 	}
+	_watchOverlap() {
+		if (!(this.layout !== "contained" && typeof ResizeObserver !== "undefined")) {
+			this._overlapObserver?.disconnect();
+			this._overlapObserver = null;
+			return;
+		}
+		if (this._overlapObserver) return;
+		const media = this.shadowRoot?.querySelector(".hero__media");
+		const main = this.shadowRoot?.querySelector(".hero__main");
+		if (!media || !main) return;
+		this._overlapObserver = new ResizeObserver(() => this._checkOverlap(media, main));
+		this._overlapObserver.observe(media);
+		this._overlapObserver.observe(main);
+	}
+	/**
+	* In an overlap hero the panel is meant to run on below the image. When it
+	* ends inside it, the content is shorter than `overlap-size`; the consumer
+	* decides how far it runs on, so this only says so, in development.
+	*/
+	_checkOverlap(media, main) {
+		if (!this._hasMedia || getComputedStyle(media).position === "static") return;
+		if (!(main.getBoundingClientRect().bottom <= media.getBoundingClientRect().bottom)) {
+			this._warnedOverlap = false;
+			return;
+		}
+		if (this._warnedOverlap) return;
+		this._warnedOverlap = true;
+		console.warn("<nldd-hero>: With layout=\"overlap\" the panel is shorter than `overlap-size` and ends inside the image. Give it more content or a smaller `overlap-size`, or set layout=\"contained\" to keep the panel on the image.", this);
+	}
 	/** @internal Tracks the media slot so the no-media mode can collapse it. */
 	_onMediaSlotChange(e) {
 		const slot = e.target;
@@ -41787,12 +42089,15 @@ var _NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
 	render() {
 		return heroTemplate(this);
 	}
-};
-var NLDDHero = (_NLDDHero.styles = heroStyles, _NLDDHero);
+}, _NLDDHero.styles = heroStyles, _NLDDHero);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDHero.prototype, "width", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("overlap")
+})], NLDDHero.prototype, "layout", void 0);
 __decorate([property({
 	reflect: true,
 	attribute: "main-background",
@@ -41801,7 +42106,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	attribute: "main-width",
-	converter: reflectNonDefault("1/2")
+	converter: reflectNonDefault("auto")
 })], NLDDHero.prototype, "mainWidth", void 0);
 __decorate([property({
 	reflect: true,
@@ -41809,10 +42114,20 @@ __decorate([property({
 	converter: reflectNonDefault("bottom-left")
 })], NLDDHero.prototype, "mainPosition", void 0);
 __decorate([property({
-	type: String,
 	reflect: true,
-	attribute: "media-aspect-ratio"
+	attribute: "media-aspect-ratio",
+	converter: reflectNonDefault("")
 })], NLDDHero.prototype, "mediaAspectRatio", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "overlap-size",
+	converter: reflectNonDefault("")
+})], NLDDHero.prototype, "overlapSize", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "media-height",
+	converter: reflectNonDefault("")
+})], NLDDHero.prototype, "mediaHeight", void 0);
 __decorate([property({
 	type: String,
 	attribute: "media-src"
@@ -41869,6 +42184,11 @@ var fullBleedSectionStyles = css`
 		display: none;
 	}
 
+	:host([data-growing]),
+	:host([grow]) {
+		flex-grow: 1;
+	}
+
 	:host([width="full"]) {
 		--_full-bleed-section-max-width: none;
 	}
@@ -41981,6 +42301,7 @@ function fullBleedSectionTemplate(component) {
 * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
 * @attr {string} [width] - 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.
 * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+* @attr {boolean} grow - 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.
 * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
 * @attr {string} [padding-top] - Top padding override.
 * @attr {string} [padding-bottom] - Bottom padding override.
@@ -42009,8 +42330,8 @@ var _NLDDFullBleedSection = class NLDDFullBleedSection extends PageSectionMixin(
 };
 var NLDDFullBleedSection = (_NLDDFullBleedSection.styles = fullBleedSectionStyles, _NLDDFullBleedSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDFullBleedSection.prototype, "width", void 0);
 NLDDFullBleedSection = __decorate([customElement("nldd-full-bleed-section")], NLDDFullBleedSection);
 //#endregion
@@ -42051,6 +42372,11 @@ var oneThirdTwoThirdsSectionStyles = css`
 		display: none;
 	}
 
+	:host([data-growing]),
+	:host([grow]) {
+		flex-grow: 1;
+	}
+
 	:host([width="full"]) {
 		--_one-third-two-thirds-section-max-width: none;
 	}
@@ -42138,6 +42464,18 @@ var oneThirdTwoThirdsSectionStyles = css`
 		}
 	}
 
+	:host([vertical-alignment="center"]) .one-third-two-thirds-section__columns {
+		@container (min-width: 769px) {
+			align-items: center;
+		}
+	}
+
+	:host([vertical-alignment="bottom"]) .one-third-two-thirds-section__columns {
+		@container (min-width: 769px) {
+			align-items: flex-end;
+		}
+	}
+
 	.one-third-two-thirds-section__left-column {
 		min-width: var(--primitives-area-280);
 		flex-grow: 1;
@@ -42201,10 +42539,12 @@ function oneThirdTwoThirdsSectionTemplate(component) {
 * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
 * @attr {string} [width] - 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.
 * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+* @attr {boolean} grow - 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.
 * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
 * @attr {string} [padding-top] - Top padding override.
 * @attr {string} [padding-bottom] - Bottom padding override.
 * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+* @attr {'top'|'center'|'bottom'} [vertical-alignment] - 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.
 *
 * @slot header - Content above the columns
 * @slot left - Left column (1/3)
@@ -42216,6 +42556,7 @@ var _NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends P
 	constructor(..._args) {
 		super(..._args);
 		this.width = "";
+		this.verticalAlignment = "top";
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
@@ -42231,9 +42572,14 @@ var _NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends P
 };
 var NLDDOneThirdTwoThirdsSection = (_NLDDOneThirdTwoThirdsSection.styles = oneThirdTwoThirdsSectionStyles, _NLDDOneThirdTwoThirdsSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDOneThirdTwoThirdsSection.prototype, "width", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "vertical-alignment",
+	converter: reflectNonDefault("top")
+})], NLDDOneThirdTwoThirdsSection.prototype, "verticalAlignment", void 0);
 NLDDOneThirdTwoThirdsSection = __decorate([customElement("nldd-one-third-two-thirds-section")], NLDDOneThirdTwoThirdsSection);
 //#endregion
 //#region src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts
@@ -42273,6 +42619,11 @@ var twoThirdsOneThirdSectionStyles = css`
 		display: none;
 	}
 
+	:host([data-growing]),
+	:host([grow]) {
+		flex-grow: 1;
+	}
+
 	:host([width="full"]) {
 		--_two-thirds-one-third-section-max-width: none;
 	}
@@ -42360,6 +42711,18 @@ var twoThirdsOneThirdSectionStyles = css`
 		}
 	}
 
+	:host([vertical-alignment="center"]) .two-thirds-one-third-section__columns {
+		@container (min-width: 769px) {
+			align-items: center;
+		}
+	}
+
+	:host([vertical-alignment="bottom"]) .two-thirds-one-third-section__columns {
+		@container (min-width: 769px) {
+			align-items: flex-end;
+		}
+	}
+
 	.two-thirds-one-third-section__left-column {
 		min-width: var(--primitives-area-280);
 		flex-grow: 2;
@@ -42423,10 +42786,12 @@ function twoThirdsOneThirdSectionTemplate(component) {
 * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
 * @attr {string} [width] - 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.
 * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+* @attr {boolean} grow - 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.
 * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
 * @attr {string} [padding-top] - Top padding override.
 * @attr {string} [padding-bottom] - Bottom padding override.
 * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+* @attr {'top'|'center'|'bottom'} [vertical-alignment] - 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.
 *
 * @slot header - Content above the columns
 * @slot - Left column (2/3), alternative for slot="left"
@@ -42438,6 +42803,7 @@ var _NLDDTwoThirdsOneThirdSection = class NLDDTwoThirdsOneThirdSection extends P
 	constructor(..._args) {
 		super(..._args);
 		this.width = "";
+		this.verticalAlignment = "top";
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
@@ -42453,9 +42819,14 @@ var _NLDDTwoThirdsOneThirdSection = class NLDDTwoThirdsOneThirdSection extends P
 };
 var NLDDTwoThirdsOneThirdSection = (_NLDDTwoThirdsOneThirdSection.styles = twoThirdsOneThirdSectionStyles, _NLDDTwoThirdsOneThirdSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDTwoThirdsOneThirdSection.prototype, "width", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "vertical-alignment",
+	converter: reflectNonDefault("top")
+})], NLDDTwoThirdsOneThirdSection.prototype, "verticalAlignment", void 0);
 NLDDTwoThirdsOneThirdSection = __decorate([customElement("nldd-two-thirds-one-third-section")], NLDDTwoThirdsOneThirdSection);
 //#endregion
 //#region src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts
@@ -42495,6 +42866,11 @@ var oneHalfOneHalfSectionStyles = css`
 		display: none;
 	}
 
+	:host([data-growing]),
+	:host([grow]) {
+		flex-grow: 1;
+	}
+
 	:host([width="full"]) {
 		--_one-half-one-half-section-max-width: none;
 	}
@@ -42573,6 +42949,14 @@ var oneHalfOneHalfSectionStyles = css`
 		}
 	}
 
+	:host([vertical-alignment="center"]) .one-half-one-half-section__columns {
+		align-items: center;
+	}
+
+	:host([vertical-alignment="bottom"]) .one-half-one-half-section__columns {
+		align-items: flex-end;
+	}
+
 	.one-half-one-half-section__left-column {
 		min-width: var(--primitives-area-280);
 		flex-grow: 1;
@@ -42636,10 +43020,12 @@ function oneHalfOneHalfSectionTemplate(component) {
 * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
 * @attr {string} [width] - 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.
 * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+* @attr {boolean} grow - 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.
 * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
 * @attr {string} [padding-top] - Top padding override.
 * @attr {string} [padding-bottom] - Bottom padding override.
 * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+* @attr {'top'|'center'|'bottom'} [vertical-alignment] - 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.
 *
 * @slot header - Content above the columns
 * @slot - Left column (1/2), alternative for slot="left"
@@ -42651,6 +43037,7 @@ var _NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSec
 	constructor(..._args) {
 		super(..._args);
 		this.width = "";
+		this.verticalAlignment = "top";
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
@@ -42666,9 +43053,14 @@ var _NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSec
 };
 var NLDDOneHalfOneHalfSection = (_NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles, _NLDDOneHalfOneHalfSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDOneHalfOneHalfSection.prototype, "width", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "vertical-alignment",
+	converter: reflectNonDefault("top")
+})], NLDDOneHalfOneHalfSection.prototype, "verticalAlignment", void 0);
 NLDDOneHalfOneHalfSection = __decorate([customElement("nldd-one-half-one-half-section")], NLDDOneHalfOneHalfSection);
 //#endregion
 //#region src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts
@@ -42708,8 +43100,8 @@ var sidebarSectionStyles = css`
 		--_sidebar-section-sticky-top: calc(var(--context-inset-top, 0px) + var(--primitives-space-24));
 		--_sidebar-section-sticky-bottom: calc(var(--context-inset-bottom, 0px) + var(--primitives-space-24));
 		--_sidebar-section-width: var(--primitives-area-320);
-		--_sidebar-section-sidebar-box-background-color: var(--semantics-surfaces-tinted-background-color);
-		--_sidebar-section-sidebar-box-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
+		--_sidebar-section-sidebar-box-background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_sidebar-section-sidebar-box-border-color: var(--semantics-dividers-color);
 
 		display: flex;
 		width: 100%;
@@ -42725,14 +43117,14 @@ var sidebarSectionStyles = css`
 		--_sidebar-section-max-width: none;
 	}
 
-	/* # Growth — mirrors simple-section. The host only grows as the last
-	   (visible) section in an nldd-page; the chain below (block -> body ->
+	/* # Growth — mirrors simple-section. The host only grows when it is the
+	   growing section of an nldd-page, or has grow itself; the chain below (block -> body ->
 	   columns -> main) is unconditional, so whatever height the host gets
 	   always reaches the main column. An nldd-inline-dialog there (itself
 	   flex-grow: 1) then fills and centers in the leftover space. */
 
-	:host(:last-child),
-	:host(.is-last) {
+	:host([data-growing]),
+	:host([grow]) {
 		flex-grow: 1;
 	}
 
@@ -42827,15 +43219,16 @@ var sidebarSectionStyles = css`
 		}
 	}
 
-	/* # Box — tinted always. Sticky + scrollable only beside the main (wide); when
-	   stacked it's a plain full-width tinted box above the main, so no sticky (which
-	   would scroll over the main) and no viewport height cap. */
+	/* # Box — the surface around it, edged by a divider. Sticky + scrollable only
+	   beside the main (wide); when stacked it's a plain full-width box above the
+	   main, so no sticky (which would scroll over the main) and no viewport
+	   height cap. */
 
 	.sidebar-section__sidebar-box {
 		box-sizing: border-box;
 		border-radius: var(--semantics-surfaces-corner-radius);
 		background-color: var(--_sidebar-section-sidebar-box-background-color);
-		box-shadow: inset 0 0 0 var(--semantics-surfaces-border-width) var(--_sidebar-section-sidebar-box-highlight-border-color);
+		box-shadow: inset 0 0 0 var(--semantics-surfaces-border-width) var(--_sidebar-section-sidebar-box-border-color);
 
 		@container (min-width: ${lgMin$4}) {
 			position: sticky;
@@ -43465,8 +43858,8 @@ var NLDDSheet = (_NLDDSheet = class NLDDSheet extends LitElement {
 	}
 }, _NLDDSheet.styles = sheetStyles, _NLDDSheet);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDSheet.prototype, "width", void 0);
 __decorate([property({
 	type: String,
@@ -43493,7 +43886,9 @@ NLDDSheet = __decorate([customElement("nldd-sheet")], NLDDSheet);
 * 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
+*   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
@@ -43521,6 +43916,7 @@ NLDDSheet = __decorate([customElement("nldd-sheet")], NLDDSheet);
 * @element nldd-sidebar-section
 *
 * @attr {string} [width] - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
+* @attr {boolean} grow - 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.
 * @attr {string} [sidebar-label] - Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
 * @attr {object} [translations] - Override translation keys (sheet title fallback, dismiss label); unset keys fall back to Dutch.
 * @attr {boolean} [no-collapse] - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
@@ -43640,8 +44036,8 @@ var _NLDDSidebarSection = class NLDDSidebarSection extends PageSectionMixin(LitE
 };
 var NLDDSidebarSection = (_NLDDSidebarSection.styles = sidebarSectionStyles, _NLDDSidebarSection);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("")
 })], NLDDSidebarSection.prototype, "width", void 0);
 __decorate([property({
 	type: String,
@@ -43745,7 +44141,7 @@ function boxTemplate(_component) {
 * helping users understand their relationship at a glance.
 *
 * @element nldd-box
-* @attr {'tinted'|'base'|'critical'} background - 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.
+* @attr {'tinted'|'base'|'critical'} background - 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).
@@ -45599,7 +45995,7 @@ var listItemSegmentStyles = css`
 function template$9(control, href, target, rel, checked, expanded, current, disabled, accessibleLabel, actionTabindex, popupType, popovertarget, popoverTargetElement, popoverTargetAction) {
 	const content = html`<slot></slot>`;
 	const ariaExpanded = expanded === void 0 ? popupType ? "false" : nothing : String(expanded);
-	const ariaCurrent = current ? "page" : nothing;
+	const ariaCurrent = current ?? nothing;
 	const label = accessibleLabel || nothing;
 	if (control === "link") return html`<a class="list-item-segment"
 			href=${href ?? nothing}
@@ -45641,6 +46037,7 @@ var _NLDDListItemSegment = class NLDDListItemSegment extends LitElement {
 		this.popoverTargetElement = null;
 		this.popoverTargetAction = "toggle";
 		this.current = false;
+		this.currentType = "page";
 		this.disabled = false;
 		this._parentType = "list";
 		this._handleClick = (e) => {
@@ -45729,7 +46126,7 @@ var _NLDDListItemSegment = class NLDDListItemSegment extends LitElement {
 		this.classList.toggle("is-expanded", expanded === true);
 	}
 	render() {
-		return template$9(this._controlType, this.href, this.target, this.rel, this.checked, this.disclosure ? this._rowExpanded : this.expanded, this.current, this.disabled, this.accessibleLabel, this._tabbable === void 0 ? void 0 : this._tabbable ? "0" : "-1", this.popupType, this.popovertarget, this.popoverTargetElement, this.popoverTargetAction);
+		return template$9(this._controlType, this.href, this.target, this.rel, this.checked, this.disclosure ? this._rowExpanded : this.expanded, this.current ? this.currentType : void 0, this.disabled, this.accessibleLabel, this._tabbable === void 0 ? void 0 : this._tabbable ? "0" : "-1", this.popupType, this.popovertarget, this.popoverTargetElement, this.popoverTargetAction);
 	}
 };
 var NLDDListItemSegment = (_NLDDListItemSegment.styles = [listItemSegmentStyles], _NLDDListItemSegment);
@@ -45772,6 +46169,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItemSegment.prototype, "current", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "current-type",
+	converter: reflectNonDefault("page")
+})], NLDDListItemSegment.prototype, "currentType", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -46372,6 +46774,7 @@ var titleCellStyles = css`
 		color: var(--_title-cell-secondary-color);
 		font: var(--primitives-font-body-xs-regular-tight);
 		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 
 	/* Balanced, not pretty: a title is a handful of words, and evening out the
@@ -46402,6 +46805,7 @@ var titleCellStyles = css`
 		color: var(--_title-cell-secondary-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 `;
 //#endregion
@@ -47776,6 +48180,16 @@ var menuBarItemStyles = css`
 		flex-shrink: 0;
 	}
 
+	.menu-bar-item__icon[hidden] {
+		display: none;
+	}
+
+	::slotted([slot="icon"]) {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
 	/* ## Disclosure icon */
 
 	.menu-bar-item__disclosure-icon {
@@ -47821,12 +48235,12 @@ var menuBarItemStyles = css`
 	/* # Icon-only */
 
 	:host([icon-only]) .menu-bar-item,
-	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item {
+	:host([content-priority="icon"][compact]:is([icon]:not([icon=""]), [data-has-icon])) .menu-bar-item {
 		padding: var(--primitives-space-8);
 	}
 
 	:host([icon-only]) .menu-bar-item__text,
-	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item__text {
+	:host([content-priority="icon"][compact]:is([icon]:not([icon=""]), [data-has-icon])) .menu-bar-item__text {
 		position: absolute;
 		margin: -1px;
 		border: 0;
@@ -47852,6 +48266,13 @@ function template$4(component) {
 	const ariaCurrent = component.current ? component.currentType : nothing;
 	const ariaHaspopup = component.expandable ? "menu" : component.haspopup || nothing;
 	const ariaExpanded = component.expandable || component.haspopup ? String(component.expanded) : nothing;
+	const icon = html`
+		<span class="menu-bar-item__icon" ?hidden=${!component.icon && !component._hasSlottedIcon}>
+			<slot name="icon" @slotchange=${component._onIconSlotChange}>
+				${component.icon ? html`<nldd-icon icon=${component.icon}></nldd-icon>` : nothing}
+			</slot>
+		</span>
+	`;
 	if (isLink) return html`
 			<a class="menu-bar-item"
 				href=${safeHref}
@@ -47862,11 +48283,7 @@ function template$4(component) {
 				aria-haspopup=${ariaHaspopup}
 				aria-expanded=${ariaExpanded}
 			>
-				${component.icon ? html`
-					<span class="menu-bar-item__icon">
-						<nldd-icon icon=${component.icon}></nldd-icon>
-					</span>
-				` : nothing}
+				${icon}
 				<span class="menu-bar-item__text">
 					${component.text}
 				</span>
@@ -47889,11 +48306,7 @@ function template$4(component) {
 			.popoverTargetElement=${component.popoverTargetElement}
 			.popoverTargetAction=${component.popoverTargetAction}
 		>
-			${component.icon ? html`
-				<span class="menu-bar-item__icon">
-					<nldd-icon icon=${component.icon}></nldd-icon>
-				</span>
-			` : nothing}
+			${icon}
 			<span class="menu-bar-item__text">
 				${component.text}
 			</span>
@@ -47934,6 +48347,7 @@ function template$4(component) {
 *
 * @fires select - On a click on a non-expandable button item (bubbles, composed)
 *
+* @slot icon - 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`.
 * @slot - 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
@@ -47961,6 +48375,11 @@ var _NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
 		this._menuOpen = false;
 		this._pointerdownWhileMenuOpen = false;
 		this._menuToggleHandler = null;
+		this._hasSlottedIcon = false;
+		this._onIconSlotChange = (e) => {
+			this._hasSlottedIcon = e.target.assignedElements().length > 0;
+			this.toggleAttribute("data-has-icon", this._hasSlottedIcon);
+		};
 		this._onSlotChange = () => {
 			this._wireMenu();
 		};
@@ -48094,6 +48513,7 @@ __decorate([property({
 })], NLDDMenuBarItem.prototype, "expanded", void 0);
 __decorate([property({ attribute: false })], NLDDMenuBarItem.prototype, "popoverTargetElement", void 0);
 __decorate([property({ attribute: false })], NLDDMenuBarItem.prototype, "popoverTargetAction", void 0);
+__decorate([state()], NLDDMenuBarItem.prototype, "_hasSlottedIcon", void 0);
 NLDDMenuBarItem = __decorate([customElement("nldd-menu-bar-item")], NLDDMenuBarItem);
 //#endregion
 //#region src/components/navigation/menu-bar/menu-bar.ts
@@ -49647,7 +50067,7 @@ var _NLDDTopNavigationBar = class NLDDTopNavigationBar extends withTranslations(
 			Promise.resolve().then(() => list_item_exports),
 			Promise.resolve().then(() => text_cell_exports),
 			Promise.resolve().then(() => icon_cell_exports),
-			import("./icon-DQHT2C7z.js").then((n) => n.n)
+			import("./icon-D_ZGezHx.js").then((n) => n.n)
 		]);
 	}
 	_createGlobalMenuSheet() {
@@ -56588,6 +57008,13 @@ function statusBarTemplate(component) {
 * action per bar at most; several actions, or links in running text, belong in
 * nldd-banner.
 *
+* ## Placement
+* 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.
+*
 * ## ARIA
 * role and aria-live are set automatically from the variant:
 * - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader)
@@ -56620,6 +57047,11 @@ var _NLDDStatusBar = class NLDDStatusBar extends LitElement {
 		super.connectedCallback();
 		this._applyAriaForVariant(this.variant);
 	}
+	firstUpdated() {}
+	/** DEV-only: warns when a top bar comes before the status bar. Top bars in an overlay are left out, since a sheet or dialog has its own. */
+	_checkPlacement() {
+		if ([...this.getRootNode().querySelectorAll("nldd-top-navigation-bar, nldd-top-title-bar")].some((bar) => !bar.closest("nldd-sheet, nldd-modal-dialog, nldd-popover, dialog") && (bar.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 && !bar.contains(this))) console.warn("<nldd-status-bar>: The status bar sits below a top bar. It belongs above it, as the first thing on the screen.", this);
+	}
 	updated(changed) {
 		if (changed.has("variant")) this._applyAriaForVariant(this.variant);
 	}
@@ -57514,4 +57946,4 @@ __decorate([property({
 })], NLDDJustInTimeEducation.prototype, "noArrow", void 0);
 NLDDJustInTimeEducation = _NLDDJustInTimeEducation = __decorate([customElement("nldd-just-in-time-education")], NLDDJustInTimeEducation);
 //#endregion
-export { NLDDActivityIndicator, NLDDAppView, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemSegment, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepBar, NLDDStepBarItem, NLDDStepCell, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDText, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDValidationList, NLDDWindow, setTranslations };
+export { NLDDActivityIndicator, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemSegment, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDShell, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepBar, NLDDStepBarItem, NLDDStepCell, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDText, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDValidationList, NLDDWindow, setTranslations };