@nldd/design-system 0.8.58 → 0.8.60

package/dist/components/{index-C2jQOZa6.js → index-CtsEx0-K.js}

@@ -1272,7 +1272,7 @@ var __decorateClass$1u = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1t(target, key, result);
   return result;
 };
-[
+const ICONS = [
   ...iconRegistry.keys(),
   ...Object.keys(aliases)
 ].sort();
@@ -1324,6 +1324,14 @@ __decorateClass$1u([
 NLDDIcon = __decorateClass$1u([
   customElement("nldd-icon")
 ], NLDDIcon);
+const icon = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ICONS,
+  get NLDDIcon() {
+    return NLDDIcon;
+  },
+  aliases
+}, Symbol.toStringTag, { value: "Module" }));
 const activityIndicatorStyles = css`
 
 
@@ -1341,6 +1349,7 @@ const activityIndicatorStyles = css`
 		--_max-width: var(--primitives-area-240);
 		--_gap: var(--primitives-space-4);
 		--_text-font: var(--primitives-font-body-sm-regular-flat);
+		--_backdrop-blur: 3px;
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -1358,6 +1367,12 @@ const activityIndicatorStyles = css`
 		display: none;
 	}
 
+	/* The opt-in backdrop is an absolutely-positioned layer that fills the host,
+	   so the host has to be its containing block. */
+	:host([backdrop]) {
+		position: relative;
+	}
+
 
 	/* ## Sizes (icon scale) */
 
@@ -1382,6 +1397,9 @@ const activityIndicatorStyles = css`
 	   circle and the label stay centred via align-items. */
 
 	.activity-indicator {
+		/* position:relative so it paints above the absolutely-positioned backdrop
+		   (both are z-index:auto; the backdrop comes first in the DOM). */
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		width: 100%;
@@ -1395,6 +1413,24 @@ const activityIndicatorStyles = css`
 		from { opacity: 0; }
 	}
 
+	/* Opt-in dimming layer (the backdrop attribute): the context parent
+	   background colour — fallback the base surface — at one minus the disabled
+	   opacity, so the content underneath reads as inactive while loading. Fades
+	   in with the indicator. */
+	.activity-indicator__backdrop {
+		position: absolute;
+		inset: 0;
+		/* Frosted dim: the parent surface — fallback base surface — as a
+		   translucent fill at one minus the disabled opacity (a translucent
+		   colour, not element opacity, which would hide the blur), plus a blur so
+		   the content behind reads as inactive. backdrop-filter degrades
+		   gracefully where unsupported, leaving just the translucent fill. */
+		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
+		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
+		backdrop-filter: blur(var(--_backdrop-blur));
+		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+	}
+
 	/* display:contents so the default circle + label (or a slotted override)
 	   are direct flex items of the block. */
 	slot {
@@ -1456,7 +1492,8 @@ const activityIndicatorStyles = css`
 	/* # Accessibility */
 
 	@media (prefers-reduced-motion: reduce) {
-		.activity-indicator {
+		.activity-indicator,
+		.activity-indicator__backdrop {
 			animation: none;
 		}
 
@@ -1476,6 +1513,7 @@ function activityIndicatorTemplate(component) {
   if (!component._visible || component.complete) return nothing;
   const text = component._accessibleName;
   return html`
+		${component.backdrop ? html`<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
 		<div class="activity-indicator">
 			<slot>
 				<svg class="activity-indicator__circle"
@@ -1526,6 +1564,7 @@ let NLDDActivityIndicator = class extends LitElement {
     this.text = "";
     this.timing = "default";
     this.complete = false;
+    this.backdrop = false;
     this.translations = {};
     this._visible = false;
   }
@@ -1602,6 +1641,9 @@ __decorateClass$1t([
 __decorateClass$1t([
   property({ type: Boolean, reflect: true })
 ], NLDDActivityIndicator.prototype, "complete", 2);
+__decorateClass$1t([
+  property({ type: Boolean, reflect: true })
+], NLDDActivityIndicator.prototype, "backdrop", 2);
 __decorateClass$1t([
   property({ type: Object })
 ], NLDDActivityIndicator.prototype, "translations", 2);
@@ -3005,7 +3047,9 @@ const menuStyles = css`
 
 	:host {
 		--_viewport-margin: var(--primitives-space-16);
-		--_width: var(--primitives-area-280);
+		--_width: initial;
+		--_min-width: var(--primitives-area-280);
+		--_max-width: min(100vw - 2 * var(--_viewport-margin), var(--primitives-area-640));
 		--_max-height: calc(infinity * 1px);
 		--_max-items: 9999;
 		--_padding: var(--primitives-space-8);
@@ -3049,7 +3093,9 @@ const menuStyles = css`
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--components-menu-box-shadow);
 		background: var(--semantics-surfaces-base-background-color);
-		width: var(--_width);
+		width: var(--_width, max-content);
+		min-width: var(--_min-width);
+		max-width: var(--_max-width);
 		padding: var(--_padding);
 		flex-direction: column;
 		max-height: min(var(--_max-height), calc(var(--_max-items) * var(--_item-size) + var(--_padding) * 2));
@@ -3215,6 +3261,16 @@ const menuItemStyles = css`
 		}
 	}
 
+	/* A link item (href) renders as <a>; strip the UA link color/underline so
+	   it is visually identical to the button variant. The text colour is owned
+	   by the inner nldd-text-cell. The control cursor token (default, like the
+	   other controls) replaces the UA link pointer and stays overridable. */
+	a.menu__item {
+		color: inherit;
+		text-decoration: none;
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
 	.menu__item:focus-visible {
 		position: relative;
 		z-index: 1;
@@ -3309,7 +3365,7 @@ const menuGroupStyles = css`
 
 	/* # Title */
 
-	.menu-group__title {
+	.menu__group-title {
 		margin: 0;
 		padding-top: 0;
 		padding-right: var(--primitives-space-8);
@@ -3326,10 +3382,19 @@ const menuGroupStyles = css`
 	 * a11y tree exposes role + aria-labelledby reliably (display: contents
 	 * has historical a11y-tree bugs in older WebKit/Chromium). */
 
-	.menu-group__items {
+	.menu__group-items {
 		display: block;
 	}
 `;
+function sanitizeUrl(url) {
+  if (!url) return null;
+  const trimmed = url.replace(/^[\s\u00A0\u200B\u2028\u2029]+|[\s\u00A0\u200B\u2028\u2029]+$/g, "").replace(/[\0\t\n\r]/g, "");
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
+    return null;
+  }
+  return trimmed;
+}
 const menuRoleMap = {
   menu: "menu",
   listbox: "listbox"
@@ -3358,7 +3423,7 @@ function menuTemplate(isEmpty, variant) {
 					@click=${this._handleBack}
 					@mouseenter=${this._handleBackMouseenter}
 				>
-					<nldd-icon-cell class="menu__back-icon"
+					<nldd-icon-cell
 						size="20"
 						icon="chevron-left"
 					></nldd-icon-cell>
@@ -3398,54 +3463,96 @@ function menuItemTemplate(variant = "menu") {
   const hasCheckState = this.type !== "button" && variant === "menu";
   const role = itemRoleMap[this.type][variant];
   const hasSubmenu = this._hasSubmenu;
-  return html`
-		<button class="menu__item"
-			type="button"
-			role=${role}
-			?disabled=${this.disabled}
-			aria-checked=${hasCheckState ? String(this.selected) : nothing}
-			aria-selected=${variant === "listbox" ? String(this.selected) : nothing}
-			aria-haspopup=${hasSubmenu ? "menu" : nothing}
-			aria-expanded=${hasSubmenu ? String(this._submenuOpen) : nothing}
-			aria-controls=${hasSubmenu && this._submenuEl?.id ? this._submenuEl.id : nothing}
-			.popoverTargetElement=${this._submenuEl}
-			@click=${this._handleClick}
-		>
-			${hasCheckState ? html`
-				<nldd-icon-cell class="menu__item-check"
-					size="24"
-					horizontal-alignment="center"
-					icon=${this.selected ? "check-mark" : nothing}
-				></nldd-icon-cell>
-				<nldd-spacer-cell size="4"></nldd-spacer-cell>
-			` : nothing}
-			${this.icon ? html`
-				<nldd-icon-cell class="menu__item-icon"
-					size="20"
-					icon=${this.icon}
-				></nldd-icon-cell>
-				<nldd-spacer-cell size="8"></nldd-spacer-cell>
-			` : nothing}
-			<nldd-text-cell class="menu__item-text"
-				text=${this.text} query=${this.query} query-mark-mode=${this.queryMarkMode}
+  const safeHref = sanitizeUrl(this.href) ?? "";
+  const asLink = !!safeHref && this.type === "button" && !hasSubmenu && !this.disabled;
+  const content = html`
+		${hasCheckState ? html`
+			<nldd-icon-cell
+				size="24"
+				horizontal-alignment="center"
+				icon=${this.selected ? "check-mark" : nothing}
+			></nldd-icon-cell>
+			<nldd-spacer-cell size="4"></nldd-spacer-cell>
+		` : nothing}
+		${this.icon ? html`
+			<nldd-icon-cell
+				size="20"
+				icon=${this.icon}
+			></nldd-icon-cell>
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+		` : nothing}
+		<nldd-text-cell
+			text=${this.text}
+			query=${this.query}
+			query-mark-mode=${this.queryMarkMode}
+		></nldd-text-cell>
+		${this.details ? html`
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+			<nldd-text-cell
+				width="fit-content"
+				horizontal-alignment="right"
+				color="secondary"
+				text=${this.details}
 			></nldd-text-cell>
-			${this.details ? html`
-				<nldd-spacer-cell size="8"></nldd-spacer-cell>
-				<nldd-text-cell class="menu__item-details"
-					width="fit-content"
-					horizontal-alignment="right"
-					color="secondary"
-					text=${this.details}
-				></nldd-text-cell>
-			` : nothing}
-			${hasSubmenu ? html`
-				<nldd-spacer-cell size="6"></nldd-spacer-cell>
-				<nldd-icon-cell class="menu__item-submenu-indicator"
-					size="20"
-					icon="chevron-right"
-				></nldd-icon-cell>
-			` : nothing}
-		</button>
+		` : nothing}
+		<!--
+			Accessibility (intentional decision): the shortcut is deliberately NOT
+			aria-hidden. It is announced as part of the item's accessible name —
+			e.g. "Ongedaan maken Ctrl Z" — so screen-reader users learn the
+			accelerator, the way native OS menus surface it. aria-keyshortcuts was
+			considered and rejected: the menu item itself does not handle the key
+			(the application's global shortcut does), so the plain announcement is
+			the deliberate choice rather than a missing aria-hidden.
+		-->
+		${this.shortcut || this.shortcutMac || this.shortcutWindows || this.shortcutLinux ? html`
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+			<nldd-text-cell
+				width="fit-content"
+				size="md"
+				color="secondary"
+				horizontal-alignment="right"
+			>
+				<nldd-keyboard-shortcut
+					size="inherit"
+					variant="simple"
+					color="inherit"
+					keys=${this.shortcut || nothing}
+					mac-keys=${this.shortcutMac || nothing}
+					windows-keys=${this.shortcutWindows || nothing}
+					linux-keys=${this.shortcutLinux || nothing}
+				></nldd-keyboard-shortcut>
+			</nldd-text-cell>
+		` : nothing}
+		${hasSubmenu ? html`
+			<nldd-spacer-cell size="6"></nldd-spacer-cell>
+			<nldd-icon-cell
+				size="20"
+				icon="chevron-right"
+			></nldd-icon-cell>
+		` : nothing}
+	`;
+  return html`
+		${asLink ? html`
+			<a class="menu__item"
+				href=${safeHref}
+				role=${role}
+				aria-current=${this.selected ? "page" : nothing}
+				@click=${this._handleClick}
+			>${content}</a>
+		` : html`
+			<button class="menu__item"
+				type="button"
+				role=${role}
+				?disabled=${this.disabled}
+				aria-checked=${hasCheckState ? String(this.selected) : nothing}
+				aria-selected=${variant === "listbox" ? String(this.selected) : nothing}
+				aria-haspopup=${hasSubmenu ? "menu" : nothing}
+				aria-expanded=${hasSubmenu ? String(this._submenuOpen) : nothing}
+				aria-controls=${hasSubmenu && this._submenuEl?.id ? this._submenuEl.id : nothing}
+				.popoverTargetElement=${this._submenuEl}
+				@click=${this._handleClick}
+			>${content}</button>
+		`}
 		<!--
 			Project the slotted nldd-menu (the submenu, if any) into the flat
 			tree. Without this slot, a light-DOM child nldd-menu sits outside
@@ -3466,11 +3573,11 @@ function menuDividerTemplate() {
 }
 function menuGroupTemplate(component) {
   return html`
-		<div class="menu-group__title"
+		<div class="menu__group-title"
 			id=${component._titleId}
 			aria-hidden="true"
 		>${component.text}</div>
-		<div class="menu-group__items"
+		<div class="menu__group-items"
 			role="group"
 			aria-labelledby=${component._titleId}
 		>
@@ -3480,7 +3587,7 @@ function menuGroupTemplate(component) {
 }
 const nlddMenuTranslations = {
   "components.menu.empty-text": "Geen opties beschikbaar",
-  "components.menu.back": "Terug",
+  "components.menu.back-action": "Terug",
   "components.menu.submenu-title": "Submenu: {title}",
   "components.menu.submenu-back-action": "Terug naar {title}"
 };
@@ -3683,6 +3790,12 @@ __decorateClass$1o([
 NLDDIconCell = __decorateClass$1o([
   customElement("nldd-icon-cell")
 ], NLDDIconCell);
+const iconCell = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  get NLDDIconCell() {
+    return NLDDIconCell;
+  }
+}, Symbol.toStringTag, { value: "Module" }));
 const spacerCellStyles = css`
 
 
@@ -4119,189 +4232,435 @@ const textCell = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
     return NLDDTextCell;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const inlineDialogStyles = css`
+const keyboardShortcutStyles = css`
 
 
 	/* # Host */
 
 	:host {
-		--_icon-size: var(--primitives-space-40);
-		--_icon-color: var(--components-inline-dialog-icon-color);
-		--_text-font: var(--primitives-font-body-md-bold-tight);
-		--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
+		--_size: var(--components-keyboard-shortcut-md-size);
+		--_inline-padding: var(--primitives-space-4);
+		--_font-family: var(--primitives-font-family-monospace);
+		--_font-size: var(--primitives-font-size-80);
+		--_font-weight: var(--primitives-font-weight-body-regular);
+		--_line-height: var(--primitives-line-height-flat);
+		--_content-color: var(--components-keyboard-shortcut-content-color);
+		--_separator-color: var(--components-keyboard-shortcut-separator-color);
+		--_highlight-border-color: var(--components-keyboard-shortcut-border-color);
+		--_background-color: var(--components-keyboard-shortcut-background-color);
 
 		${inheritedTextReset}
-		display: flex;
-		flex-grow: 1;
-		align-items: center;
-		justify-content: center;
-	}
-
-	:host([size="lg"]) {
-		--_icon-size: var(--primitives-space-48);
-		--_text-font: var(--primitives-font-body-lg-bold-tight);
-		--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
-	}
-
-	:host([variant="alert"]) {
-		--_icon-color: var(--components-inline-dialog-icon-warning-color);
+		display: inline-flex;
+		vertical-align: middle;
 	}
 
-	:host([variant="success"]) {
-		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	:host([color="inherit"]) {
+		--_content-color: currentColor;
+		--_separator-color: currentColor;
+		--_highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
+		--_background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 20%, transparent);
 	}
 
-	:host([icon-color="secondary"]) {
-		--_icon-color: var(--components-inline-dialog-icon-secondary-color);
+	:host([size="sm"]) {
+		--_size: var(--components-keyboard-shortcut-sm-size);
+		--_font-size: var(--primitives-font-size-70);
 	}
 
-	:host([icon-color="accent"]) {
-		--_icon-color: var(--components-inline-dialog-icon-accent-color);
+	:host([size="inherit"]) {
+		--_size: 1.5em;
+		--_inline-padding: 0.35em;
+		--_font-size: 0.75em;
 	}
 
-	:host([icon-color="critical"]) {
-		--_icon-color: var(--components-inline-dialog-icon-critical-color);
+	:host([variant="simple"]) {
+		--_font-family: var(--primitives-font-family-body);
+		--_font-size: var(--primitives-font-size-100);
 	}
 
-	:host([icon-color="warning"]) {
-		--_icon-color: var(--components-inline-dialog-icon-warning-color);
+	:host([variant="simple"][size="sm"]) {
+		--_font-size: var(--primitives-font-size-90);
 	}
 
-	:host([icon-color="success"]) {
-		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	:host([variant="simple"][size="inherit"]) {
+		--_font-size: inherit;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
+	@media (any-hover: none) {
+		:host(:not([always-visible])) {
+			display: none;
+		}
+	}
 
-	/* # Elements */
 
-	.inline-dialog__body {
-		box-sizing: border-box;
-		display: flex;
-		max-width: var(--primitives-area-480);
-		flex-direction: column;
-		flex-grow: 1;
+	/* # Block */
+
+	.keyboard-shortcut {
+		display: inline-flex;
+		gap: var(--primitives-space-2);
 		align-items: center;
 	}
 
-	.inline-dialog__main {
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-		align-items: center;
-		gap: var(--primitives-space-2);
+	:host([size="inherit"][variant="box"]) .keyboard-shortcut {
+		position: relative;
+		top: -0.05em;
 	}
 
-	.inline-dialog__icon {
-		display: flex;
-		width: var(--_icon-size);
-		height: var(--_icon-size);
-		flex-shrink: 0;
+
+	/* # Elements */
+
+	.keyboard-shortcut__key {
+		box-sizing: border-box;
+		display: inline-flex;
+		box-shadow: inset 0 0 0 var(--components-keyboard-shortcut-border-thickness) var(--_highlight-border-color);
+		border-radius: var(--components-keyboard-shortcut-corner-radius);
+		background-color: var(--_background-color);
+		min-width: var(--_size);
+		height: var(--_size);
+		padding: 0 var(--_inline-padding);
 		align-items: center;
 		justify-content: center;
-		color: var(--_icon-color);
+		color: var(--_content-color);
+		font-family: var(--_font-family);
+		font-size: var(--_font-size);
+		font-weight: var(--_font-weight);
+		line-height: var(--_line-height);
+		white-space: nowrap;
 	}
 
-	.inline-dialog__text {
-		margin: 0;
-		text-align: center;
-		color: var(--semantics-content-color);
-		font: var(--_text-font);
-		text-wrap: pretty;
+	:host([variant="simple"]) .keyboard-shortcut {
+		gap: 0;
 	}
 
-	.inline-dialog__text:focus-visible {
-		outline: none;
+	:host([variant="simple"]) .keyboard-shortcut__key {
 		box-shadow: none;
+		background-color: transparent;
+		border-radius: 0;
+		min-width: 0;
+		height: auto;
+		padding: 0;
 	}
 
-	.inline-dialog__supporting-text {
-		margin: 0;
-		text-align: center;
-		color: var(--semantics-content-color);
-		font: var(--_supporting-text-font);
-		text-wrap: pretty;
-	}
-
-	.inline-dialog__content {
-		width: 100%;
-	}
-
-	.inline-dialog__content[hidden] {
-		display: none;
-	}
+	@media (forced-colors: active) {
+		.keyboard-shortcut__key {
+			color: CanvasText;
+		}
 
-	.inline-dialog__footer {
-		width: 100%;
-		padding-top: var(--primitives-space-16);
+		:host(:not([variant="simple"])) .keyboard-shortcut__key {
+			border: var(--components-keyboard-shortcut-border-thickness) solid CanvasText;
+			background-color: Canvas;
+		}
 	}
 
-	.inline-dialog__footer[hidden] {
-		display: none;
+	.keyboard-shortcut__separator {
+		color: var(--_separator-color);
+		font-family: var(--_font-family);
+		font-size: var(--_font-size);
+		font-weight: var(--_font-weight);
+		line-height: var(--_line-height);
 	}
 `;
-function inlineDialogTemplate(component) {
+function template$h(component) {
+  const keys = component._parsedKeys;
+  if (keys.length === 0) {
+    return html`
+			<kbd class="keyboard-shortcut">
+				<slot></slot>
+			</kbd>
+		`;
+  }
   return html`
-		<div class="inline-dialog__body">
-			<div class="inline-dialog__main">
-				${component._resolvedIconName ? html`
-					<div class="inline-dialog__icon">
-						<nldd-icon name=${component._resolvedIconName}></nldd-icon>
-					</div>
-				` : nothing}
-				${component.text ? html`
-					${component.headingLevel === 1 ? html`<h1 class="inline-dialog__text">${component.text}</h1>` : component.headingLevel === 2 ? html`<h2 class="inline-dialog__text">${component.text}</h2>` : component.headingLevel === 3 ? html`<h3 class="inline-dialog__text">${component.text}</h3>` : component.headingLevel === 4 ? html`<h4 class="inline-dialog__text">${component.text}</h4>` : component.headingLevel === 5 ? html`<h5 class="inline-dialog__text">${component.text}</h5>` : component.headingLevel === 6 ? html`<h6 class="inline-dialog__text">${component.text}</h6>` : html`<p class="inline-dialog__text">${component.text}</p>`}
-				` : nothing}
-				${component.supportingText ? html`
-					<p class="inline-dialog__supporting-text">${component.supportingText}</p>
-				` : nothing}
-				<div class="inline-dialog__content"
-					?hidden=${!component._hasContent}
-				>
-					<slot></slot>
-				</div>
-			</div>
-			<div class="inline-dialog__footer"
-				?hidden=${!component._hasActions}
-			>
-				<nldd-button-group orientation="vertical">
-					<slot name="actions"></slot>
-				</nldd-button-group>
-			</div>
-		</div>
+		<kbd class="keyboard-shortcut">
+			${keys.map((key, index) => html`
+				${index > 0 ? html`<span class="keyboard-shortcut__separator"
+					aria-hidden="true"
+				>+</span>` : ""}
+				<kbd class="keyboard-shortcut__key">${key}</kbd>
+			`)}
+		</kbd>
 	`;
 }
-const buttonGroupStyles = css`
-
-
-	/* # Host */
-
-	:host {
-		--_width: 100%;
-		--_flex-direction: column;
-		--_flex-wrap: nowrap;
-		--_gap: var(--components-button-group-md-gap);
-
-		display: flex;
-		width: 100%;
-		justify-content: flex-start;
-	}
-
-	:host([size="sm"]) {
-		--_gap: var(--components-button-group-sm-gap);
-	}
-
-	/* ## Horizontal
-	   The row keeps the full width (like vertical) so full-width children
-	   can actually stretch; content-sized buttons still sit left within
-	   the row. */
-
-	:host([orientation="horizontal"]) {
-		--_flex-direction: row;
-		--_flex-wrap: wrap;
+let cached = null;
+function classify(platform) {
+  const p = platform.toLowerCase();
+  if (/mac|iphone|ipad|ipod|ios/.test(p)) return "mac";
+  if (/win/.test(p)) return "windows";
+  if (/android/.test(p)) return "other";
+  if (/linux|cros/.test(p)) return "linux";
+  return "other";
+}
+function detectOS() {
+  if (cached !== null) return cached;
+  if (typeof navigator === "undefined") {
+    cached = "other";
+    return cached;
+  }
+  const nav = navigator;
+  const platform = nav.userAgentData?.platform || nav.platform || "";
+  cached = classify(platform);
+  return cached;
+}
+var __defProp$1k = Object.defineProperty;
+var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
+var __decorateClass$1l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1i(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1k(target, key, result);
+  return result;
+};
+let NLDDKeyboardShortcut = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.keys = "";
+    this.macKeys = "";
+    this.windowsKeys = "";
+    this.linuxKeys = "";
+    this.size = "md";
+    this.variant = "box";
+    this.color = "neutral";
+    this.alwaysVisible = false;
+    this.debugOS = "";
+  }
+  /** @internal Resolved OS — the debug override when set, else detection. */
+  get _resolvedOS() {
+    return this.debugOS || detectOS();
+  }
+  get _resolvedKeys() {
+    const os = this._resolvedOS;
+    if (os === "mac" && this.macKeys) return this.macKeys;
+    if (os === "windows" && this.windowsKeys) return this.windowsKeys;
+    if (os === "linux" && this.linuxKeys) return this.linuxKeys;
+    return this.keys;
+  }
+  get _parsedKeys() {
+    const spec = this._resolvedKeys;
+    if (!spec) return [];
+    const MARKER = "\0";
+    return spec.replace(/\+\+\+/g, `+${MARKER}+`).split("+").map((k) => k.trim().replace(new RegExp(MARKER, "g"), "+")).filter(Boolean);
+  }
+  render() {
+    return template$h(this);
+  }
+};
+NLDDKeyboardShortcut.styles = keyboardShortcutStyles;
+__decorateClass$1l([
+  property({ type: String })
+], NLDDKeyboardShortcut.prototype, "keys", 2);
+__decorateClass$1l([
+  property({ type: String, attribute: "mac-keys" })
+], NLDDKeyboardShortcut.prototype, "macKeys", 2);
+__decorateClass$1l([
+  property({ type: String, attribute: "windows-keys" })
+], NLDDKeyboardShortcut.prototype, "windowsKeys", 2);
+__decorateClass$1l([
+  property({ type: String, attribute: "linux-keys" })
+], NLDDKeyboardShortcut.prototype, "linuxKeys", 2);
+__decorateClass$1l([
+  property({ type: String, reflect: true })
+], NLDDKeyboardShortcut.prototype, "size", 2);
+__decorateClass$1l([
+  property({ type: String, reflect: true })
+], NLDDKeyboardShortcut.prototype, "variant", 2);
+__decorateClass$1l([
+  property({ type: String, reflect: true })
+], NLDDKeyboardShortcut.prototype, "color", 2);
+__decorateClass$1l([
+  property({ type: Boolean, reflect: true, attribute: "always-visible" })
+], NLDDKeyboardShortcut.prototype, "alwaysVisible", 2);
+__decorateClass$1l([
+  property({ type: String, attribute: "debug-os" })
+], NLDDKeyboardShortcut.prototype, "debugOS", 2);
+NLDDKeyboardShortcut = __decorateClass$1l([
+  customElement("nldd-keyboard-shortcut")
+], NLDDKeyboardShortcut);
+const inlineDialogStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_icon-size: var(--primitives-space-40);
+		--_icon-color: var(--components-inline-dialog-icon-color);
+		--_text-font: var(--primitives-font-body-md-bold-tight);
+		--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
+
+		${inheritedTextReset}
+		display: flex;
+		flex-grow: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([size="lg"]) {
+		--_icon-size: var(--primitives-space-48);
+		--_text-font: var(--primitives-font-body-lg-bold-tight);
+		--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
+	}
+
+	:host([variant="alert"]) {
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
+	}
+
+	:host([variant="success"]) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	}
+
+	:host([icon-color="secondary"]) {
+		--_icon-color: var(--components-inline-dialog-icon-secondary-color);
+	}
+
+	:host([icon-color="accent"]) {
+		--_icon-color: var(--components-inline-dialog-icon-accent-color);
+	}
+
+	:host([icon-color="critical"]) {
+		--_icon-color: var(--components-inline-dialog-icon-critical-color);
+	}
+
+	:host([icon-color="warning"]) {
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
+	}
+
+	:host([icon-color="success"]) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Elements */
+
+	.inline-dialog__body {
+		box-sizing: border-box;
+		display: flex;
+		max-width: var(--primitives-area-480);
+		flex-direction: column;
+		flex-grow: 1;
+		align-items: center;
+	}
+
+	.inline-dialog__main {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--primitives-space-2);
+	}
+
+	.inline-dialog__icon {
+		display: flex;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		color: var(--_icon-color);
+	}
+
+	.inline-dialog__text {
+		margin: 0;
+		text-align: center;
+		color: var(--semantics-content-color);
+		font: var(--_text-font);
+		text-wrap: pretty;
+	}
+
+	.inline-dialog__text:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.inline-dialog__supporting-text {
+		margin: 0;
+		text-align: center;
+		color: var(--semantics-content-color);
+		font: var(--_supporting-text-font);
+		text-wrap: pretty;
+	}
+
+	.inline-dialog__content {
+		width: 100%;
+	}
+
+	.inline-dialog__content[hidden] {
+		display: none;
+	}
+
+	.inline-dialog__footer {
+		width: 100%;
+		padding-top: var(--primitives-space-16);
+	}
+
+	.inline-dialog__footer[hidden] {
+		display: none;
+	}
+`;
+function inlineDialogTemplate(component) {
+  return html`
+		<div class="inline-dialog__body">
+			<div class="inline-dialog__main">
+				${component._resolvedIconName ? html`
+					<div class="inline-dialog__icon">
+						<nldd-icon name=${component._resolvedIconName}></nldd-icon>
+					</div>
+				` : nothing}
+				${component.text ? html`
+					${component.headingLevel === 1 ? html`<h1 class="inline-dialog__text">${component.text}</h1>` : component.headingLevel === 2 ? html`<h2 class="inline-dialog__text">${component.text}</h2>` : component.headingLevel === 3 ? html`<h3 class="inline-dialog__text">${component.text}</h3>` : component.headingLevel === 4 ? html`<h4 class="inline-dialog__text">${component.text}</h4>` : component.headingLevel === 5 ? html`<h5 class="inline-dialog__text">${component.text}</h5>` : component.headingLevel === 6 ? html`<h6 class="inline-dialog__text">${component.text}</h6>` : html`<p class="inline-dialog__text">${component.text}</p>`}
+				` : nothing}
+				${component.supportingText ? html`
+					<p class="inline-dialog__supporting-text">${component.supportingText}</p>
+				` : nothing}
+				<div class="inline-dialog__content"
+					?hidden=${!component._hasContent}
+				>
+					<slot></slot>
+				</div>
+			</div>
+			<div class="inline-dialog__footer"
+				?hidden=${!component._hasActions}
+			>
+				<nldd-button-group orientation="vertical">
+					<slot name="actions"></slot>
+				</nldd-button-group>
+			</div>
+		</div>
+	`;
+}
+const buttonGroupStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_width: 100%;
+		--_flex-direction: column;
+		--_flex-wrap: nowrap;
+		--_gap: var(--components-button-group-md-gap);
+
+		display: flex;
+		width: 100%;
+		justify-content: flex-start;
+	}
+
+	:host([size="sm"]) {
+		--_gap: var(--components-button-group-sm-gap);
+	}
+
+	/* ## Horizontal
+	   The row keeps the full width (like vertical) so full-width children
+	   can actually stretch; content-sized buttons still sit left within
+	   the row. */
+
+	:host([orientation="horizontal"]) {
+		--_flex-direction: row;
+		--_flex-wrap: wrap;
 	}
 
 	:host([hidden]) {
@@ -4323,21 +4682,21 @@ const buttonGroupStyles = css`
 		gap: var(--_gap);
 	}
 `;
-function template$h() {
+function template$g() {
   return html`
 	<div class="button-group">
 		<slot @slotchange=${this.handleSlotChange}></slot>
 	</div>
 	`;
 }
-var __defProp$1k = Object.defineProperty;
-var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
-var __decorateClass$1l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1i(target, key) : target;
+var __defProp$1j = Object.defineProperty;
+var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
+var __decorateClass$1k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1k(target, key, result);
+  if (kind && result) __defProp$1j(target, key, result);
   return result;
 };
 let NLDDButtonGroup = class extends LitElement {
@@ -4366,30 +4725,30 @@ let NLDDButtonGroup = class extends LitElement {
     }
   }
   render() {
-    return template$h.call(this);
+    return template$g.call(this);
   }
 };
 NLDDButtonGroup.styles = buttonGroupStyles;
-__decorateClass$1l([
+__decorateClass$1k([
   property({ type: String, reflect: true })
 ], NLDDButtonGroup.prototype, "size", 2);
-__decorateClass$1l([
+__decorateClass$1k([
   property({ type: String, reflect: true })
 ], NLDDButtonGroup.prototype, "orientation", 2);
-__decorateClass$1l([
+__decorateClass$1k([
   query("slot")
 ], NLDDButtonGroup.prototype, "_slot", 2);
-NLDDButtonGroup = __decorateClass$1l([
+NLDDButtonGroup = __decorateClass$1k([
   customElement("nldd-button-group")
 ], NLDDButtonGroup);
-var __defProp$1j = Object.defineProperty;
-var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
-var __decorateClass$1k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1h(target, key) : target;
+var __defProp$1i = Object.defineProperty;
+var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
+var __decorateClass$1j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1j(target, key, result);
+  if (kind && result) __defProp$1i(target, key, result);
   return result;
 };
 let NLDDInlineDialog = class extends LitElement {
@@ -4436,43 +4795,43 @@ let NLDDInlineDialog = class extends LitElement {
   }
 };
 NLDDInlineDialog.styles = inlineDialogStyles;
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "variant", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "size", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "icon", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true, attribute: "icon-color" })
 ], NLDDInlineDialog.prototype, "iconColor", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true })
 ], NLDDInlineDialog.prototype, "text", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: String, reflect: true, attribute: "supporting-text" })
 ], NLDDInlineDialog.prototype, "supportingText", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   property({ type: Number, reflect: true, attribute: "heading-level" })
 ], NLDDInlineDialog.prototype, "headingLevel", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   state()
 ], NLDDInlineDialog.prototype, "_hasContent", 2);
-__decorateClass$1k([
+__decorateClass$1j([
   state()
 ], NLDDInlineDialog.prototype, "_hasActions", 2);
-NLDDInlineDialog = __decorateClass$1k([
+NLDDInlineDialog = __decorateClass$1j([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
-var __defProp$1i = Object.defineProperty;
-var __decorateClass$1j = (decorators, target, key, kind) => {
+var __defProp$1h = Object.defineProperty;
+var __decorateClass$1i = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$1i(target, key, result);
+  if (result) __defProp$1h(target, key, result);
   return result;
 };
 const _NLDDMenuDivider = class _NLDDMenuDivider extends LitElement {
@@ -4495,7 +4854,7 @@ const _NLDDMenuGroup = (_a = class extends LitElement {
     return menuGroupTemplate(this);
   }
 }, _a.styles = menuGroupStyles, _a._idCounter = 0, _a);
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuGroup.prototype, "text");
 let NLDDMenuGroup = _NLDDMenuGroup;
@@ -4507,8 +4866,13 @@ const _NLDDMenuItem = (_b = class extends LitElement {
     super(...arguments);
     this.text = "";
     this.value = "";
+    this.href = "";
     this.aliases = "";
     this.details = "";
+    this.shortcut = "";
+    this.shortcutMac = "";
+    this.shortcutWindows = "";
+    this.shortcutLinux = "";
     this.icon = "";
     this.type = "button";
     this.selected = false;
@@ -4597,43 +4961,58 @@ const _NLDDMenuItem = (_b = class extends LitElement {
     return menuItemTemplate.call(this, this.menuVariant);
   }
 }, _b.styles = menuItemStyles, _b._idCounter = 0, _b);
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "text");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "value");
-__decorateClass$1j([
+__decorateClass$1i([
+  property({ type: String, reflect: true })
+], _NLDDMenuItem.prototype, "href");
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "aliases");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "details");
-__decorateClass$1j([
+__decorateClass$1i([
+  property({ type: String, reflect: true })
+], _NLDDMenuItem.prototype, "shortcut");
+__decorateClass$1i([
+  property({ type: String, reflect: true, attribute: "shortcut-mac" })
+], _NLDDMenuItem.prototype, "shortcutMac");
+__decorateClass$1i([
+  property({ type: String, reflect: true, attribute: "shortcut-windows" })
+], _NLDDMenuItem.prototype, "shortcutWindows");
+__decorateClass$1i([
+  property({ type: String, reflect: true, attribute: "shortcut-linux" })
+], _NLDDMenuItem.prototype, "shortcutLinux");
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "icon");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "type");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Boolean, reflect: true })
 ], _NLDDMenuItem.prototype, "selected");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Boolean, reflect: true })
 ], _NLDDMenuItem.prototype, "destructive");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Boolean, reflect: true })
 ], _NLDDMenuItem.prototype, "disabled");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenuItem.prototype, "query");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true, attribute: "query-mark-mode" })
 ], _NLDDMenuItem.prototype, "queryMarkMode");
-__decorateClass$1j([
+__decorateClass$1i([
   state()
 ], _NLDDMenuItem.prototype, "menuVariant");
-__decorateClass$1j([
+__decorateClass$1i([
   state()
 ], _NLDDMenuItem.prototype, "_submenuOpen");
 let NLDDMenuItem = _NLDDMenuItem;
@@ -4771,7 +5150,7 @@ const _NLDDMenu = (_c = class extends LitElement {
           if (!skipReshow && this.isConnected) {
             const dest = this._parentItem?.text;
             this._announce(
-              dest ? this._t("components.menu.submenu-back-action", { title: dest }) : this._t("components.menu.back")
+              dest ? this._t("components.menu.submenu-back-action", { title: dest }) : this._t("components.menu.back-action")
             );
           }
         }
@@ -5062,7 +5441,7 @@ const _NLDDMenu = (_c = class extends LitElement {
    * Bestand" instead of an ambiguous "Bestand, button". Only used when
    * this menu is itself a submenu in drill-in mode. */
   get _resolvedBackLabel() {
-    const back = this._t("components.menu.back");
+    const back = this._t("components.menu.back-action");
     const parent = this._parentItem?.text ?? "";
     return parent ? `${back}: ${parent}` : back;
   }
@@ -5099,8 +5478,12 @@ const _NLDDMenu = (_c = class extends LitElement {
     if (changedProperties.has("width")) {
       if (this.width) {
         this.style.setProperty("--_width", this.width);
+        this.style.setProperty("--_min-width", this.width);
+        this.style.setProperty("--_max-width", this.width);
       } else {
         this.style.removeProperty("--_width");
+        this.style.removeProperty("--_min-width");
+        this.style.removeProperty("--_max-width");
       }
     }
     if (changedProperties.has("maxItems")) {
@@ -5730,57 +6113,57 @@ const _NLDDMenu = (_c = class extends LitElement {
     return menuTemplate.call(this, this._isEmpty, this.variant);
   }
 }, _c.styles = menuStyles, _c._SAFE_TRIANGLE_STALL_DISMISS_MS = 500, _c._SAFE_TRIANGLE_APEX_X_OFFSET = 4, _c._drillInModeQuery = null, _c._TOUCH_SCROLL_THRESHOLD_PX = 8, _c._menuIdCounter = 0, _c._TYPEAHEAD_RESET_MS = 500, _c);
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenu.prototype, "anchor");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ attribute: false })
 ], _NLDDMenu.prototype, "anchorElement");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenu.prototype, "placement");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenu.prototype, "variant");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, attribute: "empty-text" })
 ], _NLDDMenu.prototype, "emptyText");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, attribute: "empty-supporting-text" })
 ], _NLDDMenu.prototype, "emptySupportingText");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: String, reflect: true })
 ], _NLDDMenu.prototype, "width");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Number, attribute: "max-items" })
 ], _NLDDMenu.prototype, "maxItems");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Object })
 ], _NLDDMenu.prototype, "translations");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ type: Boolean, reflect: true, attribute: "debug-safe-triangle" })
 ], _NLDDMenu.prototype, "debugSafeTriangle");
-__decorateClass$1j([
+__decorateClass$1i([
   property({ attribute: false })
 ], _NLDDMenu.prototype, "filterFn");
-__decorateClass$1j([
+__decorateClass$1i([
   state()
 ], _NLDDMenu.prototype, "_isEmpty");
-__decorateClass$1j([
+__decorateClass$1i([
   state()
 ], _NLDDMenu.prototype, "_parentItem");
 let NLDDMenu = _NLDDMenu;
 if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
-var __defProp$1h = Object.defineProperty;
-var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
-var __decorateClass$1i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1g(target, key) : target;
+var __defProp$1g = Object.defineProperty;
+var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
+var __decorateClass$1h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1h(target, key, result);
+  if (kind && result) __defProp$1g(target, key, result);
   return result;
 };
 let NLDDSplitButton = class extends LitElement {
@@ -5872,34 +6255,34 @@ let NLDDSplitButton = class extends LitElement {
   }
 };
 NLDDSplitButton.styles = splitButtonStyles;
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: String, reflect: true })
 ], NLDDSplitButton.prototype, "size", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: String, reflect: true })
 ], NLDDSplitButton.prototype, "variant", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: Boolean, reflect: true })
 ], NLDDSplitButton.prototype, "disabled", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: String, reflect: true })
 ], NLDDSplitButton.prototype, "width", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: String })
 ], NLDDSplitButton.prototype, "text", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: String })
 ], NLDDSplitButton.prototype, "icon", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   property({ type: Object })
 ], NLDDSplitButton.prototype, "translations", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   query(".split-button__popup-button")
 ], NLDDSplitButton.prototype, "_popupButtonWrapper", 2);
-__decorateClass$1i([
+__decorateClass$1h([
   state()
 ], NLDDSplitButton.prototype, "_menuIsOpen", 2);
-NLDDSplitButton = __decorateClass$1i([
+NLDDSplitButton = __decorateClass$1h([
   customElement("nldd-split-button")
 ], NLDDSplitButton);
 const buttonBarStyles = css`
@@ -6011,7 +6394,7 @@ const buttonBarStyles = css`
 		z-index: 1;
 	}
 `;
-function template$g() {
+function template$f() {
   return html`
 		<div class="button-bar"
 			part="bar"
@@ -6031,14 +6414,14 @@ function renderChild(child) {
   }
   return html`<slot name="child-${child.id}"></slot>`;
 }
-var __defProp$1g = Object.defineProperty;
-var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
-var __decorateClass$1h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1f(target, key) : target;
+var __defProp$1f = Object.defineProperty;
+var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
+var __decorateClass$1g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1g(target, key, result);
+  if (kind && result) __defProp$1f(target, key, result);
   return result;
 };
 if (!customElements.get("nldd-button-bar-divider")) {
@@ -6148,23 +6531,23 @@ let NLDDButtonBar = class extends LitElement {
     this._building = false;
   }
   render() {
-    return template$g.call(this);
+    return template$f.call(this);
   }
 };
 NLDDButtonBar.styles = buttonBarStyles;
-__decorateClass$1h([
+__decorateClass$1g([
   property({ type: String, reflect: true })
 ], NLDDButtonBar.prototype, "size", 2);
-__decorateClass$1h([
+__decorateClass$1g([
   property({ type: String, reflect: true })
 ], NLDDButtonBar.prototype, "variant", 2);
-__decorateClass$1h([
+__decorateClass$1g([
   property({ type: Boolean, reflect: true })
 ], NLDDButtonBar.prototype, "disabled", 2);
-__decorateClass$1h([
+__decorateClass$1g([
   state()
 ], NLDDButtonBar.prototype, "_children", 2);
-NLDDButtonBar = __decorateClass$1h([
+NLDDButtonBar = __decorateClass$1g([
   customElement("nldd-button-bar")
 ], NLDDButtonBar);
 const toolbarStyles = css`
@@ -6481,7 +6864,7 @@ function toolbarTitleTemplate(component) {
 		${component.supportingText ? html`<p class="toolbar__subtitle">${component.supportingText}</p>` : nothing}
 	`;
 }
-function template$f(component, hasCenterChildren, leftSpacerZero, rightSpacerZero, isSoloFluidItem, hasOverflow, menuOpen, label, centerOnly, t) {
+function template$e(component, hasCenterChildren, leftSpacerZero, rightSpacerZero, isSoloFluidItem, hasOverflow, menuOpen, label, centerOnly, t) {
   return html`
 		<div class="toolbar"
 			role="toolbar"
@@ -6520,14 +6903,14 @@ function template$f(component, hasCenterChildren, leftSpacerZero, rightSpacerZer
 const nlddToolbarTranslations = {
   "components.toolbar.overflow-action": "Meer"
 };
-var __defProp$1f = Object.defineProperty;
-var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
-var __decorateClass$1g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1e(target, key) : target;
+var __defProp$1e = Object.defineProperty;
+var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
+var __decorateClass$1f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1f(target, key, result);
+  if (kind && result) __defProp$1e(target, key, result);
   return result;
 };
 let NLDDToolbarItem = class extends LitElement {
@@ -6551,28 +6934,28 @@ let NLDDToolbarItem = class extends LitElement {
   }
 };
 NLDDToolbarItem.styles = toolbarItemStyles;
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDToolbarItem.prototype, "width", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, attribute: "min-width" })
 ], NLDDToolbarItem.prototype, "minWidth", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, attribute: "max-width" })
 ], NLDDToolbarItem.prototype, "maxWidth", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDToolbarItem.prototype, "label", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: Number })
 ], NLDDToolbarItem.prototype, "priority", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbarItem.prototype, "size", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: Boolean, reflect: true, attribute: "show-item-labels" })
 ], NLDDToolbarItem.prototype, "showItemLabels", 2);
-NLDDToolbarItem = __decorateClass$1g([
+NLDDToolbarItem = __decorateClass$1f([
   customElement("nldd-toolbar-item")
 ], NLDDToolbarItem);
 let NLDDToolbarTitle = class extends LitElement {
@@ -6608,28 +6991,28 @@ let NLDDToolbarTitle = class extends LitElement {
   }
 };
 NLDDToolbarTitle.styles = toolbarTitleStyles;
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDToolbarTitle.prototype, "text", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDToolbarTitle.prototype, "supportingText", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbarTitle.prototype, "align", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String })
 ], NLDDToolbarTitle.prototype, "width", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, attribute: "min-width" })
 ], NLDDToolbarTitle.prototype, "minWidth", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, attribute: "max-width" })
 ], NLDDToolbarTitle.prototype, "maxWidth", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbarTitle.prototype, "size", 2);
-NLDDToolbarTitle = __decorateClass$1g([
+NLDDToolbarTitle = __decorateClass$1f([
   customElement("nldd-toolbar-title")
 ], NLDDToolbarTitle);
 let NLDDToolbar = class extends LitElement {
@@ -7060,7 +7443,7 @@ let NLDDToolbar = class extends LitElement {
       (c) => !this._overflowIds.has(c.id)
     );
     const isSoloFluid = visibleNonDivider.length === 1 && (visibleNonDivider[0].type === "title" || visibleNonDivider[0].type === "item" && visibleNonDivider[0].isFluid);
-    return template$f(
+    return template$e(
       this,
       this._centerChildren.length > 0,
       this._leftSpacerZero,
@@ -7075,43 +7458,43 @@ let NLDDToolbar = class extends LitElement {
   }
 };
 NLDDToolbar.styles = toolbarStyles;
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbar.prototype, "size", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: Boolean, reflect: true, attribute: "show-item-labels" })
 ], NLDDToolbar.prototype, "showItemLabels", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: String, reflect: true })
 ], NLDDToolbar.prototype, "label", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   property({ type: Object })
 ], NLDDToolbar.prototype, "translations", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_menuOpen", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_startChildren", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_centerChildren", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_endChildren", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_overflowIds", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_leftSpacerZero", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_rightSpacerZero", 2);
