@nldd/design-system 0.8.87 → 0.8.89

package/dist/components/components.js

@@ -8,9 +8,9 @@ import { t as NLDDIcon } from "./icon-C_zwJZ_g.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-BU1vIMW7.js";
-import { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as findClusterBreak, D as matchBrackets, E as languageDataProp, F as NodeProp, G as RectangleMarker, H as Decoration, I as NodeSet, J as drawSelection, K as ViewPlugin, L as NodeType, M as styleTags, N as tags, Q as keymap, S as getIndentation, St as countColumn, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as Text, a as HighlightStyle, at as ChangeDesc, b as foldService, c as Language, ct as EditorSelection, d as ParseContext, et as lineNumbers, f as StreamLanguage, ft as Prec, gt as StateField, h as defineLanguageFacet, ht as StateEffect, it as Annotation, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorState, nt as placeholder, o as IndentContext, ot as ChangeSet, pt as RangeSetBuilder, q as WidgetType, st as Compartment, u as LanguageSupport, ut as Facet, vt as Transaction, w as indentString, x as getIndentUnit, xt as combineConfig, y as foldNodeProp, z as Parser } from "./dist-fIxe0l7k.js";
-import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-CgDuh26K.js";
-import { n as html$2, r as htmlCompletionSource } from "./dist-CX3DK4i7.js";
+import { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as findClusterBreak, D as matchBrackets, E as languageDataProp, F as NodeProp, G as RectangleMarker, H as Decoration, I as NodeSet, J as drawSelection, K as ViewPlugin, L as NodeType, M as styleTags, N as tags, Q as keymap, S as getIndentation, St as countColumn, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as Text, a as HighlightStyle, at as ChangeDesc, b as foldService, c as Language, ct as EditorSelection, d as ParseContext, et as lineNumbers, f as StreamLanguage, ft as Prec, gt as StateField, h as defineLanguageFacet, ht as StateEffect, it as Annotation, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorState, nt as placeholder, o as IndentContext, ot as ChangeSet, pt as RangeSetBuilder, q as WidgetType, st as Compartment, u as LanguageSupport, ut as Facet, vt as Transaction, w as indentString, x as getIndentUnit, xt as combineConfig, y as foldNodeProp, z as Parser } from "./dist-DHA-0RyT.js";
+import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-D_ckX1sK.js";
+import { n as html$2, r as htmlCompletionSource } from "./dist-BeymuiGt.js";
 import { LitElement, css, html, nothing, svg, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -753,9 +753,9 @@ var nlddButtonTranslations = { "components.button.opens-in-new-tab-label": "Open
 * `ariaDescribedByElements` takes the elements themselves and crosses the
 * boundary.
 */
-function applyDescribedBy(target, elements) {
+function applyDescribedBy(target, elements, onSelf = false) {
 	if (!target) return;
-	if ("describedByElements" in target) {
+	if (!onSelf && "describedByElements" in target) {
 		target.describedByElements = [...elements];
 		return;
 	}
@@ -774,9 +774,9 @@ function applyDescribedBy(target, elements) {
 * A component that wraps another one hands the state on, the same way it hands
 * on the description.
 */
-function applyInvalid(target, invalid) {
+function applyInvalid(target, invalid, onSelf = false) {
 	if (!target) return;
-	if ("invalid" in target) {
+	if (!onSelf && "invalid" in target) {
 		target.invalid = invalid;
 		return;
 	}
@@ -804,9 +804,10 @@ function DescribedBy(Base) {
 			this.describedByElements = [];
 			this.addController({ hostUpdated: () => {
 				const target = this.describedTarget();
-				applyDescribedBy(target, this.describedByElements);
+				const onSelf = target === this;
+				applyDescribedBy(target, this.describedByElements, onSelf);
 				const invalid = this.invalid;
-				if (invalid !== void 0) applyInvalid(target, invalid);
+				if (invalid !== void 0) applyInvalid(target, invalid, onSelf);
 			} });
 		}
 		/**
@@ -8641,11 +8642,12 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, hasItems, hasEmptySt
 	const skipItemsLabel = isNavigation || isListbox;
 	const itemsRole = isListbox ? "listbox" : type === "tree" ? "tree" : type === "radiogroup" ? "radiogroup" : "list";
 	const isNoResults = isEmpty && hasItems;
+	const untouched = isListbox && listbox.searchValue === "";
 	const noResultsFallsBack = isNoResults && !hasNoResultsState && hasEmptyState;
-	const showNoResults = isNoResults && hasNoResultsState && !(isListbox && listbox.searchValue === "");
-	const showEmpty = !isNoResults && isEmpty && hasEmptyState || noResultsFallsBack && !(isListbox && listbox.searchValue === "");
+	const showNoResults = isNoResults && hasNoResultsState && !untouched;
+	const showEmpty = (!isNoResults && isEmpty && hasEmptyState || noResultsFallsBack) && !untouched;
 	const showMain = !isEmpty || showEmpty || showNoResults;
-	const showControls = hasItems;
+	const showControls = hasItems || isListbox;
 	return html`
 		<div class="list">
 			<div class="list__header">
@@ -9128,7 +9130,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		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.classList.toggle("is-blank", this._isEmpty && !this._hasItems && !this._hasEmptyState && this.type !== "listbox");
 		this._warnSilentEmpty();
 	}
 	/**
@@ -11580,16 +11582,16 @@ var nlddCodeMirrorTheme = [baseTheme, syntaxHighlighting(highlightStyle)];
 //#endregion
 //#region src/utilities/codemirror/languages.ts
 var loaders = {
-	json: async () => (await import("./dist-LX8LuMac.js")).json(),
-	yaml: async () => (await import("./dist-CSrO_mYe.js")).yaml(),
-	javascript: async () => (await import("./dist-ByH8hQze.js").then((n) => n.t)).javascript(),
-	typescript: async () => (await import("./dist-ByH8hQze.js").then((n) => n.t)).javascript({ typescript: true }),
-	css: async () => (await import("./dist-B_Mnmrj4.js").then((n) => n.r)).css(),
-	html: async () => (await import("./dist-CX3DK4i7.js").then((n) => n.t)).html(),
-	xml: async () => (await import("./dist-eVFegyjM.js")).xml(),
-	python: async () => (await import("./dist-CRwuSgMM.js")).python(),
-	rust: async () => (await import("./dist-CbCO0WCd.js")).rust(),
-	sql: async () => (await import("./dist-DXZ-cFAl.js")).sql(),
+	json: async () => (await import("./dist-BLaE_n_F.js")).json(),
+	yaml: async () => (await import("./dist-TCqV9dho.js")).yaml(),
+	javascript: async () => (await import("./dist-Y54Lma86.js").then((n) => n.t)).javascript(),
+	typescript: async () => (await import("./dist-Y54Lma86.js").then((n) => n.t)).javascript({ typescript: true }),
+	css: async () => (await import("./dist-CYLM5ciE.js").then((n) => n.r)).css(),
+	html: async () => (await import("./dist-BeymuiGt.js").then((n) => n.t)).html(),
+	xml: async () => (await import("./dist-Dh_b9r4M.js")).xml(),
+	python: async () => (await import("./dist-yyE8P2O6.js")).python(),
+	rust: async () => (await import("./dist-CENYEz7C.js")).rust(),
+	sql: async () => (await import("./dist-DkZlotgT.js")).sql(),
 	markdown: async () => (await Promise.resolve().then(() => dist_exports)).markdown(),
 	bash: async () => new LanguageSupport(StreamLanguage.define((await import("./shell-C61GCsJA.js")).shell)),
 	toml: async () => new LanguageSupport(StreamLanguage.define((await import("./toml-C2HBbPgG.js")).toml)),
@@ -12575,7 +12577,7 @@ function imageTemplate(component) {
 		<div class=${mediaClasses}
 			style=${styleMap(mediaStyles)}
 		>
-			<slot>${fallbackImg}</slot>
+			<slot @slotchange=${component._onMediaSlotChange}>${fallbackImg}</slot>
 			${errorOverlay}
 			${liveRegion}
 		</div>
@@ -12616,7 +12618,7 @@ var nlddImageTranslations = {
 * @element nldd-image
 *
 * @attr {string} src - Image URL
-* @attr {string} alt - Alt text. Required unless `decorative`.
+* @attr {string} alt - Alt text for the image from `src`. Required unless `decorative`; slotted media carries its own.
 * @attr {string} srcset - Responsive source set
 * @attr {string} sizes - Source sizes hint
 * @attr {number|'full'} width - Display width. `full` (default) fills the parent.
@@ -12653,7 +12655,7 @@ var nlddImageTranslations = {
 * @attr {object} translations - Override translation keys (e.g. the message
 *   shown when the image fails to load); unset keys fall back to Dutch.
 *
-* @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.
+* @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.
 *   Consumers slotting their own image are responsible for handling its
@@ -12686,6 +12688,9 @@ var NLDDImage = (_NLDDImage = class NLDDImage extends LitElement {
 		this._imageErrored = false;
 		this._warnedWidth = false;
 		this._warnedAlt = false;
+		this._onMediaSlotChange = () => {
+			this._warnMissingAlt();
+		};
 		this._onImageLoad = () => {
 			this._imageLoaded = true;
 			this._imageErrored = false;
@@ -12762,9 +12767,31 @@ var NLDDImage = (_NLDDImage = class NLDDImage extends LitElement {
 			if (n !== void 0) this.style.setProperty("--_max-width", `${n}px`);
 			else this.style.removeProperty("--_max-width");
 		}
+		this._warnMissingAlt();
 		this.toggleAttribute("loaded", this._imageLoaded);
 		this.toggleAttribute("errored", this._imageErrored);
 	}
+	/**
+	* Says in DEV when an image has no text alternative. A non-decorative image
+	* without one is a silent a11y failure (WCAG H37), so this surfaces it
+	* during build and Storybook and stays quiet in production.
+	*
+	* Slotted media replaces the built-in `<img>` and carries its own
+	* alternative, so once something is slotted, that is what gets judged.
+	* With neither slotted media nor a `src` or `srcset` there is no image yet:
+	* a source or media that arrives later is judged when it does. The latch
+	* resets once the problem is solved, so bringing it back warns again.
+	*/
+	_warnMissingAlt() {}
+	/**
+	* What the consumer put in the default slot, followed through a forwarded
+	* slot. The top level is deliberately not flattened: with nothing assigned,
+	* flattening returns the built-in fallback `<img>`, which always has an
+	* `alt` attribute and would pass every time.
+	*/
+	_slottedMedia() {
+		return ((this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements() ?? []).flatMap((el) => el instanceof HTMLSlotElement ? el.assignedElements({ flatten: true }) : [el]);
+	}
 	firstUpdated() {
 		const img = this.shadowRoot?.querySelector(".image__img");
 		if (img?.complete && img.naturalWidth > 0) this._imageLoaded = true;
@@ -16806,11 +16833,11 @@ var cursorLineBoundaryRight = (view) => moveSel(view, (range) => moveByLineBound
 /**
 Move the selection to the start of the line.
 */
-var cursorLineStart = (view) => moveSel(view, (range) => EditorSelection.cursor(view.lineBlockAt(range.head).from, 1));
+var cursorLineStart = (view) => moveSel(view, (range) => view.moveToLineBoundary(range, false, false));
 /**
 Move the selection to the end of the line.
 */
-var cursorLineEnd = (view) => moveSel(view, (range) => EditorSelection.cursor(view.lineBlockAt(range.head).to, -1));
+var cursorLineEnd = (view) => moveSel(view, (range) => view.moveToLineBoundary(range, true, false));
 function toMatchingBracket(state, dispatch, extend) {
 	let found = false, selection = updateSel(state.selection, (range) => {
 		let matching = matchBrackets(state, range.head, -1) || matchBrackets(state, range.head, 1) || range.head > 0 && matchBrackets(state, range.head - 1, 1) || range.head < state.doc.length && matchBrackets(state, range.head + 1, -1);
@@ -23821,12 +23848,12 @@ var radioButtonStyles = css`
 
 	/* # Elements */
 
-	.radio-button__input {
+	.radio-button__validation-input {
 		position: absolute;
 		inset: 0;
 		opacity: 0;
-		z-index: 1;
 		margin: 0;
+		pointer-events: none;
 		width: 100%;
 		height: 100%;
 	}
@@ -23853,61 +23880,55 @@ var radioButtonStyles = css`
 		transform: translate(-50%, -50%) scale(0);
 	}
 
-	.radio-button__input:checked ~ .radio-button__outer-shape {
+	:host([checked]) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-selected-border-color);
 		background-color: var(--components-radio-button-is-selected-background-color);
 	}
 
-	.radio-button__input:checked ~ .radio-button__outer-shape .radio-button__inner-shape {
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	/* Decorative has no input to hang :checked on, so the state comes from the
-	   host attribute instead. */
-	:host([decorative][checked]) .radio-button__outer-shape {
-		border-color: var(--components-radio-button-is-selected-border-color);
-		background-color: var(--components-radio-button-is-selected-background-color);
-	}
-
-	:host([decorative][checked]) .radio-button__inner-shape {
+	:host([checked]) .radio-button__inner-shape {
 		transform: translate(-50%, -50%) scale(1);
 	}
 
 	@media (hover: hover) {
-		.radio-button__input:hover:not(:disabled) ~ .radio-button__outer-shape {
+		:host(:hover:not([disabled])) .radio-button__outer-shape {
 			border-color: var(--components-radio-button-is-hovered-border-color);
 		}
 
-		.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape {
+		:host([checked]:hover:not([disabled])) .radio-button__outer-shape {
 			border-color: var(--components-radio-button-is-selected-is-hovered-border-color);
 			background-color: var(--components-radio-button-is-selected-is-hovered-background-color);
 		}
 
-		.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+		:host([checked]:hover:not([disabled])) .radio-button__inner-shape {
 			border-color: var(--components-radio-button-is-selected-is-hovered-inner-shape-border-color);
 		}
 	}
 
-	.radio-button__input:active:not(:disabled) ~ .radio-button__outer-shape {
+	:host(:active:not([disabled])) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-active-border-color);
 	}
 
-	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape {
+	:host([checked]:active:not([disabled])) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-selected-is-active-border-color);
 		background-color: var(--components-radio-button-is-selected-is-active-background-color);
 	}
 
-	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+	:host([checked]:active:not([disabled])) .radio-button__inner-shape {
 		border-color: var(--components-radio-button-is-selected-is-active-inner-shape-border-color);
 	}
 
-	.radio-button__input:focus-visible ~ .radio-button__outer-shape {
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	:host(:focus-visible) .radio-button__outer-shape,
+	:host([focus-ring]) .radio-button__outer-shape {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-	.radio-button__input:disabled ~ .radio-button__outer-shape {
+	:host([disabled]) .radio-button__outer-shape {
 		opacity: var(--primitives-opacity-disabled);
 	}
 `;
@@ -23920,16 +23941,14 @@ function radioButtonTemplate(component) {
 			</div>
 		`;
 	return html`
-		<input class="radio-button__input"
+		<input class="radio-button__validation-input"
 			type="radio"
-			.checked=${component.checked}
-			?disabled=${component.disabled}
+			name="nldd-validation"
 			?required=${component.required}
-			name=${component.name || ""}
-			value=${component.value}
-			aria-label=${component.accessibleLabel || nothing}
-			tabindex=${component.noTab ? "-1" : nothing}
-			@change=${component._handleChange}
+			?disabled=${component.disabled}
+			.checked=${component._groupHasSelection}
+			tabindex="-1"
+			aria-hidden="true"
 		>
 		<div class="radio-button__outer-shape"
 			aria-hidden="true"
@@ -23939,32 +23958,167 @@ function radioButtonTemplate(component) {
 	`;
 }
 //#endregion
+//#region src/utilities/radio-position.ts
+/** A position for every radio of a group, in the order given. */
+function radioPositions(radios, isChecked, isDisabled) {
+	const enabled = radios.filter((radio) => !isDisabled(radio));
+	const stop = enabled.find(isChecked) ?? enabled[0];
+	return radios.map((radio, index) => ({
+		posInSet: index + 1,
+		setSize: radios.length,
+		tabbable: radio === stop
+	}));
+}
+//#endregion
+//#region src/utilities/radio-grouping.ts
+/**
+* Both tags in one list, because the platform groups on the name and not on the
+* element. A button and a field that share a name are one group to the browser,
+* and two lists would have them counting different sets.
+*/
+var RADIO_TAGS = "nldd-radio-button, nldd-radio-button-field";
+var ARROW_STEPS = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+};
+/** The controller of each radio, so a recount can reach its siblings. */
+var groupings = /* @__PURE__ */ new WeakMap();
+/** A radio that draws the shape for something else owns no state of its own. */
+function isMember(radio) {
+	return !radio.decorative;
+}
+var RadioGrouping = class RadioGrouping {
+	constructor(host) {
+		this.host = host;
+		this.position = null;
+		this.answered = false;
+		this._groupedIn = null;
+		groupings.set(host, this);
+		host.addController(this);
+	}
+	hostConnected() {
+		queueMicrotask(() => this.regroup());
+	}
+	hostDisconnected() {
+		this.regroup();
+	}
+	/** Reads which group this radio is in now, and recounts the one it left. */
+	regroup() {
+		const was = this._groupedIn;
+		const now = this._key();
+		this._groupedIn = now;
+		const moved = !now || !was || was.root !== now.root || was.name !== now.name || was.form !== now.form;
+		if (was && moved) RadioGrouping._recount(was);
+		if (now) RadioGrouping._recount(now);
+		else this._apply(null, this.host.checked);
+	}
+	/** Counts the group again, after this radio was checked or disabled. */
+	refresh() {
+		if (this._groupedIn) RadioGrouping._recount(this._groupedIn);
+		else this._apply(null, this.host.checked);
+	}
+	/** Unchecks the others, as checking a native radio does. */
+	uncheckOthers() {
+		const key = this._key();
+		if (!key) return;
+		for (const radio of RadioGrouping._radiosIn(key)) {
+			if (radio === this.host || !radio.checked) continue;
+			radio.checked = false;
+			radio.commitFormValue();
+		}
+	}
+	/**
+	* Moves to the next radio of the group and checks it, as the arrow keys do
+	* for native radios. Disabled options are stepped over, and the ends wrap.
+	*
+	* @returns whether the key was handled.
+	*/
+	moveWithArrow(e) {
+		const step = ARROW_STEPS[e.key];
+		const key = step ? this._key() : null;
+		if (!key || !this.position) return false;
+		const radios = RadioGrouping._radiosIn(key).filter((radio) => !radio.disabled);
+		const at = radios.indexOf(this.host);
+		if (at === -1) return false;
+		e.preventDefault();
+		const next = radios[(at + step + radios.length) % radios.length];
+		next.focus();
+		next.select();
+		return true;
+	}
+	_key() {
+		if (!this.host.isConnected || !isMember(this.host) || !this.host.name) return null;
+		return {
+			root: this.host.getRootNode(),
+			name: this.host.name,
+			form: this.host.internals.form
+		};
+	}
+	/** Compared by value: a recount hands out new objects for the same place, and
+	*  asking for a render on every one of those is a render per radio per
+	*  keystroke, each of them scheduled from inside an update that had just
+	*  finished. */
+	_apply(position, answered) {
+		if (this.answered === answered && this.position?.posInSet === position?.posInSet && this.position?.setSize === position?.setSize && this.position?.tabbable === position?.tabbable) return;
+		this.position = position;
+		this.answered = answered;
+		this.host.requestUpdate();
+	}
+	static _radiosIn({ root, name, form }) {
+		const radios = root.querySelectorAll?.(RADIO_TAGS) ?? [];
+		return Array.from(radios).filter((radio) => groupings.has(radio) && radio.isConnected && radio.name === name && isMember(radio) && radio.internals.form === form);
+	}
+	/** A radio on its own keeps the place the browser gives it: none. */
+	static _recount(key) {
+		const radios = RadioGrouping._radiosIn(key);
+		const positions = radios.length > 1 ? radioPositions(radios, (radio) => radio.checked, (radio) => radio.disabled) : [];
+		const answered = radios.some((radio) => radio.checked);
+		radios.forEach((radio, index) => {
+			groupings.get(radio)?._apply(positions[index] ?? null, answered);
+		});
+	}
+};
+//#endregion
 //#region src/components/inputs/radio-button/radio-button.ts
 /**
 * Nederlandse Digitale Dienst Radio Button Component (Lit + TypeScript)
 *
-* WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with
-* role="radiogroup" and aria-labelledby for proper group semantics.
+* WAI-ARIA: put the buttons of one group in a container with
+* role="radiogroup" and a name of its own. A screen reader counts the options
+* from that container, so a bare <fieldset> (which is a group, not a
+* radiogroup) leaves them uncounted. nldd-radio-button-group does this for you.
+*
+* Radio buttons with the same name, in the same form and the same tree, form
+* one group the way native radios do: checking one unchecks the others, the
+* arrow keys move between them, Tab stops at the group once, and a screen
+* reader hears each one's place in it. The element itself is the radio, because
+* an input per shadow root would leave every button a group of one.
+*
+* The shape is all this component draws. A radio with a label beside it is
+* nldd-radio-button-field.
 *
 * @example
-* <fieldset>
-*   <legend>Kies een optie</legend>
-*   <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button>
-*   <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button>
+* <fieldset role="radiogroup" aria-labelledby="options-label">
+*   <legend id="options-label">Kies een optie</legend>
+*   <nldd-radio-button name="options" value="1" accessible-label="Optie 1"></nldd-radio-button>
+*   <nldd-radio-button name="options" value="2" accessible-label="Optie 2"></nldd-radio-button>
 * </fieldset>
 *
 * @element nldd-radio-button
 * @attr {boolean} checked - Checked state
 * @attr {boolean} disabled - Disabled state
 * @attr {boolean} no-tab - Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable.
-* @attr {boolean} decorative - Renders the shape without the input: no focus, no
+* @attr {boolean} decorative - Renders the shape only: no role, no focus, no
 *   name/value, nothing announced. For a control that owns the state elsewhere,
-*   such as a list row that is itself the radio; putting a real input in there
-*   would nest a control inside a control.
-* @attr {boolean} required - Required state
+*   such as a list row or an nldd-radio-button-field that is itself the radio;
+*   putting a second radio in there would nest a control inside a control.
+* @attr {boolean} required - Required state. What it asks is whether anything in the group is checked, as a native radio does.
+* @attr {boolean} focus-ring - Draws the focus ring around the shape. Set by nldd-radio-button-field, which is the radio itself and holds the focus. Not part of the public API.
 * @attr {string} name - Radio group name for form submission; ties the buttons of one group together
 * @attr {string} value - Value submitted with the form when this radio button is checked
-* @attr {string} accessible-label - Accessible label forwarded as aria-label to the native input.
+* @attr {string} accessible-label - Accessible label, set as aria-label on this element: it is the radio.
 * @attr {boolean} invalid - Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it.
 *   Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries.
 *
@@ -23980,14 +24134,102 @@ var NLDDRadioButton = (_NLDDRadioButton = class NLDDRadioButton extends Describe
 		this.disabled = false;
 		this.noTab = false;
 		this.required = false;
+		this.focusRing = false;
 		this.name = "";
 		this.value = "";
 		this.accessibleLabel = "";
 		this.invalid = false;
+		this._grouping = new RadioGrouping(this);
+		this._appliedLabel = null;
+		this._onClick = () => {
+			this.select();
+		};
+		this._onKeyDown = (e) => {
+			if (this.disabled || this.decorative) return;
+			if (e.key === " ") {
+				e.preventDefault();
+				this.select();
+				return;
+			}
+			if (e.key === "Enter") {
+				submitOnEnter(this, e);
+				return;
+			}
+			if (!this.noTab) this._grouping.moveWithArrow(e);
+		};
+	}
+	/** Whether anything in its group is checked, which is what `required` asks
+	*  of a radio: one of these, not this one. */
+	get _groupHasSelection() {
+		return this._grouping.answered;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this._onClick);
+		this.addEventListener("keydown", this._onKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this._onClick);
+		this.removeEventListener("keydown", this._onKeyDown);
 	}
 	firstUpdated() {
 		this._initialChecked = this.checked;
 	}
+	/** Counting happens before the render, not after it: the place this radio is
+	*  given decides what `updated()` writes on it, and a count from there would
+	*  ask for a second render of what was just drawn. */
+	willUpdate(changed) {
+		if (changed.has("checked") && this.checked) this._grouping.uncheckOthers();
+		if (changed.has("name") || changed.has("decorative")) this._grouping.regroup();
+		else if (changed.has("checked") || changed.has("disabled")) this._grouping.refresh();
+	}
+	updated(changed) {
+		super.updated(changed);
+		this._syncHostAria();
+	}
+	/**
+	* This element is the radio.
+	*
+	* A native `<input type="radio">` groups with the radios of the same name in
+	* its own tree, and one per shadow root leaves every radio a group of one: a
+	* screen reader announces "1 of 1" and Tab stops at each of them. The role
+	* on the element itself puts every radio of a group in one tree again, where
+	* the browser counts them together.
+	*/
+	_syncHostAria() {
+		if (this.decorative) {
+			for (const name of [
+				"role",
+				"aria-checked",
+				"aria-disabled",
+				"aria-posinset",
+				"aria-setsize",
+				"tabindex"
+			]) this.removeAttribute(name);
+			return;
+		}
+		this.setAttribute("role", "radio");
+		this.setAttribute("aria-checked", String(this.checked));
+		this._appliedLabel = setOwnedAttribute(this, "aria-label", this.accessibleLabel, this._appliedLabel);
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		const position = this._grouping.position;
+		if (position) {
+			this.setAttribute("aria-posinset", String(position.posInSet));
+			this.setAttribute("aria-setsize", String(position.setSize));
+		} else {
+			this.removeAttribute("aria-posinset");
+			this.removeAttribute("aria-setsize");
+		}
+		const tabbable = !this.disabled && !this.noTab && position?.tabbable !== false;
+		this.setAttribute("tabindex", tabbable ? "0" : "-1");
+	}
+	/** The element assistive software meets is this one, so the description and
+	*  the invalid state belong here rather than on something inside. */
+	describedTarget() {
+		return this;
+	}
 	formValue() {
 		return this.checked ? this.value : null;
 	}
@@ -23997,20 +24239,15 @@ var NLDDRadioButton = (_NLDDRadioButton = class NLDDRadioButton extends Describe
 	formStateRestoreCallback(state) {
 		this.checked = state !== null;
 	}
+	/** Checks this radio, the way a click or the space bar does. */
 	select() {
-		if (this.disabled || this.checked) return;
-		const input = this.shadowRoot?.querySelector("input");
-		if (!input) return;
-		input.checked = true;
-		input.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	_handleChange(e) {
-		const input = e.target;
-		this.checked = input.checked;
+		if (this.disabled || this.decorative || this.checked) return;
+		this.checked = true;
 		this.commitFormValue();
+		this._grouping.uncheckOthers();
 		this.dispatchEvent(new CustomEvent("change", {
 			detail: {
-				checked: this.checked,
+				checked: true,
 				value: this.value,
 				name: this.name
 			},
@@ -24018,13 +24255,6 @@ var NLDDRadioButton = (_NLDDRadioButton = class NLDDRadioButton extends Describe
 			composed: true
 		}));
 	}
-	/**
-	* Delegates focus to the inner native radio `<input>`, so consumers can
-	* call `radioEl.focus()` without reaching into shadow DOM.
-	*/
-	focus(options) {
-		this.shadowRoot?.querySelector(".radio-button__input")?.focus(options);
-	}
 	render() {
 		return radioButtonTemplate(this);
 	}
@@ -24050,6 +24280,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDRadioButton.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "focus-ring"
+})], NLDDRadioButton.prototype, "focusRing", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("")
@@ -24077,12 +24312,29 @@ var radioButtonFieldStyles = css`
 	:host {
 		${inheritedTextReset}
 		display: block;
+		position: relative;
+		cursor: default;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	.radio-button-field__validation-input {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		margin: 0;
+		pointer-events: none;
+		width: 100%;
+		height: 100%;
+	}
+
 
 	/* # Block */
 
@@ -24121,22 +24373,27 @@ var radioButtonFieldStyles = css`
 //#region src/components/inputs/radio-button-field/radio-button-field.template.ts
 function radioButtonFieldTemplate(component) {
 	return html`
-		<div class="radio-button-field"
-			@click=${component._handleLabelClick}
-		>
+		<div class="radio-button-field">
+			<input class="radio-button-field__validation-input"
+				type="radio"
+				name="nldd-validation"
+				?required=${component.required}
+				?disabled=${component.disabled}
+				.checked=${component._answered}
+				tabindex="-1"
+				aria-hidden="true"
+			>
 			<div class="radio-button-field__control">
 				<nldd-radio-button
-					?invalid=${component.invalid}
+					decorative
 					?checked=${component.checked}
 					?disabled=${component.disabled}
-					?required=${component.required}
-					name=${component.name || ""}
-					value=${component.value}
-					accessible-label=${component.label || nothing}
-					@change=${component._handleChange}
+					?focus-ring=${component._focusRing}
 				></nldd-radio-button>
 			</div>
-			<span class="radio-button-field__label">${component.label}</span>
+			<span class="radio-button-field__label">
+				${component.label}
+			</span>
 		</div>
 	`;
 }
@@ -24145,20 +24402,29 @@ function radioButtonFieldTemplate(component) {
 /**
 * Nederlandse Digitale Dienst Radio Button Field Component (Lit + TypeScript)
 *
-* A radio button with an inline label. Use inside nldd-radio-button-group
-* for keyboard navigation and group semantics. The group sets the name.
+* A radio button with an inline label. Use inside nldd-radio-button-group,
+* which sets the name and labels the group.
+*
+* Fields that stand on their own group by name, the way native radios do:
+* checking one unchecks the others, the arrow keys move between them and Tab
+* stops at the group once. Put them in a container with role="radiogroup", or
+* a screen reader has nothing to count them from.
+*
+* The field is the radio: it carries the role, the state, the label it is
+* announced by and the focus, and the nldd-radio-button inside only draws the
+* shape. A radio of its own in there would be a second control inside a
+* control, and a group of one to count.
 *
-* Form-associated: the checked field submits its `value` under `name` (the
-* inner nldd-radio-button sits in the shadow root and never joins the
-* consumer's form; the field submits on its behalf). Unchecking siblings is
-* the group's job, so exactly one value per group reaches the form.
+* Form-associated: the checked field submits its `value` under `name`.
+* Unchecking siblings is the group's job, so exactly one value per group
+* reaches the form.
 *
 * @element nldd-radio-button-field
 * @attr {boolean} checked - Checked state
 * @attr {boolean} disabled - Disabled state
 * @attr {string} value - Value for form submission
-* @attr {string} name - Radio group name for form submission, forwarded to the inner nldd-radio-button. Set automatically by nldd-radio-button-group.
-* @attr {boolean} required - Required state, forwarded to the inner nldd-radio-button. Set automatically by nldd-radio-button-group.
+* @attr {string} name - Radio group name for form submission; ties the fields of one group together. Set automatically by nldd-radio-button-group.
+* @attr {boolean} required - Required state. What it asks is whether anything in the group is checked, as a native radio does. Set automatically by nldd-radio-button-group.
 * @attr {string} label - Label text for the radio button
 * @attr {boolean} invalid - Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it.
 *
@@ -24176,10 +24442,98 @@ var NLDDRadioButtonField = (_NLDDRadioButtonField = class NLDDRadioButtonField e
 		this.required = false;
 		this.label = "";
 		this.invalid = false;
+		this._groupPosition = null;
+		this._groupHasSelection = false;
+		this._grouping = new RadioGrouping(this);
+		this._appliedLabel = null;
+		this._focusRing = false;
+		this._onClick = () => {
+			this.select();
+		};
+		this._onFocus = () => {
+			this._focusRing = isKeyboardMode();
+		};
+		this._onBlur = () => {
+			this._focusRing = false;
+		};
+		this._onKeyDown = (e) => {
+			if (this.disabled) return;
+			if (e.key === " ") {
+				e.preventDefault();
+				this.select();
+				return;
+			}
+			if (e.key === "Enter") {
+				submitOnEnter(this, e);
+				return;
+			}
+			if (!this._groupPosition) this._grouping.moveWithArrow(e);
+		};
+	}
+	/** The place it is announced with: from the group around it, or from the
+	*  radios it shares a name with. */
+	get _position() {
+		return this._groupPosition ?? this._grouping.position;
+	}
+	/** Whether anything in its group is checked. Either source saying so is
+	*  enough: they answer for the same set of radios. */
+	get _answered() {
+		return this._groupHasSelection || this._grouping.answered;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this._onClick);
+		this.addEventListener("keydown", this._onKeyDown);
+		this.addEventListener("focus", this._onFocus);
+		this.addEventListener("blur", this._onBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this._onClick);
+		this.removeEventListener("keydown", this._onKeyDown);
+		this.removeEventListener("focus", this._onFocus);
+		this.removeEventListener("blur", this._onBlur);
 	}
 	firstUpdated() {
 		this._initialChecked = this.checked;
 	}
+	/** Counting happens before the render, not after it: the place this field is
+	*  given decides what `updated()` writes on it, and a count from there would
+	*  ask for a second render of what was just drawn. */
+	willUpdate(changed) {
+		if (changed.has("checked") && this.checked) this._grouping.uncheckOthers();
+		if (changed.has("name")) this._grouping.regroup();
+		else if (changed.has("checked") || changed.has("disabled")) this._grouping.refresh();
+	}
+	updated(changed) {
+		super.updated(changed);
+		this._syncHostAria();
+	}
+	/**
+	* This element is the radio, label and all.
+	*
+	* A native radio in a shadow root of its own is a group of one, which a
+	* screen reader counts as "1 of 1" and Tab stops at one by one. The role on
+	* the element itself puts the whole group back in one tree, and the label it
+	* renders is the name it is announced by.
+	*/
+	_syncHostAria() {
+		this.setAttribute("role", "radio");
+		this.setAttribute("aria-checked", String(this.checked));
+		this._appliedLabel = setOwnedAttribute(this, "aria-label", this.label, this._appliedLabel);
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		const position = this._position;
+		if (position) {
+			this.setAttribute("aria-posinset", String(position.posInSet));
+			this.setAttribute("aria-setsize", String(position.setSize));
+		} else {
+			this.removeAttribute("aria-posinset");
+			this.removeAttribute("aria-setsize");
+		}
+		const tabbable = !this.disabled && position?.tabbable !== false;
+		this.setAttribute("tabindex", tabbable ? "0" : "-1");
+	}
 	/** An unchecked radio contributes nothing to the form. The group calls
 	*  `commitFormValue()` on the siblings it unchecks, so a listener that reads
 	*  the form while `change` is still propagating never sees two values. */
@@ -24192,34 +24546,27 @@ var NLDDRadioButtonField = (_NLDDRadioButtonField = class NLDDRadioButtonField e
 	formStateRestoreCallback(state) {
 		this.checked = state !== null;
 	}
-	_handleLabelClick(e) {
-		if (this.disabled) return;
-		if (e.target.closest?.("nldd-radio-button")) return;
-		(this.shadowRoot?.querySelector("nldd-radio-button"))?.select();
-	}
-	_handleChange(e) {
-		this.checked = e.detail.checked;
+	/** Checks this field, the way a click or the space bar does. The group hears
+	*  the change and unchecks the others; without a group the fields that share
+	*  its name are unchecked here. */
+	select() {
+		if (this.disabled || this.checked) return;
+		this.checked = true;
 		this.commitFormValue();
+		this._grouping.uncheckOthers();
 		this.dispatchEvent(new CustomEvent("change", {
 			detail: {
-				checked: this.checked,
+				checked: true,
 				value: this.value
 			},
 			bubbles: true,
 			composed: true
 		}));
 	}
-	/**
-	* Delegates focus to the inner `<nldd-radio-button>`, which in turn focuses
-	* its native input. Lets consumers call `radioFieldEl.focus()` without
-	* reaching into shadow DOM.
-	*/
-	focus(options) {
-		this.shadowRoot?.querySelector("nldd-radio-button")?.focus(options);
-	}
-	/** The radio button it renders knows which element inside itself is the control. */
+	/** The element assistive software meets is this one, so the description and
+	*  the invalid state belong here rather than on the shape inside. */
 	describedTarget() {
-		return this.shadowRoot?.querySelector("nldd-radio-button") ?? null;
+		return this;
 	}
 	render() {
 		return radioButtonFieldTemplate(this);
@@ -24247,6 +24594,9 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDRadioButtonField.prototype, "invalid", void 0);
+__decorate([state()], NLDDRadioButtonField.prototype, "_groupPosition", void 0);
+__decorate([state()], NLDDRadioButtonField.prototype, "_groupHasSelection", void 0);
+__decorate([state()], NLDDRadioButtonField.prototype, "_focusRing", void 0);
 NLDDRadioButtonField = __decorate([customElement("nldd-radio-button-field")], NLDDRadioButtonField);
 //#endregion
 //#region src/components/inputs/radio-button-group/radio-button-group.styles.ts
@@ -24324,6 +24674,7 @@ var NLDDRadioButtonGroup = (_NLDDRadioButtonGroup = class NLDDRadioButtonGroup e
 				field.checked = false;
 				field.commitFormValue?.();
 			});
+			this._positionFields();
 		};
 		this._handleKeyDown = (e) => {
 			if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
@@ -24338,7 +24689,8 @@ var NLDDRadioButtonGroup = (_NLDDRadioButtonGroup = class NLDDRadioButtonGroup e
 			activeField.commitFormValue?.();
 			nextField.checked = true;
 			nextField.commitFormValue?.();
-			(nextField.shadowRoot?.querySelector("nldd-radio-button")?.shadowRoot?.querySelector("input"))?.focus();
+			this._positionFields();
+			nextField.focus();
 			nextField.dispatchEvent(new CustomEvent("change", {
 				detail: {
 					checked: true,
@@ -24400,6 +24752,17 @@ var NLDDRadioButtonGroup = (_NLDDRadioButtonGroup = class NLDDRadioButtonGroup e
 				field.disabled = false;
 			}
 		});
+		this._positionFields();
+	}
+	/** Each field its place in the group, and the group one stop for Tab. A
+	*  field cannot count its siblings: it only sees itself. */
+	_positionFields() {
+		const fields = this._getFields();
+		const answered = fields.some((field) => field.checked);
+		radioPositions(fields, (field) => field.checked, (field) => field.disabled).forEach((position, index) => {
+			fields[index]._groupPosition = position;
+			fields[index]._groupHasSelection = answered;
+		});
 	}
 	/**
 	* Delegates focus to the checked option, or to the first enabled one when
@@ -24923,6 +25286,16 @@ var segmentedControlStyles = css`
 
 	/* # Elements */
 
+	.segmented-control__validation-input {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		margin: 0;
+		pointer-events: none;
+		width: 100%;
+		height: 100%;
+	}
+
 	::slotted(nldd-segmented-control-item[selected]) {
 		position: relative;
 		z-index: var(--_selected-z-index);
@@ -25077,12 +25450,18 @@ var segmentedControlItemStyles = css`
 		opacity: var(--primitives-opacity-disabled);
 	}
 
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	:host(:focus-visible) .segmented-control__item,
 	.segmented-control__item:has(:focus-visible) {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
+	:host([selected]:focus-visible) .segmented-control__item,
 	:host([selected]) .segmented-control__item:has(:focus-visible) {
 		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 	}
@@ -25138,35 +25517,48 @@ var segmentedControlItemStyles = css`
 //#endregion
 //#region src/components/inputs/segmented-control/segmented-control.template.ts
 function segmentedControlTemplate(component) {
-	return html`<slot @slotchange=${component._onSlotChange}></slot>`;
+	return html`
+		<input class="segmented-control__validation-input"
+			type="radio"
+			name="nldd-validation"
+			?required=${component.required && component.type !== "checkbox"}
+			?disabled=${component.disabled}
+			.checked=${!!component.value}
+			tabindex="-1"
+			aria-hidden="true"
+		>
+		<slot @slotchange=${component._onSlotChange}></slot>
+	`;
 }
 function segmentedControlItemTemplate(component) {
 	const isIcon = component.variant === "icon";
 	const showPlaceholder = isIcon || component.variant === "icon-and-text";
 	const labelText = component.text || nothing;
-	const label = html`
-		<label class="segmented-control__item">
-			<input class="segmented-control__item-input"
-				type=${component.inputType}
-				name=${component.groupName || nothing}
-				value=${component.value}
-				.checked=${component.selected}
-				?disabled=${component.disabled}
-				?required=${component.required}
-				aria-label=${isIcon ? labelText : nothing}
-				@change=${component._handleChange}
-			>
-			<span class="segmented-control__item-icon"
-				aria-hidden=${isIcon ? nothing : "true"}
-			>
-				${component.icon ? html`<nldd-icon name=${component.icon}></nldd-icon>` : html`<slot name="icon">${showPlaceholder ? html`<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
-			</span>
-			<span class="segmented-control__item-text"
-				aria-hidden=${isIcon ? "true" : nothing}
-			>
-				${component.text}
-			</span>
-		</label>`;
+	const content = html`
+		<span class="segmented-control__item-icon"
+			aria-hidden=${isIcon ? nothing : "true"}
+		>
+			${component.icon ? html`<nldd-icon name=${component.icon}></nldd-icon>` : html`<slot name="icon">${showPlaceholder ? html`<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
+		</span>
+		<span class="segmented-control__item-text"
+			aria-hidden=${isIcon ? "true" : nothing}
+		>
+			${component.text}
+		</span>`;
+	const label = component.inputType === "radio" ? html`<div class="segmented-control__item">${content}</div>` : html`
+			<label class="segmented-control__item">
+				<input class="segmented-control__item-input"
+					type="checkbox"
+					name=${component.groupName || nothing}
+					value=${component.value}
+					.checked=${component.selected}
+					?disabled=${component.disabled}
+					?required=${component.required}
+					aria-label=${isIcon ? labelText : nothing}
+					@change=${component._handleChange}
+				>
+				${content}
+			</label>`;
 	if (isIcon && labelText) return html`<nldd-tooltip text=${labelText}>${label}</nldd-tooltip>`;
 	return label;
 }
@@ -25182,11 +25574,11 @@ function segmentedControlItemTemplate(component) {
 * @attr {string} value - Selected value for radio type
 * @prop {string[]} values - Selected values for checkbox type (property binding only, not an attribute)
 * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md')
-* @attr {string} type - Input type: 'radio' | 'checkbox' (default: 'radio').
+* @attr {string} type - Selection mode: 'radio' | 'checkbox' (default: 'radio').
 * @attr {string} variant - Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text')
 * @attr {boolean} disabled - Disabled state for all items
 * @attr {string} width - Width mode: 'full' (stretches to container), 'fit-content' (per-item content size), or any CSS length (e.g. '240px')
-* @attr {string} name - Name for form submission, forwarded to native inputs
+* @attr {string} name - Name for form submission
 * @attr {string} accessible-label - Accessible name for the group, set as aria-label
 * @attr {string} accessible-labeled-by - Id of an external label element, set as aria-labelledby on the group
 * @attr {boolean} required - Marks the group as required. Enforced in radio mode; in checkbox mode only announced.
@@ -25206,9 +25598,9 @@ function segmentedControlItemTemplate(component) {
 * @attr {string} icon - Icon name for nldd-icon
 * @attr {string} size - Control size: 'sm' | 'md' | 'lg' (default: 'md'). Set by nldd-segmented-control.
 * @attr {string} variant - Content type: 'text' | 'icon' | 'icon-and-text' (default: 'text'). Set by nldd-segmented-control.
-* @attr {string} input-type - Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control.
-* @attr {string} group-name - Name of the group for form submission, put on the native input. Set by nldd-segmented-control.
-* @attr {boolean} required - Required state. Set by nldd-segmented-control.
+* @attr {string} input-type - Selection mode: 'radio' | 'checkbox' (default: 'radio'). In radio mode the item is the radio itself, in checkbox mode it renders a native checkbox. Set by nldd-segmented-control.
+* @attr {string} group-name - Name of the group for form submission, put on the native checkbox. Set by nldd-segmented-control.
+* @attr {boolean} required - Required state of the native checkbox. In radio mode the group carries the constraint.
 *
 * @slot icon - Slot for a custom icon (e.g. custom SVG). Only used when icon attribute is not set.
 *
@@ -25230,6 +25622,102 @@ var NLDDSegmentedControlItem = (_NLDDSegmentedControlItem = class NLDDSegmentedC
 		this.groupName = "";
 		this.text = "";
 		this.icon = "";
+		this._groupPosition = null;
+		this._appliedRadioLabel = null;
+		this._onRadioFocus = () => {
+			this._tooltip?._handleFocusIn();
+		};
+		this._onRadioBlur = () => {
+			this._tooltip?._handleTriggerLeave();
+		};
+		this._onRadioClick = () => {
+			if (this.inputType !== "radio") return;
+			this._select();
+		};
+		this._onRadioKeyDown = (e) => {
+			if (this.inputType !== "radio" || this.disabled) return;
+			if (e.key === " ") {
+				e.preventDefault();
+				this._select();
+				return;
+			}
+			if (e.key === "Escape") this._tooltip?._handleTriggerLeave();
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this._onRadioClick);
+		this.addEventListener("keydown", this._onRadioKeyDown);
+		this.addEventListener("focus", this._onRadioFocus);
+		this.addEventListener("blur", this._onRadioBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this._onRadioClick);
+		this.removeEventListener("keydown", this._onRadioKeyDown);
+		this.removeEventListener("focus", this._onRadioFocus);
+		this.removeEventListener("blur", this._onRadioBlur);
+	}
+	/**
+	* The tooltip of the icon variant, which shows itself when focus moves into
+	* it. In radio mode the focus is on this element, outside it, so it hears
+	* about focus and Escape from here.
+	*/
+	get _tooltip() {
+		return this.inputType === "radio" ? this.shadowRoot?.querySelector("nldd-tooltip") ?? null : null;
+	}
+	updated() {
+		this._syncRadioAria();
+	}
+	/**
+	* In radio mode this element is the radio.
+	*
+	* A native radio in a shadow root of its own is a group of one: a screen
+	* reader counts it as "1 of 1" and Tab stops at every option. The role on the
+	* element itself puts the whole group back in one tree, under the radiogroup
+	* the control carries. Checkbox mode keeps its native input.
+	*/
+	_syncRadioAria() {
+		if (this.inputType !== "radio") {
+			for (const name of [
+				"role",
+				"aria-checked",
+				"aria-disabled",
+				"aria-posinset",
+				"aria-setsize",
+				"tabindex"
+			]) this.removeAttribute(name);
+			this._appliedRadioLabel = setOwnedAttribute(this, "aria-label", "", this._appliedRadioLabel);
+			return;
+		}
+		this.setAttribute("role", "radio");
+		this.setAttribute("aria-checked", String(this.selected));
+		this._appliedRadioLabel = setOwnedAttribute(this, "aria-label", this.text, this._appliedRadioLabel);
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		const position = this._groupPosition;
+		if (position) {
+			this.setAttribute("aria-posinset", String(position.posInSet));
+			this.setAttribute("aria-setsize", String(position.setSize));
+		} else {
+			this.removeAttribute("aria-posinset");
+			this.removeAttribute("aria-setsize");
+		}
+		const tabbable = !this.disabled && position?.tabbable !== false;
+		this.setAttribute("tabindex", tabbable ? "0" : "-1");
+	}
+	/** Checked, the way a click or the space bar does it. A radio never
+	*  unchecks itself, so an option that is already selected says nothing. */
+	_select() {
+		if (this.disabled || this.selected) return;
+		this.dispatchEvent(new CustomEvent("item-change", {
+			detail: {
+				value: this.value,
+				checked: true
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	_handleChange(e) {
 		const input = e.target;
@@ -25243,10 +25731,15 @@ var NLDDSegmentedControlItem = (_NLDDSegmentedControlItem = class NLDDSegmentedC
 		}));
 	}
 	/**
-	* Delegates focus to the inner native `<input>`, so consumers can call
+	* Delegates focus to whichever control this mode renders: the element itself
+	* in radio mode, the native `<input>` in checkbox mode. Lets consumers call
 	* `itemEl.focus()` without reaching into shadow DOM.
 	*/
 	focus(options) {
+		if (this.inputType === "radio") {
+			super.focus(options);
+			return;
+		}
 		this.shadowRoot?.querySelector(".segmented-control__item-input")?.focus(options);
 	}
 	render() {
@@ -25289,6 +25782,7 @@ __decorate([property({
 	converter: reflectNonDefault("")
 })], NLDDSegmentedControlItem.prototype, "text", void 0);
 __decorate([property({ type: String })], NLDDSegmentedControlItem.prototype, "icon", void 0);
+__decorate([state()], NLDDSegmentedControlItem.prototype, "_groupPosition", void 0);
 NLDDSegmentedControlItem = __decorate([customElement("nldd-segmented-control-item")], NLDDSegmentedControlItem);
 var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl extends FormAssociated(LitElement) {
 	constructor(..._args2) {
@@ -25338,6 +25832,10 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 		};
 		this._handleKeydown = (e) => {
 			if (this.disabled || this.type === "checkbox") return;
+			if (e.key === "Enter") {
+				submitOnEnter(this, e);
+				return;
+			}
 			const items = this._getItems().filter((item) => !item.disabled);
 			if (items.length === 0) return;
 			const currentIndex = items.findIndex((item) => item.selected);
@@ -25367,7 +25865,7 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 				this.value = items[nextIndex].value;
 				this._syncItems();
 				this.commitFormValue();
-				items[nextIndex].shadowRoot?.querySelector("input")?.focus();
+				items[nextIndex].focus();
 				this.dispatchEvent(new CustomEvent("change", {
 					detail: { value: this.value },
 					bubbles: true,
@@ -25435,9 +25933,6 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 	}
 	_syncItems() {
 		const items = this._getItems();
-		items.forEach((item) => {
-			item.required = this.required && this.type !== "checkbox";
-		});
 		this.toggleAttribute("aria-required", this.required);
 		if (this.invalid) this.setAttribute("aria-invalid", "true");
 		else this.removeAttribute("aria-invalid");
@@ -25461,6 +25956,10 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 			item.groupName = this.name || this._autoName;
 			item.selected = this.type === "checkbox" ? selectedValues.includes(item.value) : item.value === this.value;
 		});
+		const positions = this.type === "radio" ? radioPositions(items, (item) => item.selected, (item) => item.disabled) : [];
+		items.forEach((item, index) => {
+			item._groupPosition = positions[index] ?? null;
+		});
 	}
 	get _autoName() {
 		if (!this._generatedName) this._generatedName = `nldd-segmented-${_NLDDSegmentedControl._idCounter++}`;
@@ -28881,7 +29380,7 @@ function completionSource(getTypeaheads, onChoose) {
 }
 var popupTheme = EditorView.theme({
 	".cm-tooltip.cm-tooltip-autocomplete": {
-		border: "1px solid var(--semantics-surfaces-tinted-border-color)",
+		border: "none",
 		borderRadius: "var(--semantics-overlays-corner-radius)",
 		backgroundColor: "var(--semantics-surfaces-base-background-color)",
 		boxShadow: "var(--components-menu-box-shadow)"
@@ -30556,11 +31055,13 @@ var stableCursor = [
 						head,
 						side: "pointer"
 					};
-					else if (tr.isUserEvent("input") || tr.isUserEvent("delete.backward")) hint = {
-						head,
-						side: linkEndsAt(update.state, head) && !linkEndsAt(update.startState, oldHead) ? 1 : -1
-					};
-					else if (tr.isUserEvent("delete.forward")) hint = {
+					else if (tr.isUserEvent("input") || tr.isUserEvent("delete.backward")) {
+						const grew = tr.isUserEvent("input") && bareUrlEndsAt(update.state, head);
+						hint = {
+							head,
+							side: linkEndsAt(update.state, head) && !linkEndsAt(update.startState, oldHead) && !grew ? 1 : -1
+						};
+					} else if (tr.isUserEvent("delete.forward")) hint = {
 						head,
 						side: 1
 					};
@@ -34630,6 +35131,7 @@ var toggleButtonStyles = css`
 
 		${inheritedTextReset}
 		display: inline-block;
+		position: relative;
 		-webkit-user-select: none;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -34639,6 +35141,10 @@ var toggleButtonStyles = css`
 		display: none;
 	}
 
+	:host(:focus-visible) {
+		outline: none;
+	}
+
 	:host([size="xs"]) {
 		--_corner-radius: var(--semantics-controls-xs-corner-radius);
 		--_min-size: var(--semantics-controls-xs-min-size);
@@ -34748,7 +35254,8 @@ var toggleButtonStyles = css`
 	}
 
 	.toggle-button:focus-visible,
-	.toggle-button:has(.toggle-button__input:focus-visible) {
+	.toggle-button:has(.toggle-button__input:focus-visible),
+	:host(:focus-visible) .toggle-button {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
@@ -34808,6 +35315,16 @@ var toggleButtonStyles = css`
 		width: 100%;
 		height: 100%;
 	}
+
+	.toggle-button__validation-input {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		margin: 0;
+		pointer-events: none;
+		width: 100%;
+		height: 100%;
+	}
 `;
 //#endregion
 //#region src/components/inputs/toggle-button/toggle-button.template.ts
@@ -34826,10 +35343,25 @@ function toggleButtonTemplate(component) {
 				></nldd-icon>` : nothing}</slot>`;
 	const textContent = showText ? html`<span class="toggle-button__text">${component.text}</span>` : nothing;
 	let result;
-	if (component.type === "checkbox" || component.type === "radio") result = html`
+	if (component.type === "radio") result = html`
+			<div class="toggle-button">
+				<input class="toggle-button__validation-input"
+					type="radio"
+					name="nldd-validation"
+					?required=${component.required}
+					?disabled=${component.disabled}
+					.checked=${component._groupHasSelection}
+					tabindex="-1"
+					aria-hidden="true"
+				>
+				${icon}
+				${textContent}
+			</div>
+		`;
+	else if (component.type === "checkbox") result = html`
 			<label class="toggle-button">
 				<input class="toggle-button__input"
-					type=${component.type}
+					type="checkbox"
 					.checked=${component.selected}
 					?disabled=${component.disabled}
 					?required=${component.required}
@@ -34865,11 +35397,15 @@ function toggleButtonTemplate(component) {
 * Nederlandse Digitale Dienst Toggle Button Component (Lit + TypeScript)
 *
 * A selectable button that toggles between selected and unselected.
-* Available as a button (aria-pressed), checkbox, or radio input.
+* Available as a button (aria-pressed), a checkbox, or a radio.
+*
+* In radio mode the button itself is the radio: it carries the role, the state
+* and its place in the group. A native radio in a shadow root of its own would
+* be a group of one, counted as "1 of 1" and stopped at by Tab.
 *
 * @element nldd-toggle-button
 *
-* @attr {'button' | 'checkbox' | 'radio'} type - Underlying element (default: 'button')
+* @attr {'button' | 'checkbox' | 'radio'} type - What the button is: a button with aria-pressed, a native checkbox, or a radio (default: 'button')
 * @attr {'xs' | 'sm' | 'md' | 'lg'} size - Button size (default: 'md')
 * @attr {boolean} selected - Selected state
 * @attr {boolean} disabled - Disabled state
@@ -34907,6 +35443,32 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 		this._warnedA11y = false;
 		this._warnedEmptyIcon = false;
 		this.invalid = false;
+		this._groupPosition = null;
+		this._groupHasSelection = false;
+		this._appliedRadioLabel = null;
+		this._onRadioClick = () => {
+			if (this.type !== "radio") return;
+			this.toggle();
+		};
+		this._onRadioKeyDown = (e) => {
+			if (this.type !== "radio" || this.disabled) return;
+			if (e.key === " ") {
+				e.preventDefault();
+				this.toggle();
+				return;
+			}
+			if (e.key === "Enter") {
+				submitOnEnter(this, e);
+				return;
+			}
+			if (e.key === "Escape") this._tooltip?._handleTriggerLeave();
+		};
+		this._onRadioFocus = () => {
+			this._tooltip?._handleFocusIn();
+		};
+		this._onRadioBlur = () => {
+			this._tooltip?._handleTriggerLeave();
+		};
 	}
 	/** Whether an icon is present via attribute or slot. */
 	get _hasIcon() {
@@ -34922,6 +35484,44 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 		if (!(!this.text && !this.accessibleLabel)) this._warnedA11y = false;
 		if (this._hasIcon || this.variant !== "icon") this._warnedEmptyIcon = false;
 		if (changed.has("selected") || changed.has("value") || changed.has("type")) this.commitFormValue();
+		this._syncRadioAria();
+	}
+	/**
+	* In radio mode this element is the radio.
+	*
+	* A native radio in a shadow root of its own is a group of one: a screen
+	* reader counts it as "1 of 1" and Tab stops at every option. The role on the
+	* element itself puts the group back in one tree. The other two types keep
+	* the control they render: a checkbox input, or a button with aria-pressed.
+	*/
+	_syncRadioAria() {
+		if (this.type !== "radio") {
+			for (const name of [
+				"role",
+				"aria-checked",
+				"aria-disabled",
+				"aria-posinset",
+				"aria-setsize",
+				"tabindex"
+			]) this.removeAttribute(name);
+			this._appliedRadioLabel = setOwnedAttribute(this, "aria-label", "", this._appliedRadioLabel);
+			return;
+		}
+		this.setAttribute("role", "radio");
+		this.setAttribute("aria-checked", String(this.selected));
+		this._appliedRadioLabel = setOwnedAttribute(this, "aria-label", this.accessibleLabel || this.text, this._appliedRadioLabel);
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		const position = this._groupPosition;
+		if (position) {
+			this.setAttribute("aria-posinset", String(position.posInSet));
+			this.setAttribute("aria-setsize", String(position.setSize));
+		} else {
+			this.removeAttribute("aria-posinset");
+			this.removeAttribute("aria-setsize");
+		}
+		const tabbable = !this.disabled && !this.noTab && position?.tabbable !== false;
+		this.setAttribute("tabindex", tabbable ? "0" : "-1");
 	}
 	formValue() {
 		return (this.type === "checkbox" || this.type === "radio") && this.selected ? this.value : null;
@@ -34932,6 +35532,28 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 	formStateRestoreCallback(state) {
 		this.selected = state !== null;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this._onRadioClick);
+		this.addEventListener("keydown", this._onRadioKeyDown);
+		this.addEventListener("focus", this._onRadioFocus);
+		this.addEventListener("blur", this._onRadioBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this._onRadioClick);
+		this.removeEventListener("keydown", this._onRadioKeyDown);
+		this.removeEventListener("focus", this._onRadioFocus);
+		this.removeEventListener("blur", this._onRadioBlur);
+	}
+	/**
+	* The tooltip of an icon-only button, which shows itself when focus moves
+	* into it. In radio mode the focus is on this element, outside it, so it
+	* hears about focus and Escape from here.
+	*/
+	get _tooltip() {
+		return this.type === "radio" ? this.shadowRoot?.querySelector("nldd-tooltip") ?? null : null;
+	}
 	_handleButtonClick() {
 		if (this.disabled) return;
 		this._toggle();
@@ -34972,6 +35594,10 @@ var NLDDToggleButton = (_NLDDToggleButton = class NLDDToggleButton extends Descr
 	* reaching into shadow DOM.
 	*/
 	focus(options) {
+		if (this.type === "radio") {
+			super.focus(options);
+			return;
+		}
 		this.shadowRoot?.querySelector(".toggle-button__input, button.toggle-button")?.focus(options);
 	}
 	/** The button is the control, not the input that carries the value. */
@@ -35029,6 +35655,8 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDToggleButton.prototype, "invalid", void 0);
+__decorate([state()], NLDDToggleButton.prototype, "_groupPosition", void 0);
+__decorate([state()], NLDDToggleButton.prototype, "_groupHasSelection", void 0);
 NLDDToggleButton = __decorate([customElement("nldd-toggle-button")], NLDDToggleButton);
 //#endregion
 //#region src/components/inputs/toggle-button-group/toggle-button-group.styles.ts
@@ -35125,6 +35753,7 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 				button.selected = false;
 				button.commitFormValue?.();
 			});
+			this._positionButtons();
 		};
 		this._handleKeyDown = (e) => {
 			if (this.type !== "radio") return;
@@ -35147,7 +35776,8 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 			}
 			nextButton.selected = true;
 			nextButton.commitFormValue?.();
-			(nextButton.shadowRoot?.querySelector(".toggle-button__input"))?.focus();
+			this._positionButtons();
+			nextButton.focus();
 			nextButton.dispatchEvent(new CustomEvent("change", {
 				detail: {
 					selected: true,
@@ -35210,6 +35840,24 @@ var NLDDToggleButtonGroup = (_NLDDToggleButtonGroup = class NLDDToggleButtonGrou
 				button.disabled = false;
 			}
 		});
+		this._positionButtons();
+	}
+	/** In radio mode, each button its place in the group and the group one stop
+	*  for Tab. Every button renders its input in a shadow root of its own, so
+	*  the browser would count each as a group of one. */
+	_positionButtons() {
+		const buttons = this._getButtons();
+		if (this.type !== "radio") {
+			buttons.forEach((button) => {
+				button._groupPosition = null;
+			});
+			return;
+		}
+		const answered = buttons.some((button) => button.selected);
+		radioPositions(buttons, (button) => button.selected, (button) => button.disabled).forEach((position, index) => {
+			buttons[index]._groupPosition = position;
+			buttons[index]._groupHasSelection = answered;
+		});
 	}
 	/**
 	* Delegates focus to the first selected button, or to the first enabled one
@@ -38398,6 +39046,7 @@ var pageStyles = css`
 		--_outer-inset-bottom: var(--context-inset-bottom, 0px);
 		--_header-height: 0px;
 		--_footer-height: 0px;
+		--_header-full-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;
@@ -38551,6 +39200,7 @@ var pageStyles = css`
 	:host(:not([data-scroll="root"])) .page__scroll {
 		--context-inset-top: var(--_header-height);
 		--context-inset-bottom: var(--_footer-height);
+		padding-top: var(--_header-full-height);
 	}
 
 	:host([sticky-header]) .page__scroll {
@@ -38626,8 +39276,9 @@ function pageTemplate(component) {
 * A page layout with optional sticky header and footer.
 * Without sticky-header, the host is the scroll container and the header
 * is in normal flow. With sticky-header, the header becomes absolute and
-* .page__scroll takes over scrolling. A ResizeObserver on the header
-* sets padding-top on the scroll wrapper (only when not scrolled).
+* .page__scroll takes over scrolling, padded by the measured header height.
+* That padding freezes once you scroll, so a collapsing bar cannot drag the
+* content up under the cursor.
 *
 * In root-scroll mode (--context-scroll-mode: root, derived upstream by
 * nldd-app-view) the page stops owning a scroller: the document scrolls and the
@@ -38665,8 +39316,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollMode = "nested";
 		this._scrollTarget = null;
 		this._scrollProvider = null;
-		this._headerObserver = null;
 		this._insetObserver = null;
+		this._headerFullHeight = 0;
 		this._mainSlot = null;
 		this._resizeRaf = 0;
 		this._onResize = () => {
@@ -38741,7 +39392,6 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollProvider = null;
 		if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
 		this._teardownScrollListener();
-		this._teardownHeaderObserver();
 		this._teardownInsetObserver();
 		this._teardownMainSlotListener();
 	}
@@ -38769,10 +39419,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	}
 	_configureScroll() {
 		this._teardownScrollListener();
-		this._teardownHeaderObserver();
-		if (this._scrollEl) this._scrollEl.style.paddingTop = "";
 		this._setupScrollListener();
-		if (this.stickyHeader && !this._isRoot) this._setupHeaderObserver();
+		this._headerFullHeight = 0;
 		this._setupInsetObserver();
 		this._onScroll();
 	}
@@ -38784,6 +39432,11 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	* 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.
+	*
+	* It also measures the padding the scroll wrapper reserves for an absolute
+	* sticky header. One observer owns both, because two of them writing styles
+	* that resize what the other watches is what leaves ResizeObserver
+	* notifications undelivered.
 	*/
 	_setupInsetObserver() {
 		this._teardownInsetObserver();
@@ -38791,10 +39444,11 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		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`);
+			this._publish("--_header-height", `${this.stickyHeader ? header.offsetHeight : 0}px`);
+			this._publish("--_footer-height", `${this.stickyFooter ? footer.offsetHeight : 0}px`);
+			this._publish("--_header-full-height", `${this._measureHeaderFullHeight(header)}px`);
 			if (this._isRoot) this.style.removeProperty("--_scroll-height");
-			else this.style.setProperty("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
+			else this._publish("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
 		};
 		publish();
 		this._insetObserver = new ResizeObserver(publish);
@@ -38808,6 +39462,27 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			this._insetObserver = null;
 		}
 	}
+	/**
+	* Writes a published variable only when it changes. These values size the
+	* elements the observer watches, so a rewrite feeds the callback its own
+	* next notification, which is what Chromium reports as "ResizeObserver
+	* loop completed with undelivered notifications".
+	*/
+	_publish(name, value) {
+		if (this.style.getPropertyValue(name) === value) return;
+		this.style.setProperty(name, value);
+	}
+	/**
+	* The header at its full height: the last measurement taken at scroll top.
+	* A top title bar shrinks as you pass its anchor, and the space reserved for
+	* it must not shrink along, or the content it starts under is dragged up
+	* from under the cursor. Which mode reserves that space is the CSS's call.
+	*/
+	_measureHeaderFullHeight(header) {
+		if (!this.stickyHeader) return 0;
+		if (this.scrollTarget.scrollTop === 0) this._headerFullHeight = header.offsetHeight;
+		return this._headerFullHeight;
+	}
 	_setupScrollListener() {
 		const target = this.scrollEventTarget;
 		target.addEventListener("scroll", this._onScroll, { passive: true });
@@ -38819,23 +39494,6 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			this._scrollTarget = null;
 		}
 	}
-	_setupHeaderObserver() {
-		this._teardownHeaderObserver();
-		const header = this._headerEl;
-		const scroll = this._scrollEl;
-		if (!header || !scroll) return;
-		this._headerObserver = new ResizeObserver(() => {
-			if (scroll.scrollTop > 0) return;
-			scroll.style.paddingTop = `${header.offsetHeight}px`;
-		});
-		this._headerObserver.observe(header);
-	}
-	_teardownHeaderObserver() {
-		if (this._headerObserver) {
-			this._headerObserver.disconnect();
-			this._headerObserver = null;
-		}
-	}
 	_setupMainSlotListener() {
 		this._teardownMainSlotListener();
 		const slot = this.shadowRoot?.querySelector("slot:not([name])") ?? null;
@@ -41155,6 +41813,9 @@ function sheetTemplate(component) {
 			<div class="sheet__body">
 				<slot></slot>
 			</div>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -42611,6 +43272,9 @@ function windowTemplate(component) {
 			<div class="window__body">
 				<slot></slot>
 			</div>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -45997,8 +46661,10 @@ var NLDDMenuBar = (_NLDDMenuBar = class NLDDMenuBar extends withTranslations(Lit
 	}
 	/**
 	* Calculate which slotted items overflow and hide them behind an overflow button.
-	* Note: not unit-tested — JSDOM lacks layout support (offsetWidth, clientWidth).
-	* Covered by visual/E2E testing via Storybook stories.
+	* Tested both ways in menu-bar.test.ts: with real layout for the whole path, and
+	* with mocked widths for the arithmetic. The space reserved for the button needs
+	* the mocks — the button is a shrinkable flex item, so the rendered layout
+	* absorbs whatever the arithmetic leaves over and always looks right.
 	*/
 	_updateOverflow() {
 		const overflowButton = this._overflowButton;
@@ -49992,6 +50658,9 @@ function modalDialogTemplate(component) {
 				<slot></slot>
 				<slot slot="actions" name="actions"></slot>
 			</nldd-inline-dialog>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -50617,6 +51286,12 @@ var notificationStyles = css`
 		display: none;
 	}
 
+	/* Off for good once it has arrived: a move between overlays reinserts the
+	   element, and the browser would play the arrival again. */
+	:host([data-arrived]) {
+		animation: none;
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		:host {
 			transition: none;
@@ -50793,11 +51468,12 @@ function notificationTemplate(component) {
 * ## Opening it
 * Under the front notification sits a strip as wide as the deck and as tall as
 * the deck is when it fans out. That strip is the handle: pointing at it fans
-* the deck out to fill it, clicking it lays the deck out as a list. Moving
-* focus into the region does the same, and clicking or tabbing away puts it
-* back. Nothing counts down while the list is open, because open means someone
-* is reading. The notification itself is not a button, so a click on the
-* message you are reading does nothing, which is what it says it does.
+* the deck out to fill it, clicking it lays the deck out as a list. Tabbing
+* into the region does the same, and clicking outside it or tabbing away puts
+* it back. Dismissing one keeps the list open for the rest. Nothing counts down
+* while the list is open, because open means someone is reading. The
+* notification itself is not a button, so a click on the message you are
+* reading does nothing, which is what it says it does.
 */
 var REGION_ID = "nldd-notification-region";
 /** Past this a notification adds no edge of its own: it would sit exactly
@@ -50806,6 +51482,78 @@ var REGION_ID = "nldd-notification-region";
 var MAX_DEPTH = 2;
 var frontObserver = null;
 var expanded = false;
+/**
+* A modal overlay paints in the browser's top layer, above the whole document
+* and out of reach of any z-index, and while one is open everything outside it
+* is inert: a region left on the body is not merely behind the sheet, it is
+* unclickable even once you put it in the top layer yourself. So the region
+* travels. It lives in the topmost open overlay and sinks back as they close,
+* which is also what makes a notification raised before the sheet opened come
+* along rather than stay behind it.
+*
+* Innermost last. Entries are verified on read rather than trusted, so an
+* overlay torn out of the DOM without closing cannot strand the region.
+*/
+var overlays = [];
+var overlayWatch = null;
+/** Open as a modal, and with a slot to take the region in. A modal without one
+*  would swallow the region, which is worse than leaving it behind. */
+function isOpenOverlay(el) {
+	const root = el.shadowRoot;
+	if (!root?.querySelector("slot[name=\"notifications\"]")) return false;
+	return root.querySelector("dialog")?.matches(":modal") ?? false;
+}
+function regionHost() {
+	while (overlays.length) {
+		const top = overlays[overlays.length - 1];
+		if (top.isConnected && isOpenOverlay(top)) return top;
+		overlays.pop();
+	}
+	return document.body;
+}
+function placeRegion(region) {
+	const host = regionHost();
+	if (region.parentElement === host) return;
+	const inOverlay = host !== document.body;
+	if (inOverlay) region.setAttribute("slot", "notifications");
+	else region.removeAttribute("slot");
+	if (inOverlay) region.setAttribute("popover", "manual");
+	else region.removeAttribute("popover");
+	const carried = notifications(region);
+	carried.forEach((item) => item._setMoving?.(true));
+	host.appendChild(region);
+	if (inOverlay) region.showPopover();
+	carried.forEach((item) => item._setMoving?.(false));
+}
+function relocateRegion() {
+	const region = document.getElementById(REGION_ID);
+	if (region) placeRegion(region);
+}
+function watchOverlays() {
+	if (overlayWatch) return;
+	overlayWatch = new AbortController();
+	const { signal } = overlayWatch;
+	document.querySelectorAll("*").forEach((el) => {
+		if (isOpenOverlay(el)) overlays.push(el);
+	});
+	document.addEventListener("open", (event) => {
+		const host = event.target;
+		if (!host || !isOpenOverlay(host)) return;
+		if (!overlays.includes(host)) overlays.push(host);
+		relocateRegion();
+	}, { signal });
+	document.addEventListener("close", (event) => {
+		const host = event.target;
+		const at = host ? overlays.indexOf(host) : -1;
+		if (at === -1) return;
+		overlays.splice(at, 1);
+		relocateRegion();
+	}, {
+		capture: true,
+		signal
+	});
+}
+if (typeof document !== "undefined") watchOverlays();
 function notifications(region) {
 	return Array.from(region.querySelectorAll(":scope > nldd-notification"));
 }
@@ -50823,22 +51571,33 @@ function ensureRegion(label) {
 		"z-index: 1000",
 		"top: max(var(--semantics-overlays-inset), env(safe-area-inset-top))",
 		"right: max(var(--semantics-overlays-inset), env(safe-area-inset-right))",
+		"bottom: auto",
 		"left: auto",
 		"display: grid",
+		"align-content: start",
 		"align-items: start",
+		"margin: 0",
+		"border: none",
+		"background: none",
 		"pointer-events: none",
-		"max-height: calc(100dvh - 2 * var(--semantics-overlays-inset))"
+		"max-height: calc(100dvh - 2 * var(--semantics-overlays-inset))",
+		"overflow: visible",
+		"padding: 0",
+		"color: inherit"
 	].join(";");
 	region.addEventListener("pointerdown", () => {}, { passive: true });
-	region.addEventListener("focusin", () => setExpanded(region, true));
+	region.addEventListener("focusin", () => {
+		if (isKeyboardMode()) setExpanded(region, true);
+	});
 	region.addEventListener("focusout", (e) => {
-		if (region.contains(e.relatedTarget)) return;
+		const next = e.relatedTarget;
+		if (!next || !isKeyboardMode() || region.contains(next)) return;
 		setExpanded(region, false);
 	});
 	region.setAttribute("role", "region");
 	region.setAttribute("aria-label", label);
 	region.appendChild(makeExpander(region));
-	document.body.appendChild(region);
+	placeRegion(region);
 	return region;
 }
 /**
@@ -50846,19 +51605,22 @@ function ensureRegion(label) {
 * behind it, which on their own are a few pixels tall and no target at all, and
 * it stays exactly as tall as the deck is when it fans out, so what you point
 * at is what you get.
+*
+* A second row of the region's grid rather than hung below the region, so it
+* follows the deck and not the region's edge. A region taller than its deck,
+* as Safari made it inside an overlay while the rows still stretched, would
+* otherwise put the strip far from the deck it opens.
 */
 function makeExpander(region) {
 	const strip = document.createElement("div");
 	strip.dataset.expander = "";
 	strip.style.cssText = [
-		"position: absolute",
-		"z-index: 1000",
-		"top: 100%",
-		"right: 0",
-		"left: 0",
 		"display: none",
-		"height: var(--primitives-space-24)",
-		"pointer-events: auto"
+		"position: relative",
+		"grid-area: 2 / 1",
+		"z-index: 1000",
+		"pointer-events: auto",
+		"height: var(--primitives-space-24)"
 	].join(";");
 	strip.addEventListener("pointerenter", () => setFanned(region, true));
 	strip.addEventListener("pointerleave", () => setFanned(region, false));
@@ -50868,7 +51630,9 @@ function makeExpander(region) {
 /** Newest in front: what just happened is what you want to read, and the older
 *  ones slide back and downwards behind it. */
 function joinRegion(notification, label) {
+	watchOverlays();
 	const region = ensureRegion(label);
+	placeRegion(region);
 	notification.style.pointerEvents = "auto";
 	region.prepend(notification);
 	syncStack(region);
@@ -50936,10 +51700,10 @@ function applyOverflow(region) {
 function setScrolling(region, on) {
 	const inset = "var(--semantics-overlays-inset)";
 	const shadow = "var(--primitives-space-48)";
-	region.style.overflow = on ? "auto" : "";
+	region.style.overflow = on ? "auto" : "visible";
 	region.style.overscrollBehavior = on ? "contain" : "";
-	region.style.padding = on ? `${inset} ${inset} ${shadow} ${shadow}` : "";
-	region.style.margin = on ? `calc(-1 * ${inset}) calc(-1 * ${inset}) 0 calc(-1 * ${shadow})` : "";
+	region.style.padding = on ? `${inset} ${inset} ${shadow} ${shadow}` : "0";
+	region.style.margin = on ? `calc(-1 * ${inset}) calc(-1 * ${inset}) 0 calc(-1 * ${shadow})` : "0";
 	region.style.maxHeight = on ? "100dvh" : `calc(100dvh - 2 * ${inset})`;
 }
 function setExpanded(region, next) {
@@ -51003,6 +51767,13 @@ var nlddNotificationTranslations = {
 * Nothing about the position is settable, so notifications from anywhere in an
 * application land in the same place and stack in the same order.
 *
+* A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or
+* nldd-modal-dialog paints in the browser's top layer, above the whole page and
+* out of reach of any z-index, and while one is open everything outside it is
+* inert. So the region goes in: into the topmost overlay that is open, and back
+* down as they close. A notification already on screen travels with it, and one
+* raised from inside a sheet is readable and reachable where it is raised.
+*
 * ## The stack
 * More than one is a deck, not a list: the front one is readable and the older
 * ones peek out below it, so a burst of messages takes the room of roughly one.
@@ -51087,6 +51858,10 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 			this._pointerInside = false;
 			this._resumeTimer();
 		};
+		this._onAnimationEnd = (e) => {
+			if (e.target !== this || e.animationName !== "notification-arrive") return;
+			this.toggleAttribute("data-arrived", true);
+		};
 		this._onFocusIn = () => {
 			this._focusInside = true;
 			this._clearTimer();
@@ -51107,6 +51882,7 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 		};
 		this._onKeyDown = (e) => {
 			if (e.key !== "Escape") return;
+			e.preventDefault();
 			e.stopPropagation();
 			this._dismiss();
 		};
@@ -51130,6 +51906,7 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 		this.addEventListener("focusin", this._onFocusIn);
 		this.addEventListener("focusout", this._onFocusOut);
 		this.addEventListener("keydown", this._onKeyDown);
+		this.addEventListener("animationend", this._onAnimationEnd);
 		queueMicrotask(() => {
 			if (!this.isConnected || this._moving) return;
 			const region = document.getElementById("nldd-notification-region");
@@ -51148,6 +51925,8 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 		this.removeEventListener("focusin", this._onFocusIn);
 		this.removeEventListener("focusout", this._onFocusOut);
 		this.removeEventListener("keydown", this._onKeyDown);
+		this.removeEventListener("animationend", this._onAnimationEnd);
+		this.removeAttribute("data-arrived");
 		leaveRegion(this);
 	}
 	willUpdate(changed) {
@@ -51155,6 +51934,16 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 		if (changed.has("variant")) this.setAttribute("role", this.variant === "critical" ? "alert" : "status");
 		if (changed.has("duration")) this._remainingDuration = this.duration;
 	}
+	/** Called by the region while it carries this notification to another
+	*  parent. A move disconnects the element, and without this the
+	*  notification would read its own disconnect as having been dismissed.
+	*  It also counts as having arrived: the browser starts a CSS animation over
+	*  when its element comes back, and one caught halfway in would slide in
+	*  from off the screen a second time. */
+	_setMoving(moving) {
+		this._moving = moving;
+		if (moving) this.toggleAttribute("data-arrived", true);
+	}
 	/** Called by the region. Starting the clock here rather than on connect is
 	*  the whole point: a notification three deep in the deck is not counting. */
 	_setFront(isFront) {