@nldd/design-system 0.8.91 → 0.8.92

package/dist/components/components.js

@@ -1,16 +1,16 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
 import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-aG-rgyNQ.js";
+import { n as linkRel, t as withTranslations } from "./with-translations-BAKFoEKy.js";
 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-CEz4MB9H.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-oua8pmMC.js";
 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-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 { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as countColumn, 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 combineConfig, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as StateField, a as HighlightStyle, at as Annotation, b as foldService, c as Language, ct as Compartment, d as ParseContext, dt as Facet, et as lineNumbers, f as StreamLanguage, gt as StateEffect, h as defineLanguageFacet, it as tooltips, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorSelection, mt as RangeSetBuilder, nt as placeholder, o as IndentContext, ot as ChangeDesc, pt as Prec, q as WidgetType, st as ChangeSet, u as LanguageSupport, ut as EditorState, vt as Text, w as indentString, wt as findClusterBreak, x as getIndentUnit, y as foldNodeProp, yt as Transaction, z as Parser } from "./dist-Dn3c5gfb.js";
+import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-BUu-NW5O.js";
+import { n as html$2, r as htmlCompletionSource } from "./dist-Dxn9Up8K.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";
@@ -694,7 +694,7 @@ function template$23(helpers) {
 		` : nothing;
 	const popupSlot = html`<slot name="popup" @slotchange=${this._popup.handleSlotChange}></slot>`;
 	if (this.href) {
-		const resolvedRel = this._resolvedRel();
+		const resolvedRel = linkRel(this.rel, this.target);
 		return html`
 			<a class=${buttonClass}
 				href=${this.href}
@@ -853,7 +853,7 @@ function DescribedBy(Base) {
 * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
 * @attr {string} href - When set, renders an <a> element instead of <button>
 * @attr {string} target - Link target (e.g. '_blank'); only used when href is set. With '_blank' the button adds a visually hidden "opens in new tab" announcement for screen readers (WCAG 2.1 SC 3.2.2).
-* @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank'
+* @attr {string} rel - Link rel attribute, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set
 * @attr {object} translations - Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch.
 *
 * @slot text - Slot for custom button content (e.g. text with inline markup). Used when the text attribute is empty or not set (an empty string counts as "not set", since the attribute and the unset property are indistinguishable). Provide accessible-label when the slotted content isn't plain text.
@@ -924,12 +924,6 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends DescribedBy(withTransla
 		if (this.type === "submit") this._internals.form?.requestSubmit();
 		else if (this.type === "reset") this._internals.form?.reset();
 	}
-	/** Resolves the effective rel value for link rendering. */
-	_resolvedRel() {
-		if (this.rel) return this.rel;
-		if (this.target === "_blank") return "noopener noreferrer";
-		return "";
-	}
 	/**
 	* Delegates focus to the inner `<button>` (or `<a>` when `href` is set), so
 	* consumers can call `buttonEl.focus()` without reaching into shadow DOM.
@@ -5386,7 +5380,7 @@ function toolbarTitleTemplate(component) {
 			<a class="toolbar__title-link"
 				href=${component.href}
 				target=${component.target || nothing}
-				rel=${component.target === "_blank" ? "noopener noreferrer" : nothing}
+				rel=${linkRel(null, component.target) || nothing}
 			>
 				<slot name="media"></slot>
 				${titleGroup}${component.target === "_blank" ? html`<span class="toolbar__opens-in-new-tab-hint">${component._t("components.toolbar.opens-in-new-tab-label")}</span>` : nothing}
@@ -6371,7 +6365,7 @@ function avatarTemplate(component) {
 			<a class="avatar avatar--interactive"
 				href=${component.href}
 				target=${component.target || nothing}
-				rel=${component._resolvedRel() || nothing}
+				rel=${linkRel(component.rel, component.target) || nothing}
 				aria-label=${controlLabel}
 				tabindex=${component.noTab ? "-1" : nothing}
 			>${content}</a>
@@ -6392,7 +6386,7 @@ function avatarTemplate(component) {
 //#endregion
 //#region src/components/content/avatar/avatar.ts
 /**
-* NLDD Design System Avatar Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Avatar Component (Lit + TypeScript)
 *
 * Shows one person or organization as a compact, round (person) or rounded
 * (organization) representation. The content follows a fixed fallback chain: an
@@ -6433,7 +6427,7 @@ function avatarTemplate(component) {
 * @attr {boolean} no-tab - Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar.
 * @attr {boolean} button - Makes the avatar a button; ignored when `href` is set
 * @attr {string} target - Link target for href (e.g. '_blank'); completes rel and announces "Opens in a new tab"
-* @attr {string} rel - Link rel for href; defaults to 'noopener noreferrer' when target='_blank'
+* @attr {string} rel - Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set
 * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
 *
 * @example
@@ -6482,16 +6476,6 @@ var NLDDAvatar = (_NLDDAvatar = class NLDDAvatar extends withTranslations(LitEle
 	get isInteractive() {
 		return Boolean(this.href) || this.button;
 	}
-	/** Resolves rel for the link: _blank adds noopener/noreferrer (mirroring
-	*  nldd-link and nldd-card), merged with a rel of your own. */
-	_resolvedRel() {
-		const base = this.rel ?? "";
-		if (this.target !== "_blank") return base;
-		const parts = new Set(base.split(/\s+/).filter(Boolean));
-		parts.add("noopener");
-		parts.add("noreferrer");
-		return [...parts].join(" ");
-	}
 	/** Initials shown when there is no image: an explicit `initials` wins,
 	*  otherwise the first letter of the first and last word of `name`. */
 	get resolvedInitials() {
@@ -10050,7 +10034,7 @@ var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 			<a class="list-item__action"
 				href=${href}
 				target=${target ?? nothing}
-				rel=${rel ?? nothing}
+				rel=${linkRel(rel, target) || nothing}
 				aria-disabled=${disabled ? "true" : nothing}
 				aria-expanded=${ariaExpanded}
 				tabindex=${actionTabindex ?? nothing}
@@ -10975,7 +10959,7 @@ var nlddAvatarGroupTranslations = {
 //#endregion
 //#region src/components/content/avatar-group/avatar-group.ts
 /**
-* NLDD Design System Avatar Group Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Avatar Group Component (Lit + TypeScript)
 *
 * Shows several avatars as one group: they overlap, and each one gets a ring in
 * the surface color so they stay apart where they meet. The ring uses the same
@@ -11240,7 +11224,7 @@ function identityTemplate(component) {
 //#endregion
 //#region src/components/content/identity/identity.ts
 /**
-* NLDD Design System Identity Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Identity Component (Lit + TypeScript)
 *
 * An editorial line that shows authors or editors: optional avatar or avatars,
 * a name line and supporting text (a role or a date, for instance). Every part
@@ -11582,16 +11566,16 @@ var nlddCodeMirrorTheme = [baseTheme, syntaxHighlighting(highlightStyle)];
 //#endregion
 //#region src/utilities/codemirror/languages.ts
 var loaders = {
-	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(),
+	json: async () => (await import("./dist-CoUVHSu-.js")).json(),
+	yaml: async () => (await import("./dist-OlffRM7-.js")).yaml(),
+	javascript: async () => (await import("./dist-CGOykrJw.js").then((n) => n.t)).javascript(),
+	typescript: async () => (await import("./dist-CGOykrJw.js").then((n) => n.t)).javascript({ typescript: true }),
+	css: async () => (await import("./dist-CQzaKTa8.js").then((n) => n.r)).css(),
+	html: async () => (await import("./dist-Dxn9Up8K.js").then((n) => n.t)).html(),
+	xml: async () => (await import("./dist-M6GKopqu.js")).xml(),
+	python: async () => (await import("./dist-CSYXsT7W.js")).python(),
+	rust: async () => (await import("./dist-B5ie2Bo9.js")).rust(),
+	sql: async () => (await import("./dist-RPaf2J9c.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)),
@@ -11925,7 +11909,11 @@ var NLDDCodeViewer = (_NLDDCodeViewer = class NLDDCodeViewer extends NLDDCodeMir
 			nlddCodeMirrorTheme,
 			EditorView.editable.of(false),
 			EditorState.readOnly.of(true),
-			EditorView.contentAttributes.of({ role: "document" }),
+			EditorView.contentAttributes.of({
+				role: "code",
+				"aria-multiline": null,
+				"aria-readonly": null
+			}),
 			this._wrapCompartment.of(this.wrap ? EditorView.lineWrapping : []),
 			this._languageCompartment.of([])
 		];
@@ -15630,6 +15618,20 @@ function FormAssociated(Base) {
 			return this.shadowRoot?.querySelector("input, textarea, select") ?? null;
 		}
 		/**
+		* Where an invalid submit points its message and puts the focus.
+		*
+		* The native control, where the user reads and fixes it. Not when that
+		* control is hidden, as the radio that only carries `required` is: a radio
+		* inside an element that is itself the radio is a control inside a control,
+		* and a hidden element cannot hold the message. Then it goes on this
+		* element. Override where neither is what the user should land on, such as
+		* a group that has no focus of its own.
+		*/
+		validationAnchor() {
+			const target = this.validationTarget();
+			return target && !target.hidden ? target : void 0;
+		}
+		/**
 		* A reason the host is invalid that no attribute can express: a server that
 		* refused the value, or an nldd-validation-list whose rule it fails. Kept
 		* beside the native flags rather than replacing them, because
@@ -15663,7 +15665,7 @@ function FormAssociated(Base) {
 				flags.customError = true;
 				message = custom;
 			}
-			const anchor = target ?? this;
+			const anchor = this.validationAnchor();
 			if (Object.keys(flags).length === 0) {
 				this.internals.setValidity({});
 				return;
@@ -20563,7 +20565,7 @@ function datePickerTemplate(component) {
 //#endregion
 //#region src/components/inputs/date-picker/date-picker.ts
 /**
-* NLDD Design System Date Picker Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Date Picker Component (Lit + TypeScript)
 *
 * A calendar for picking a date or a period. The component works on its own
 * (inline on a page, in a filter panel) and also sits in the popover of
@@ -21336,7 +21338,7 @@ var nlddDateFieldTranslations = {
 //#endregion
 //#region src/components/inputs/date-field/date-field.ts
 /**
-* NLDD Design System Date Field Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Date Field Component (Lit + TypeScript)
 *
 * A text field for a date, with an optional calendar in a popover. The value is
 * always ISO (yyyy-mm-dd); on screen it shows the Dutch notation (dd-mm-yyyy).
@@ -23848,16 +23850,6 @@ var radioButtonStyles = css`
 
 	/* # Elements */
 
-	.radio-button__validation-input {
-		position: absolute;
-		inset: 0;
-		opacity: 0;
-		margin: 0;
-		pointer-events: none;
-		width: 100%;
-		height: 100%;
-	}
-
 	.radio-button__outer-shape {
 		box-sizing: border-box;
 		position: relative;
@@ -23944,11 +23936,10 @@ function radioButtonTemplate(component) {
 		<input class="radio-button__validation-input"
 			type="radio"
 			name="nldd-validation"
+			hidden
 			?required=${component.required}
 			?disabled=${component.disabled}
 			.checked=${component._groupHasSelection}
-			tabindex="-1"
-			aria-hidden="true"
 		>
 		<div class="radio-button__outer-shape"
 			aria-hidden="true"
@@ -24325,16 +24316,6 @@ var radioButtonFieldStyles = css`
 		outline: none;
 	}
 
-	.radio-button-field__validation-input {
-		position: absolute;
-		inset: 0;
-		opacity: 0;
-		margin: 0;
-		pointer-events: none;
-		width: 100%;
-		height: 100%;
-	}
-
 
 	/* # Block */
 
@@ -24377,11 +24358,10 @@ function radioButtonFieldTemplate(component) {
 			<input class="radio-button-field__validation-input"
 				type="radio"
 				name="nldd-validation"
+				hidden
 				?required=${component.required}
 				?disabled=${component.disabled}
 				.checked=${component._answered}
-				tabindex="-1"
-				aria-hidden="true"
 			>
 			<div class="radio-button-field__control">
 				<nldd-radio-button
@@ -25286,16 +25266,6 @@ 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);
@@ -25521,11 +25491,10 @@ function segmentedControlTemplate(component) {
 		<input class="segmented-control__validation-input"
 			type="radio"
 			name="nldd-validation"
+			hidden
 			?required=${component.required && component.type !== "checkbox"}
 			?disabled=${component.disabled}
 			.checked=${!!component.value}
-			tabindex="-1"
-			aria-hidden="true"
 		>
 		<slot @slotchange=${component._onSlotChange}></slot>
 	`;
@@ -25903,6 +25872,12 @@ var NLDDSegmentedControl = (_NLDDSegmentedControl2 = class NLDDSegmentedControl
 		this.value = this._initialValue;
 		this.values = [...this._initialValues];
 	}
+	/** The group has no focus of its own, so an invalid submit lands where Tab
+	*  would: on the chosen option, or the first one that is enabled. */
+	validationAnchor() {
+		const items = this._getItems().filter((item) => !item.disabled);
+		return items.find((item) => item.selected) ?? items[0];
+	}
 	formStateRestoreCallback(state) {
 		if (state === null) return;
 		if (this.type === "checkbox" && state instanceof FormData && this.name) this.values = state.getAll(this.name).map(String);
@@ -29378,7 +29353,73 @@ function completionSource(getTypeaheads, onChoose) {
 		};
 	};
 }
+/**
+* A frame for the list in the top layer, the way an nldd-menu opens.
+*
+* CodeMirror hangs its tooltip in the editor, so everything around the editor
+* applies to it: an nldd-sheet and an nldd-modal-dialog hide their overflow and
+* cut the list off at their edge, and an ancestor with a transform becomes the
+* frame a `position: fixed` tooltip resolves against, which put the list beside
+* the page. In the top layer none of that reaches it, and it has the window to
+* itself instead of the room left in a short dialog.
+*
+* It keeps the same distance from the window's edge that an nldd-menu does.
+*
+* The frame is `manual`, so only this opens and closes it, and it is opened
+* from a mutation observer rather than on an update: CodeMirror measures the
+* tooltip right after it puts it there, and a closed popover has no size.
+*/
+/** What an nldd-menu keeps free of the window's edge (--_viewport-margin). */
+var VIEWPORT_MARGIN = 16;
+function topLayerPopups() {
+	const frame = document.createElement("div");
+	frame.popover = "manual";
+	frame.className = "cm-nldd-popups";
+	const sync = () => {
+		const wanted = frame.querySelector(".cm-tooltip") !== null;
+		if (wanted === frame.matches(":popover-open")) return;
+		try {
+			if (wanted) frame.showPopover();
+			else frame.hidePopover();
+		} catch {}
+	};
+	const keeper = ViewPlugin.define((view) => {
+		view.dom.appendChild(frame);
+		const observer = new MutationObserver(sync);
+		observer.observe(frame, {
+			childList: true,
+			subtree: true
+		});
+		return { destroy() {
+			observer.disconnect();
+			frame.remove();
+		} };
+	});
+	const space = () => ({
+		left: VIEWPORT_MARGIN,
+		top: VIEWPORT_MARGIN,
+		right: window.innerWidth - VIEWPORT_MARGIN,
+		bottom: window.innerHeight - VIEWPORT_MARGIN
+	});
+	return [tooltips({
+		parent: frame,
+		tooltipSpace: space
+	}), keeper];
+}
 var popupTheme = EditorView.theme({
+	".cm-nldd-popups": {
+		position: "fixed",
+		inset: "0",
+		width: "auto",
+		height: "auto",
+		margin: "0",
+		border: "none",
+		padding: "0",
+		background: "none",
+		overflow: "visible",
+		pointerEvents: "none"
+	},
+	".cm-nldd-popups .cm-tooltip": { pointerEvents: "auto" },
 	".cm-tooltip.cm-tooltip-autocomplete": {
 		border: "none",
 		borderRadius: "var(--semantics-overlays-corner-radius)",
@@ -29460,6 +29501,7 @@ function typeaheads(getTypeaheads, onChoose) {
 		if (typeaheadQueryAt(update.state, update.state.selection.main.head, triggers)) startCompletion(update.view);
 	});
 	return [
+		topLayerPopups(),
 		autocompletion({
 			override: [completionSource(getTypeaheads, onChoose)],
 			icons: false,
@@ -33834,8 +33876,8 @@ var spacerStyles = css`
 /**
 * Nederlandse Digitale Dienst Spacer Component (Lit + TypeScript)
 *
-* Add explicit space between elements. Components in this design system
-* have no margins of their own — all whitespace is set by a spacer.
+* Add explicit space between elements. Components here have no margins
+* of their own — all whitespace is set by a spacer.
 *
 * ### Sizing
 * Use a single `size` attribute for whitespace that's the same at every
@@ -34172,7 +34214,7 @@ var nlddTimePickerTranslations = {
 //#endregion
 //#region src/components/inputs/time-picker/time-picker.ts
 /**
-* NLDD Design System Time Picker Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Time Picker Component (Lit + TypeScript)
 *
 * Two columns, hours and minutes, that slide like a wheel past the selection in
 * the middle. The component works on its own (inline on a page, in a filter
@@ -34612,7 +34654,7 @@ var nlddTimeFieldTranslations = {
 //#endregion
 //#region src/components/inputs/time-field/time-field.ts
 /**
-* NLDD Design System Time Field Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Time Field Component (Lit + TypeScript)
 *
 * A text field for a time. The value is always 24-hour `HH:mm`, which is how
 * Dutch shows it too, so unlike nldd-date-field there is nothing to convert.
@@ -35316,15 +35358,6 @@ var toggleButtonStyles = css`
 		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
@@ -35348,11 +35381,10 @@ function toggleButtonTemplate(component) {
 				<input class="toggle-button__validation-input"
 					type="radio"
 					name="nldd-validation"
+					hidden
 					?required=${component.required}
 					?disabled=${component.disabled}
 					.checked=${component._groupHasSelection}
-					tabindex="-1"
-					aria-hidden="true"
 				>
 				${icon}
 				${textContent}
@@ -40401,7 +40433,7 @@ function heroTemplate(component) {
 //#endregion
 //#region src/components/layout/page-sections/hero/hero.ts
 /**
-* NLDD Design System Hero Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Hero Component (Lit + TypeScript)
 *
 * A page header with a media area and a text panel (the main) that can stand in
 * six positions. Every area is rectangular.
@@ -41683,7 +41715,7 @@ var sheetStyles = css`
 			height: var(--_height, calc(100dvh - var(--semantics-sheets-bottom-top-inset)));
 
 			&[open] {
-				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) backwards;
 			}
 
 			&.is-closing {
@@ -41698,7 +41730,7 @@ var sheetStyles = css`
 			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
 
 			&[open] {
-				animation: sheet-slide-in-right var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+				animation: sheet-slide-in-right var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) backwards;
 			}
 
 			&.is-closing {
@@ -41733,7 +41765,7 @@ var sheetStyles = css`
 			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
 
 			&[open] {
-				animation: sheet-slide-in-left var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+				animation: sheet-slide-in-left var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) backwards;
 			}
 
 			&.is-closing {
@@ -41757,7 +41789,7 @@ var sheetStyles = css`
 			height: var(--_height, calc(100dvh - var(--semantics-sheets-bottom-top-inset)));
 
 			&[open] {
-				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) backwards;
 			}
 
 			&.is-closing {
@@ -42512,7 +42544,7 @@ function cardTemplate(component) {
 				<a class="card__action"
 					href=${component.href}
 					target=${component.target || nothing}
-					rel=${component._resolvedRel() || nothing}
+					rel=${linkRel(component.rel, component.target) || nothing}
 					aria-label=${linkLabel}
 				></a>
 			` : component.button ? html`
@@ -42567,7 +42599,7 @@ var nlddCardTranslations = { "components.card.opens-in-new-tab-label": "Opent in
 * @attr {string} href - Makes the whole card a link to this URL (empty = no link)
 * @attr {boolean} button - Makes the whole card a button; ignored when `href` is set
 * @attr {string} target - Link target for href (e.g. '_blank'); adjusts rel automatically and adds an "Opent in nieuw tabblad" announcement for '_blank'
-* @attr {string} rel - Link rel for href; defaults to 'noopener noreferrer' with target='_blank'
+* @attr {string} rel - Link rel for href; with target '_blank', 'noopener noreferrer' is added to whatever you set
 * @attr {object} translations - Override translation keys (e.g. the "Opent in nieuw tabblad" announcement)
 *
 * @slot header - Header content (e.g. nldd-title)
@@ -42598,16 +42630,6 @@ var NLDDCard = (_NLDDCard = class NLDDCard extends withTranslations(LitElement,
 			wrapper.hidden = slot.assignedElements().length === 0;
 		};
 	}
-	/** Resolve rel for the overlay link: add noopener noreferrer for _blank
-	*  (mirrors nldd-link), merged with any consumer-set rel. */
-	_resolvedRel() {
-		const base = this.rel ?? "";
-		if (this.target !== "_blank") return base;
-		const parts = new Set(base.split(/\s+/).filter(Boolean));
-		parts.add("noopener");
-		parts.add("noreferrer");
-		return [...parts].join(" ");
-	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("focusin", this._onFocusIn);
@@ -44139,7 +44161,7 @@ function template$9(control, href, target, rel, checked, expanded, current, disa
 	if (control === "link") return html`<a class="list-item-segment"
 			href=${href ?? nothing}
 			target=${target ?? nothing}
-			rel=${rel ?? nothing}
+			rel=${linkRel(rel, target) || nothing}
 			aria-disabled=${disabled ? "true" : nothing}
 			aria-expanded=${ariaExpanded}
 			aria-current=${ariaCurrent}
@@ -46938,7 +46960,7 @@ var linkStyles = css`
 //#endregion
 //#region src/components/navigation/link/link.template.ts
 function template$3(helpers) {
-	const resolvedRel = this._resolvedRel();
+	const resolvedRel = linkRel(this.rel, this.target);
 	const opensInNewTabHint = !this.disabled && this.href && this.target === "_blank" ? this._t("components.link.opens-in-new-tab-label") : "";
 	const ariaLabel = this.accessibleLabel ? [this.accessibleLabel, opensInNewTabHint].filter(Boolean).join(", ") : nothing;
 	const renderOpensInNewTabHint = !!opensInNewTabHint && !this.accessibleLabel;
@@ -46990,7 +47012,7 @@ var nlddLinkTranslations = { "components.link.opens-in-new-tab-label": "Opent in
 * @element nldd-link
 * @attr {string} href - Link target
 * @attr {string} target - Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2).
-* @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' with target='_blank'
+* @attr {string} rel - Link rel attribute; with target '_blank', 'noopener noreferrer' is added to whatever you set
 * @attr {string} size - Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap.
 * @attr {string} text - Link text (alternative to the default slot)
 * @attr {string} start-icon - Icon before the text
@@ -47025,15 +47047,6 @@ var NLDDLink = (_NLDDLink = class NLDDLink extends withTranslations(LitElement,
 			e.stopPropagation();
 		}
 	}
-	/** @internal */
-	_resolvedRel() {
-		const base = this.rel ?? "";
-		if (this.target !== "_blank") return base;
-		const parts = new Set(base.split(/\s+/).filter(Boolean));
-		parts.add("noopener");
-		parts.add("noreferrer");
-		return [...parts].join(" ");
-	}
 	render() {
 		return template$3.call(this, { handleClick: this._handleClick.bind(this) });
 	}
@@ -47107,17 +47120,24 @@ var skipLinkStyles = css`
 		position: absolute;
 		top: 0;
 		left: 0;
-		opacity: 0;
+		clip-path: inset(50%);
 		z-index: var(--_z-index);
 		border-radius: var(--semantics-controls-md-corner-radius);
 		box-shadow: var(--_box-shadow);
 		background-color: var(--semantics-surfaces-base-background-color);
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
 		pointer-events: none;
 		justify-content: center;
 	}
 
 	.skip-link:has(:focus-visible) {
-		opacity: 1;
+		clip-path: none;
+		width: auto;
+		max-width: 100%;
+		height: auto;
+		overflow: visible;
 		pointer-events: auto;
 	}
 
@@ -47133,9 +47153,8 @@ var skipLinkStyles = css`
 		padding: var(--primitives-space-4) var(--primitives-space-16);
 		align-items: center;
 		color: var(--semantics-links-color);
-		font: var(--primitives-font-body-md-medium-flat);
+		font: var(--primitives-font-body-md-medium-tight);
 		text-decoration: underline;
-		white-space: nowrap;
 		appearance: none;
 	}
 
@@ -50596,7 +50615,7 @@ var modalDialogStyles = css`
 	}
 
 	.modal-dialog[open] {
-		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
+		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) backwards;
 	}
 
 	.modal-dialog.is-closing {
@@ -52375,7 +52394,7 @@ var nlddBadgeTranslations = { "components.badge.notification-label": "Notificati
 * @element nldd-badge
 * @attr {string} size - Size: 'sm' | 'md' (default: 'md')
 * @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical'
-* @attr {string} custom-color - A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it.
+* @attr {string} custom-color - A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it.
 * @attr {boolean} pulse - Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`.
 * @attr {string} text - Text (takes precedence over number)
 * @attr {number} number - Numeric value. Shortened when it is over max
@@ -54656,7 +54675,7 @@ var statusBarStyles = css`
 		border-radius: var(--_corner-radius);
 		background-color: var(--_background-color);
 		width: 100%;
-		height: var(--_height);
+		min-height: var(--_height);
 		overflow: hidden;
 		padding-inline: var(--_inline-padding);
 		gap: var(--_gap);
@@ -54745,7 +54764,7 @@ function statusBarTemplate(component) {
 			<a class="status-bar"
 				href=${component.href}
 				target=${component.target || nothing}
-				rel=${component._resolvedRel() || nothing}
+				rel=${linkRel(component.rel, component.target) || nothing}
 			>${content}</a>
 		`;
 	if (component.button) return html`
@@ -54758,7 +54777,7 @@ function statusBarTemplate(component) {
 //#endregion
 //#region src/components/status-and-feedback/status-bar/status-bar.ts
 /**
-* NLDD Design System Status Bar Component (Lit + TypeScript)
+* Nederlandse Digitale Dienst Status Bar Component (Lit + TypeScript)
 *
 * A narrow, page-wide status bar (24px) with a deep background color per
 * variant. Use it for persistent system state: an outage, planned maintenance,
@@ -54794,7 +54813,7 @@ function statusBarTemplate(component) {
 * @attr {string} text - The status text (one line; truncated with an ellipsis)
 * @attr {string} href - Makes the whole bar a link (renders an <a>)
 * @attr {string} target - Link target (e.g. '_blank'); only used with href
-* @attr {string} rel - Link rel; defaults to 'noopener noreferrer' with target='_blank'
+* @attr {string} rel - Link rel, used with href; with target '_blank', 'noopener noreferrer' is added to whatever you set
 * @attr {boolean} button - Makes the whole bar a button; ignored when href is set
 */
 var _NLDDStatusBar;
@@ -54812,11 +54831,6 @@ var NLDDStatusBar = (_NLDDStatusBar = class NLDDStatusBar extends LitElement {
 		super.connectedCallback();
 		this._applyAriaForVariant(this.variant);
 	}
-	/** @internal Auto-secure rel for new-tab links unless the consumer set one. */
-	_resolvedRel() {
-		if (this.rel) return this.rel;
-		return this.target === "_blank" ? "noopener noreferrer" : "";
-	}
 	updated(changed) {
 		if (changed.has("variant")) this._applyAriaForVariant(this.variant);
 	}