-__decorateClass$1g([
+__decorateClass$1f([
   state()
 ], NLDDToolbar.prototype, "_pinnedOverflowItems", 2);
-NLDDToolbar = __decorateClass$1g([
+NLDDToolbar = __decorateClass$1f([
   customElement("nldd-toolbar")
 ], NLDDToolbar);
 function groupForOverflow(items) {
@@ -7611,14 +7994,14 @@ const nlddImageTranslations = {
    *  Decorative images (alt=" '"', aria-hidden) suppress the announcement. */
   "components.image.error-text": "Afbeelding is niet geladen"
 };
-var __defProp$1e = Object.defineProperty;
-var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
-var __decorateClass$1f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1d(target, key) : target;
+var __defProp$1d = Object.defineProperty;
+var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
+var __decorateClass$1e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1e(target, key, result);
+  if (kind && result) __defProp$1d(target, key, result);
   return result;
 };
 let NLDDImage = class extends LitElement {
@@ -7750,83 +8133,83 @@ let NLDDImage = class extends LitElement {
   }
 };
 NLDDImage.styles = imageStyles;
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, reflect: true })
 ], NLDDImage.prototype, "src", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "alt", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "srcset", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "sizes", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, reflect: true })
 ], NLDDImage.prototype, "width", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: Number, reflect: true })
 ], NLDDImage.prototype, "height", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "loading", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "decoding", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, attribute: "fetchpriority" })
 ], NLDDImage.prototype, "fetchPriority", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, attribute: "aspect-ratio", reflect: true })
 ], NLDDImage.prototype, "aspectRatio", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, attribute: "object-fit", reflect: true })
 ], NLDDImage.prototype, "objectFit", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, attribute: "object-position", reflect: true })
 ], NLDDImage.prototype, "objectPosition", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String, reflect: true })
 ], NLDDImage.prototype, "shape", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "caption", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "credit", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: Boolean, reflect: true })
 ], NLDDImage.prototype, "decorative", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: String })
 ], NLDDImage.prototype, "lqip", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   property({ type: Object })
 ], NLDDImage.prototype, "translations", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   state()
 ], NLDDImage.prototype, "_hasSlottedCaption", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   state()
 ], NLDDImage.prototype, "_imageLoaded", 2);
