@nldd/design-system 0.8.84 → 0.8.86

package/dist/components/components.js

@@ -3,11 +3,11 @@ import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-aG-r
 import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { t as withTranslations } from "./with-translations-CqUV9S5g.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-Sne5TwRG.js";
-import { t as NLDDIcon } from "./icon-VTLbdcvZ.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-CXN0yaVx.js";
+import { t as NLDDIcon } from "./icon-Cd4BloIM.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-vbfhyo7f.js";
+import { t as VisibilityMixin } from "./visibility-mixin-BU1vIMW7.js";
 import { $ as placeholder, A as syntaxTree, B as Tree, C as indentNodeProp, D as matchBrackets, E as languageDataProp, F as NodeProp, G as ViewPlugin, H as Decoration, I as NodeSet, J as dropCursor, K as WidgetType, L as NodeType, M as styleTags, N as tags, S as getIndentation, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as keymap, Z as lineNumbers, a as HighlightStyle, at as EditorSelection, b as foldService, bt as findClusterBreak, c as Language, d as ParseContext, f as StreamLanguage, ft as StateEffect, h as defineLanguageFacet, ht as Transaction, it as Compartment, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as Prec, mt as Text, nt as ChangeDesc, o as IndentContext, ot as EditorState, pt as StateField, q as drawSelection, rt as ChangeSet, st as Facet, tt as Annotation, u as LanguageSupport, ut as RangeSetBuilder, vt as combineConfig, w as indentString, x as getIndentUnit, y as foldNodeProp, yt as countColumn, z as Parser } from "./dist-C6gnorjP.js";
 import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-B_3OW7pC.js";
 import { n as html$2, r as htmlCompletionSource } from "./dist-762GHPyH.js";
@@ -623,6 +623,17 @@ var buttonStyles = css`
 		justify-content: center;
 	}
 
+	/* Those spans are only rendered for the attribute; slotted content lands in a
+	   bare slot. Sizing it here rather than wrapping the slot in the same span,
+	   because that span has a width and would reserve icon space on every button
+	   that has no icon at all. */
+	::slotted([slot="start-icon"]),
+	::slotted([slot="end-icon"]) {
+		flex-shrink: 0;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
 	:host([expandable]) .button {
 		padding-inline-end: calc(var(--_inline-padding) + var(--_gap) + var(--_disclosure-icon-size));
 	}
@@ -7457,10 +7468,10 @@ var containerStyles = css`
 		--_justify-content: initial;
 		--_justify-items: initial;
 		--_align-items: initial;
-		--_gap: 0;
-		--_sm-gap: var(--_gap);
-		--_md-gap: var(--_gap);
-		--_lg-gap: var(--_gap);
+		--_sm-gap: 0;
+		--_md-gap: 0;
+		--_lg-gap: 0;
+		--_gap: var(--_sm-gap);
 		--_padding-top: 0;
 		--_padding-right: 0;
 		--_padding-bottom: 0;
@@ -7481,19 +7492,17 @@ var containerStyles = css`
 		--_slot-sm-order: var(--_slot-order);
 		--_slot-md-order: var(--_slot-order);
 		--_slot-lg-order: var(--_slot-order);
-		/* One resolved gap for every layout to read. Multicol splits the gap
-		   over two properties (column-gap plus a margin on the items), so a
-		   per-breakpoint declaration would have to be repeated in three
-		   rules; swapping the var keeps that in one place. */
-		--_resolved-gap: var(--_gap);
-
-		@media (max-width: ${smMax$17}) { --_resolved-gap: var(--_sm-gap); }
-		@media (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_resolved-gap: var(--_md-gap); }
-		@media (min-width: ${lgMin$14}) { --_resolved-gap: var(--_lg-gap); }
-
-		@container layout-container (max-width: ${smMax$17}) { --_resolved-gap: var(--_sm-gap); }
-		@container layout-container (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_resolved-gap: var(--_md-gap); }
-		@container layout-container (min-width: ${lgMin$14}) { --_resolved-gap: var(--_lg-gap); }
+		/* Two sets, because a container inside a layout-container follows that
+		   container and anywhere else the viewport. Multicol reads the gap in three
+		   rules, so the value is swapped here rather than declared in each. The
+		   bare --_gap is what stands when neither set matches. */
+		@media (max-width: ${smMax$17}) { --_gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_gap: var(--_md-gap); }
+		@media (min-width: ${lgMin$14}) { --_gap: var(--_lg-gap); }
+
+		@container layout-container (max-width: ${smMax$17}) { --_gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin$14}) { --_gap: var(--_lg-gap); }
 
 		display: block;
 		width: var(--_width);
@@ -7576,7 +7585,7 @@ var containerStyles = css`
 		justify-content: var(--_justify-content);
 		justify-items: var(--_justify-items);
 		align-items: var(--_align-items);