-__decorateClass$1f([
+__decorateClass$1e([
   state()
 ], NLDDImage.prototype, "_imageErrored", 2);
-NLDDImage = __decorateClass$1f([
+NLDDImage = __decorateClass$1e([
   customElement("nldd-image")
 ], NLDDImage);
 const nlddRichTextTranslations = {
   "components.rich-text.table-scroll-label": "Scrollbare tabel"
 };
-var __defProp$1d = Object.defineProperty;
-var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
-var __decorateClass$1e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
+var __defProp$1c = Object.defineProperty;
+var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
+var __decorateClass$1d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1d(target, key, result);
+  if (kind && result) __defProp$1c(target, key, result);
   return result;
 };
 const MANAGED_LABEL_ATTR = "data-nldd-managed-label";
@@ -7879,22 +8262,22 @@ let NLDDRichText = class extends LitElement {
     }
   }
 };
-__decorateClass$1e([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDRichText.prototype, "spacing", 2);
-__decorateClass$1e([
+__decorateClass$1d([
   property({ type: Boolean, reflect: true })
 ], NLDDRichText.prototype, "centered", 2);
-__decorateClass$1e([
+__decorateClass$1d([
   property({ type: String, reflect: true })
 ], NLDDRichText.prototype, "color", 2);
-__decorateClass$1e([
+__decorateClass$1d([
   property({ type: Object })
 ], NLDDRichText.prototype, "translations", 2);
-NLDDRichText = __decorateClass$1e([
+NLDDRichText = __decorateClass$1d([
   customElement("nldd-rich-text")
 ], NLDDRichText);
-const smMax$f = unsafeCSS(breakpoints.smMax);
+const smMax$g = unsafeCSS(breakpoints.smMax);
 const mdMin$i = unsafeCSS(breakpoints.mdMin);
 const mdMax$b = unsafeCSS(breakpoints.mdMax);
 const lgMin$d = unsafeCSS(breakpoints.lgMin);
@@ -7904,7 +8287,7 @@ const titleStyles = css`
 	/* # Host */
 
 	:host {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-3-sm);
 		}
 
@@ -7916,7 +8299,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-3-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-3-sm);
 		}
 
@@ -7933,7 +8316,7 @@ const titleStyles = css`
 	}
 
 	:host([size="1"]) {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-1-sm);
 		}
 
@@ -7945,7 +8328,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-1-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-1-sm);
 		}
 
@@ -7959,7 +8342,7 @@ const titleStyles = css`
 	}
 
 	:host([size="2"]) {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-2-sm);
 		}
 
@@ -7971,7 +8354,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-2-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-2-sm);
 		}
 
@@ -7985,7 +8368,7 @@ const titleStyles = css`
 	}
 
 	:host([size="4"]) {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-4-sm);
 		}
 
@@ -7997,7 +8380,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-4-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-4-sm);
 		}
 
@@ -8011,7 +8394,7 @@ const titleStyles = css`
 	}
 
 	:host([size="5"]) {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-5-sm);
 		}
 
@@ -8023,7 +8406,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-5-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-5-sm);
 		}
 
@@ -8037,7 +8420,7 @@ const titleStyles = css`
 	}
 
 	:host([size="6"]) {
-		@media (max-width: ${smMax$f}) {
+		@media (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-6-sm);
 		}
 
@@ -8049,7 +8432,7 @@ const titleStyles = css`
 			--_font: var(--primitives-font-display-6-lg);
 		}
 
-		@container layout-container (max-width: ${smMax$f}) {
+		@container layout-container (max-width: ${smMax$g}) {
 			--_font: var(--primitives-font-display-6-sm);
 		}
 
@@ -8153,14 +8536,14 @@ function titleTemplate() {
 		</div>
 	`;
 }
-var __defProp$1c = Object.defineProperty;
-var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
-var __decorateClass$1d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
+var __defProp$1b = Object.defineProperty;
+var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
+var __decorateClass$1c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1c(target, key, result);
+  if (kind && result) __defProp$1b(target, key, result);
   return result;
 };
 let NLDDTitle = class extends LitElement {
@@ -8174,16 +8557,16 @@ let NLDDTitle = class extends LitElement {
   }
 };
 NLDDTitle.styles = titleStyles;