-		gap: var(--_resolved-gap);
+		gap: var(--_gap);
 	}
 
 	:host([layout="row"]) .container__inner {
@@ -7599,7 +7608,7 @@ var containerStyles = css`
 	:host([layout="columns"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_resolved-gap);
+		column-gap: var(--_gap);
 	}
 
 	:host([layout="columns"]) ::slotted(*) {
@@ -7612,14 +7621,14 @@ var containerStyles = css`
 	:host([layout="lanes"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_resolved-gap);
+		column-gap: var(--_gap);
 	}
 
 	:host([layout="lanes"]) ::slotted(*) {
 		break-inside: avoid;
 		/* multicol has no row-gap; item margin supplies the vertical gap. The
 		   native branch resets this (grid-lanes gap covers both axes). */
-		margin-bottom: var(--_resolved-gap);
+		margin-bottom: var(--_gap);
 	}
 
 	@supports (display: grid-lanes) {
@@ -7743,6 +7752,57 @@ function containerTemplate(component) {
 	`;
 }
 //#endregion
+//#region src/utilities/spacing-scale.ts
+/**
+* The spacing scale, for the attributes that take a step of it.
+*
+* Spacing is rhythm: the point of a scale is that the space between things is
+* the same handful of numbers on every page, so a value beside it is not a
+* finer choice but a break in the pattern. These attributes take a step and
+* nothing else, and this is the one place that turns a step into its token.
+*
+* Which also settles what the attribute means. `gap="16"` in a component that
+* expected a CSS length wrote `--_gap: 16`, which is not one: the declaration
+* fell away and the gap became zero with nothing said. Anything this cannot
+* place is refused and named in dev instead, a length included — writing an
+* unplaceable value is that same silent zero.
+*/
+/** Every step there is. `'0'` is a value, not the absence of one. */
+var SPACING_SCALE = [
+	"0",
+	"2",
+	"4",
+	"6",
+	"8",
+	"10",
+	"12",
+	"16",
+	"20",
+	"24",
+	"28",
+	"32",
+	"40",
+	"44",
+	"48",
+	"56",
+	"64",
+	"80",
+	"96"
+];
+/**
+* A step of the scale as the token it stands for.
+*
+* Returns null when there is nothing to set, so a caller can remove the
+* property rather than write an empty one. `element` and `attribute` are only
+* there to name the offender in a dev warning.
+*/
+function spacingToValue(value, element, attribute) {
+	if (value === void 0 || value === "") return null;
+	const step = String(value).trim();
+	if (SPACING_SCALE.includes(step)) return step === "0" ? "0" : `var(--primitives-space-${step})`;
+	return null;
+}
+//#endregion
 //#region src/components/layout/container/container.ts
 /**
 * Nederlandse Digitale Dienst Container Component (Lit + TypeScript)
@@ -7793,8 +7853,11 @@ function containerTemplate(component) {
 * independent of the surrounding page width.
 *
 * `layout="lanes"` packs items into balanced columns using native CSS grid
-* lanes where supported, falling back to CSS multicol (column-order)
-* elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`.
+* lanes where supported, falling back to CSS multicol (column-order) elsewhere.
+* CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that
+* nldd-collection's lanes falls back to its own grid rather than to multicol:
+* that component pages, and multicol redistributes the whole set every time
+* load-more adds to it.
 *
 * @element nldd-container
 *
@@ -7866,10 +7929,11 @@ var ORDER_ATTRS = [
 	"md-order",
 	"lg-order"
 ];
-function sizeToValue(size) {
-	if (size === void 0) return null;
-	if (size === "0") return "0";
-	return `var(--primitives-space-${size})`;
+/** A step as its token. `attribute` only names the offender in a dev warning,
+*  so it has to be the attribute the value was written on: with a dozen padding
+*  attributes, "padding/gap is not a step" does not say which one to fix. */
+function sizeToValue(size, attribute) {
+	return spacingToValue(size, "nldd-container", attribute);
 }
 var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 	constructor(..._args) {
@@ -7972,10 +8036,10 @@ var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 			setProp("--_align-items", horizontal);
 			setProp("--_justify-items", null);
 		}
-		setProp("--_gap", sizeToValue(this.gap));
-		setProp("--_sm-gap", sizeToValue(this.smGap));
-		setProp("--_md-gap", sizeToValue(this.mdGap));
-		setProp("--_lg-gap", sizeToValue(this.lgGap));
+		const plainGap = sizeToValue(this.gap, "gap");
+		setProp("--_sm-gap", sizeToValue(this.smGap, "sm-gap") ?? plainGap);
+		setProp("--_md-gap", sizeToValue(this.mdGap, "md-gap") ?? plainGap);
+		setProp("--_lg-gap", sizeToValue(this.lgGap, "lg-gap") ?? plainGap);
 		for (const scope of [
 			"",
 			"sm",
@@ -7984,16 +8048,25 @@ var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 		]) {
 			const [top, right, bottom, left] = this.resolvePadding(scope);
 			const prefix = scope ? `${scope}-` : "";
-			setProp(`--_${prefix}padding-top`, sizeToValue(top));
-			setProp(`--_${prefix}padding-right`, sizeToValue(right));
-			setProp(`--_${prefix}padding-bottom`, sizeToValue(bottom));
-			setProp(`--_${prefix}padding-left`, sizeToValue(left));
+			setProp(`--_${prefix}padding-top`, sizeToValue(top?.size, top?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-right`, sizeToValue(right?.size, right?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-bottom`, sizeToValue(bottom?.size, bottom?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-left`, sizeToValue(left?.size, left?.attribute ?? "padding"));
 		}
 	}
+	/** The four sides, each with the attribute it came from: `padding-top` wins
+	*  over `padding-block`, which wins over `padding`, and a warning about a bad
+	*  value has to name the one that was actually written. */
 	resolvePadding(scope) {
 		const get = (key) => {
 			const prop = scope ? `${scope}${key}` : key.charAt(0).toLowerCase() + key.slice(1);
-			return this[prop];
+			const size = this[prop];
+			if (size === void 0) return void 0;
+			const name = key.replace(/([A-Z])/g, (match, letter, index) => (index ? "-" : "") + letter.toLowerCase());
+			return {
+				size,
+				attribute: scope ? `${scope}-${name}` : name
+			};
 		};
 		const all = get("Padding");
 		const inline = get("PaddingInline");
@@ -8236,7 +8309,10 @@ var listStyles = css`
 		box-sizing: border-box;
 	}
 
-	/* Nothing in it and nothing said about it: not a thing on the page. */
+	/* Nothing in it, nothing said about it and no controls of its own: not a
+	   thing on the page, so a parent that spaces its children keeps no room for
+	   it either. The surface is already gone with .list__main; this takes the
+	   box out of the flow. */
 	:host(.is-blank) {
 		display: none;
 	}
@@ -8319,6 +8395,10 @@ var listStyles = css`
 		display: none;
 	}
 
+	.list__search-bar[hidden] {
+		display: none;
+	}
+
 	.list__main {
 		display: flex;
 		flex-direction: column;
@@ -8517,18 +8597,22 @@ var listStyles = css`
 `;
 //#endregion
 //#region src/components/lists-and-tables/list/list.template.ts
-var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
+var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, hasItems, hasEmptyState, hasNoResultsState, listbox }) => {
 	const isNavigation = type === "navigation";
 	const isListbox = type === "listbox";
 	const skipItemsLabel = isNavigation || isListbox;
-	const itemsRole = isListbox ? "listbox" : type === "tree" ? "tree" : "list";
-	const showEmpty = isEmpty && !(isListbox && listbox.searchValue === "");
-	const showMain = !isEmpty || showEmpty;
+	const itemsRole = isListbox ? "listbox" : type === "tree" ? "tree" : type === "radiogroup" ? "radiogroup" : "list";
+	const isNoResults = isEmpty && hasItems;
+	const noResultsFallsBack = isNoResults && !hasNoResultsState && hasEmptyState;
+	const showNoResults = isNoResults && hasNoResultsState && !(isListbox && listbox.searchValue === "");
+	const showEmpty = !isNoResults && isEmpty && hasEmptyState || noResultsFallsBack && !(isListbox && listbox.searchValue === "");
+	const showMain = !isEmpty || showEmpty || showNoResults;
+	const showControls = hasItems;
 	return html`
 		<div class="list">
 			<div class="list__header">
 				${isListbox ? html`
-					<div class="list__search-bar">
+					<div class="list__search-bar" ?hidden=${!showControls}>
 						<div class="list__search-field">
 							<label class="list__search-field-label">
 								<div class="list__search-field-icon"
@@ -8572,7 +8656,7 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
 						</div>
 					</div>
 				` : nothing}
-				<div class="list__toolbar" ?hidden=${!hasToolbar}>
+				<div class="list__toolbar" ?hidden=${!hasToolbar || !showControls}>
 					<slot name="toolbar"></slot>
 				</div>
 			</div>
@@ -8586,9 +8670,10 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
 					<slot></slot>
 				</div>
 				<div class="list__empty"
-					?hidden=${!showEmpty}
+					?hidden=${!showEmpty && !showNoResults}
 				>
-					<slot name="empty"></slot>
+					<slot name="empty" ?hidden=${!showEmpty}></slot>
+					<slot name="no-results" ?hidden=${!showNoResults}></slot>
 				</div>
 			</div>
 		</div>
@@ -8635,6 +8720,9 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._mergedTranslations = { ...nlddListTranslations };
 		this._hasToolbar = false;
 		this._hasSearchBarEnd = false;
+		this._hasEmptyState = false;
+		this._hasNoResultsState = false;
+		this._hasItems = false;
 		this._isEmpty = false;
 		this._searchValue = "";
 		this._activeId = "";
@@ -8850,6 +8938,8 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		toolbarSlot?.addEventListener("slotchange", () => queueMicrotask(() => {
 			this._hasToolbar = toolbarSlot.assignedElements().length > 0;
 		}));
+		(this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.addEventListener("slotchange", () => queueMicrotask(() => this._updateEmpty()));
+		(this.shadowRoot?.querySelector("slot[name=\"no-results\"]"))?.addEventListener("slotchange", () => queueMicrotask(() => this._updateEmpty()));
 		this._itemsObserver = new MutationObserver((mutations) => {
 			const isRow = (node) => node instanceof Element && node.tagName.toLowerCase() === "nldd-list-item";
 			if (!mutations.some((m) => {
@@ -8997,7 +9087,10 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 	_updateEmpty() {
 		const items = this._getItems();
 		this._isEmpty = items.length === 0 || items.every((item) => item.hasAttribute("hidden"));
-		this.classList.toggle("is-blank", this._isEmpty && !this.querySelector(":scope > [slot=\"empty\"]"));
+		this._hasItems = items.length > 0;
+		this._hasEmptyState = !!this.querySelector(":scope > [slot=\"empty\"]");
+		this._hasNoResultsState = !!this.querySelector(":scope > [slot=\"no-results\"]");
+		this.classList.toggle("is-blank", this._isEmpty && !this._hasItems && !this._hasEmptyState);
 		this._warnSilentEmpty();
 	}
 	/**
@@ -9420,6 +9513,9 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			hasToolbar: this._hasToolbar,
 			type: this.type,
 			isEmpty: this._isEmpty,
+			hasItems: this._hasItems,
+			hasEmptyState: this._hasEmptyState,
+			hasNoResultsState: this._hasNoResultsState,
 			listbox: {
 				listboxId: this._listboxId,
 				searchValue: this._searchValue,
@@ -9466,6 +9562,9 @@ __decorate([property({ type: Object })], NLDDList.prototype, "translations", voi
 __decorate([state()], NLDDList.prototype, "_mergedTranslations", void 0);
 __decorate([state()], NLDDList.prototype, "_hasToolbar", void 0);
 __decorate([state()], NLDDList.prototype, "_hasSearchBarEnd", void 0);
+__decorate([state()], NLDDList.prototype, "_hasEmptyState", void 0);
+__decorate([state()], NLDDList.prototype, "_hasNoResultsState", void 0);
+__decorate([state()], NLDDList.prototype, "_hasItems", void 0);
 __decorate([state()], NLDDList.prototype, "_isEmpty", void 0);
 __decorate([state()], NLDDList.prototype, "_searchValue", void 0);
 __decorate([state()], NLDDList.prototype, "_activeId", void 0);
@@ -9894,7 +9993,7 @@ var listItemStyles = css`
 //#region src/components/lists-and-tables/list-item/list-item.template.ts
 var content = html`<slot></slot>`;
 var divider = html`<div class="list-item__divider"></div>`;
-var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false, disabled = false) => {
+var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, radio = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false, disabled = false) => {
 	const ariaExpanded = expanded === void 0 ? nothing : String(expanded);
 	const children = showChildren ? html`<div class="list-item__children"
 			role="group"
@@ -9927,6 +10026,16 @@ var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 			>${content}</button>
 			${divider}
 		</div>${children}`;
+	if (radio) return html`<div class=${blockClass}>
+			<button class="list-item__action"
+				type="button"
+				role="radio"
+				?disabled=${disabled}
+				aria-checked=${String(checked)}
+				tabindex=${actionTabindex ?? nothing}
+			>${content}</button>
+			${divider}
+		</div>${children}`;
 	if (button) return html`<div class=${blockClass}>
 			<button class="list-item__action"
 				type="button"
@@ -10007,6 +10116,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.current = false;
 		this.button = false;
 		this.checkbox = false;
+		this.radio = false;
 		this.checked = false;
 		this.disabled = false;
 		this.reorderable = false;
@@ -10039,6 +10149,14 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 					composed: true
 				}));
 			}
+			if (this.radio && !this.checkbox && !this.href && !this.checked && e.composedPath().includes(this._action)) {
+				this.checked = true;
+				this.dispatchEvent(new CustomEvent("change", {
+					detail: { checked: true },
+					bubbles: true,
+					composed: true
+				}));
+			}
 		};
 		this._handleFocusIn = () => {
 			this._action?.classList.toggle("is-pointer-focus", isPointerMode());
@@ -10160,7 +10278,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	*/
 	get _isRovingStop() {
 		if (this.disabled) return false;
-		if (this.href || this.button || this.checkbox) return true;
+		if (this.href || this.button || this.checkbox || this.radio) return true;
 		if (this._ownDescendants("nldd-list-item-segment:not([disabled])").length > 0) return true;
 		return this._rovingControls().some((control) => !control.hasAttribute("disabled"));
 	}
@@ -10194,7 +10312,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	*  inside `:host()`, and the row's own padding is what has to change — a
 	*  `::slotted()` rule could only reach the segment. */
 	_updateInteractive() {
-		const interactive = !!this.href || this.button || this.checkbox || this._ownDescendants("nldd-list-item-segment").length > 0;
+		const interactive = !!this.href || this.button || this.checkbox || this.radio || this._ownDescendants("nldd-list-item-segment").length > 0;
 		this.classList.toggle("is-interactive", interactive);
 		const ownChildren = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "children");
 		const isSegment = (el) => el?.tagName.toLowerCase() === "nldd-list-item-segment";
@@ -10251,8 +10369,8 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		});
 	}
 	updated(changed) {
-		if (changed.has("selected") || changed.has("current") || changed.has("button") || changed.has("checkbox") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
-		if (changed.has("button") || changed.has("checkbox") || changed.has("href")) this._updateInteractive();
+		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("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href")) this._updateInteractive();
 		if (changed.has("expanded")) {
 			this._relayExpanded();
 			this._warnOnStrayExpanded();
@@ -10323,7 +10441,10 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.childRows.forEach(fn);
 	}
 	_updateAriaState() {
-		if (this._parentType === "tree") {
+		if (this._parentType === "radiogroup") {
+			this.setAttribute("role", "none");
+			this.removeAttribute("aria-selected");
+		} else if (this._parentType === "tree") {
 			this.setAttribute("role", "treeitem");
 			this.removeAttribute("aria-selected");
 		} else if (this._isListboxOption) {
@@ -10566,7 +10687,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	render() {
 		const opensInNewTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-label") : void 0;
 		const actionTabindex = this._isListboxOption ? "-1" : this._arrowNavigation ? this._rovingActive ? "0" : "-1" : void 0;
-		return template$13(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
+		return template$13(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.radio, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
 	}
 }, _NLDDListItem = _NLDDListItem2, _NLDDListItem2.styles = [listItemStyles], _NLDDListItem2.SIZED_CELLS = "nldd-text-cell, nldd-drag-handle-cell", _NLDDListItem2);
 __decorate([property({
@@ -10589,6 +10710,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItem.prototype, "checkbox", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDListItem.prototype, "radio", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -13150,10 +13275,12 @@ var textStyles = css`
 		--_font-size: var(--primitives-font-size-100);
 		--_font-weight: var(--primitives-font-weight-body-regular);
 		--_line-height: var(--primitives-line-height-snug);
+		--_max-width: var(--semantics-text-max-width);
 		--_color: var(--context-content-color, var(--semantics-content-color));
 		--_text-align: left;
 
 		display: block;
+		max-width: var(--_max-width);
 		color: var(--_color);
 		text-align: var(--_text-align);
 		font: var(--_font-weight) var(--_font-size) / var(--_line-height) var(--primitives-font-family-body);
@@ -13283,6 +13410,12 @@ function template$10() {
 * content, so text inside a row travels with that row as it is hovered or
 * selected. Standalone that channel is unset and the semantic color answers.
 *
+* A line stops at `--semantics-text-max-width`, 40em, so it holds the same
+* number of characters at every size and a wide column does not turn one
+* sentence into a ruler. Override that variable, or `max-width` on the element,
+* where a line is meant to run the full width: a label in a table cell, a value
+* beside its own heading.
+*
 * @element nldd-text
 * @attr {string} size - Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
 * @attr {string} weight - Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale.
@@ -35561,7 +35694,7 @@ var barSplitViewStyles = css`
 	/* Root-scroll mode: the document scrolls (ScrollModeController /
 	   --context-scroll-mode). Bars become sticky layers that stay put while the
 	   main content scrolls under them; their measured heights are published into
-	   --context-layer-top/bottom (see bar-split-view.ts) so a descendant
+	   --context-inset-top/bottom (see bar-split-view.ts) so a descendant
 	   nldd-page's sticky header/footer stack below/above them. The sticky insets
 	   and those offsets are set by JS; bars paint above the content. */
 	:host([data-scroll="root"]) {
@@ -35857,12 +35990,12 @@ var mdMaxPx = parseInt(breakpoints.mdMax);
 var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this._scrollMode = new ScrollModeController(this, () => this._updateLayerOffsets());
+		this._scrollMode = new ScrollModeController(this, () => this._updateInsets());
 		this.background = "inherit";
 		this._currentBreakpoint = null;
 		this._observer = null;
 		this._resizeObserver = null;
-		this._updateLayerOffsets = () => {
+		this._updateInsets = () => {
 			const block = this.shadowRoot?.querySelector(".bar-split-view") ?? null;
 			const main = block?.querySelector(".bar-split-view__main") ?? null;
 			if (!block || !main) return;
@@ -35873,25 +36006,25 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 					el.style.top = "";
 					el.style.bottom = "";
 				});
-				main.style.removeProperty("--context-layer-top");
-				main.style.removeProperty("--context-layer-bottom");
+				main.style.removeProperty("--context-inset-top");
+				main.style.removeProperty("--context-inset-bottom");
 				return;
 			}
 			const cs = getComputedStyle(this);
-			let top = parseFloat(cs.getPropertyValue("--context-layer-top")) || 0;
+			let top = parseFloat(cs.getPropertyValue("--context-inset-top")) || 0;
 			for (let i = 0; i < mainIndex; i++) {
 				children[i].style.top = `${top}px`;
 				children[i].style.bottom = "";
 				top += children[i].offsetHeight;
 			}
-			main.style.setProperty("--context-layer-top", `${top}px`);
-			let bottom = parseFloat(cs.getPropertyValue("--context-layer-bottom")) || 0;
+			main.style.setProperty("--context-inset-top", `${top}px`);
+			let bottom = parseFloat(cs.getPropertyValue("--context-inset-bottom")) || 0;
 			for (let i = children.length - 1; i > mainIndex; i--) {
 				children[i].style.bottom = `${bottom}px`;
 				children[i].style.top = "";
 				bottom += children[i].offsetHeight;
 			}
-			main.style.setProperty("--context-layer-bottom", `${bottom}px`);
+			main.style.setProperty("--context-inset-bottom", `${bottom}px`);
 		};
 	}
 	connectedCallback() {
@@ -35917,7 +36050,7 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 				this._currentBreakpoint = bp;
 				this.requestUpdate();
 			}
-			this._updateLayerOffsets();
+			this._updateInsets();
 		});
 		this._resizeObserver.observe(this);
 	}
@@ -35962,7 +36095,7 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 		});
 	}
 	updated() {
-		this._updateLayerOffsets();
+		this._updateInsets();
 	}
 	render() {
 		return barSplitViewTemplate(this);
@@ -37351,6 +37484,16 @@ var pageStyles = css`
 
 	:host {
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		/* The insets this page arrived with, parked before it adds its own:
+		   republishing --context-inset-top on the element it reads from would be
+		   a cycle. */
+		--_outer-inset-top: var(--context-inset-top, 0px);
+		--_outer-inset-bottom: var(--context-inset-bottom, 0px);
+		--_header-height: 0px;
+		--_footer-height: 0px;
+		/* Set from JS while the page owns the scroller. initial, not a length, so
+		   the fallback stands when the document scrolls instead. */
+		--_scroll-height: initial;
 
 		display: flex;
 		background-color: var(--_background-color);
@@ -37389,9 +37532,8 @@ var pageStyles = css`
 
 	/* Root-scroll mode: the DOCUMENT scrolls (see nldd-app-view), not the page.
 	   The page stops owning an inner scroll container and its sticky-header/footer
-	   become real position:sticky layers against the document, offset by the
-	   cumulative layer heights above/below (--context-layer-top/bottom, published
-	   by any bars sitting outside the page). The mode is derived upstream and
+	   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
 	   delivered as --context-scroll-mode; nldd-page reflects it to [data-scroll]
 	   so these (higher-specificity, later) rules win over the nested ones. */
 	:host([data-scroll="root"]) {
@@ -37427,7 +37569,7 @@ var pageStyles = css`
 	:host([data-scroll="root"]) .page {
 		overflow: visible;
 		flex-shrink: 0;
-		min-height: calc(100dvh - var(--context-layer-top, 0px) - var(--context-layer-bottom, 0px));
+		min-height: calc(100dvh - var(--context-inset-top, 0px) - var(--context-inset-bottom, 0px));
 	}
 
 
@@ -37462,7 +37604,7 @@ var pageStyles = css`
 		opacity: 0;
 		background: linear-gradient(to bottom, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
 		pointer-events: none;
-		height: var(--primitives-space-32);
+		height: var(--primitives-space-24);
 		transition: opacity var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
 	}
 
@@ -37476,18 +37618,34 @@ var pageStyles = css`
 	   only mattered for the absolute overlay. */
 	:host([data-scroll="root"][sticky-header]) .page__header {
 		position: sticky;
-		top: var(--context-layer-top, 0px);
+		top: var(--context-inset-top, 0px);
 		left: auto;
 		right: auto;
 	}
 
+	/* The page adds its own bars to the insets it inherited, so sticky content
+	   inside clears them without knowing a number. The header sits outside this
+	   element and keeps the value without itself in it. */
 	.page__scroll {
+		--context-inset-top: calc(var(--_outer-inset-top) + var(--_header-height));
+		--context-inset-bottom: calc(var(--_outer-inset-bottom) + var(--_footer-height));
+		/* The height sticky content can cap itself on. Unset while the document
+		   scrolls, where the viewport is the whole story. */
+		--context-scroller-height: var(--_scroll-height, 100dvh);
+
 		display: flex;
 		min-height: 0;
 		flex-direction: column;
 		flex-grow: 1;
 	}
 
+	/* Nested scrolling: a sticky child is measured against this element, so the
+	   bars above the page fall outside it and only its own header counts. */
+	:host(:not([data-scroll="root"])) .page__scroll {
+		--context-inset-top: var(--_header-height);
+		--context-inset-bottom: var(--_footer-height);
+	}
+
 	:host([sticky-header]) .page__scroll {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -37526,12 +37684,12 @@ var pageStyles = css`
 		right: 0;
 		background: linear-gradient(to top, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
 		pointer-events: none;
-		height: var(--primitives-space-32);
+		height: var(--primitives-space-24);
 	}
 
 	/* Root-scroll mode: footer sticks to the document bottom, above any bottom bars. */
 	:host([data-scroll="root"][sticky-footer]) .page__footer {
-		bottom: var(--context-layer-bottom, 0px);
+		bottom: var(--context-inset-bottom, 0px);
 	}
 `;
 //#endregion
@@ -37566,10 +37724,18 @@ function pageTemplate(component) {
 *
 * 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 become position:sticky layers offset by
-* --context-layer-top/bottom. The mode is read on connect/resize and reflected
+* 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.
+*
 * @element nldd-page
 *
 * @attr {boolean} sticky-header - Sticky header
@@ -37593,6 +37759,7 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollTarget = null;
 		this._scrollProvider = null;
 		this._headerObserver = null;
+		this._insetObserver = null;
 		this._mainSlot = null;
 		this._resizeRaf = 0;
 		this._onResize = () => {
@@ -37641,6 +37808,9 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	get _scrollEl() {
 		return this.shadowRoot?.querySelector(".page__scroll") ?? null;
 	}
+	get _footerEl() {
+		return this.shadowRoot?.querySelector(".page__footer") ?? null;
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.style.containerType = "inline-size";
@@ -37665,6 +37835,7 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
 		this._teardownScrollListener();
 		this._teardownHeaderObserver();
+		this._teardownInsetObserver();
 		this._teardownMainSlotListener();
 	}
 	firstUpdated() {
@@ -37695,8 +37866,41 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		if (this._scrollEl) this._scrollEl.style.paddingTop = "";
 		this._setupScrollListener();
 		if (this.stickyHeader && !this._isRoot) this._setupHeaderObserver();
+		this._setupInsetObserver();
 		this._onScroll();
 	}
+	/**
+	* Publishes the page's own sticky bars as insets, so sticky content inside
+	* the page knows how far to clear.
+	*
+	* Measured rather than assumed: a top title bar shrinks as you scroll past
+	* its anchor, and a consumer that had written the number down would be wrong
+	* from that moment on. A bar that is not sticky scrolls away and adds
+	* nothing, so it stays at zero.
+	*/
+	_setupInsetObserver() {
+		this._teardownInsetObserver();
+		const header = this._headerEl;
+		const footer = this._footerEl;
+		if (!header || !footer) return;
+		const publish = () => {
+			this.style.setProperty("--_header-height", `${this.stickyHeader ? header.offsetHeight : 0}px`);
+			this.style.setProperty("--_footer-height", `${this.stickyFooter ? footer.offsetHeight : 0}px`);
+			if (this._isRoot) this.style.removeProperty("--_scroll-height");
+			else this.style.setProperty("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
+		};
+		publish();
+		this._insetObserver = new ResizeObserver(publish);
+		this._insetObserver.observe(header);
+		this._insetObserver.observe(footer);
+		if (this._scrollEl) this._insetObserver.observe(this._scrollEl);
+	}
+	_teardownInsetObserver() {
+		if (this._insetObserver) {
+			this._insetObserver.disconnect();
+			this._insetObserver = null;
+		}
+	}
 	_setupScrollListener() {
 		const target = this.scrollEventTarget;
 		target.addEventListener("scroll", this._onScroll, { passive: true });
@@ -39613,10 +39817,10 @@ var sidebarSectionStyles = css`
 		--_lg-padding-top: initial;
 		--_lg-padding-bottom: initial;
 		--_max-width: var(--semantics-page-sections-body-max-width);
-		/* Sticky insets default to 16px top and bottom; override via sticky-top /
-		   sticky-bottom to clear other sticky page elements (e.g. a sticky header). */
-		--_sticky-top: var(--primitives-space-16);
-		--_sticky-bottom: var(--primitives-space-16);
+		/* 24px clear of the insets nldd-page publishes. 24 is the depth of a
+		   sticky header's fade, so the box starts where the fade ends. */
+		--_sticky-top: calc(var(--context-inset-top, 0px) + var(--primitives-space-24));
+		--_sticky-bottom: calc(var(--context-inset-bottom, 0px) + var(--primitives-space-24));
 		--_sidebar-width: var(--primitives-area-320);
 
 		display: flex;
@@ -39749,7 +39953,9 @@ var sidebarSectionStyles = css`
 			position: sticky;
 			top: var(--_sticky-top);
 			bottom: var(--_sticky-bottom);
-			max-height: calc(100dvh - var(--_sticky-top) - var(--_sticky-bottom));
+			/* What the scroller shows, not what the window is: a viewport-tall cap
+			   hangs out the bottom by the height of the chrome around the page. */
+			max-height: calc(var(--context-scroller-height, 100dvh) - var(--_sticky-top) - var(--_sticky-bottom));
 			overflow-y: auto;
 		}
 	}
@@ -39889,8 +40095,8 @@ var sheetStyles = css`
 		   sticky header sticks to that edge instead of to a bar that stands
 		   outside. See findScrollModeProvider for the other half. */
 		--context-scroll-mode: nested;
-		--context-layer-top: 0px;
-		--context-layer-bottom: 0px;
+		--context-inset-top: 0px;
+		--context-inset-bottom: 0px;
 
 		display: flex;
 		position: fixed;
@@ -40903,29 +41109,21 @@ var collectionStyles = css`
 		--_item-width: var(--primitives-area-280);
 		--_focus-ring-z-index: 1;
 
-		@media (max-width: ${smMax$4}) {
-			--_gap: var(--components-collection-sm-gap);
-		}
+		/* Two sets, because a collection inside a layout-container follows that
+		   container and anywhere else the viewport. The bare --_gap is what
+		   stands when neither set matches. */
+		--_sm-gap: var(--components-collection-sm-gap);
+		--_md-gap: var(--components-collection-md-gap);
+		--_lg-gap: var(--components-collection-lg-gap);
+		--_gap: var(--_sm-gap);
 
-		@media (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) {
-			--_gap: var(--components-collection-md-gap);
-		}
-
-		@media (min-width: ${lgMin$2}) {
-			--_gap: var(--components-collection-lg-gap);
-		}
+		@media (max-width: ${smMax$4}) { --_gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) { --_gap: var(--_md-gap); }
+		@media (min-width: ${lgMin$2}) { --_gap: var(--_lg-gap); }
 
-		@container layout-container (max-width: ${smMax$4}) {
-			--_gap: var(--components-collection-sm-gap);
-		}
-
-		@container layout-container (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) {
-			--_gap: var(--components-collection-md-gap);
-		}
-
-		@container layout-container (min-width: ${lgMin$2}) {
-			--_gap: var(--components-collection-lg-gap);
-		}
+		@container layout-container (max-width: ${smMax$4}) { --_gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) { --_gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin$2}) { --_gap: var(--_lg-gap); }
 
 		display: flex;
 		width: 100%;
@@ -40972,6 +41170,27 @@ var collectionStyles = css`
 		flex-direction: column;
 	}
 
+
+	/* ## Lanes */
+
+	/* Falls back to the grid above, not to the multicol nldd-container uses:
+	   this component pages, and multicol redistributes the whole set every time
+	   load-more adds to it. */
+	:host([layout="lanes"]) .collection__items {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(min(var(--_item-width), 100%), 1fr));
+	}
+
+	:host([layout="lanes"]) .collection__items ::slotted(*) {
+		min-width: 0;
+	}
+
+	@supports (display: grid-lanes) {
+		:host([layout="lanes"]) .collection__items {
+			display: grid-lanes;
+		}
+	}
+
 	/* ## Horizontal scroll */
 
 	:host([layout="horizontal-scroll"]) .collection__items {
@@ -41122,7 +41341,7 @@ var nlddCollectionTranslations = {
 * Nederlandse Digitale Dienst Collection Component (Lit + TypeScript)
 *
 * A container for displaying collections of items.
-* Supports grid, stack, and horizontal scroll layouts.
+* Supports grid, stack, lanes and horizontal scroll layouts.
 * In grid and stack modes, items are paginated via a load-more button. In
 * horizontal scroll, the prev/next controls and the edge fade appear only when
 * the items overflow the container.
@@ -41131,12 +41350,15 @@ var nlddCollectionTranslations = {
 *
 * @element nldd-collection
 *
-* @attr {string} layout - Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid')
+* @attr {string} layout - Layout mode: 'grid' | 'stack' | 'lanes' | 'horizontal-scroll' (default: 'grid')
 * @attr {boolean} show-load-more - Show load-more button in grid/stack (default: false)
 * @attr {number} max-items - Number of visible items per page (default: 24)
 * @attr {boolean} lazy-load - Automatically load more items when the button becomes visible
-* @attr {string} item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width.
-* @attr {string} gap - Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default.
+* @attr {string} item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width.
+* @attr {string} gap - Gap between items, as a step of the spacing scale ('0', '2', '4', '6', '8', '10', '12', '16', '20', '24', '28', '32', '40', '44', '48', '56', '64', '80', '96'). Overrides the responsive default at every breakpoint; unset keeps the default.
+* @attr {string} sm-gap - Gap at sm, overriding `gap` there
+* @attr {string} md-gap - Gap at md, overriding `gap` there
+* @attr {string} lg-gap - Gap at lg, overriding `gap` there
 * @attr {object} translations - Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action'
 *
 * @migration The `load-more-label` attribute has been removed.
@@ -41210,9 +41432,16 @@ var NLDDCollection = (_NLDDCollection = class NLDDCollection extends LitElement
 			if (this.itemWidth) this.style.setProperty("--_item-width", this.itemWidth);
 			else this.style.removeProperty("--_item-width");
 		}
-		if (changedProperties.has("gap")) {
-			if (this.gap) this.style.setProperty("--_gap", this.gap);
-			else this.style.removeProperty("--_gap");
+		if (changedProperties.has("gap") || changedProperties.has("smGap") || changedProperties.has("mdGap") || changedProperties.has("lgGap")) {
+			const plain = spacingToValue(this.gap, "nldd-collection", "gap");
+			const write = (name, size, attribute) => {
+				const value = size === void 0 ? plain : spacingToValue(size, "nldd-collection", attribute) ?? plain;
+				if (value === null) this.style.removeProperty(name);
+				else this.style.setProperty(name, value);
+			};
+			write("--_sm-gap", this.smGap, "sm-gap");
+			write("--_md-gap", this.mdGap, "md-gap");
+			write("--_lg-gap", this.lgGap, "lg-gap");
 		}
 		if (this.lazyLoad && this._loadMoreBtn && !this._intersectionObserver) {
 			this._intersectionObserver = new IntersectionObserver(([entry]) => {
@@ -41315,6 +41544,21 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], NLDDCollection.prototype, "gap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "sm-gap"
+})], NLDDCollection.prototype, "smGap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "md-gap"
+})], NLDDCollection.prototype, "mdGap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "lg-gap"
+})], NLDDCollection.prototype, "lgGap", void 0);
 __decorate([property({ type: Object })], NLDDCollection.prototype, "translations", void 0);
 __decorate([state()], NLDDCollection.prototype, "_visibleCount", void 0);
 __decorate([state()], NLDDCollection.prototype, "_totalCount", void 0);
@@ -45456,6 +45700,21 @@ var topNavigationBarStyles = css`
 	/* # Block */
 
 	.top-navigation-bar {
+		/* The ribbon's width, and with it everything measured against the ribbon:
+		   its own height and the wordmark beside it. Here rather than on :host,
+		   because a container query cannot measure the container it sits on. */
+		@container (max-width: ${smMax$2}) {
+			--_logo-width: var(--semantics-brand-ribbon-sm-width);
+		}
+
+		@container (min-width: ${mdMin$1}) and (max-width: ${mdMax}) {
+			--_logo-width: var(--semantics-brand-ribbon-md-width);
+		}
+
+		@container (min-width: ${lgMin}) {
+			--_logo-width: var(--semantics-brand-ribbon-lg-width);
+		}
+
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
@@ -45504,18 +45763,6 @@ var topNavigationBarStyles = css`
 		align-self: start;
 		align-items: center;
 		justify-content: center;
-
-		@container (max-width: ${smMax$2}) {
-			--_logo-width: var(--semantics-brand-ribbon-sm-width);
-		}
-
-		@container (min-width: ${mdMin$1}) and (max-width: ${mdMax}) {
-			--_logo-width: var(--semantics-brand-ribbon-md-width);
-		}
-
-		@container (min-width: ${lgMin}) {
-			--_logo-width: var(--semantics-brand-ribbon-lg-width);
-		}
 	}
 
 	.top-navigation-bar__logo svg {
@@ -45568,17 +45815,37 @@ var topNavigationBarStyles = css`
 	/* ## Wordmark */
 
 	.top-navigation-bar__wordmark {
+		box-sizing: border-box;
 		display: flex;
+		/* A grid item is at least as wide as its longest word unless told
+		   otherwise, and the column it sits in is one of the two that keep the
+		   ribbon centred. One unbreakable name would push the ribbon off centre
+		   and the page past the screen. */
+		min-width: 0;
 		min-height: calc(var(--_logo-width) * 2);
 		grid-column: 3;
 		flex-direction: column;
 		color: var(--_wordmark-content-color);
+
+		/* The distance the text keeps from the top edge once it outgrows the
+		   ribbon. Only at the top: space under it would raise the bar for
+		   nothing. The minimum gives up the same 12, so the text still centres
+		   on the middle of the ribbon rather than 6px below it. */
+		@container (max-width: ${smMax$2}) {
+			align-self: start;
+			min-height: calc(var(--_logo-width) * 2 - var(--primitives-space-12));
+			padding-block-start: var(--primitives-space-12);
+		}
 	}
 
 	.top-navigation-bar__wordmark-spacer {
 		height: var(--_logo-width);
 		flex-grow: 0;
 		flex-shrink: 0;
+
+		@container (max-width: ${smMax$2}) {
+			display: none;
+		}
 	}
 
 	.top-navigation-bar__wordmark-content {
@@ -45588,6 +45855,21 @@ var topNavigationBarStyles = css`
 		flex-shrink: 1;
 		flex-basis: 50%;
 		max-width: var(--_wordmark-max-width);
+		/* anywhere rather than break-word: only this one takes the break into
+		   the min-content width, which is what the track measures. A name that
+		   cannot break wraps mid-word here, because a name cut off by an
+		   ellipsis cannot be read at all. */
+		overflow-wrap: anywhere;
+
+		/* Centred against the ribbon, and what does not fit grows downward: an
+		   auto margin takes positive free space and never negative, so the text
+		   cannot ride up past the top. Growing is the flex item's job here, and
+		   an item that grows leaves nothing for the margins to centre with. */
+		@container (max-width: ${smMax$2}) {
+			flex-grow: 0;
+			flex-basis: auto;
+			margin-block: auto;
+		}
 	}
 
 	.top-navigation-bar__wordmark-title {
@@ -46165,7 +46447,7 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 			Promise.resolve().then(() => list_item_exports),
 			Promise.resolve().then(() => text_cell_exports),
 			Promise.resolve().then(() => icon_cell_exports),
-			import("./icon-VTLbdcvZ.js").then((n) => n.n)
+			import("./icon-Cd4BloIM.js").then((n) => n.n)
 		]);
 	}
 	_createGlobalMenuSheet() {
@@ -48722,10 +49004,10 @@ var modalDialogStyles = css`
 	.modal-dialog {
 		/* Where the app's layout context ends, as in nldd-sheet: the dialog scrolls
 		   itself and starts at its own top edge, so anything inside it stops
-		   following the app's scroll mode and its layer offsets. */
+		   following the app's scroll mode and its insets. */
 		--context-scroll-mode: nested;
-		--context-layer-top: 0px;
-		--context-layer-bottom: 0px;
+		--context-inset-top: 0px;
+		--context-inset-bottom: 0px;
 
 		box-sizing: border-box;
 		outline: none;
@@ -51441,6 +51723,21 @@ var progressCircleStyles = css`
 	.progress-circle__segment-indicator--mintgroen { stroke: var(--semantics-categories-mintgroen-filled-background-color); }
 
 
+	/* ## Filter flood color
+
+	   Here rather than in a style attribute, which a strict style-src drops.
+	   The color of an arc varies per segment, so that one is set through the
+	   CSSOM instead. */
+
+	.progress-circle__flood--track {
+		flood-color: var(--_track-border-color);
+	}
+
+	.progress-circle__flood--indeterminate {
+		flood-color: var(--_indeterminate-border-color);
+	}
+
+
 	/* # Spinner (indeterminate)
 	   GitHub-style: a fixed-width arc (25 / 100 = quarter turn, 90°) that
 	   simply rotates around the circle. Calmer than Material's elastic
@@ -51632,7 +51929,7 @@ function progressCircleTemplate(component, onSlotChange) {
 					<filter id="progress-circle-border-track-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 						<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 						<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-						<feFlood style="flood-color: var(--_track-border-color)" result="flood"></feFlood>
+						<feFlood class="progress-circle__flood progress-circle__flood--track" result="flood"></feFlood>
 						<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 						<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 					</filter>
@@ -51640,7 +51937,7 @@ function progressCircleTemplate(component, onSlotChange) {
 						<filter id="progress-circle-border-${color}-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-							<feFlood style="flood-color: var(--semantics-categories-${color}-filled-highlight-border-color)" result="flood"></feFlood>
+							<feFlood class="progress-circle__flood" style=${styleMap({ floodColor: `var(--semantics-categories-${color}-filled-highlight-border-color)` })} result="flood"></feFlood>
 							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>
@@ -51649,7 +51946,7 @@ function progressCircleTemplate(component, onSlotChange) {
 						<filter id="progress-circle-border-indeterminate-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-							<feFlood style="flood-color: var(--_indeterminate-border-color)" result="flood"></feFlood>
+							<feFlood class="progress-circle__flood progress-circle__flood--indeterminate" result="flood"></feFlood>
 							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>