-__decorateClass$1d([
+__decorateClass$1c([
   property({ type: Number, reflect: true })
 ], NLDDTitle.prototype, "size", 2);
-__decorateClass$1d([
+__decorateClass$1c([
   property({ type: String, reflect: true })
 ], NLDDTitle.prototype, "color", 2);
-NLDDTitle = __decorateClass$1d([
+NLDDTitle = __decorateClass$1c([
   customElement("nldd-title")
 ], NLDDTitle);
-const smMax$e = unsafeCSS(breakpoints.smMax);
+const smMax$f = unsafeCSS(breakpoints.smMax);
 const blockquoteStyles = css`
 
 
@@ -8194,13 +8577,13 @@ const blockquoteStyles = css`
 		--_quote-font: var(--semantics-blockquotes-md-quote-font);
 		--_attribution-font: var(--semantics-blockquotes-md-attribution-font);
 
-		@media (max-width: ${smMax$e}) {
+		@media (max-width: ${smMax$f}) {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
 			--_attribution-font: var(--semantics-blockquotes-sm-attribution-font);
 		}
 
-		@container layout-container (max-width: ${smMax$e}) {
+		@container layout-container (max-width: ${smMax$f}) {
 			--_spacing: var(--semantics-blockquotes-sm-spacing);
 			--_quote-font: var(--semantics-blockquotes-sm-quote-font);
 			--_attribution-font: var(--semantics-blockquotes-sm-attribution-font);
@@ -8269,7 +8652,7 @@ const blockquoteStyles = css`
 		display: inline !important;
 	}
 `;
-function template$e(component) {
+function template$d(component) {
   return html`
 		<blockquote class="blockquote"
 			cite=${component.cite || nothing}
@@ -8285,14 +8668,14 @@ function template$e(component) {
 		</blockquote>
 	`;
 }
-var __defProp$1b = Object.defineProperty;
-var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
-var __decorateClass$1c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
+var __defProp$1a = Object.defineProperty;
+var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1b(target, key, result);
+  if (kind && result) __defProp$1a(target, key, result);
   return result;
 };
 let NLDDBlockquote = class extends LitElement {
@@ -8311,20 +8694,20 @@ let NLDDBlockquote = class extends LitElement {
     };
   }
   render() {
-    return template$e(this);
+    return template$d(this);
   }
 };
 NLDDBlockquote.styles = blockquoteStyles;
-__decorateClass$1c([
+__decorateClass$1b([
   property({ type: String })
 ], NLDDBlockquote.prototype, "cite", 2);
-__decorateClass$1c([
+__decorateClass$1b([
   state()
 ], NLDDBlockquote.prototype, "_hasAttribution", 2);
-__decorateClass$1c([
+__decorateClass$1b([
   state()
 ], NLDDBlockquote.prototype, "_hasBylineAttribution", 2);
-NLDDBlockquote = __decorateClass$1c([
+NLDDBlockquote = __decorateClass$1b([
   customElement("nldd-blockquote")
 ], NLDDBlockquote);
 const tagStyles = css`
@@ -8548,7 +8931,7 @@ const tagStyles = css`
 		display: inline-block;
 	}
 `;
-function template$d(component) {
+function template$c(component) {
   const variant = component._effectiveVariant;
   const showIcon = variant === "icon" || variant === "icon-and-text" && component._hasIcon;
   const showText = (variant === "text" || variant === "icon-and-text") && component._hasText;
@@ -8571,14 +8954,14 @@ function template$d(component) {
 		</span>
 	`;
 }
-var __defProp$1a = Object.defineProperty;
-var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
+var __defProp$19 = Object.defineProperty;
+var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1a(target, key, result);
+  if (kind && result) __defProp$19(target, key, result);
   return result;
 };
 let NLDDTag = class extends LitElement {
@@ -8634,212 +9017,37 @@ let NLDDTag = class extends LitElement {
   updated() {
   }
   render() {
-    return template$d(this);
+    return template$c(this);
   }
 };
 NLDDTag.styles = tagStyles;
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "color", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "size", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String })
 ], NLDDTag.prototype, "text", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String })
 ], NLDDTag.prototype, "icon", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String, reflect: true })
 ], NLDDTag.prototype, "variant", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDTag.prototype, "accessibleLabel", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   state()
 ], NLDDTag.prototype, "_hasSlotText", 2);
-__decorateClass$1b([
+__decorateClass$1a([
   state()
 ], NLDDTag.prototype, "_hasSlotIcon", 2);
-NLDDTag = __decorateClass$1b([
+NLDDTag = __decorateClass$1a([
   customElement("nldd-tag")
 ], NLDDTag);
-const keyboardShortcutStyles = css`
-
-
-	/* # Host */
-
-	:host {
-		--_size: var(--components-keyboard-shortcut-md-size);
-		--_inline-padding: var(--primitives-space-6);
-		--_font: var(--primitives-font-body-xs-regular-flat);
-
-		${inheritedTextReset}
-		display: inline-flex;
-		vertical-align: middle;
-	}
-
-	:host([size="sm"]) {
-		--_size: var(--components-keyboard-shortcut-sm-size);
-		--_inline-padding: var(--primitives-space-4);
-		--_font: var(--primitives-font-body-xxs-regular-flat);
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	@media (any-hover: none) {
-		:host(:not([always-visible])) {
-			display: none;
-		}
-	}
-
-
-	/* # Block */
-
-	.keyboard-shortcut {
-		display: inline-flex;
-		gap: var(--primitives-space-4);
-		align-items: center;
-	}
-
-
-	/* # Elements */
-
-	.keyboard-shortcut__key {
-		box-sizing: border-box;
-		display: inline-flex;
-		border: var(--components-keyboard-shortcut-border-thickness) solid var(--components-keyboard-shortcut-border-color);
-		border-radius: var(--components-keyboard-shortcut-corner-radius);
-		background-color: var(--components-keyboard-shortcut-background-color);
-		min-width: var(--_size);
-		height: var(--_size);
-		padding: 0 var(--_inline-padding);
-		align-items: center;
-		justify-content: center;
-		color: var(--components-keyboard-shortcut-content-color);
-		font: var(--_font);
-		white-space: nowrap;
-	}
-
-	@media (forced-colors: active) {
-		.keyboard-shortcut__key {
-			border-color: CanvasText;
-			background-color: Canvas;
-			color: CanvasText;
-		}
-	}
-
-	.keyboard-shortcut__separator {
-		color: var(--components-keyboard-shortcut-separator-color);
-		font: var(--_font);
-	}
-`;
-function template$c(component) {
-  const keys = component._parsedKeys;
-  if (keys.length === 0) {
-    return html`
-			<kbd class="keyboard-shortcut">
-				<slot></slot>
-			</kbd>
-		`;
-  }
-  return html`
-		<kbd class="keyboard-shortcut">
-			${keys.map((key, index) => html`
-				${index > 0 ? html`<span class="keyboard-shortcut__separator"
-					aria-hidden="true"
-				>+</span>` : ""}
-				<kbd class="keyboard-shortcut__key">${key}</kbd>
-			`)}
-		</kbd>
-	`;
-}
-let cached = null;
-function classify(platform) {
-  const p = platform.toLowerCase();
-  if (/mac|iphone|ipad|ipod|ios/.test(p)) return "mac";
-  if (/win/.test(p)) return "windows";
-  if (/android/.test(p)) return "other";
-  if (/linux|cros/.test(p)) return "linux";
-  return "other";
-}
-function detectOS() {
-  if (cached !== null) return cached;
-  if (typeof navigator === "undefined") {
-    cached = "other";
-    return cached;
-  }
-  const nav = navigator;
-  const platform = nav.userAgentData?.platform || nav.platform || "";
-  cached = classify(platform);
-  return cached;
-}
-var __defProp$19 = Object.defineProperty;
-var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$19(target, key, result);
-  return result;
-};
-let NLDDKeyboardShortcut = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.keys = "";
-    this.macKeys = "";
-    this.windowsKeys = "";
-    this.linuxKeys = "";
-    this.size = "md";
-    this.alwaysVisible = false;
-    this.debugOS = "";
-  }
-  get _resolvedKeys() {
-    const os = this.debugOS || detectOS();
-    if (os === "mac" && this.macKeys) return this.macKeys;
-    if (os === "windows" && this.windowsKeys) return this.windowsKeys;
-    if (os === "linux" && this.linuxKeys) return this.linuxKeys;
-    return this.keys;
-  }
-  get _parsedKeys() {
-    const spec = this._resolvedKeys;
-    if (!spec) return [];
-    const MARKER = "\0";
-    return spec.replace(/\+\+\+/g, `+${MARKER}+`).split("+").map((k) => k.trim().replace(new RegExp(MARKER, "g"), "+")).filter(Boolean);
-  }
-  render() {
-    return template$c(this);
-  }
-};
-NLDDKeyboardShortcut.styles = keyboardShortcutStyles;
-__decorateClass$1a([
-  property({ type: String })
-], NLDDKeyboardShortcut.prototype, "keys", 2);
-__decorateClass$1a([
-  property({ type: String, attribute: "mac-keys" })
-], NLDDKeyboardShortcut.prototype, "macKeys", 2);
-__decorateClass$1a([
-  property({ type: String, attribute: "windows-keys" })
-], NLDDKeyboardShortcut.prototype, "windowsKeys", 2);
-__decorateClass$1a([
-  property({ type: String, attribute: "linux-keys" })
-], NLDDKeyboardShortcut.prototype, "linuxKeys", 2);
-__decorateClass$1a([
-  property({ type: String, reflect: true })
-], NLDDKeyboardShortcut.prototype, "size", 2);
-__decorateClass$1a([
-  property({ type: Boolean, reflect: true, attribute: "always-visible" })
-], NLDDKeyboardShortcut.prototype, "alwaysVisible", 2);
-__decorateClass$1a([
-  property({ type: String, attribute: "debug-os" })
-], NLDDKeyboardShortcut.prototype, "debugOS", 2);
-NLDDKeyboardShortcut = __decorateClass$1a([
-  customElement("nldd-keyboard-shortcut")
-], NLDDKeyboardShortcut);
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -10594,17 +10802,17 @@ const GRAMMAR_LOADERS = {
   yaml: () => import("./prism-yaml-DO0f9pf6.js"),
   json: () => import("./prism-json-DIMpow89.js"),
   javascript: () => import("./prism-javascript-DeC_17Pw.js"),
-  typescript: () => import("./prism-typescript-KyVBIohW.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-DrsfPuKI.js").then((n) => n.p),
   css: () => import("./prism-css-B93tXdOU.js"),
   html: () => import("./prism-markup-DfJYPYHA.js"),
   xml: () => import("./prism-markup-DfJYPYHA.js"),
   bash: () => import("./prism-bash-vbqaw3JR.js"),
   markdown: () => import("./prism-markdown-D-uFBkiz.js"),
-  rust: () => import("./prism-rust-DzgIGUtE.js").then((n) => n.p),
+  rust: () => import("./prism-rust-CSuFXPDt.js").then((n) => n.p),
   gherkin: () => import("./prism-gherkin-CMPYyXOQ.js"),
   toml: () => import("./prism-toml-Ubdq-a5x.js"),
   sql: () => import("./prism-sql-BGqCBMyJ.js"),
-  python: () => import("./prism-python-BzzeiWRd.js").then((n) => n.p)
+  python: () => import("./prism-python-SgP2Rws4.js").then((n) => n.p)
 };
 const grammarLoads = /* @__PURE__ */ new Map();
 function loadGrammar(language) {
@@ -10775,6 +10983,7 @@ __decorateClass$19([
 NLDDCodeViewer = __decorateClass$19([
   customElement("nldd-code-viewer")
 ], NLDDCodeViewer);
+const smMax$e = unsafeCSS(breakpoints.smMax);
 const bylineStyles = css`
 
 
@@ -10782,7 +10991,7 @@ const bylineStyles = css`
 
 	:host {
 		--_gap: var(--primitives-space-8);
-		--_avatar-overlap: var(--primitives-space-8);
+		--_avatar-overlap-size: var(--primitives-space-8);
 		--_avatar-size: var(--primitives-space-40);
 		--_avatar-border-width: var(--primitives-border-width-regular);
 		--_avatar-border-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
@@ -10793,13 +11002,28 @@ const bylineStyles = css`
 		--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
 
 		${inheritedTextReset}
+		container-type: inline-size;
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Byline */
+
+	.byline {
 		display: flex;
 		align-items: center;
 		gap: var(--_gap);
 	}
 
-	:host([hidden]) {
-		display: none;
+	.byline[data-multiple-avatars] {
+		@container (max-width: ${smMax$e}) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
 	}
 
 
@@ -10807,7 +11031,7 @@ const bylineStyles = css`
 
 	.byline__avatars {
 		display: flex;
-		padding-inline-start: var(--_avatar-overlap);
+		padding-inline-start: var(--_avatar-overlap-size);
 	}
 
 	.byline__avatars[hidden] {
@@ -10817,7 +11041,7 @@ const bylineStyles = css`
 	.byline__avatars ::slotted(img) {
 		${slottedReset}
 		display: block !important;
-		margin-inline-start: calc(-1 * var(--_avatar-overlap)) !important;
+		margin-inline-start: calc(-1 * var(--_avatar-overlap-size)) !important;
 		border-radius: var(--_avatar-corner-radius) !important;
 		box-shadow: 0 0 0 var(--_avatar-border-width) var(--_avatar-border-color) !important;
 		width: var(--_avatar-size) !important;
@@ -10870,20 +11094,24 @@ function bylineTemplate(component) {
   const hasText = Boolean(component.text) || component._hasSlottedText;
   const hasSupportingText = Boolean(component.supportingText) || component._hasSlottedSupportingText;
   return html`
-		<div class="byline__avatars"
-			?hidden=${!component._hasSlottedAvatars}
+		<div class="byline"
+			?data-multiple-avatars=${component._avatarCount >= 2}
 		>
-			<slot name="avatars" @slotchange=${component._onSlotChange}></slot>
-		</div>
-		<div class="byline__text-area"
-			?hidden=${!hasText && !hasSupportingText}
-		>
-			<p class="byline__text"
-				?hidden=${!hasText}
-			><slot name="text" @slotchange=${component._onSlotChange}>${component.text}</slot></p>
-			<p class="byline__supporting-text"
-				?hidden=${!hasSupportingText}
-			><slot name="supporting-text" @slotchange=${component._onSlotChange}>${component.supportingText}</slot></p>
+			<div class="byline__avatars"
+				?hidden=${!component._hasSlottedAvatars}
+			>
+				<slot name="avatars" @slotchange=${component._onSlotChange}></slot>
+			</div>
+			<div class="byline__text-area"
+				?hidden=${!hasText && !hasSupportingText}
+			>
+				<p class="byline__text"
+					?hidden=${!hasText}
+				><slot name="text" @slotchange=${component._onSlotChange}>${component.text}</slot></p>
+				<p class="byline__supporting-text"
+					?hidden=${!hasSupportingText}
+				><slot name="supporting-text" @slotchange=${component._onSlotChange}>${component.supportingText}</slot></p>
+			</div>
 		</div>
 	`;
 }
@@ -10903,14 +11131,17 @@ let NLDDByline = class extends LitElement {
     this.text = "";
     this.supportingText = "";
     this._hasSlottedAvatars = false;
+    this._avatarCount = 0;
     this._hasSlottedText = false;
     this._hasSlottedSupportingText = false;
     this._onSlotChange = (e) => {
       const slot = e.target;
-      const has = slot.assignedElements().length > 0;
-      if (slot.name === "avatars") this._hasSlottedAvatars = has;
-      else if (slot.name === "text") this._hasSlottedText = has;
-      else if (slot.name === "supporting-text") this._hasSlottedSupportingText = has;
+      const count = slot.assignedElements().length;
+      if (slot.name === "avatars") {
+        this._avatarCount = count;
+        this._hasSlottedAvatars = count > 0;
+      } else if (slot.name === "text") this._hasSlottedText = count > 0;
+      else if (slot.name === "supporting-text") this._hasSlottedSupportingText = count > 0;
     };
   }
   render() {
@@ -10927,6 +11158,9 @@ __decorateClass$18([
 __decorateClass$18([
   state()
 ], NLDDByline.prototype, "_hasSlottedAvatars", 2);
+__decorateClass$18([
+  state()
+], NLDDByline.prototype, "_avatarCount", 2);
 __decorateClass$18([
   state()
 ], NLDDByline.prototype, "_hasSlottedText", 2);
@@ -12124,10 +12358,11 @@ const multiLineTextFieldStyles = css`
 		--_background-color: var(--semantics-input-fields-background-color);
 		--_corner-radius: var(--semantics-controls-md-corner-radius);
 		--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
-		--_min-size: var(--semantics-controls-md-min-size);
+		--_min-height: var(--semantics-controls-md-min-size);
 		--_text-font: var(--semantics-input-fields-md-text-font);
-		--_icon-area-size: calc(var(--_min-size) - var(--semantics-input-fields-border-thickness) * 2);
+		--_icon-area-size: calc(var(--_min-height) - var(--semantics-input-fields-border-thickness) * 2);
 		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+		--_rows: 3;
 
 		${inheritedTextReset}
 		display: block;
@@ -12143,7 +12378,7 @@ const multiLineTextFieldStyles = css`
 	:host([size="sm"]) {
 		--_corner-radius: var(--semantics-controls-sm-corner-radius);
 		--_inline-padding: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
-		--_min-size: var(--semantics-controls-sm-min-size);
+		--_min-height: var(--semantics-controls-sm-min-size);
 		--_text-font: var(--semantics-input-fields-sm-text-font);
 		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
 	}
@@ -12200,8 +12435,8 @@ const multiLineTextFieldStyles = css`
 		border: none;
 		background: transparent;
 		width: 100%;
-		min-height: calc(var(--_min-size) - var(--semantics-input-fields-border-thickness) * 2);
-		padding-block: calc((var(--_min-size) - var(--semantics-input-fields-border-thickness) * 2 - 1lh) / 2);
+		min-height: calc(var(--_min-height) - var(--semantics-input-fields-border-thickness) * 2);
+		padding-block: calc((var(--_min-height) - var(--semantics-input-fields-border-thickness) * 2 - 1lh) / 2);
 		padding-inline: var(--_inline-padding);
 		color: var(--semantics-content-color);
 		font: var(--_text-font);
@@ -12219,6 +12454,11 @@ const multiLineTextFieldStyles = css`
 	:host([resize="auto"]) .multi-line-text-field__input {
 		resize: none;
 		field-sizing: content;
+		/* Keep the configured rows as the floor: field-sizing grows the field with
+		   content, and this min-height stops it shrinking below that many lines.
+		   The host exposes the count as --_rows; one row already fits in
+		   --_min-height, so each extra row adds one line height. */
+		min-height: calc(var(--_min-height) - var(--semantics-input-fields-border-thickness) * 2 + (var(--_rows) - 1) * 1lh);
 	}
 
 	:host([valid]) .multi-line-text-field__input,
@@ -12358,6 +12598,9 @@ let NLDDMultiLineTextField = class extends LitElement {
         this.style.removeProperty("--_width");
       }
     }
+    if (changed.has("rows")) {
+      this.style.setProperty("--_rows", String(this.rows));
+    }
     if (changed.has("resize") && this.resize === "auto" && this._textarea) {
       this._textarea.style.width = "";
       this._textarea.style.height = "";
@@ -17111,7 +17354,7 @@ function toggleButtonTemplate(component) {
   const ariaLabel = component.accessibleLabel || (component.variant === "icon" && component.text ? component.text : "") || nothing;
   const isIconOnlyDisplay = showIcon && !showText;
   const tooltipText = isIconOnlyDisplay ? component.accessibleLabel || component.text || "" : "";
-  const icon = component.icon ? html`<nldd-icon class="toggle-button__icon"
+  const icon2 = component.icon ? html`<nldd-icon class="toggle-button__icon"
 				name=${component.icon}
 			></nldd-icon>` : html`<slot name="icon"
 				@slotchange=${component.requestUpdate}
@@ -17132,7 +17375,7 @@ function toggleButtonTemplate(component) {
 					aria-label=${ariaLabel}
 					@change=${component._handleInputChange}
 				>
-				${icon}
+				${icon2}
 				${textContent}
 			</label>
 		`;
@@ -17145,7 +17388,7 @@ function toggleButtonTemplate(component) {
 				aria-label=${ariaLabel}
 				@click=${component._handleButtonClick}
 			>
-				${icon}
+				${icon2}
 				${textContent}
 			</button>
 		`;
@@ -20115,7 +20358,7 @@ const heroStyles = css`
 	   (instead of aspect-ratio on the body) keeps growth content-driven
 	   rather than rigidly tied to the width. align-self: start stops the
 	   stretch fit from cancelling the ratio. */
-	:host([data-has-media]) .hero__body::before {
+	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
 		@container (min-width: ${mdMin$c}) {
 			content: '';
 			aspect-ratio: 21 / 9;
@@ -20305,6 +20548,34 @@ const heroStyles = css`
 	}
 
 
+	/* # Full-width strip (md+)
+	   With main-width="full" the panel is a full top or bottom strip and the
+	   media stacks on the opposite side instead of sitting behind it — the
+	   overlay's absolute media would otherwise hide its own rounded corner under
+	   the panel. Switch the body to a column so the two blocks stack: a bottom
+	   panel keeps the media on top, a top panel (column-reverse) drops it below.
+	   The media keeps the overlay's 21/9 strip. Below sm every layout already
+	   stacks, so this only targets md and up. The rounded corner still follows
+	   data-media-corner — resolved to the strip's outer edge in hero.ts — so the
+	   per-corner body rules above keep painting it. */
+
+	@container (min-width: ${mdMin$c}) {
+		:host([data-has-media][main-width="full"]) .hero__body {
+			display: flex;
+			flex-direction: column;
+		}
+
+		:host([data-has-media][main-width="full"]:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
+			flex-direction: column-reverse;
+		}
+
+		:host([data-has-media][main-width="full"]) .hero__media {
+			position: static;
+			aspect-ratio: 21 / 9;
+		}
+	}
+
+
 	/* # Mobile — stack media over a full-width cornerless panel.
 	   Placed after the corner rules so the equal-specificity zero-out
 	   wins on source order. */
@@ -20405,9 +20676,14 @@ let NLDDHero = class extends PageSectionMixin(LitElement) {
   willUpdate(changed) {
     super.willUpdate(changed);
     const position = AUTO_CORNER[this.mainPosition] ? this.mainPosition : "bottom-left";
-    const mediaCorner = this.mediaCorner !== "auto" ? this.mediaCorner : AUTO_CORNER[position];
-    this.setAttribute("data-media-corner", mediaCorner);
     const edge = position === "left" || position === "right";
+    let mediaCorner = this.mediaCorner !== "auto" ? this.mediaCorner : AUTO_CORNER[position];
+    if (this.mainWidth === "full" && this._hasMedia && !edge) {
+      const panelAtTop = position === "top-left" || position === "top-right";
+      const side = mediaCorner.endsWith("left") ? "left" : "right";
+      mediaCorner = `${panelAtTop ? "bottom" : "top"}-${side}`;
+    }
+    this.setAttribute("data-media-corner", mediaCorner);
     const mainCorner = !this._hasMedia || edge || this.mainWidth === "full" ? null : MAIN_CORNER[position];
     this.setAttribute("data-main-corner", mainCorner ?? "none");
     this.toggleAttribute("data-has-media", this._hasMedia);
@@ -27279,15 +27555,6 @@ const menuBarItemStyles = css`
 		display: none;
 	}
 `;
-function sanitizeUrl(url) {
-  if (!url) return null;
-  const trimmed = url.replace(/^[\s\u00A0\u200B\u2028\u2029]+|[\s\u00A0\u200B\u2028\u2029]+$/g, "").replace(/[\0\t\n\r]/g, "");
-  const lower = trimmed.toLowerCase();
-  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
-    return null;
-  }
-  return trimmed;
-}
 function template$4(component) {
   const safeHref = sanitizeUrl(component.href);
   const isLink = Boolean(safeHref);
@@ -28640,6 +28907,8 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
     this.backText = "";
     this._globalMenuSheet = null;
     this._globalMenuSheetList = null;
+    this._globalMenuSheetTitleBar = null;
+    this._sheetStack = [];
     this._resizeObserver = null;
     this._compactRAF = null;
     this._setupRAF = null;
@@ -28680,6 +28949,12 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
         this._syncCompactAttribute();
       });
     };
+    this._onSheetBack = () => {
+      if (this._sheetStack.length <= 1) return;
+      const openerText = this._sheetStack[this._sheetStack.length - 1].title;
+      this._sheetStack.pop();
+      this._renderSheetLevel(true, openerText);
+    };
     this._onMenuButtonClick = async () => {
       if (!this._globalMenuSheet) {
         try {
@@ -28698,7 +28973,7 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
           if (menuButtonItem) menuButtonItem.expanded = false;
         });
       }
-      this._syncGlobalMenuSheetItems();
+      this._resetSheetToRoot();
       requestAnimationFrame(() => {
         this._globalMenuSheet?.show();
       });
@@ -28718,9 +28993,12 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
   willUpdate(changed) {
     super.willUpdate(changed);
     if (changed.has("translations")) {
-      this._globalMenuSheet?.setAttribute("accessible-label", this._t("components.top-navigation-bar.menu-action"));
-      this._globalMenuSheet?.querySelector("nldd-top-title-bar")?.setAttribute("text", this._menuText);
-      this._globalMenuSheet?.querySelector("nldd-top-title-bar")?.setAttribute("dismiss-text", this._t("components.top-navigation-bar.menu-sheet-dismiss-action"));
+      this._globalMenuSheet?.setAttribute("accessible-label", this._menuText);
+      this._globalMenuSheetTitleBar?.setAttribute("dismiss-text", this._t("components.top-navigation-bar.menu-sheet-dismiss-action"));
+      if (this._sheetStack.length > 0) {
+        this._sheetStack[0].title = this._menuText;
+        this._renderSheetLevel();
+      }
       this._syncSlottedMenuBarLabels();
     }
   }
@@ -28776,6 +29054,8 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
     this._globalMenuSheet?.remove();
     this._globalMenuSheet = null;
     this._globalMenuSheetList = null;
+    this._globalMenuSheetTitleBar = null;
+    this._sheetStack = [];
   }
   firstUpdated() {
     this._syncHasGlobalItems();
@@ -28844,7 +29124,9 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
       Promise.resolve().then(() => topTitleBar),
       Promise.resolve().then(() => list),
       Promise.resolve().then(() => listItem),
-      Promise.resolve().then(() => textCell)
+      Promise.resolve().then(() => textCell),
+      Promise.resolve().then(() => iconCell),
+      Promise.resolve().then(() => icon)
     ]);
   }
   _createGlobalMenuSheet() {
@@ -28855,8 +29137,9 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
     page2.setAttribute("sticky-header", "");
     const titleBar = document.createElement("nldd-top-title-bar");
     titleBar.setAttribute("slot", "header");
-    titleBar.setAttribute("text", this._menuText);
     titleBar.setAttribute("dismiss-text", this._t("components.top-navigation-bar.menu-sheet-dismiss-action"));
+    titleBar.addEventListener("back", this._onSheetBack);
+    this._globalMenuSheetTitleBar = titleBar;
     page2.appendChild(titleBar);
     const section = document.createElement("nldd-simple-section");
     this._globalMenuSheetList = document.createElement("nldd-list");
@@ -28868,28 +29151,93 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
     document.body.appendChild(sheet2);
     return sheet2;
   }
-  _syncGlobalMenuSheetItems() {
-    if (!this._globalMenuSheetList) return;
-    this._globalMenuSheetList.replaceChildren();
-    const items = this._getSlottedItems(this._globalSlot);
-    for (const item of items) {
+  /** Reset the sheet to its root level (the global menu-bar) and render it.
+   * Called every time the sheet opens, so a reopened sheet always starts at
+   * the top regardless of where the user drilled to last time. */
+  _resetSheetToRoot() {
+    this._sheetStack = [{ title: this._menuText, container: this._getSlottedMenuBar(this._globalSlot) }];
+    this._renderSheetLevel();
+  }
+  /** Read the rows for a level from its container — the global menu-bar's
+   * menu-bar-items at the root, or a submenu's menu-items deeper in. */
+  _readSheetEntries(container) {
+    if (!container) return [];
+    if (container.tagName === "NLDD-MENU-BAR") {
+      const items2 = Array.from(container.querySelectorAll(":scope > nldd-menu-bar-item"));
+      return items2.map((item) => ({
+        text: item.text,
+        href: sanitizeUrl(item.href) ?? "",
+        selected: item.current,
+        submenu: item.querySelector(":scope > nldd-menu"),
+        activate: () => item.click()
+      }));
+    }
+    const items = Array.from(
+      container.querySelectorAll(":scope > nldd-menu-item, :scope > nldd-menu-group > nldd-menu-item")
+    );
+    return items.map((item) => ({
+      text: item.text || item.getAttribute("text") || "",
+      href: sanitizeUrl(item.href || "") ?? "",
+      selected: item.hasAttribute("selected"),
+      submenu: item.querySelector(":scope > nldd-menu"),
+      // A leaf menu-item's own click would call hidePopover() on its
+      // (closed) submenu and throw; dispatch the same `select` event it
+      // fires instead, so consumer listeners react without the popover call.
+      activate: () => item.dispatchEvent(new CustomEvent("select", { bubbles: true, composed: true }))
+    }));
+  }
+  /** Render the current (top-of-stack) level into the sheet: update the title
+   * bar (title + back button) and rebuild the list. Pass `moveFocus` after a
+   * drill or back so focus lands on the new level's first row. */
+  _renderSheetLevel(moveFocus = false, focusOpenerText) {
+    const list2 = this._globalMenuSheetList;
+    const titleBar = this._globalMenuSheetTitleBar;
+    if (!list2 || !titleBar || this._sheetStack.length === 0) return;
+    const depth = this._sheetStack.length;
+    const level = this._sheetStack[depth - 1];
+    titleBar.setAttribute("text", level.title);
+    if (depth > 1) {
+      titleBar.setAttribute("back-text", this._sheetStack[depth - 2].title);
+    } else {
+      titleBar.removeAttribute("back-text");
+    }
+    list2.replaceChildren();
+    let openerItem = null;
+    for (const entry of this._readSheetEntries(level.container)) {
       const listItem2 = document.createElement("nldd-list-item");
-      const safeHref = sanitizeUrl(item.href);
-      if (safeHref) {
-        listItem2.setAttribute("type", "link");
-        listItem2.setAttribute("href", safeHref);
-      } else {
-        listItem2.setAttribute("type", "button");
-      }
-      if (item.current) listItem2.setAttribute("selected", "");
       const textCell2 = document.createElement("nldd-text-cell");
-      textCell2.setAttribute("text", item.text);
+      textCell2.setAttribute("text", entry.text);
       listItem2.appendChild(textCell2);
-      listItem2.addEventListener("click", () => {
-        if (!safeHref) item.click();
-        this._globalMenuSheet?.hide();
+      if (entry.submenu) {
+        listItem2.setAttribute("button", "");
+        const chevron = document.createElement("nldd-icon-cell");
+        chevron.setAttribute("slot", "end");
+        chevron.setAttribute("icon", "chevron-right-small");
+        listItem2.appendChild(chevron);
+        const { text, submenu } = entry;
+        listItem2.addEventListener("click", () => {
+          this._sheetStack.push({ title: text, container: submenu });
+          this._renderSheetLevel(true);
+        });
+      } else if (entry.href) {
+        listItem2.setAttribute("href", entry.href);
+        listItem2.addEventListener("click", () => this._globalMenuSheet?.hide());
+      } else {
+        listItem2.setAttribute("button", "");
+        const { activate } = entry;
+        listItem2.addEventListener("click", () => {
+          activate();
+          this._globalMenuSheet?.hide();
+        });
+      }
+      if (entry.selected) listItem2.setAttribute("selected", "");
+      if (focusOpenerText !== void 0 && entry.text === focusOpenerText) openerItem = listItem2;
+      list2.appendChild(listItem2);
+    }
+    if (moveFocus) {
+      requestAnimationFrame(() => {
+        (openerItem ?? list2.querySelector("nldd-list-item"))?.focus();
       });
-      this._globalMenuSheetList.appendChild(listItem2);
     }
   }
   // ## Render