@nldd/design-system 0.8.61 → 0.8.63

package/dist/components/{index-B0DIduK1.js → index-BVaijKe_.js}

@@ -553,6 +553,20 @@ const buttonStyles = css`
 		color: var(--_is-active-secondary-content-color);
 	}
 
+	/* Visually-hidden "opens in new tab" announcement (href + target="_blank");
+	   part of the link's accessible name but never shown. Standard recipe. */
+	.button__opens-in-new-tab-hint {
+		position: absolute;
+		margin: -1px;
+		border: 0;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
+
 	:host([single-line]) .button__supporting-text {
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -634,7 +648,10 @@ function template$n(helpers) {
   ].filter(Boolean).join(" ");
   const isDisclosure = this.expandable || !!this.popupType;
   const ariaExpanded = isDisclosure ? String(this.expanded) : this.expanded ? "true" : nothing;
-  const ariaLabel = this.accessibleLabel || (this.supportingText ? [this.text, this.supportingText].filter(Boolean).join(", ") : nothing);
+  const opensInNewTabHint = this.href && this.target === "_blank" ? this._t("components.button.opens-in-new-tab-text") : "";
+  const baseAriaLabel = this.accessibleLabel || (this.supportingText ? [this.text, this.supportingText].filter(Boolean).join(", ") : "");
+  const ariaLabel = baseAriaLabel ? [baseAriaLabel, opensInNewTabHint].filter(Boolean).join(", ") : nothing;
+  const renderOpensInNewTabHint = !!opensInNewTabHint && !baseAriaLabel;
   const ariaBusy = this.loading ? "true" : nothing;
   const loadingIndicator = this.loading ? html`
 			<div class="button__activity-indicator">
@@ -659,6 +676,7 @@ function template$n(helpers) {
 				@click=${helpers.handleClick}
 			>
 				${content}
+				${renderOpensInNewTabHint ? html`<span class="button__opens-in-new-tab-hint">${opensInNewTabHint}</span>` : nothing}
 			</a>
 			${loadingIndicator}
 		`;
@@ -682,6 +700,47 @@ function template$n(helpers) {
 		${loadingIndicator}
 	`;
 }
+var __defProp$1u = Object.defineProperty;
+var __decorateClass$1v = (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$1u(target, key, result);
+  return result;
+};
+function withTranslations(Base, defaults) {
+  class TranslationsMixin extends Base {
+    constructor() {
+      super(...arguments);
+      this.translations = {};
+      this._mergedTranslations = { ...defaults };
+    }
+    /** @internal */
+    _t(key, vars) {
+      let str = this._mergedTranslations[key] ?? String(key);
+      if (vars) {
+        for (const [k, v] of Object.entries(vars)) {
+          str = str.split(`{${k}}`).join(String(v));
+        }
+      }
+      return str;
+    }
+    willUpdate(changed) {
+      super.willUpdate(changed);
+      if (changed.has("translations")) {
+        this._mergedTranslations = { ...defaults, ...this.translations };
+      }
+    }
+  }
+  __decorateClass$1v([
+    property({ type: Object })
+  ], TranslationsMixin.prototype, "translations");
+  return TranslationsMixin;
+}
+const nlddButtonTranslations = {
+  "components.button.opens-in-new-tab-text": "Opent in nieuw tabblad"
+};
 const iconStyles = css`
 
 
@@ -1279,9 +1338,9 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["underlined", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M20 22H4v-2h16zM8 13c0 1.33 1.43 3 4 3s4-1.67 4-3V2h2v11c0 2.76-2.69 5-6 5s-6-2.24-6-5V2h2z"/>\n</svg>']
 ]);
 var __defProp$1t = Object.defineProperty;
-var __getOwnPropDesc$1q = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1r = Object.getOwnPropertyDescriptor;
 var __decorateClass$1u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1q(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1r(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;
@@ -1366,6 +1425,8 @@ const activityIndicatorStyles = css`
 		--_gap: var(--primitives-space-4);
 		--_text-font: var(--primitives-font-body-sm-regular-flat);
 		--_backdrop-blur: 3px;
+		--_overlay-panel-padding: var(--primitives-space-12);
+		--_overlay-panel-corner-radius: var(--primitives-corner-radius-md);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -1383,10 +1444,13 @@ 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]) {
+	/* Overlay mode (content in the default slot): the host wraps the content and
+	   is the containing block for the absolutely-positioned indicator + backdrop,
+	   so it sizes to the content instead of filling its parent. */
+	:host([has-content]) {
+		display: block;
 		position: relative;
+		height: auto;
 	}
 
 
@@ -1407,35 +1471,75 @@ const activityIndicatorStyles = css`
 
 
 	/* # Block
-	   Fades the indicator in once it becomes visible (both timing modes), and
-	   stacks the default circle + label as a centred column. width:100% +
+	   Stacks the default circle + label as a centred column. width:100% +
 	   max-width gives a slotted progress-bar a width to fill; the fixed-size
 	   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). */
+		   (both are z-index:auto; the backdrop comes first in the DOM). Hidden by
+		   default; the loading host attribute fades it (and the backdrop) in and
+		   out — opacity + display via transition-behavior: allow-discrete, with a
+		   starting-style for the entry. */
 		position: relative;
-		display: flex;
-		flex-direction: column;
+		display: none;
+		opacity: 0;
+		pointer-events: none;
 		width: 100%;
 		max-width: var(--_max-width);
+		flex-direction: column;
 		align-items: center;
 		gap: var(--_gap);
-		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
 	}
 
-	@keyframes activity-indicator-fade-in {
-		from { opacity: 0; }
+	:host([loading]) .activity-indicator {
+		display: flex;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator {
+			opacity: 0;
+		}
+	}
+
+	/* Overlay mode: the wrapped content flows normally; the indicator + backdrop
+	   sit on top as absolute layers that fill the host. */
+	.activity-indicator__content {
+		display: block;
 	}
 
-	/* 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. */
+	/* Overlay mode: the indicator + label sit on a small rounded base-surface
+	   panel that hugs them with padding (not the full component width) so they
+	   keep contrast over the dimmed content, and read in the content colour
+	   instead of inheriting currentColor. */
+	:host([has-content]) .activity-indicator {
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: var(--_overlay-panel-corner-radius);
+		background-color: var(--semantics-surfaces-base-background-color);
+		width: max-content;
+		max-width: calc(100% - var(--primitives-space-32));
+		padding: var(--_overlay-panel-padding);
+		color: var(--semantics-content-color);
+		transform: translate(-50%, -50%);
+	}
+
+	/* Dimming layer (overlay mode, on by default; opt out with no-backdrop): 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 and out with the indicator via the loading attribute. */
 	.activity-indicator__backdrop {
 		position: absolute;
 		inset: 0;
+		display: none;
+		opacity: 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
@@ -1444,7 +1548,22 @@ const activityIndicatorStyles = css`
 		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);
+		pointer-events: none;
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
+	}
+
+	:host([loading]) .activity-indicator__backdrop {
+		display: block;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator__backdrop {
+			opacity: 0;
+		}
 	}
 
 	/* display:contents so the default circle + label (or a slotted override)
@@ -1510,7 +1629,7 @@ const activityIndicatorStyles = css`
 	@media (prefers-reduced-motion: reduce) {
 		.activity-indicator,
 		.activity-indicator__backdrop {
-			animation: none;
+			transition: none;
 		}
 
 		.activity-indicator__indicator {
@@ -1526,12 +1645,19 @@ const activityIndicatorStyles = css`
 	}
 `;
 function activityIndicatorTemplate(component) {
-  if (!component._visible || component.complete) return nothing;
+  const disableContent = component._visible && !component.complete && component._hasContent;
+  const renderBackdrop = component._hasContent && !component.noBackdrop;
   const text = component._accessibleName;
   return html`
-		${component.backdrop ? html`<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
+		<div class="activity-indicator__content"
+			?inert=${disableContent}
+			aria-busy=${disableContent ? "true" : "false"}
+		>
+			<slot @slotchange=${component._onContentSlotChange}></slot>
+		</div>
+		${renderBackdrop ? html`<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
 		<div class="activity-indicator">
-			<slot>
+			<slot name="indicator">
 				<svg class="activity-indicator__circle"
 					viewBox="0 0 24 24"
 					fill="none"
@@ -1562,9 +1688,9 @@ const nlddActivityIndicatorTranslations = {
   "components.activity-indicator.loading-text": "Laden"
 };
 var __defProp$1s = Object.defineProperty;
-var __getOwnPropDesc$1p = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1q = Object.getOwnPropertyDescriptor;
 var __decorateClass$1t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1p(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1q(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;
@@ -1580,9 +1706,14 @@ let NLDDActivityIndicator = class extends LitElement {
     this.text = "";
     this.timing = "default";
     this.complete = false;
-    this.backdrop = false;
+    this.noBackdrop = false;
     this.translations = {};
     this._visible = false;
+    this._hasContent = false;
+    this._onContentSlotChange = (e) => {
+      const slot = e.target;
+      this._hasContent = slot.assignedElements().length > 0;
+    };
   }
   _t(key) {
     return this.translations[key] ?? nlddActivityIndicatorTranslations[key];
@@ -1637,6 +1768,10 @@ let NLDDActivityIndicator = class extends LitElement {
       this.setAttribute("role", "status");
     }
   }
+  updated() {
+    this.toggleAttribute("loading", this._visible && !this.complete);
+    this.toggleAttribute("has-content", this._hasContent);
+  }
   render() {
     return activityIndicatorTemplate(this);
   }
@@ -1658,28 +1793,31 @@ __decorateClass$1t([
   property({ type: Boolean, reflect: true })
 ], NLDDActivityIndicator.prototype, "complete", 2);
 __decorateClass$1t([
-  property({ type: Boolean, reflect: true })
-], NLDDActivityIndicator.prototype, "backdrop", 2);
+  property({ type: Boolean, reflect: true, attribute: "no-backdrop" })
+], NLDDActivityIndicator.prototype, "noBackdrop", 2);
 __decorateClass$1t([
   property({ type: Object })
 ], NLDDActivityIndicator.prototype, "translations", 2);
 __decorateClass$1t([
   state()
 ], NLDDActivityIndicator.prototype, "_visible", 2);
+__decorateClass$1t([
+  state()
+], NLDDActivityIndicator.prototype, "_hasContent", 2);
 NLDDActivityIndicator = __decorateClass$1t([
   customElement("nldd-activity-indicator")
 ], NLDDActivityIndicator);
 var __defProp$1r = Object.defineProperty;
-var __getOwnPropDesc$1o = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1p = Object.getOwnPropertyDescriptor;
 var __decorateClass$1s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1o(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1p(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$1r(target, key, result);
   return result;
 };
-let NLDDButton = class extends LitElement {
+let NLDDButton = class extends withTranslations(LitElement, nlddButtonTranslations) {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -2404,9 +2542,9 @@ function isTouchMode() {
   return getInputModality() === "touch";
 }
 var __defProp$1q = Object.defineProperty;
-var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1o = Object.getOwnPropertyDescriptor;
 var __decorateClass$1r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1n(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1o(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;
@@ -2689,7 +2827,9 @@ function renderContent(component) {
 	`;
 }
 function template$l() {
-  const label = this.accessibleLabel || this.text || nothing;
+  const opensInNewTabHint = this.href && this.target === "_blank" ? this._t("components.icon-button.opens-in-new-tab-text") : "";
+  const baseLabel = this.accessibleLabel || this.text || "";
+  const label = [baseLabel, opensInNewTabHint].filter(Boolean).join(", ") || nothing;
   const content = renderContent(this);
   const tooltipText = this.accessibleLabel || (this.size !== "lg" || this.hideLgText ? this.text : "");
   const isDisclosure = this.expandable || !!this.popupType;
@@ -2748,17 +2888,20 @@ function template$l() {
 		` : renderButton();
   return html`${control}${loadingIndicator}`;
 }
+const nlddIconButtonTranslations = {
+  "components.icon-button.opens-in-new-tab-text": "Opent in nieuw tabblad"
+};
 var __defProp$1p = Object.defineProperty;
-var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
 var __decorateClass$1q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1m(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1n(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$1p(target, key, result);
   return result;
 };
-let NLDDIconButton = class extends LitElement {
+let NLDDIconButton = class extends withTranslations(LitElement, nlddIconButtonTranslations) {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -3769,9 +3912,9 @@ function VisibilityMixin(Base, containerName) {
   return WithVisibility;
 }
 var __defProp$1n = Object.defineProperty;
-var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
 var __decorateClass$1o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1l(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1m(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;
@@ -3859,9 +4002,9 @@ const spacerCellStyles = css`
 	}
 `;
 var __defProp$1m = Object.defineProperty;
-var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
 var __decorateClass$1n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1k(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1l(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;
@@ -4106,9 +4249,9 @@ function template$i() {
 	`;
 }
 var __defProp$1l = Object.defineProperty;
-var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
 var __decorateClass$1m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1j(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1k(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;
@@ -4420,9 +4563,9 @@ function detectOS() {
   return cached;
 }
 var __defProp$1k = Object.defineProperty;
-var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
 var __decorateClass$1l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1i(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1j(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;
@@ -4706,9 +4849,9 @@ function template$g() {
 	`;
 }
 var __defProp$1j = Object.defineProperty;
-var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
 var __decorateClass$1k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1h(target, key) : target;
+  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;
@@ -4758,9 +4901,9 @@ NLDDButtonGroup = __decorateClass$1k([
   customElement("nldd-button-group")
 ], NLDDButtonGroup);
 var __defProp$1i = Object.defineProperty;
-var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
 var __decorateClass$1j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1g(target, key) : target;
+  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;
@@ -4803,8 +4946,10 @@ let NLDDInlineDialog = class extends LitElement {
     };
     contentSlot?.addEventListener("slotchange", syncContent);
     actionsSlot?.addEventListener("slotchange", syncActions);
-    syncContent();
-    syncActions();
+    queueMicrotask(() => {
+      syncContent();
+      syncActions();
+    });
   }
   render() {
     return inlineDialogTemplate(this);
@@ -6173,9 +6318,9 @@ if (!customElements.get("nldd-menu")) {
   customElements.define("nldd-menu", NLDDMenu);
 }
 var __defProp$1g = Object.defineProperty;
-var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
 var __decorateClass$1h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1f(target, key) : target;
+  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;
@@ -6431,9 +6576,9 @@ function renderChild(child) {
   return html`<slot name="child-${child.id}"></slot>`;
 }
 var __defProp$1f = Object.defineProperty;
-var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
 var __decorateClass$1g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1e(target, key) : target;
+  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;
@@ -6920,9 +7065,9 @@ const nlddToolbarTranslations = {
   "components.toolbar.overflow-action": "Meer"
 };
 var __defProp$1e = Object.defineProperty;
-var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
 var __decorateClass$1f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1d(target, key) : target;
+  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;
@@ -8016,9 +8161,9 @@ const nlddImageTranslations = {
   "components.image.error-text": "Afbeelding is niet geladen"
 };
 var __defProp$1d = Object.defineProperty;
-var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
 var __decorateClass$1e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(target, key) : target;
+  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;
@@ -8224,9 +8369,9 @@ const nlddRichTextTranslations = {
   "components.rich-text.table-scroll-label": "Scrollbare tabel"
 };
 var __defProp$1c = Object.defineProperty;
-var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
 var __decorateClass$1d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(target, key) : target;
+  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;
@@ -8558,9 +8703,9 @@ function titleTemplate() {
 	`;
 }
 var __defProp$1b = Object.defineProperty;
-var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
 var __decorateClass$1c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(target, key) : target;
+  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;
@@ -8690,9 +8835,9 @@ function template$d(component) {
 	`;
 }
 var __defProp$1a = Object.defineProperty;
-var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
 var __decorateClass$1b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(target, key) : target;
+  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;
@@ -8976,9 +9121,9 @@ function template$c(component) {
 	`;
 }
 var __defProp$19 = Object.defineProperty;
-var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
+  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;
@@ -10809,9 +10954,9 @@ function forceScrollLayerRepaint(el) {
   el.scrollTop = y;
 }
 var __defProp$18 = Object.defineProperty;
-var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
 var __decorateClass$19 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
+  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;
@@ -10823,17 +10968,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-hCHH5aho.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-zaF4YQWN.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-Bp-z7VUz.js").then((n) => n.p),
+  rust: () => import("./prism-rust-CxUpjfK5.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-Dtm_y95w.js").then((n) => n.p)
+  python: () => import("./prism-python-Tr_Ff1KJ.js").then((n) => n.p)
 };
 const grammarLoads = /* @__PURE__ */ new Map();
 function loadGrammar(language) {
@@ -11025,6 +11170,7 @@ const bylineStyles = css`
 		${inheritedTextReset}
 		container-type: inline-size;
 		display: block;
+		width: 100%;
 	}
 
 	:host([hidden]) {
@@ -11070,8 +11216,19 @@ const bylineStyles = css`
 		object-fit: cover !important;
 	}
 
+	.byline__avatar {
+		display: block;
+		margin-inline-start: calc(-1 * var(--_avatar-overlap-size));
+		border-radius: var(--_avatar-corner-radius);
+		box-shadow: 0 0 0 var(--_avatar-border-width) var(--_avatar-border-color);
+		width: var(--_avatar-size);
+		height: var(--_avatar-size);
+		object-fit: cover;
+	}
+
 	@media (forced-colors: active) {
-		.byline__avatars ::slotted(img) {
+		.byline__avatars ::slotted(img),
+		.byline__avatar {
 			border: var(--_avatar-border-width) solid Canvas !important;
 		}
 	}
@@ -11114,14 +11271,24 @@ const bylineStyles = css`
 function bylineTemplate(component) {
   const hasText = Boolean(component.text) || component._hasSlottedText;
   const hasSupportingText = Boolean(component.supportingText) || component._hasSlottedSupportingText;
+  const hasAvatars = component._hasSlottedAvatars || Boolean(component.avatarSrc);
+  const avatarImage = component.avatarSrc && !component._hasSlottedAvatars ? html`<img class="byline__avatar"
+				src=${component.avatarSrc}
+				srcset=${component.avatarSrcset || nothing}
+				sizes="40px"
+				alt=${component.avatarAlt}
+				loading="lazy"
+				decoding="async"
+			>` : nothing;
   return html`
 		<div class="byline"
 			?data-multiple-avatars=${component._avatarCount >= 2}
 		>
 			<div class="byline__avatars"
-				?hidden=${!component._hasSlottedAvatars}
+				?hidden=${!hasAvatars}
 			>
 				<slot name="avatars" @slotchange=${component._onSlotChange}></slot>
+				${avatarImage}
 			</div>
 			<div class="byline__text-area"
 				?hidden=${!hasText && !hasSupportingText}
@@ -11137,9 +11304,9 @@ function bylineTemplate(component) {
 	`;
 }
 var __defProp$17 = Object.defineProperty;
-var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
 var __decorateClass$18 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(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;
@@ -11151,6 +11318,9 @@ let NLDDByline = class extends LitElement {
     super(...arguments);
     this.text = "";
     this.supportingText = "";
+    this.avatarSrc = "";
+    this.avatarSrcset = "";
+    this.avatarAlt = "";
     this._hasSlottedAvatars = false;
     this._avatarCount = 0;
     this._hasSlottedText = false;
@@ -11176,6 +11346,15 @@ __decorateClass$18([
 __decorateClass$18([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDByline.prototype, "supportingText", 2);
+__decorateClass$18([
+  property({ type: String, attribute: "avatar-src" })
+], NLDDByline.prototype, "avatarSrc", 2);
+__decorateClass$18([
+  property({ type: String, attribute: "avatar-srcset" })
+], NLDDByline.prototype, "avatarSrcset", 2);
+__decorateClass$18([
+  property({ type: String, attribute: "avatar-alt" })
+], NLDDByline.prototype, "avatarAlt", 2);
 __decorateClass$18([
   state()
 ], NLDDByline.prototype, "_hasSlottedAvatars", 2);
@@ -11306,6 +11485,7 @@ const formActionsStyles = css`
 
 	:host {
 		display: block;
+		width: 100%;
 		container-type: inline-size;
 	}
 
@@ -11365,9 +11545,9 @@ function formActionsTemplate() {
 	`;
 }
 var __defProp$16 = Object.defineProperty;
-var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
 var __decorateClass$17 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(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;
@@ -11401,6 +11581,7 @@ const formFieldStyles = css`
 
 		${inheritedTextReset}
 		display: block;
+		width: 100%;
 		container-type: inline-size;
 	}
 
@@ -11720,9 +11901,9 @@ function formFieldErrorTextTemplate(_component) {
 	`;
 }
 var __defProp$15 = Object.defineProperty;
-var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
 var __decorateClass$16 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(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;
@@ -12219,9 +12400,9 @@ function textFieldTemplate(component) {
 	`;
 }
 var __defProp$14 = Object.defineProperty;
-var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
 var __decorateClass$15 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(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;
@@ -12575,9 +12756,9 @@ function multiLineTextFieldTemplate(component) {
 	`;
 }
 var __defProp$13 = Object.defineProperty;
-var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
 var __decorateClass$14 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(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;
@@ -12863,9 +13044,9 @@ function codeEditorTemplate(component) {
 	`;
 }
 var __defProp$12 = Object.defineProperty;
-var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
 var __decorateClass$13 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(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;
@@ -13237,9 +13418,9 @@ function passwordFieldTemplate(component) {
 	`;
 }
 var __defProp$11 = Object.defineProperty;
-var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
 var __decorateClass$12 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(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;
@@ -13599,9 +13780,9 @@ const nlddSearchFieldTranslations = {
   "components.search-field.search-action": "Zoek"
 };
 var __defProp$10 = Object.defineProperty;
-var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
 var __decorateClass$11 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(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;
@@ -13936,9 +14117,9 @@ const nlddNumberFieldTranslations = {
   "components.number-field.to-adjust-value-action": "Waarde aanpassen"
 };
 var __defProp$$ = Object.defineProperty;
-var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
 var __decorateClass$10 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(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;
@@ -14324,9 +14505,9 @@ function dropdownTemplate(component) {
 	`;
 }
 var __defProp$_ = Object.defineProperty;
-var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
 var __decorateClass$$ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(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;
@@ -14711,9 +14892,9 @@ const nlddComboBoxTranslations = {
   "components.combo-box.clear-action": "Wis invoer"
 };
 var __defProp$Z = Object.defineProperty;
-var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
 var __decorateClass$_ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(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;
@@ -15213,9 +15394,9 @@ const nlddStepperTranslations = {
   "components.stepper.to-adjust-value-action": "Aantal aanpassen"
 };
 var __defProp$Y = Object.defineProperty;
-var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
 var __decorateClass$Z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(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;
@@ -15477,9 +15658,9 @@ function checkboxTemplate(component) {
 	`;
 }
 var __defProp$X = Object.defineProperty;
-var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
 var __decorateClass$Y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(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;
@@ -15632,9 +15813,9 @@ function checkboxFieldTemplate(component) {
 	`;
 }
 var __defProp$W = Object.defineProperty;
-var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
 var __decorateClass$X = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(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;
@@ -15815,9 +15996,9 @@ function radioButtonTemplate(component) {
 	`;
 }
 var __defProp$V = Object.defineProperty;
-var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
 var __decorateClass$W = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(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;
@@ -15965,9 +16146,9 @@ function radioButtonFieldTemplate(component) {
 	`;
 }
 var __defProp$U = Object.defineProperty;
-var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
 var __decorateClass$V = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(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;
@@ -16054,9 +16235,9 @@ function radioButtonGroupTemplate(component) {
 	`;
 }
 var __defProp$T = Object.defineProperty;
-var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
 var __decorateClass$U = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(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;
@@ -16315,9 +16496,9 @@ function switchTemplate(component) {
 	`;
 }
 var __defProp$S = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
 var __decorateClass$T = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(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;
@@ -16516,9 +16697,9 @@ function switchFieldTemplate(component) {
 	`;
 }
 var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
 var __decorateClass$S = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(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;
@@ -16858,9 +17039,9 @@ function segmentedControlItemTemplate(component) {
   return label;
 }
 var __defProp$Q = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(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;
@@ -17420,9 +17601,9 @@ function toggleButtonTemplate(component) {
   return result;
 }
 var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(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;
@@ -17586,9 +17767,9 @@ function toggleButtonGroupTemplate(component) {
 	`;
 }
 var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
 var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(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;
@@ -17902,9 +18083,9 @@ function tokenTemplate(component) {
 	`;
 }
 var __defProp$N = Object.defineProperty;
-var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(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;
@@ -18016,9 +18197,9 @@ function appViewTemplate(_component) {
 	`;
 }
 var __defProp$M = Object.defineProperty;
-var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
 var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(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;
@@ -18231,9 +18412,9 @@ function splitViewDividerTemplate(component) {
 	`;
 }
 var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
 var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(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;
@@ -18284,9 +18465,9 @@ function barSplitViewTemplate(component) {
 	`;
 }
 var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
 var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(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;
@@ -18743,9 +18924,9 @@ function navigationSplitViewTemplate(component) {
 	`;
 }
 var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
 var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(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;
@@ -19133,9 +19314,9 @@ function sideBySideSplitViewTemplate(component) {
 	`;
 }
 var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(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;
@@ -19282,9 +19463,9 @@ function stackedSplitViewTemplate(component) {
 	`;
 }
 var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(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;
@@ -19417,9 +19598,9 @@ function splitViewPaneTemplate(_component) {
 	`;
 }
 var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(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;
@@ -19602,9 +19783,9 @@ function pageTemplate(component) {
 	`;
 }
 var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(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;
@@ -20082,9 +20263,9 @@ function simpleSectionTemplate(component) {
 	`;
 }
 var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(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;
@@ -20653,9 +20834,9 @@ function heroTemplate(component) {
 	`;
 }
 var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
 var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(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;
@@ -20869,9 +21050,9 @@ function fullBleedSectionTemplate(component) {
 	`;
 }
 var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(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;
@@ -21067,9 +21248,9 @@ function oneThirdTwoThirdsSectionTemplate(component) {
 	`;
 }
 var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(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;
@@ -21265,9 +21446,9 @@ function twoThirdsOneThirdSectionTemplate(component) {
 	`;
 }
 var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(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;
@@ -21454,9 +21635,9 @@ function oneHalfOneHalfSectionTemplate(component) {
 	`;
 }
 var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
 var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(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;
@@ -21560,9 +21741,9 @@ function boxTemplate(_component) {
 	`;
 }
 var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
 var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(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;
@@ -21676,9 +21857,9 @@ function cardTemplate(component) {
 	`;
 }
 var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
 var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(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;
@@ -21776,10 +21957,10 @@ const collectionStyles = css`
 	/* ## Horizontal scroll */
 
 	:host([layout="horizontal-scroll"]) .collection__items {
-		margin-inline-start: calc(var(--primitives-space-16) * -1);
+		margin-inline: calc(var(--primitives-space-16) * -1);
 		margin-block: calc(var(--primitives-space-16) * -1);
 		overflow-x: auto;
-		padding-inline-start: var(--primitives-space-16);
+		padding-inline: var(--primitives-space-16);
 		padding-block: var(--primitives-space-16);
 		flex-direction: row;
 		flex-wrap: nowrap;
@@ -21788,27 +21969,24 @@ const collectionStyles = css`
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: none;
 		scroll-padding-inline-start: var(--primitives-space-16);
+	}
+
+	:host([layout="horizontal-scroll"][scrollable]) .collection__items {
 		mask-image: linear-gradient(
 			to right,
 			transparent 0,
 			black var(--primitives-space-16),
-			black calc(100% - var(--primitives-space-48)),
+			black calc(100% - var(--primitives-space-16)),
 			transparent 100%
 		);
 	}
 
-	:host([layout="horizontal-scroll"]) .collection__items::after {
-		content: '';
-		flex-grow: 0;
-		flex-shrink: 0;
-		flex-basis: var(--primitives-space-48);
-	}
-
 	:host([layout="horizontal-scroll"]) .collection__items::-webkit-scrollbar {
 		display: none;
 	}
 
 	:host([layout="horizontal-scroll"]) .collection__items ::slotted(*) {
+		max-width: 100%;
 		flex-grow: 1;
 		flex-shrink: 0;
 		flex-basis: var(--_item-width);
@@ -21863,8 +22041,8 @@ const collectionStyles = css`
 function collectionTemplate(component) {
   const isHorizontal = component.layout === "horizontal-scroll";
   const showLoadMore = !isHorizontal && component.showLoadMore && component._hasMore;
-  const showFooter = isHorizontal || showLoadMore || component._hasFooterSlot;
   const scrollable = isHorizontal && component._isScrollable;
+  const showFooter = scrollable || showLoadMore || component._hasFooterSlot;
   return html`
 		<div class="collection__scroll-area">
 			<div class="collection__items"
@@ -21879,7 +22057,7 @@ function collectionTemplate(component) {
 			?hidden=${!showFooter}
 		>
 			<slot name="footer" @slotchange=${component._onFooterSlotChange}>
-				${isHorizontal ? html`
+				${scrollable ? html`
 					<nldd-button-bar>
 						<nldd-icon-button
 							icon="chevron-left"
@@ -21917,9 +22095,9 @@ const nlddCollectionTranslations = {
   "components.collection.region-label": "Collectie"
 };
 var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
 var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(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;
@@ -21989,6 +22167,7 @@ let NLDDCollection = class extends LitElement {
       this._intersectionObserver?.disconnect();
       this._intersectionObserver = void 0;
     }
+    this.toggleAttribute("scrollable", this.layout === "horizontal-scroll" && this._isScrollable);
   }
   _setupScrollListeners() {
     this._teardownScrollListeners();
@@ -22011,7 +22190,9 @@ let NLDDCollection = class extends LitElement {
     const slot = e.target;
     const items = slot.assignedElements();
     this._totalCount = items.length;
-    if (this.layout !== "horizontal-scroll") {
+    if (this.layout === "horizontal-scroll") {
+      this._scrollListener();
+    } else {
       this._applyVisibility(items);
     }
   }
@@ -22295,9 +22476,9 @@ const spacerStyles = css`
 	}
 `;
 var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
 var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(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;
@@ -22565,9 +22746,9 @@ function containerTemplate(component) {
   return html`<div class="container"><slot @slotchange=${component._onSlotChange}></slot></div>`;
 }
 var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(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;
@@ -22869,9 +23050,9 @@ function dividerTemplate(_component) {
 		<hr class="divider">
 	`;
 }
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(result) || result;
@@ -22981,9 +23162,9 @@ const nlddPopoverTranslations = {
   "components.popover.accessible-label": "Popover"
 };
 var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
 var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(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;
@@ -23580,9 +23761,9 @@ function sheetTemplate(component) {
 	`;
 }
 var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
 var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(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;
@@ -23818,9 +23999,9 @@ const nlddWindowTranslations = {
   "components.window.accessible-label": "Venster"
 };
 var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
 var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(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;
@@ -24147,12 +24328,17 @@ const pageFooterStyles = css`
 		container-type: inline-size;
 		display: block;
 		background-color: var(--components-page-footer-background-color);
+		width: 100%;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
+	:host([empty]) {
+		background-color: transparent;
+	}
+
 	.page-footer {
 		--_lintje-height: calc(var(--_lintje-width) / 2);
 
@@ -24179,6 +24365,10 @@ const pageFooterStyles = css`
 		}
 	}
 
+	:host([empty]) .page-footer {
+		min-height: var(--_lintje-height);
+	}
+
 	.page-footer::after {
 		content: '';
 		position: absolute;
@@ -24394,9 +24584,9 @@ const nlddPageFooterTranslations = {
   "components.page-footer.legal-bar-accessible-label": "Juridische links"
 };
 var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(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;
@@ -24488,8 +24678,6 @@ let NLDDPageFooter = class extends LitElement {
       if (name === "breadcrumbs") this._hasBreadcrumbs = hasContent;
       else if (name === "legal-bar") this._hasLegalBar = hasContent;
       else this._hasMain = hasContent;
-      const visibleCount = (this._hasBreadcrumbs ? 1 : 0) + (this._hasMain ? 1 : 0) + (this._hasLegalBar ? 1 : 0);
-      this.toggleAttribute("single-slot", visibleCount === 1);
     };
   }
   connectedCallback() {
@@ -24507,6 +24695,14 @@ let NLDDPageFooter = class extends LitElement {
       (n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? "") !== ""
     );
   }
+  // Reflect the visible-row count as host attributes for styling. Done here
+  // (not in the slotchange handler) so a fully empty footer — whose empty
+  // slots may never fire slotchange — still gets `empty` on first render.
+  updated() {
+    const visibleCount = (this._hasBreadcrumbs ? 1 : 0) + (this._hasMain ? 1 : 0) + (this._hasLegalBar ? 1 : 0);
+    this.toggleAttribute("single-slot", visibleCount === 1);
+    this.toggleAttribute("empty", visibleCount === 0);
+  }
   render() {
     return pageFooterTemplate(this);
   }
@@ -24539,6 +24735,7 @@ const listStyles = css`
 
 		display: block;
 		position: relative;
+		width: 100%;
 		isolation: isolate;
 	}
 
@@ -24694,15 +24891,16 @@ const nlddListTranslations = {
   "components.list.items-label-text": "Lijst",
   "components.list.navigation-label-text": "Navigatie",
   "components.list.empty-text": "Geen items",
+  "components.list.arrow-navigation-description-text": "Gebruik de pijltjestoetsen om door de lijst te navigeren.",
   "components.list.reorder-moved-text": "Item verplaatst naar positie {position}.",
   "components.list.reorder-dropped-text": "Item neergezet op positie {position}.",
   "components.list.reorder-no-change-text": "Item neergezet. Positie ongewijzigd.",
   "components.list.reorder-cancelled-text": "Slepen geannuleerd."
 };
 var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
 var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(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;
@@ -24716,6 +24914,7 @@ let NLDDList = class extends LitElement {
     this.type = "list";
     this.reorderable = false;
     this.noDividers = false;
+    this.arrowNavigation = false;
     this.emptyText = "";
     this.emptySupportingText = "";
     this.translations = {};
@@ -24731,6 +24930,16 @@ let NLDDList = class extends LitElement {
     this._cloneOffsetY = 0;
     this._listRect = null;
     this._itemsObserver = null;
+    this._rovingScheduled = false;
+    this._onFocusIn = (event) => {
+      if (!this._arrowNavActive) return;
+      const item = event.composedPath().find(
+        (el) => el instanceof Element && el.tagName.toLowerCase() === "nldd-list-item"
+      );
+      if (item && (item.href || item.button) && !item._rovingActive) {
+        this._setRovingActive(item);
+      }
+    };
     this._onPointerDown = (event) => {
       if (!this.reorderable || this.type !== "list") return;
       const path = event.composedPath();
@@ -24786,6 +24995,10 @@ let NLDDList = class extends LitElement {
       this._cancelDrag();
     };
     this._onKeyDown = (event) => {
+      if (this._arrowNavActive) {
+        this._onArrowNav(event);
+        return;
+      }
       if (!this.reorderable || this.type !== "list") return;
       if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
       const path = event.composedPath();
@@ -24824,6 +25037,7 @@ let NLDDList = class extends LitElement {
     });
     this._updateItems();
     this._updateEmpty();
+    this._warnArrowNav();
     const headerSlot = this.shadowRoot?.querySelector('slot[name="header"]');
     headerSlot?.addEventListener("slotchange", () => {
       this._hasHeader = headerSlot.assignedElements().length > 0;
@@ -24854,19 +25068,22 @@ let NLDDList = class extends LitElement {
     this.style.containerName = "cells-container";
     this.addEventListener("pointerdown", this._onPointerDown);
     this.addEventListener("keydown", this._onKeyDown);
+    this.addEventListener("focusin", this._onFocusIn);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this._onPointerDown);
     this.removeEventListener("keydown", this._onKeyDown);
+    this.removeEventListener("focusin", this._onFocusIn);
     this._itemsObserver?.disconnect();
     this._itemsObserver = null;
     this._cancelDrag();
   }
   updated(changed) {
-    if (changed.has("reorderable") || changed.has("type")) {
+    if (changed.has("reorderable") || changed.has("type") || changed.has("arrowNavigation")) {
       if (this.reorderable && this.type !== "list" && false) ;
       this._updateItems();
+      this._warnArrowNav();
     }
     if (changed.has("translations")) {
       this._mergedTranslations = { ...nlddListTranslations, ...this.translations };
@@ -24916,11 +25133,101 @@ let NLDDList = class extends LitElement {
         item.removeAttribute("reorderable");
       }
     });
+    this._updateRoving();
   }
   _updateEmpty() {
     const items = this._getItems();
     this._isEmpty = items.length === 0 || items.every((item) => item.hasAttribute("hidden"));
   }
+  // — Arrow navigation (roving tabindex) ————————————————————————————————————
+  /** Arrow-navigation is effective only when reorderable isn't already claiming
+   *  the arrow keys for drag-reorder (reorderable wins). The guard also checks
+   *  `type === 'list'` on purpose: reorderable is inert without it, so there is no
+   *  conflict to resolve. `arrow-navigation reorderable` without `type="list"`
+   *  therefore keeps arrow-nav active (reorderable does nothing), and
+   *  `_warnArrowNav` likewise only warns for the real reorderable-list conflict. */
+  get _arrowNavActive() {
+    return this.arrowNavigation && !(this.reorderable && this.type === "list");
+  }
+  /** Interactive, visible items — the roving stops. Non-interactive items (no
+   *  link/button) and hidden items are skipped. */
+  _getInteractiveItems() {
+    return this._getItems().filter(
+      (item) => !item.hasAttribute("hidden") && Boolean(item.href || item.button)
+    );
+  }
+  /** Push roving state onto the items, deferred to a microtask: _updateItems can
+   *  run inside the update lifecycle (firstUpdated/updated), and setting the
+   *  items' reactive state there would trip Lit's change-in-update warning.
+   *  Coalesced so repeated item updates schedule it only once. */
+  _updateRoving() {
+    if (this._rovingScheduled) return;
+    this._rovingScheduled = true;
+    queueMicrotask(() => {
+      this._rovingScheduled = false;
+      this._applyRoving();
+    });
+  }
+  /** Sets the arrow-navigation flag on all items and a single roving entry point
+   *  (keep the current one if still valid, else the selected item, else the first
+   *  interactive item). */
+  _applyRoving() {
+    const active = this._arrowNavActive;
+    const items = this._getItems();
+    items.forEach((item) => {
+      item._arrowNavigation = active;
+    });
+    if (active) {
+      this.setAttribute("aria-keyshortcuts", "ArrowUp ArrowDown Home End");
+      this.setAttribute("aria-description", this._t("components.list.arrow-navigation-description-text"));
+    } else {
+      this.removeAttribute("aria-keyshortcuts");
+      this.removeAttribute("aria-description");
+    }
+    if (!active) {
+      items.forEach((item) => {
+        item._rovingActive = false;
+      });
+      return;
+    }
+    const interactive = this._getInteractiveItems();
+    if (interactive.length === 0) return;
+    const entry = interactive.find((item) => item._rovingActive) ?? interactive.find((item) => item.selected) ?? interactive[0];
+    items.forEach((item) => {
+      item._rovingActive = item === entry;
+    });
+  }
+  // items defaults to all items; _onArrowNav passes the interactive set it already
+  // computed (non-interactive items are kept out of roving, so they stay false).
+  _setRovingActive(activeItem, items = this._getItems()) {
+    items.forEach((item) => {
+      item._rovingActive = item === activeItem;
+    });
+  }
+  _onArrowNav(event) {
+    const { key } = event;
+    if (key !== "ArrowUp" && key !== "ArrowDown" && key !== "Home" && key !== "End") return;
+    const items = this._getInteractiveItems();
+    if (items.length === 0) return;
+    const current = items.findIndex((item) => item._rovingActive);
+    let next;
+    if (key === "Home") {
+      next = 0;
+    } else if (key === "End") {
+      next = items.length - 1;
+    } else {
+      const dir = key === "ArrowDown" ? 1 : -1;
+      const base = current === -1 ? dir === 1 ? -1 : 0 : current;
+      next = (base + dir + items.length) % items.length;
+    }
+    event.preventDefault();
+    const target = items[next];
+    this._setRovingActive(target, items);
+    target.focus();
+  }
+  _warnArrowNav() {
+    return;
+  }
   _getDeepActiveElement() {
     let active = document.activeElement;
     while (active?.shadowRoot?.activeElement) {
@@ -25082,6 +25389,9 @@ __decorateClass$o([
 __decorateClass$o([
   property({ type: Boolean, reflect: true, attribute: "no-dividers" })
 ], NLDDList.prototype, "noDividers", 2);
+__decorateClass$o([
+  property({ type: Boolean, reflect: true, attribute: "arrow-navigation" })
+], NLDDList.prototype, "arrowNavigation", 2);
 __decorateClass$o([
   property({ type: String, attribute: "empty-text" })
 ], NLDDList.prototype, "emptyText", 2);
@@ -25203,7 +25513,7 @@ const listItemStyles = css`
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
-	.list-item__new-tab-hint {
+	.list-item__opens-in-new-tab-hint {
 		position: absolute;
 		margin: -1px;
 		border: 0;
@@ -25273,14 +25583,15 @@ const listItemStyles = css`
 	}
 
 	/* Press feedback — works on touch where :hover doesn't. Same visual as
-	   :hover (the gated mouse rule above) so it reads consistently across
-	   input modes. */
-	.list-item__action:active {
+	   :hover (the gated mouse rule above) so it reads consistently across input
+	   modes. JS-driven (.is-pressed) rather than :active so a touch that turns
+	   into a scroll clears the press (pointercancel) instead of flashing it. */
+	.list-item__action.is-pressed {
 		--_background-color: var(--components-list-item-is-hovered-background-color);
 		--context-cell-content-color: var(--components-list-item-is-hovered-content-color);
 	}
 
-	:host([selected]) .list-item__action:active {
+	:host([selected]) .list-item__action.is-pressed {
 		--_background-color: var(--components-list-item-is-highlighted-background-color);
 		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
 	}
@@ -25394,20 +25705,22 @@ const areas = (showStart, showEnd) => html`
 		</slot>
 	</div>
 `;
-const template$a = (button, href, target, rel, showStart, showEnd, newTabLabel) => {
+const template$a = (button, href, target, rel, showStart, showEnd, opensInNewTabLabel, rovingTabindex) => {
   if (href) {
     return html`<div class="list-item">
 			<a class="list-item__action"
 				href=${href}
 				target=${target ?? nothing}
 				rel=${rel ?? nothing}
-			>${areas(showStart, showEnd)}${newTabLabel ? html`<span class="list-item__new-tab-hint">${newTabLabel}</span>` : nothing}</a>
+				tabindex=${rovingTabindex ?? nothing}
+			>${areas(showStart, showEnd)}${opensInNewTabLabel ? html`<span class="list-item__opens-in-new-tab-hint">${opensInNewTabLabel}</span>` : nothing}</a>
 		</div>`;
   }
   if (button) {
     return html`<div class="list-item">
 			<button class="list-item__action"
 				type="button"
+				tabindex=${rovingTabindex ?? nothing}
 			>${areas(showStart, showEnd)}</button>
 		</div>`;
   }
@@ -25415,55 +25728,17 @@ const template$a = (button, href, target, rel, showStart, showEnd, newTabLabel)
 		${areas(showStart, showEnd)}
 	</div>`;
 };
-var __defProp$n = Object.defineProperty;
-var __decorateClass$n = (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$n(target, key, result);
-  return result;
-};
-function withTranslations(Base, defaults) {
-  class TranslationsMixin extends Base {
-    constructor() {
-      super(...arguments);
-      this.translations = {};
-      this._mergedTranslations = { ...defaults };
-    }
-    /** @internal */
-    _t(key, vars) {
-      let str = this._mergedTranslations[key] ?? String(key);
-      if (vars) {
-        for (const [k, v] of Object.entries(vars)) {
-          str = str.split(`{${k}}`).join(String(v));
-        }
-      }
-      return str;
-    }
-    willUpdate(changed) {
-      super.willUpdate(changed);
-      if (changed.has("translations")) {
-        this._mergedTranslations = { ...defaults, ...this.translations };
-      }
-    }
-  }
-  __decorateClass$n([
-    property({ type: Object })
-  ], TranslationsMixin.prototype, "translations");
-  return TranslationsMixin;
-}
 const nlddListItemTranslations = {
-  "components.list-item.opens-in-new-tab-label": "Opent in nieuw tabblad"
+  "components.list-item.opens-in-new-tab-text": "Opent in nieuw tabblad"
 };
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(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$m(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTranslations) {
@@ -25476,6 +25751,8 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
     this._showStart = false;
     this._showEnd = false;
     this._parentType = "list";
+    this._arrowNavigation = false;
+    this._rovingActive = false;
     this._isBoxed = false;
     this._listObserver = null;
     this._handleClick = () => {
@@ -25487,6 +25764,13 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
     this._handleFocusOut = () => {
       this._action?.classList.remove("is-pointer-focus");
     };
+    this._onPointerDown = (e) => {
+      if (e.button > 0) return;
+      this._action?.classList.add("is-pressed");
+    };
+    this._clearPressed = () => {
+      this._action?.classList.remove("is-pressed");
+    };
   }
   connectedCallback() {
     super.connectedCallback();
@@ -25495,6 +25779,9 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
     this.addEventListener("focusin", this._handleFocusIn);
     this.addEventListener("focusout", this._handleFocusOut);
     this.addEventListener("click", this._handleClick);
+    this.addEventListener("pointerdown", this._onPointerDown);
+    this.addEventListener("pointerup", this._clearPressed);
+    this.addEventListener("pointercancel", this._clearPressed);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -25503,6 +25790,9 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
     this.removeEventListener("focusin", this._handleFocusIn);
     this.removeEventListener("focusout", this._handleFocusOut);
     this.removeEventListener("click", this._handleClick);
+    this.removeEventListener("pointerdown", this._onPointerDown);
+    this.removeEventListener("pointerup", this._clearPressed);
+    this.removeEventListener("pointercancel", this._clearPressed);
   }
   firstUpdated() {
     if (this.hasAttribute("data-nldd-clone")) {
@@ -25580,7 +25870,8 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
     this._action?.focus(options);
   }
   render() {
-    const newTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-label") : void 0;
+    const opensInNewTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-text") : void 0;
+    const rovingTabindex = this._arrowNavigation ? this._rovingActive ? "0" : "-1" : void 0;
     return template$a(
       this.button,
       this.href,
@@ -25588,45 +25879,52 @@ let NLDDListItem = class extends withTranslations(LitElement, nlddListItemTransl
       this.rel,
       this._showStart,
       this._showEnd,
-      newTabLabel
+      opensInNewTabLabel,
+      rovingTabindex
     );
   }
 };
 NLDDListItem.styles = [listItemStyles];
-__decorateClass$m([
+__decorateClass$n([
   property({ reflect: true })
 ], NLDDListItem.prototype, "size", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "selected", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "button", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ reflect: true })
 ], NLDDListItem.prototype, "href", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ reflect: true })
 ], NLDDListItem.prototype, "target", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ reflect: true })
 ], NLDDListItem.prototype, "rel", 2);
-__decorateClass$m([
+__decorateClass$n([
   property({ type: Boolean, reflect: true })
 ], NLDDListItem.prototype, "reorderable", 2);
-__decorateClass$m([
+__decorateClass$n([
   state()
 ], NLDDListItem.prototype, "_showStart", 2);
-__decorateClass$m([
+__decorateClass$n([
   state()
 ], NLDDListItem.prototype, "_showEnd", 2);
-__decorateClass$m([
+__decorateClass$n([
   state()
 ], NLDDListItem.prototype, "_parentType", 2);
-__decorateClass$m([
+__decorateClass$n([
+  state()
+], NLDDListItem.prototype, "_arrowNavigation", 2);
+__decorateClass$n([
+  state()
+], NLDDListItem.prototype, "_rovingActive", 2);
+__decorateClass$n([
   query(".list-item__action")
 ], NLDDListItem.prototype, "_action", 2);
-NLDDListItem = __decorateClass$m([
+NLDDListItem = __decorateClass$n([
   customElement("nldd-list-item")
 ], NLDDListItem);
 const listItem = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -25787,14 +26085,14 @@ const nlddTableTranslations = {
   "components.table.accessible-label": "Tabel",
   "components.table.empty-text": "Geen items"
 };
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(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$l(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 const SM_MAX = parseInt(breakpoints.smMax, 10);
@@ -25937,37 +26235,37 @@ let NLDDTable = class extends LitElement {
   }
 };
 NLDDTable.styles = tableStyles;
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true })
 ], NLDDTable.prototype, "background", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true })
 ], NLDDTable.prototype, "columns", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true, attribute: "sm-columns" })
 ], NLDDTable.prototype, "smColumns", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true, attribute: "md-columns" })
 ], NLDDTable.prototype, "mdColumns", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true, attribute: "lg-columns" })
 ], NLDDTable.prototype, "lgColumns", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDTable.prototype, "accessibleLabel", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], NLDDTable.prototype, "selectable", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, attribute: "empty-text" })
 ], NLDDTable.prototype, "emptyText", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: String, attribute: "empty-supporting-text" })
 ], NLDDTable.prototype, "emptySupportingText", 2);
-__decorateClass$l([
+__decorateClass$m([
   property({ type: Object })
 ], NLDDTable.prototype, "translations", 2);
-NLDDTable = __decorateClass$l([
+NLDDTable = __decorateClass$m([
   customElement("nldd-table")
 ], NLDDTable);
 let NLDDTableRow = class extends LitElement {
@@ -26021,10 +26319,10 @@ let NLDDTableRow = class extends LitElement {
   }
 };
 NLDDTableRow.styles = tableRowStyles;
-__decorateClass$l([
+__decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], NLDDTableRow.prototype, "selected", 2);
-NLDDTableRow = __decorateClass$l([
+NLDDTableRow = __decorateClass$m([
   customElement("nldd-table-row")
 ], NLDDTableRow);
 const cellStyles = css`
@@ -26119,14 +26417,14 @@ const cellStyles = css`
 	}
 `;
 const template$9 = () => html`<slot></slot>`;
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(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$k(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 let NLDDCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26175,25 +26473,25 @@ let NLDDCell = class extends VisibilityMixin(LitElement, "cells-container") {
   }
 };
 NLDDCell.styles = [cellStyles];
-__decorateClass$k([
+__decorateClass$l([
   property({ type: String, reflect: true })
 ], NLDDCell.prototype, "width", 2);
-__decorateClass$k([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDCell.prototype, "minWidth", 2);
-__decorateClass$k([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDCell.prototype, "maxWidth", 2);
-__decorateClass$k([
+__decorateClass$l([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDCell.prototype, "minHeight", 2);
-__decorateClass$k([
+__decorateClass$l([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDCell.prototype, "verticalAlignment", 2);
-__decorateClass$k([
+__decorateClass$l([
   property({ reflect: true, attribute: "horizontal-alignment" })
 ], NLDDCell.prototype, "horizontalAlignment", 2);
-NLDDCell = __decorateClass$k([
+NLDDCell = __decorateClass$l([
   customElement("nldd-cell")
 ], NLDDCell);
 const titleCellStyles = css`
@@ -26420,14 +26718,14 @@ const template$8 = function() {
 		</p>
 	`;
 };
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(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$j(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 let NLDDTitleCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26507,58 +26805,58 @@ let NLDDTitleCell = class extends VisibilityMixin(LitElement, "cells-container")
   }
 };
 NLDDTitleCell.styles = [titleCellStyles];
-__decorateClass$j([
+__decorateClass$k([
   property({ type: Number, reflect: true })
 ], NLDDTitleCell.prototype, "size", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "color", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "width", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDTitleCell.prototype, "minWidth", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDTitleCell.prototype, "maxWidth", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDTitleCell.prototype, "minHeight", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "horizontal-alignment" })
 ], NLDDTitleCell.prototype, "horizontalAlignment", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "vertical-alignment" })
 ], NLDDTitleCell.prototype, "verticalAlignment", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String })
 ], NLDDTitleCell.prototype, "text", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String })
 ], NLDDTitleCell.prototype, "overline", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTitleCell.prototype, "supportingText", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: Number, attribute: "heading-level" })
 ], NLDDTitleCell.prototype, "headingLevel", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String })
 ], NLDDTitleCell.prototype, "query", 2);
-__decorateClass$j([
+__decorateClass$k([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTitleCell.prototype, "queryMarkMode", 2);
-__decorateClass$j([
+__decorateClass$k([
   state()
 ], NLDDTitleCell.prototype, "_hasOverlineSlotted", 2);
-__decorateClass$j([
+__decorateClass$k([
   state()
 ], NLDDTitleCell.prototype, "_hasDefaultSlotted", 2);
-__decorateClass$j([
+__decorateClass$k([
   state()
 ], NLDDTitleCell.prototype, "_hasSupportingTextSlotted", 2);
-NLDDTitleCell = __decorateClass$j([
+NLDDTitleCell = __decorateClass$k([
   customElement("nldd-title-cell")
 ], NLDDTitleCell);
 const descriptionCellStyles = css`
@@ -26670,14 +26968,14 @@ const template$7 = () => html`
 	<slot name="title"></slot>
 	<slot name="description"></slot>
 `;
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(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$i(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -26725,22 +27023,22 @@ let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "cells-conta
   }
 };
 NLDDDescriptionCell.styles = [descriptionCellStyles];
-__decorateClass$i([
+__decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDDescriptionCell.prototype, "width", 2);
-__decorateClass$i([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDDescriptionCell.prototype, "minWidth", 2);
-__decorateClass$i([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDDescriptionCell.prototype, "maxWidth", 2);
-__decorateClass$i([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDDescriptionCell.prototype, "minHeight", 2);
-__decorateClass$i([
+__decorateClass$j([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDDescriptionCell.prototype, "verticalAlignment", 2);
-NLDDDescriptionCell = __decorateClass$i([
+NLDDDescriptionCell = __decorateClass$j([
   customElement("nldd-description-cell")
 ], NLDDDescriptionCell);
 const dragHandleCellStyles = css`
@@ -26852,14 +27150,14 @@ function template$6(size2, label) {
 const nlddDragHandleCellTranslations = {
   "components.drag-handle-cell.label-text": "Sleepgreep, druk spatie of enter om te verplaatsen"
 };
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(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$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 let NLDDDragHandleCell = class extends LitElement {
@@ -26878,13 +27176,13 @@ let NLDDDragHandleCell = class extends LitElement {
   }
 };
 NLDDDragHandleCell.styles = dragHandleCellStyles;
-__decorateClass$h([
+__decorateClass$i([
   property({ type: String, reflect: true })
 ], NLDDDragHandleCell.prototype, "size", 2);
-__decorateClass$h([
+__decorateClass$i([
   property({ type: Object })
 ], NLDDDragHandleCell.prototype, "translations", 2);
-NLDDDragHandleCell = __decorateClass$h([
+NLDDDragHandleCell = __decorateClass$i([
   customElement("nldd-drag-handle-cell")
 ], NLDDDragHandleCell);
 const timelineTrackCellStyles = css`
@@ -26997,14 +27295,14 @@ function timelineTrackCellTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(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$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let NLDDTimelineTrackCell = class extends LitElement {
@@ -27018,13 +27316,13 @@ let NLDDTimelineTrackCell = class extends LitElement {
   }
 };
 NLDDTimelineTrackCell.styles = timelineTrackCellStyles;
-__decorateClass$g([
+__decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "step", 2);
-__decorateClass$g([
+__decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "child", 2);
-NLDDTimelineTrackCell = __decorateClass$g([
+NLDDTimelineTrackCell = __decorateClass$h([
   customElement("nldd-timeline-track-cell")
 ], NLDDTimelineTrackCell);
 const separatorStyles = css`
@@ -27208,14 +27506,14 @@ const nlddBreadcrumbsTranslations = {
   "components.breadcrumbs.accessible-label": "Kruimelpad",
   "components.breadcrumbs.show-all-levels": "Toon alle niveaus"
 };
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(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$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
@@ -27261,13 +27559,13 @@ const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
 };
 _NLDDBreadcrumbsItem.styles = breadcrumbsItemStyles;
 let NLDDBreadcrumbsItem = _NLDDBreadcrumbsItem;
-__decorateClass$f([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "href", 2);
-__decorateClass$f([
+__decorateClass$g([
   property({ type: Boolean, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "current", 2);
-__decorateClass$f([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "text", 2);
 if (!customElements.get("nldd-breadcrumbs-item")) {
@@ -27333,19 +27631,19 @@ let NLDDBreadcrumbs = class extends LitElement {
   }
 };
 NLDDBreadcrumbs.styles = breadcrumbsStyles;
-__decorateClass$f([
+__decorateClass$g([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDBreadcrumbs.prototype, "accessibleLabel", 2);
-__decorateClass$f([
+__decorateClass$g([
   property({ type: Boolean, reflect: true, attribute: "no-collapse" })
 ], NLDDBreadcrumbs.prototype, "noCollapse", 2);
-__decorateClass$f([
+__decorateClass$g([
   property({ type: Object })
 ], NLDDBreadcrumbs.prototype, "translations", 2);
-__decorateClass$f([
+__decorateClass$g([
   state()
 ], NLDDBreadcrumbs.prototype, "_collapsed", 2);
-NLDDBreadcrumbs = __decorateClass$f([
+NLDDBreadcrumbs = __decorateClass$g([
   customElement("nldd-breadcrumbs")
 ], NLDDBreadcrumbs);
 const menuBarStyles = css`
@@ -27661,14 +27959,14 @@ function template$4(component) {
 		<slot @slotchange=${component._onSlotChange}></slot>
 	`;
 }
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(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$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 let NLDDMenuBarItem = class extends LitElement {
@@ -27786,62 +28084,62 @@ let NLDDMenuBarItem = class extends LitElement {
   }
 };
 NLDDMenuBarItem.styles = menuBarItemStyles;
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDMenuBarItem.prototype, "text", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "current", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String, attribute: "current-type", reflect: true })
 ], NLDDMenuBarItem.prototype, "currentType", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String })
 ], NLDDMenuBarItem.prototype, "href", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDMenuBarItem.prototype, "icon", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "expandable", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, attribute: "icon-only", reflect: true })
 ], NLDDMenuBarItem.prototype, "iconOnly", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String, attribute: "content-priority", reflect: true })
 ], NLDDMenuBarItem.prototype, "contentPriority", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "compact", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "disabled", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDMenuBarItem.prototype, "accessibleLabel", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: String })
 ], NLDDMenuBarItem.prototype, "haspopup", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "expanded", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ attribute: false })
 ], NLDDMenuBarItem.prototype, "popoverTargetElement", 2);
-__decorateClass$e([
+__decorateClass$f([
   property({ attribute: false })
 ], NLDDMenuBarItem.prototype, "popoverTargetAction", 2);
-NLDDMenuBarItem = __decorateClass$e([
+NLDDMenuBarItem = __decorateClass$f([
   customElement("nldd-menu-bar-item")
 ], NLDDMenuBarItem);
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(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$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 let NLDDMenuBar = class extends withTranslations(LitElement, nlddMenuBarTranslations) {
@@ -28075,25 +28373,25 @@ let NLDDMenuBar = class extends withTranslations(LitElement, nlddMenuBarTranslat
   }
 };
 NLDDMenuBar.styles = menuBarStyles;
-__decorateClass$d([
+__decorateClass$e([
   property({ type: String, attribute: "overflow-text" })
 ], NLDDMenuBar.prototype, "overflowText", 2);
-__decorateClass$d([
+__decorateClass$e([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDMenuBar.prototype, "accessibleLabel", 2);
-__decorateClass$d([
+__decorateClass$e([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBar.prototype, "compact", 2);
-__decorateClass$d([
+__decorateClass$e([
   query("slot:not([name])")
 ], NLDDMenuBar.prototype, "_defaultSlot", 2);
-__decorateClass$d([
+__decorateClass$e([
   query(".menu-bar__overflow-button")
 ], NLDDMenuBar.prototype, "_overflowButton", 2);
-__decorateClass$d([
+__decorateClass$e([
   state()
 ], NLDDMenuBar.prototype, "_menuOpen", 2);
-NLDDMenuBar = __decorateClass$d([
+NLDDMenuBar = __decorateClass$e([
   customElement("nldd-menu-bar")
 ], NLDDMenuBar);
 const linkStyles = css`
@@ -28236,9 +28534,26 @@ const linkStyles = css`
 	:host([size="inherit"]) .link__end-icon {
 		top: 0.2em;
 	}
+
+	/* Visually-hidden "opens in new tab" announcement (target="_blank"); part of
+	   the link's accessible name but never shown. Standard visually-hidden recipe. */
+	.link__opens-in-new-tab-hint {
+		position: absolute;
+		margin: -1px;
+		border: 0;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
 `;
 function template$3(helpers) {
   const resolvedRel = this._resolvedRel();
+  const opensInNewTabHint = !this.disabled && this.href && this.target === "_blank" ? this._t("components.link.opens-in-new-tab-text") : "";
+  const ariaLabel = this.accessibleLabel ? [this.accessibleLabel, opensInNewTabHint].filter(Boolean).join(", ") : nothing;
+  const renderOpensInNewTabHint = !!opensInNewTabHint && !this.accessibleLabel;
   return html`
 		<a class="link"
 			href=${this.disabled ? nothing : this.href || nothing}
@@ -28247,7 +28562,7 @@ function template$3(helpers) {
 			target=${this.disabled ? nothing : this.target || nothing}
 			rel=${this.disabled ? nothing : resolvedRel || nothing}
 			aria-disabled=${this.disabled ? "true" : nothing}
-			aria-label=${this.accessibleLabel || nothing}
+			aria-label=${ariaLabel}
 			@click=${helpers.handleClick}
 		>
 			${this.startIcon ? html`
@@ -28257,20 +28572,24 @@ function template$3(helpers) {
 			${this.endIcon ? html`
 				<span class="link__end-icon"><nldd-icon name=${this.endIcon}></nldd-icon></span>
 			` : html`<slot name="end-icon"></slot>`}
+			${renderOpensInNewTabHint ? html`<span class="link__opens-in-new-tab-hint">${opensInNewTabHint}</span>` : nothing}
 		</a>
 	`;
 }
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+const nlddLinkTranslations = {
+  "components.link.opens-in-new-tab-text": "Opent in nieuw tabblad"
+};
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(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$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
-let NLDDLink = class extends LitElement {
+let NLDDLink = class extends withTranslations(LitElement, nlddLinkTranslations) {
   constructor() {
     super(...arguments);
     this.href = void 0;
@@ -28304,34 +28623,34 @@ let NLDDLink = class extends LitElement {
   }
 };
 NLDDLink.styles = linkStyles;
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "href", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String })
 ], NLDDLink.prototype, "target", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String })
 ], NLDDLink.prototype, "rel", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "size", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String })
 ], NLDDLink.prototype, "text", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String, attribute: "start-icon" })
 ], NLDDLink.prototype, "startIcon", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String, attribute: "end-icon" })
 ], NLDDLink.prototype, "endIcon", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDLink.prototype, "accessibleLabel", 2);
-__decorateClass$c([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDLink.prototype, "disabled", 2);
-NLDDLink = __decorateClass$c([
+NLDDLink = __decorateClass$d([
   customElement("nldd-link")
 ], NLDDLink);
 const skipLinkStyles = css`
@@ -28426,14 +28745,14 @@ function template$2(component) {
 const nlddSkipLinkTranslations = {
   "components.skip-link.action": "Sla over"
 };
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(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$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let NLDDSkipLink = class extends withTranslations(LitElement, nlddSkipLinkTranslations) {
@@ -28463,13 +28782,13 @@ let NLDDSkipLink = class extends withTranslations(LitElement, nlddSkipLinkTransl
   }
 };
 NLDDSkipLink.styles = skipLinkStyles;
-__decorateClass$b([
+__decorateClass$c([
   property({ type: String })
 ], NLDDSkipLink.prototype, "text", 2);
-__decorateClass$b([
+__decorateClass$c([
   property({ type: String })
 ], NLDDSkipLink.prototype, "href", 2);
-NLDDSkipLink = __decorateClass$b([
+NLDDSkipLink = __decorateClass$c([
   customElement("nldd-skip-link")
 ], NLDDSkipLink);
 const smMax = unsafeCSS(breakpoints.smMax);
@@ -28924,14 +29243,14 @@ const nlddTopNavigationBarTranslations = {
   "components.top-navigation-bar.utility-menu-bar-label": "Hulplinks",
   "components.top-navigation-bar.menu-sheet-dismiss-action": "Sluit"
 };
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(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$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNavigationBarTranslations) {
@@ -29288,46 +29607,46 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
   }
 };
 NLDDTopNavigationBar.styles = topNavigationBarStyles;
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "website-title" })
 ], NLDDTopNavigationBar.prototype, "websiteTitle", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: Boolean, attribute: "no-logo", reflect: true })
 ], NLDDTopNavigationBar.prototype, "noLogo", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "logo-title" })
 ], NLDDTopNavigationBar.prototype, "logoTitle", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "logo-subtitle" })
 ], NLDDTopNavigationBar.prototype, "logoSubtitle", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "logo-supporting-text-1" })
 ], NLDDTopNavigationBar.prototype, "logoSupportingText1", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "logo-supporting-text-2" })
 ], NLDDTopNavigationBar.prototype, "logoSupportingText2", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "logo-href" })
 ], NLDDTopNavigationBar.prototype, "logoHref", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "website-href" })
 ], NLDDTopNavigationBar.prototype, "websiteHref", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "back-href" })
 ], NLDDTopNavigationBar.prototype, "backHref", 2);
-__decorateClass$a([
+__decorateClass$b([
   property({ type: String, attribute: "back-text" })
 ], NLDDTopNavigationBar.prototype, "backText", 2);
-__decorateClass$a([
+__decorateClass$b([
   query(".top-navigation-bar__menu-button")
 ], NLDDTopNavigationBar.prototype, "_menuButton", 2);
-__decorateClass$a([
+__decorateClass$b([
   query('slot[name="global"]')
 ], NLDDTopNavigationBar.prototype, "_globalSlot", 2);
-__decorateClass$a([
+__decorateClass$b([
   query('slot[name="utility"]')
 ], NLDDTopNavigationBar.prototype, "_utilitySlot", 2);
-NLDDTopNavigationBar = __decorateClass$a([
+NLDDTopNavigationBar = __decorateClass$b([
   customElement("nldd-top-navigation-bar")
 ], NLDDTopNavigationBar);
 const topTitleBarStyles = css`
@@ -29523,14 +29842,14 @@ function topTitleBarTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(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$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let NLDDTopTitleBar = class extends LitElement {
@@ -29635,28 +29954,28 @@ let NLDDTopTitleBar = class extends LitElement {
   }
 };
 NLDDTopTitleBar.styles = topTitleBarStyles;
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String })
 ], NLDDTopTitleBar.prototype, "text", 2);
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTopTitleBar.prototype, "supportingText", 2);
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String, attribute: "collapse-anchor" })
 ], NLDDTopTitleBar.prototype, "collapseAnchor", 2);
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String, attribute: "back-text" })
 ], NLDDTopTitleBar.prototype, "backText", 2);
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String, attribute: "back-href" })
 ], NLDDTopTitleBar.prototype, "backHref", 2);
-__decorateClass$9([
+__decorateClass$a([
   property({ type: String, attribute: "dismiss-text" })
 ], NLDDTopTitleBar.prototype, "dismissText", 2);
-__decorateClass$9([
+__decorateClass$a([
   state()
 ], NLDDTopTitleBar.prototype, "_hasToolbarItems", 2);
-NLDDTopTitleBar = __decorateClass$9([
+NLDDTopTitleBar = __decorateClass$a([
   customElement("nldd-top-title-bar")
 ], NLDDTopTitleBar);
 const topTitleBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -29678,6 +29997,7 @@ const tabBarStyles = css`
 		${inheritedTextReset}
 		display: inline-block;
 		position: relative;
+		max-width: 100%;
 		isolation: isolate;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -29707,13 +30027,14 @@ const tabBarStyles = css`
 	}
 
 	.tab-bar__items {
-		display: flex;
+		display: grid;
 		position: relative;
 		border-radius: var(--semantics-controls-md-corner-radius);
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		flex-direction: row;
+		min-width: 0;
+		grid-auto-flow: column;
+		grid-auto-columns: auto;
 		align-items: center;
-		justify-content: center;
 		gap: var(--_gap);
 	}
 
@@ -29763,6 +30084,14 @@ const tabBarItemStyles = css`
 		display: none;
 	}
 
+	/* Text-bearing items may shrink (their grid track narrows below content) so the
+	 * text can truncate. Icon-only items keep min-width:auto, so their track floors
+	 * at the fixed touch-target size — an icon can't truncate. */
+	:host([variant="text"]),
+	:host([variant="icon-and-text"]) {
+		min-width: 0;
+	}
+
 
 	/* # Block */
 
@@ -29787,6 +30116,13 @@ const tabBarItemStyles = css`
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
+	/* Text-bearing items fill their (shrinkable) grid track so the text can
+	 * truncate; icon-only items keep their fixed square size. */
+	:host([variant="text"]) .tab-bar__item,
+	:host([variant="icon-and-text"]) .tab-bar__item {
+		width: 100%;
+	}
+
 	:host([variant="icon-and-text"]:not([size="lg"])) .tab-bar__item {
 		height: var(--semantics-controls-md-min-size);
 		padding: var(--primitives-space-8) var(--primitives-space-12);
@@ -29913,6 +30249,11 @@ const tabBarItemStyles = css`
 	.tab-bar__item-text {
 		position: relative;
 		z-index: var(--_z-index-content);
+		min-width: 0;
+		max-width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	:host([variant="icon-and-text"][size="lg"]) .tab-bar__item-text {
@@ -29997,14 +30338,14 @@ function tabBarItemTemplate(component) {
   }
   return result;
 }
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let NLDDTabBarItem = class extends LitElement {
@@ -30062,34 +30403,34 @@ let NLDDTabBarItem = class extends LitElement {
   }
 };
 NLDDTabBarItem.styles = tabBarItemStyles;
-__decorateClass$8([
+__decorateClass$9([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBarItem.prototype, "selected", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "href", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "_groupVariant", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "text", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String, reflect: true })
 ], NLDDTabBarItem.prototype, "icon", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String, reflect: true })
 ], NLDDTabBarItem.prototype, "size", 2);
-__decorateClass$8([
+__decorateClass$9([
   state()
 ], NLDDTabBarItem.prototype, "_hasIconSlot", 2);
-__decorateClass$8([
+__decorateClass$9([
   state()
 ], NLDDTabBarItem.prototype, "_navigation", 2);
-__decorateClass$8([
+__decorateClass$9([
   state()
 ], NLDDTabBarItem.prototype, "_isFallbackFocusable", 2);
-NLDDTabBarItem = __decorateClass$8([
+NLDDTabBarItem = __decorateClass$9([
   customElement("nldd-tab-bar-item")
 ], NLDDTabBarItem);
 let NLDDTabBar = class extends LitElement {
@@ -30103,10 +30444,12 @@ let NLDDTabBar = class extends LitElement {
     this._hasCustomLabel = false;
     this._handleItemSelect = (event) => {
       event.stopPropagation();
-      const items = this._getItems();
-      items.forEach((item) => {
-        item.selected = item === event.detail.item;
-      });
+      if (!this.navigation) {
+        const items = this._getItems();
+        items.forEach((item) => {
+          item.selected = item === event.detail.item;
+        });
+      }
       this.dispatchEvent(new CustomEvent("tabchange", {
         bubbles: true,
         composed: true,
@@ -30202,22 +30545,22 @@ let NLDDTabBar = class extends LitElement {
   }
 };
 NLDDTabBar.styles = tabBarStyles;
-__decorateClass$8([
+__decorateClass$9([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBar.prototype, "centered", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String, reflect: true })
 ], NLDDTabBar.prototype, "variant", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String, reflect: true })
 ], NLDDTabBar.prototype, "size", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBar.prototype, "navigation", 2);
-__decorateClass$8([
+__decorateClass$9([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDTabBar.prototype, "accessibleLabel", 2);
-NLDDTabBar = __decorateClass$8([
+NLDDTabBar = __decorateClass$9([
   customElement("nldd-tab-bar")
 ], NLDDTabBar);
 const documentTabBarStyles = css`
@@ -30243,6 +30586,7 @@ const documentTabBarStyles = css`
 		${inheritedTextReset}
 		display: block;
 		position: relative;
+		width: 100%;
 		isolation: isolate;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -30768,14 +31112,14 @@ const nlddDocumentTabBarTranslations = {
   "components.document-tab-bar.reorder-no-change-text": "Tabblad verplaatst. Positie ongewijzigd.",
   "components.document-tab-bar.reorder-cancelled-text": "Slepen geannuleerd."
 };
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 const DRAG_THRESHOLD = 5;
@@ -30834,37 +31178,37 @@ let NLDDDocumentTabBarItem = class extends LitElement {
 };
 NLDDDocumentTabBarItem.styles = documentTabBarItemStyles;
 NLDDDocumentTabBarItem._idCounter = 0;
-__decorateClass$7([
+__decorateClass$8([
   property({ type: Boolean, reflect: true })
 ], NLDDDocumentTabBarItem.prototype, "selected", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String, attribute: "text" })
 ], NLDDDocumentTabBarItem.prototype, "text", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDDocumentTabBarItem.prototype, "supportingText", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String, attribute: "short-text" })
 ], NLDDDocumentTabBarItem.prototype, "shortText", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String, attribute: "short-supporting-text" })
 ], NLDDDocumentTabBarItem.prototype, "shortSupportingText", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String })
 ], NLDDDocumentTabBarItem.prototype, "href", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_isShort", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_dismissButtonAccessibilityLabel", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_isFallbackFocusable", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_navigation", 2);
-NLDDDocumentTabBarItem = __decorateClass$7([
+NLDDDocumentTabBarItem = __decorateClass$8([
   customElement("nldd-document-tab-bar-item")
 ], NLDDDocumentTabBarItem);
 let NLDDDocumentTabBar = class extends withTranslations(LitElement, nlddDocumentTabBarTranslations) {
@@ -31427,19 +31771,19 @@ let NLDDDocumentTabBar = class extends withTranslations(LitElement, nlddDocument
 };
 NLDDDocumentTabBar.styles = documentTabBarStyles;
 NLDDDocumentTabBar._idCounter = 0;
-__decorateClass$7([
+__decorateClass$8([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDDocumentTabBar.prototype, "accessibleLabel", 2);
-__decorateClass$7([
+__decorateClass$8([
   property({ type: Boolean, reflect: true })
 ], NLDDDocumentTabBar.prototype, "navigation", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBar.prototype, "_overflowCount", 2);
-__decorateClass$7([
+__decorateClass$8([
   state()
 ], NLDDDocumentTabBar.prototype, "_menuOpen", 2);
-NLDDDocumentTabBar = __decorateClass$7([
+NLDDDocumentTabBar = __decorateClass$8([
   customElement("nldd-document-tab-bar")
 ], NLDDDocumentTabBar);
 const paginationStyles = css`
@@ -31845,14 +32189,14 @@ const nlddPaginationTranslations = {
   "components.pagination.page-action": "Ga naar pagina {page}",
   "components.pagination.go-to-page-label": "Ga naar pagina"
 };
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let NLDDPagination = class extends LitElement {
@@ -31939,25 +32283,25 @@ let NLDDPagination = class extends LitElement {
   }
 };
 NLDDPagination.styles = paginationStyles;
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Number, reflect: true })
 ], NLDDPagination.prototype, "current", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Number, reflect: true })
 ], NLDDPagination.prototype, "total", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Boolean, reflect: true })
 ], NLDDPagination.prototype, "disabled", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Boolean, reflect: true })
 ], NLDDPagination.prototype, "centered", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: String, attribute: "href-pattern" })
 ], NLDDPagination.prototype, "hrefPattern", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Object })
 ], NLDDPagination.prototype, "translations", 2);
-NLDDPagination = __decorateClass$6([
+NLDDPagination = __decorateClass$7([
   customElement("nldd-pagination")
 ], NLDDPagination);
 const mdMin = unsafeCSS(breakpoints.mdMin);
@@ -32076,14 +32420,14 @@ function modalDialogTemplate(component) {
 		</dialog>
 	`;
 }
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let NLDDModalDialog = class extends LitElement {
@@ -32148,22 +32492,22 @@ let NLDDModalDialog = class extends LitElement {
   }
 };
 NLDDModalDialog.styles = modalDialogStyles;
-__decorateClass$5([
+__decorateClass$6([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "variant", 2);
-__decorateClass$5([
+__decorateClass$6([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "icon", 2);
-__decorateClass$5([
+__decorateClass$6([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "text", 2);
-__decorateClass$5([
+__decorateClass$6([
   property({ type: String, reflect: true, attribute: "supporting-text" })
 ], NLDDModalDialog.prototype, "supportingText", 2);
-__decorateClass$5([
+__decorateClass$6([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDModalDialog.prototype, "accessibleLabel", 2);
-NLDDModalDialog = __decorateClass$5([
+NLDDModalDialog = __decorateClass$6([
   customElement("nldd-modal-dialog")
 ], NLDDModalDialog);
 const bannerStyles = css`
@@ -32374,14 +32718,14 @@ function bannerTemplate(component) {
 const nlddBannerTranslations = {
   "components.banner.dismiss-action": "Sluit"
 };
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 const DEFAULT_ICONS = {
@@ -32487,34 +32831,34 @@ let NLDDBanner = class extends LitElement {
   }
 };
 NLDDBanner.styles = bannerStyles;
-__decorateClass$4([
+__decorateClass$5([
   property({ type: String, reflect: true })
 ], NLDDBanner.prototype, "variant", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: String, reflect: true })
 ], NLDDBanner.prototype, "icon", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: String })
 ], NLDDBanner.prototype, "text", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDBanner.prototype, "supportingText", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: Number, reflect: true, attribute: "heading-level" })
 ], NLDDBanner.prototype, "headingLevel", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: Boolean, reflect: true })
 ], NLDDBanner.prototype, "dismissible", 2);
-__decorateClass$4([
+__decorateClass$5([
   property({ type: Object })
 ], NLDDBanner.prototype, "translations", 2);
-__decorateClass$4([
+__decorateClass$5([
   state()
 ], NLDDBanner.prototype, "_hasContent", 2);
-__decorateClass$4([
+__decorateClass$5([
   state()
 ], NLDDBanner.prototype, "_hasActions", 2);
-NLDDBanner = __decorateClass$4([
+NLDDBanner = __decorateClass$5([
   customElement("nldd-banner")
 ], NLDDBanner);
 const badgeStyles = css`
@@ -32781,14 +33125,14 @@ function template(component) {
 const nlddBadgeTranslations = {
   "components.badge.notification-text": "Notificatie"
 };
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$3(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations) {
@@ -32828,28 +33172,28 @@ let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations
   }
 };
 NLDDBadge.styles = badgeStyles;
-__decorateClass$3([
+__decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDBadge.prototype, "color", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDBadge.prototype, "size", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: String })
 ], NLDDBadge.prototype, "text", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: Number, reflect: true })
 ], NLDDBadge.prototype, "number", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: Number, reflect: true })
 ], NLDDBadge.prototype, "max", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: String })
 ], NLDDBadge.prototype, "icon", 2);
-__decorateClass$3([
+__decorateClass$4([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDBadge.prototype, "accessibleLabel", 2);
-NLDDBadge = __decorateClass$3([
+NLDDBadge = __decorateClass$4([
   customElement("nldd-badge")
 ], NLDDBadge);
 const progressBarStyles = css`
@@ -33293,14 +33637,14 @@ const nlddProgressBarTranslations = {
   "components.progress-bar.loading-text": "Aan het laden",
   "components.progress-bar.label-text": "Voortgang"
 };
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$2(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 const INDETERMINATE_TRANSITION_MS$1 = 300;
@@ -33333,22 +33677,22 @@ let NLDDProgressBarSegmentIndicator = class extends LitElement {
   }
 };
 NLDDProgressBarSegmentIndicator.styles = progressBarSegmentIndicatorStyles;
-__decorateClass$2([
+__decorateClass$3([
   property({ type: Number, reflect: true })
 ], NLDDProgressBarSegmentIndicator.prototype, "value", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBarSegmentIndicator.prototype, "color", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBarSegmentIndicator.prototype, "name", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true, attribute: "tooltip-text" })
 ], NLDDProgressBarSegmentIndicator.prototype, "tooltipText", 2);
-__decorateClass$2([
+__decorateClass$3([
   state()
 ], NLDDProgressBarSegmentIndicator.prototype, "_autoTooltipText", 2);
-NLDDProgressBarSegmentIndicator = __decorateClass$2([
+NLDDProgressBarSegmentIndicator = __decorateClass$3([
   customElement("nldd-progress-bar-segment-indicator")
 ], NLDDProgressBarSegmentIndicator);
 let NLDDProgressBar = class extends LitElement {
@@ -33559,52 +33903,52 @@ let NLDDProgressBar = class extends LitElement {
   }
 };
 NLDDProgressBar.styles = progressBarStyles;
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "mode", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: Number, reflect: true })
 ], NLDDProgressBar.prototype, "max", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: Number, reflect: true })
 ], NLDDProgressBar.prototype, "value", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "color", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "size", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "text", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true, attribute: "value-format" })
 ], NLDDProgressBar.prototype, "valueFormat", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true, attribute: "value-text" })
 ], NLDDProgressBar.prototype, "valueText", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true, attribute: "value-display" })
 ], NLDDProgressBar.prototype, "valueDisplay", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDProgressBar.prototype, "accessibleLabel", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: Boolean, reflect: true })
 ], NLDDProgressBar.prototype, "indeterminate", 2);
-__decorateClass$2([
+__decorateClass$3([
   property({ type: Object })
 ], NLDDProgressBar.prototype, "translations", 2);
-__decorateClass$2([
+__decorateClass$3([
   state()
 ], NLDDProgressBar.prototype, "_segmentIndicators", 2);
-__decorateClass$2([
+__decorateClass$3([
   state()
 ], NLDDProgressBar.prototype, "_indeterminateExiting", 2);
-__decorateClass$2([
+__decorateClass$3([
   state()
 ], NLDDProgressBar.prototype, "_indeterminateEntering", 2);
-NLDDProgressBar = __decorateClass$2([
+NLDDProgressBar = __decorateClass$3([
   customElement("nldd-progress-bar")
 ], NLDDProgressBar);
 const progressCircleStyles = css`
@@ -33993,14 +34337,14 @@ const nlddProgressCircleTranslations = {
   "components.progress-circle.loading-text": "Aan het laden",
   "components.progress-circle.label-text": "Voortgang"
 };
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$1(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 const INDETERMINATE_TRANSITION_MS = 300;
@@ -34016,16 +34360,16 @@ let NLDDProgressCircleSegmentIndicator = class extends LitElement {
   }
 };
 NLDDProgressCircleSegmentIndicator.styles = progressCircleSegmentIndicatorStyles;
-__decorateClass$1([
+__decorateClass$2([
   property({ type: Number, reflect: true })
 ], NLDDProgressCircleSegmentIndicator.prototype, "value", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircleSegmentIndicator.prototype, "color", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircleSegmentIndicator.prototype, "name", 2);
-NLDDProgressCircleSegmentIndicator = __decorateClass$1([
+NLDDProgressCircleSegmentIndicator = __decorateClass$2([
   customElement("nldd-progress-circle-segment-indicator")
 ], NLDDProgressCircleSegmentIndicator);
 let NLDDProgressCircle = class extends LitElement {
@@ -34287,55 +34631,55 @@ let NLDDProgressCircle = class extends LitElement {
 };
 NLDDProgressCircle.styles = progressCircleStyles;
 NLDDProgressCircle._idCounter = 0;
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "mode", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: Number, reflect: true })
 ], NLDDProgressCircle.prototype, "max", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: Number, reflect: true })
 ], NLDDProgressCircle.prototype, "value", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "color", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "size", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "text", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true, attribute: "value-format" })
 ], NLDDProgressCircle.prototype, "valueFormat", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true, attribute: "value-text" })
 ], NLDDProgressCircle.prototype, "valueText", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true, attribute: "value-display" })
 ], NLDDProgressCircle.prototype, "valueDisplay", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDProgressCircle.prototype, "accessibleLabel", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: Boolean, reflect: true })
 ], NLDDProgressCircle.prototype, "indeterminate", 2);
-__decorateClass$1([
+__decorateClass$2([
   property({ type: Object })
 ], NLDDProgressCircle.prototype, "translations", 2);
-__decorateClass$1([
+__decorateClass$2([
   state()
 ], NLDDProgressCircle.prototype, "_segmentIndicators", 2);
-__decorateClass$1([
+__decorateClass$2([
   state()
 ], NLDDProgressCircle.prototype, "_indeterminateExiting", 2);
-__decorateClass$1([
+__decorateClass$2([
   state()
 ], NLDDProgressCircle.prototype, "_indeterminateEntering", 2);
-__decorateClass$1([
+__decorateClass$2([
   state()
 ], NLDDProgressCircle.prototype, "_arcsAtZero", 2);
-NLDDProgressCircle = __decorateClass$1([
+NLDDProgressCircle = __decorateClass$2([
   customElement("nldd-progress-circle")
 ], NLDDProgressCircle);
 const statusBarStyles = css`
@@ -34507,27 +34851,29 @@ function statusBarTemplate(component) {
   }
   return html`<div class="status-bar">${content}</div>`;
 }
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 let NLDDStatusBar = class extends LitElement {
   constructor() {
-    super();
+    super(...arguments);
     this.variant = "neutral";
     this.text = "";
     this.href = "";
     this.target = "";
     this.rel = "";
     this.button = false;
-    const initialVariant = this.getAttribute("variant");
-    this._applyAriaForVariant(initialVariant ?? "neutral");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._applyAriaForVariant(this.variant);
   }
   /** @internal Auto-secure rel for new-tab links unless the consumer set one. */
   _resolvedRel() {
@@ -34552,29 +34898,790 @@ let NLDDStatusBar = class extends LitElement {
   }
 };
 NLDDStatusBar.styles = statusBarStyles;
-__decorateClass([
+__decorateClass$1([
   property({ type: String, reflect: true })
 ], NLDDStatusBar.prototype, "variant", 2);
-__decorateClass([
+__decorateClass$1([
   property({ type: String })
 ], NLDDStatusBar.prototype, "text", 2);
-__decorateClass([
+__decorateClass$1([
   property({ type: String })
 ], NLDDStatusBar.prototype, "href", 2);
-__decorateClass([
+__decorateClass$1([
   property({ type: String })
 ], NLDDStatusBar.prototype, "target", 2);
-__decorateClass([
+__decorateClass$1([
   property({ type: String })
 ], NLDDStatusBar.prototype, "rel", 2);
-__decorateClass([
+__decorateClass$1([
   property({ type: Boolean, reflect: true })
 ], NLDDStatusBar.prototype, "button", 2);
-NLDDStatusBar = __decorateClass([
+NLDDStatusBar = __decorateClass$1([
   customElement("nldd-status-bar")
 ], NLDDStatusBar);
+const justInTimeEducationStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_arrow-length: var(--primitives-space-64); /* JS overrides this with the arrow-length attribute when valid */
+		--_desired-arrow-length: max(var(--primitives-space-40), var(--_arrow-length));
+		--_no-arrow-gap: var(--primitives-space-16);
+		--_gap: min(var(--_desired-arrow-length), var(--_available-distance));
+		--_available-distance: 9999px; /* JS sets the px distance to the viewport/document edge; default = no clamp */
+		--_background-blur: var(--primitives-space-8);
+		--_background-z-index: -1;
+		--_corner-radius: var(--primitives-space-40);
+		--_text-width: var(--primitives-area-320);
+		--_min-text-width: var(--primitives-area-200);
+		--_dismiss-width: var(--semantics-controls-md-min-size);
+		--_main-width: var(--_text-width);
+		--_max-width: var(--_main-width);
+		--_show-duration: var(--primitives-transition-duration-fast);
+		--_hide-duration: var(--primitives-transition-duration-medium);
+		--_offset: 0; /* px, unitless — read by JS */
+		--_shift-padding: 8; /* px, unitless — read by JS */
+		--_main-padding: var(--primitives-space-16);
+		--_main-background-color: color-mix(in srgb, var(--semantics-surfaces-base-background-color) 90%, transparent);
+		--_text-color: var(--semantics-content-color);
+		--_text-font: var(--primitives-font-body-lg-bold-tight);
+		--_supporting-text-color: var(--semantics-content-color);
+		--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
+		--_arrow-color: var(--semantics-content-color);
+
+		${inheritedTextReset}
+		display: contents;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* no-arrow (consumer) or the auto-collapsed state (JS sets it when the gap would
+	 * fall below its minimum): drop to a small fixed gap, with no arrow drawn. */
+	:host([no-arrow]),
+	:host([data-arrow-collapsed]) {
+		--_gap: var(--_no-arrow-gap);
+	}
+
+	/* Horizontal placement: the arrow gap is horizontal here (unlike vertical), so
+	 * the container is the main plus the arrow length. (Vertical keeps the base
+	 * --_max-width = --_main-width.) */
+	:host([data-arrow-side="left"]),
+	:host([data-arrow-side="right"]) {
+		--_max-width: calc(var(--_main-width) + var(--_desired-arrow-length));
+	}
+
+	/* The dismiss button widens the main — it sits beside the text — for horizontal
+	 * placement only; vertical stacks it below. --_max-width follows via --_main-width. */
+	:host([dismissable][data-arrow-side="left"]),
+	:host([dismissable][data-arrow-side="right"]) {
+		--_main-width: calc(var(--_text-width) + var(--_dismiss-width));
+	}
+
+	/* Horizontal placement near a viewport edge: --_available-distance (JS) is the
+	 * distance to that edge. Reserve the main's width (--_main-width) so the arrow
+	 * gap absorbs the first shrink and falls to 0; the container cap then narrows
+	 * the main itself. Skipped for no-arrow, which keeps its fixed gap. */
+	:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="left"]),
+	:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="right"]) {
+		--_gap: clamp(0px, var(--_desired-arrow-length), calc(var(--_available-distance) - var(--_main-width)));
+	}
+
+
+	/* # Container */
+
+	/* Transparent top-layer wrapper. It carries the arrow gap as padding on the
+	 * side facing the control (so the arrow lives INSIDE the box and is never
+	 * clipped); the other sides keep a small margin for the blurred background.
+	 * pointer-events are off so clicks on the empty padding fall through to the
+	 * page (counted as "outside"). The whole thing fades as one on open/close;
+	 * the base rule holds the (slower) hide timing, :popover-open the show. */
+	.just-in-time-education {
+		box-sizing: border-box;
+		position: fixed;
+		opacity: 0;
+		margin: 0;
+		border: none;
+		background: none;
+		width: max-content;
+		max-width: var(--_max-width);
+		padding: var(--_background-blur);
+		pointer-events: none;
+		overflow: visible;
+		transition:
+			opacity var(--_hide-duration) ease,
+			display var(--_hide-duration) allow-discrete,
+			overlay var(--_hide-duration) allow-discrete;
+		/* Force a GPU layer so Safari paints the freshly-opened top-layer popover
+		 * (blurred background + SVG arrow) correctly instead of leaving it stale
+		 * until a manual resize. */
+		transform: translate3d(0, 0, 0);
+	}
+
+	/* Horizontal placement: never exceed the room to the viewport edge. Once the
+	 * arrow gap has shrunk to 0, this is what makes the main itself narrower. */
+	:host([data-arrow-side="left"]) .just-in-time-education,
+	:host([data-arrow-side="right"]) .just-in-time-education {
+		max-width: min(var(--_max-width), var(--_available-distance));
+	}
+
+
+	/* ## Arrow-side padding (only the side facing the control needs the gap) */
+
+	:host([data-arrow-side="bottom"]) .just-in-time-education {
+		padding-block-start: var(--_gap);
+	}
+
+	:host([data-arrow-side="top"]) .just-in-time-education {
+		padding-block-end: var(--_gap);
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education {
+		padding-inline-end: var(--_gap);
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education {
+		padding-inline-start: var(--_gap);
+	}
+
+
+	/* ## Fade */
+
+	.just-in-time-education:popover-open {
+		opacity: 1;
+		transition:
+			opacity var(--_show-duration) ease,
+			display var(--_show-duration) allow-discrete,
+			overlay var(--_show-duration) allow-discrete;
+	}
+
+	@starting-style {
+		.just-in-time-education:popover-open {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.just-in-time-education {
+			transition: none;
+		}
+	}
+
+
+	/* # Main */
+
+	.just-in-time-education__main {
+		box-sizing: border-box;
+		position: relative;
+		isolation: isolate;
+		pointer-events: auto;
+		padding: var(--_main-padding);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* The dismiss sits on the side away from the arrow: below the text for bottom,
+	 * above it for top, beside it (on the placement's own side) for left/right —
+	 * so the text always leans toward the control. */
+	:host([data-arrow-side="top"]) .just-in-time-education__main {
+		flex-direction: column-reverse;
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education__main {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education__main {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	/* Horizontal placement floor: as the room narrows the main (after the arrow
+	 * has collapsed), keep it usable at this minimum — the card overflows the
+	 * viewport edge rather than shrinking further. */
+	:host([data-arrow-side="left"]) .just-in-time-education__main,
+	:host([data-arrow-side="right"]) .just-in-time-education__main {
+		min-width: var(--_min-text-width);
+	}
+
+	/* ...plus the dismiss button when dismissable: it sits beside the text, so the
+	 * text keeps its 200px floor with the button next to it. */
+	:host([dismissable][data-arrow-side="left"]) .just-in-time-education__main,
+	:host([dismissable][data-arrow-side="right"]) .just-in-time-education__main {
+		min-width: calc(var(--_min-text-width) + var(--_dismiss-width));
+	}
+
+	/* Background lives on a blurred pseudo-element so its edges fade softly (no
+	 * hard border, no drop shadow). The radius is a local, free value because
+	 * this surface has a different function than the standard surfaces. The
+	 * element is grown by the blur radius so the solid centre still covers the
+	 * content after blurring. */
+	.just-in-time-education__main::before {
+		content: '';
+		position: absolute;
+		z-index: var(--_background-z-index);
+		inset: calc(-1 * var(--_background-blur));
+		border-radius: var(--_corner-radius);
+		background-color: var(--_main-background-color);
+		filter: blur(var(--_background-blur));
+		transform: translate3d(0, 0, 0);
+	}
+
+
+	/* ## Text */
+
+	.just-in-time-education__text-area {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education__text-area {
+		text-align: right;
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education__text-area {
+		text-align: left;
+	}
+
+	.just-in-time-education__text {
+		margin: 0;
+		color: var(--_text-color);
+		font: var(--_text-font);
+		font-style: italic;
+		text-wrap: pretty;
+	}
+
+	.just-in-time-education__supporting-text {
+		margin: 0;
+		color: var(--_supporting-text-color);
+		font: var(--_supporting-text-font);
+		font-style: italic;
+		text-wrap: pretty;
+	}
+
+
+	/* ## Dismiss button */
+
+	.just-in-time-education__dismiss-button {
+		display: flex;
+	}
+
+
+	/* # Arrow */
+
+	.just-in-time-education__arrow {
+		position: absolute;
+		pointer-events: none;
+		overflow: visible;
+		color: var(--_arrow-color);
+		transform: translate3d(0, 0, 0);
+	}
+
+	/* Auto-collapsed (gap below its minimum near an edge): hide the arrow; the gap
+	 * has already dropped to the small no-arrow value. */
+	:host([data-arrow-collapsed]) .just-in-time-education__arrow {
+		display: none;
+	}
+
+	.just-in-time-education__arrow-path {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: butt;
+		stroke-dasharray: 5 3;
+	}
+
+	.just-in-time-education__arrow-head {
+		fill: currentColor;
+	}
+
+
+	/* # Live-region announcer */
+
+	/* Visually hidden but present in the a11y tree, so the polite announcement set
+	 * on open reaches assistive tech without moving focus into the callout. */
+	.just-in-time-education__announcer {
+		position: absolute;
+		margin: -1px;
+		border: 0;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
+`;
+function justInTimeEducationTemplate(component) {
+  return html`
+		<slot
+			@slotchange=${component._handleSlotChange}
+			@focusin=${component._handleAdvisedInteraction}
+			@pointerdown=${component._handleAdvisedInteraction}
+		></slot>
+		<div class="just-in-time-education__announcer"
+			aria-live="polite"
+			aria-atomic="true"
+		></div>
+		<div class="just-in-time-education"
+			popover="manual"
+			role=${component.dismissable ? "dialog" : "region"}
+			tabindex=${component.dismissable ? "-1" : nothing}
+			aria-label=${component.text || component._t("components.just-in-time-education.accessible-label")}
+			@keydown=${component._handleCalloutKeydown}
+		>
+			<div class="just-in-time-education__main">
+				<div class="just-in-time-education__text-area">
+					${component.text ? html`
+						<p class="just-in-time-education__text">
+							${component.text}
+						</p>
+					` : nothing}
+					${component.supportingText ? html`
+						<p class="just-in-time-education__supporting-text">
+							${component.supportingText}
+						</p>
+					` : nothing}
+				</div>
+				${component.dismissable ? html`
+					<div class="just-in-time-education__dismiss-button">
+						<nldd-icon-button
+							icon="dismiss"
+							variant="neutral-transparent"
+							size="md"
+							accessible-label=${component._t("components.just-in-time-education.dismiss-action")}
+							@click=${component._handleDismiss}
+						></nldd-icon-button>
+					</div>
+				` : nothing}
+			</div>
+			${component.noArrow ? nothing : html`
+				<svg class="just-in-time-education__arrow"
+					aria-hidden="true"
+				>
+					<defs>
+						<marker
+							id=${component._arrowMarkerId}
+							markerWidth="10"
+							markerHeight="12"
+							refX="0"
+							refY="5.78"
+							orient="auto"
+							markerUnits="userSpaceOnUse"
+						>
+							<path class="just-in-time-education__arrow-head"
+								d="M0,0 L10,5.78 L0,11.55 Z"
+							></path>
+						</marker>
+					</defs>
+					<path class="just-in-time-education__arrow-path"
+						marker-end=${`url(#${component._arrowMarkerId})`}
+					></path>
+				</svg>
+			`}
+		</div>
+	`;
+}
+const nlddJustInTimeEducationTranslations = {
+  "components.just-in-time-education.accessible-label": "Uitleg",
+  "components.just-in-time-education.dismiss-action": "Sluit"
+};
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+let jiteCounter = 0;
+let NLDDJustInTimeEducation = class extends withTranslations(LitElement, nlddJustInTimeEducationTranslations) {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.text = "";
+    this.supportingText = "";
+    this.placement = "auto";
+    this.dismissable = false;
+    this.arrowLength = "";
+    this.noArrow = false;
+    this._cleanupAutoUpdate = null;
+    this._attachTimeout = null;
+    this._attributeObserver = null;
+    this._boundDocumentInteraction = (e) => this._handleDocumentInteraction(e);
+    this._resolvedSide = null;
+    this._lastViewportWidth = 0;
+    this._lastViewportHeight = 0;
+    this._arrowMarkerId = `nldd-jite-arrow-${++jiteCounter}`;
+  }
+  updated(changed) {
+    if (changed.has("arrowLength")) {
+      if (this.arrowLength && CSS.supports("width", this.arrowLength)) {
+        this.style.setProperty("--_arrow-length", this.arrowLength);
+      } else {
+        this.style.removeProperty("--_arrow-length");
+      }
+    }
+    if (changed.has("active")) {
+      if (this.active) this._open();
+      else this._closePopover();
+    } else if (this.active && (changed.has("placement") || changed.has("text") || changed.has("supportingText") || changed.has("arrowLength") || changed.has("noArrow"))) {
+      this._resolvedSide = null;
+      const control = this._getControl();
+      const container = this._containerEl;
+      if (control && container) this._updatePosition(control, container);
+    }
+  }
+  get _containerEl() {
+    return this.shadowRoot?.querySelector(".just-in-time-education") ?? null;
+  }
+  get _cardEl() {
+    return this.shadowRoot?.querySelector(".just-in-time-education__main") ?? null;
+  }
+  get _announcerEl() {
+    return this.shadowRoot?.querySelector(".just-in-time-education__announcer") ?? null;
+  }
+  _getControl() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const assigned = slot?.assignedElements({ flatten: true });
+    return assigned?.[0] ?? null;
+  }
+  _getControls() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    return slot?.assignedElements({ flatten: true }) ?? [];
+  }
+  /** Mirror one host attribute onto the slotted control(s) — or remove it —
+   *  unless the component owns that attribute. */
+  _forwardAttribute(name) {
+    if (NLDDJustInTimeEducation._ownAttributes.has(name)) return;
+    const present = this.hasAttribute(name);
+    const value = this.getAttribute(name) ?? "";
+    for (const control of this._getControls()) {
+      if (present) control.setAttribute(name, value);
+      else control.removeAttribute(name);
+    }
+  }
+  /** Forward every non-owned host attribute to the slotted control(s); run on
+   *  slotchange so a freshly slotted control catches up with what's already set. */
+  _handleSlotChange() {
+    for (const attr of Array.from(this.attributes)) this._forwardAttribute(attr.name);
+  }
+  _open() {
+    const container = this._containerEl;
+    if (!container) return;
+    if (!container.matches(":popover-open")) container.showPopover();
+    this._startPositioning();
+    const announcer = this._announcerEl;
+    if (announcer) announcer.textContent = [this.text, this.supportingText].filter(Boolean).join(". ");
+    if (!this.dismissable) return;
+    container.focus();
+    if (this._attachTimeout) clearTimeout(this._attachTimeout);
+    this._attachTimeout = setTimeout(() => {
+      this._attachTimeout = null;
+      if (!this.active) return;
+      document.addEventListener("click", this._boundDocumentInteraction, true);
+      document.addEventListener("keydown", this._boundDocumentInteraction, true);
+    }, 0);
+  }
+  _closePopover() {
+    const container = this._containerEl;
+    const focusWasInside = container?.matches(":focus-within") ?? false;
+    if (container?.matches(":popover-open")) container.hidePopover();
+    this._stopPositioning();
+    const announcer = this._announcerEl;
+    if (announcer) announcer.textContent = "";
+    if (focusWasInside) this._getControl()?.focus();
+    if (this._attachTimeout) {
+      clearTimeout(this._attachTimeout);
+      this._attachTimeout = null;
+    }
+    document.removeEventListener("click", this._boundDocumentInteraction, true);
+    document.removeEventListener("keydown", this._boundDocumentInteraction, true);
+  }
+  _startPositioning() {
+    const control = this._getControl();
+    const container = this._containerEl;
+    if (!control || !container) return;
+    this._stopPositioning();
+    this._cleanupAutoUpdate = autoUpdate(control, container, () => this._updatePosition(control, container));
+  }
+  _stopPositioning() {
+    this._cleanupAutoUpdate?.();
+    this._cleanupAutoUpdate = null;
+    this._resolvedSide = null;
+  }
+  async _updatePosition(control, container) {
+    const styles = getComputedStyle(this);
+    const off = parseInt(styles.getPropertyValue("--_offset"), 10);
+    const pad = parseInt(styles.getPropertyValue("--_shift-padding"), 10);
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (this._resolvedSide === null || viewportWidth !== this._lastViewportWidth || viewportHeight !== this._lastViewportHeight) {
+      this._resolvedSide = this._chooseSide(control);
+      this._lastViewportWidth = viewportWidth;
+      this._lastViewportHeight = viewportHeight;
+    }
+    const side = this._resolvedSide;
+    if (this.getAttribute("data-arrow-side") !== side) this.setAttribute("data-arrow-side", side);
+    const cardHeight = this._cardEl?.getBoundingClientRect().height ?? 0;
+    const controlRect = control.getBoundingClientRect();
+    let availableDistance = "9999px";
+    if (side === "top") {
+      availableDistance = `${Math.max(0, controlRect.top + window.scrollY - cardHeight)}px`;
+    } else if (side === "bottom") {
+      availableDistance = `${Math.max(0, document.documentElement.scrollHeight - (controlRect.bottom + window.scrollY) - cardHeight)}px`;
+    } else if (side === "left") {
+      availableDistance = `${Math.max(0, controlRect.left)}px`;
+    } else if (side === "right") {
+      availableDistance = `${Math.max(0, window.innerWidth - controlRect.right)}px`;
+    }
+    this.style.setProperty("--_available-distance", availableDistance);
+    const isVertical = side === "top" || side === "bottom";
+    const minArrow = parseFloat(styles.getPropertyValue("--primitives-space-40")) || 40;
+    let gapRoom = parseFloat(availableDistance);
+    if (!isVertical) {
+      const mainReserve = (parseFloat(styles.getPropertyValue("--_text-width")) || 320) + (this.dismissable ? parseFloat(styles.getPropertyValue("--_dismiss-width")) || 44 : 0);
+      gapRoom -= mainReserve;
+    }
+    const collapsed = !this.noArrow && gapRoom < minArrow;
+    this.toggleAttribute("data-arrow-collapsed", collapsed);
+    const { x, y } = await computePosition(control, container, {
+      placement: side,
+      strategy: "fixed",
+      middleware: isVertical ? [offset(off), shift({ padding: pad })] : [offset(off)]
+    });
+    container.style.left = `${x}px`;
+    container.style.top = `${y}px`;
+    this._updateArrow(control, container, side);
+  }
+  // Picks the side the callout sits on from the room around the control:
+  // horizontally against the viewport edges, vertically against the full
+  // document, so scrolling never changes the outcome (only a resize does). A
+  // fixed placement is honoured exactly; only 'auto' weighs the room and takes
+  // the side with the most of it (ties fall to 'bottom', the conventional spot).
+  _chooseSide(control) {
+    if (this.placement !== "auto") return this.placement;
+    const rect = control.getBoundingClientRect();
+    const documentHeight = document.documentElement.scrollHeight;
+    const room = {
+      top: rect.top + window.scrollY,
+      bottom: documentHeight - (rect.bottom + window.scrollY),
+      left: rect.left,
+      right: window.innerWidth - rect.right
+    };
+    let side = "bottom";
+    for (const candidate of ["top", "bottom", "left", "right"]) {
+      if (room[candidate] > room[side]) side = candidate;
+    }
+    return side;
+  }
+  // Draws a flowing cubic from the card edge to the control edge, inside the
+  // transparent (padded) container so it is never clipped. Runs on every
+  // reposition (autoUpdate) so the curve re-routes as things move.
+  _updateArrow(control, container, placement) {
+    const svg2 = this.shadowRoot?.querySelector(".just-in-time-education__arrow");
+    const path = this.shadowRoot?.querySelector(".just-in-time-education__arrow-path");
+    const card = this._cardEl;
+    if (!svg2 || !path || !card) return;
+    if (this.hasAttribute("data-arrow-collapsed")) return;
+    const containerRect = container.getBoundingClientRect();
+    const cardRect = card.getBoundingClientRect();
+    const controlRect = control.getBoundingClientRect();
+    const cardCenterX = cardRect.left + cardRect.width / 2;
+    const cardCenterY = cardRect.top + cardRect.height / 2;
+    const controlCenterX = controlRect.left + controlRect.width / 2;
+    const controlCenterY = controlRect.top + controlRect.height / 2;
+    const side = placement.split("-")[0];
+    const tipGap = 6;
+    const arrowLen = 10;
+    let sx, sy, tipX, tipY, dirX, dirY;
+    if (side === "top") {
+      sx = cardCenterX;
+      sy = cardRect.bottom;
+      tipX = controlCenterX;
+      tipY = controlRect.top - tipGap;
+      dirX = 0;
+      dirY = 1;
+    } else if (side === "bottom") {
+      sx = cardCenterX;
+      sy = cardRect.top;
+      tipX = controlCenterX;
+      tipY = controlRect.bottom + tipGap;
+      dirX = 0;
+      dirY = -1;
+    } else if (side === "left") {
+      sx = cardRect.right;
+      sy = cardCenterY;
+      tipX = controlRect.left - tipGap;
+      tipY = controlCenterY;
+      dirX = 1;
+      dirY = 0;
+    } else {
+      sx = cardRect.left;
+      sy = cardCenterY;
+      tipX = controlRect.right + tipGap;
+      tipY = controlCenterY;
+      dirX = -1;
+      dirY = 0;
+    }
+    const ex = tipX - arrowLen * dirX;
+    const ey = tipY - arrowLen * dirY;
+    const k = 0.25;
+    const dx = ex - sx;
+    const dy = ey - sy;
+    const vertical = side === "top" || side === "bottom";
+    const bulge = Math.min(Math.hypot(dx, dy) * 0.18, 9);
+    const mx = (sx + ex) / 2 + (vertical ? bulge : 0);
+    const my = (sy + ey) / 2 + (vertical ? 0 : bulge);
+    let c1x, c1y, c2x, c2y;
+    let c3x, c3y, c4x, c4y;
+    if (vertical) {
+      c1x = sx;
+      c1y = sy + dy * k;
+      c2x = mx;
+      c2y = my - dy * k;
+      c3x = mx;
+      c3y = my + dy * k;
+      c4x = ex;
+      c4y = ey - dy * k;
+    } else {
+      c1x = sx + dx * k;
+      c1y = sy;
+      c2x = mx - dx * k;
+      c2y = my;
+      c3x = mx + dx * k;
+      c3y = my;
+      c4x = ex - dx * k;
+      c4y = ey;
+    }
+    const margin = 4;
+    const xs = [sx, mx, ex, tipX, c1x, c2x, c3x, c4x];
+    const ys = [sy, my, ey, tipY, c1y, c2y, c3y, c4y];
+    const minX = Math.min(...xs) - margin;
+    const minY = Math.min(...ys) - margin;
+    const width = Math.max(...xs) + margin - minX;
+    const height = Math.max(...ys) + margin - minY;
+    svg2.style.left = `${minX - containerRect.left}px`;
+    svg2.style.top = `${minY - containerRect.top}px`;
+    svg2.setAttribute("width", `${width}`);
+    svg2.setAttribute("height", `${height}`);
+    svg2.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    path.setAttribute(
+      "d",
+      `M ${sx - minX} ${sy - minY} C ${c1x - minX} ${c1y - minY}, ${c2x - minX} ${c2y - minY}, ${mx - minX} ${my - minY} C ${c3x - minX} ${c3y - minY}, ${c4x - minX} ${c4y - minY}, ${ex - minX} ${ey - minY}`
+    );
+  }
+  /** Route 1: the advised interaction on the slotted control (only when
+   *  dismissable; otherwise the consumer drives completion via complete()).
+   *  A mouse click fires pointerdown then focusin, both landing here; the
+   *  !this.active guard makes the second call a no-op so 'completed' fires once. */
+  _handleAdvisedInteraction() {
+    if (!this.active || !this.dismissable) return;
+    this._close("completed");
+  }
+  /** Route 2: a click/keystroke outside the coach-mark (only when dismissable). */
+  _handleDocumentInteraction(e) {
+    if (!this.active || !this.dismissable) return;
+    if (e.composedPath().includes(this)) return;
+    this._close("ignored");
+  }
+  /** Route 3: the dismiss button. */
+  _handleDismiss() {
+    this._close("dismissed");
+  }
+  /** Escape while focus is inside the callout dismisses it (the ARIA non-modal
+   *  dialog expectation). The document capture listener (route 2) treats inside
+   *  events as not-outside and bails, so Escape is handled here. stopPropagation
+   *  keeps it from also closing an ancestor (e.g. a modal the coach-mark sits in). */
+  _handleCalloutKeydown(e) {
+    if (e.key !== "Escape" || !this.dismissable) return;
+    e.stopPropagation();
+    this._handleDismiss();
+  }
+  /** Programmatically mark the advised interaction as done (success close). */
+  complete() {
+    if (this.active) this._close("completed");
+  }
+  _close(reason) {
+    this.active = false;
+    this.dispatchEvent(new CustomEvent("nldd-close", {
+      detail: { reason },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._attributeObserver) {
+      this._attributeObserver = new MutationObserver((records) => {
+        for (const record of records) {
+          if (record.attributeName) this._forwardAttribute(record.attributeName);
+        }
+      });
+    }
+    this._attributeObserver.observe(this, { attributes: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._closePopover();
+    this._attributeObserver?.disconnect();
+  }
+  render() {
+    return justInTimeEducationTemplate(this);
+  }
+};
+NLDDJustInTimeEducation.styles = justInTimeEducationStyles;
+NLDDJustInTimeEducation._ownAttributes = /* @__PURE__ */ new Set([
+  "active",
+  "text",
+  "supporting-text",
+  "placement",
+  "dismissable",
+  "arrow-length",
+  "no-arrow",
+  "translations",
+  "data-arrow-side",
+  "data-arrow-collapsed",
+  "style",
+  "class",
+  "id",
+  "role",
+  "slot",
+  "hidden"
+]);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], NLDDJustInTimeEducation.prototype, "active", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], NLDDJustInTimeEducation.prototype, "text", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "supporting-text" })
+], NLDDJustInTimeEducation.prototype, "supportingText", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], NLDDJustInTimeEducation.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], NLDDJustInTimeEducation.prototype, "dismissable", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "arrow-length" })
+], NLDDJustInTimeEducation.prototype, "arrowLength", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "no-arrow" })
+], NLDDJustInTimeEducation.prototype, "noArrow", 2);
+NLDDJustInTimeEducation = __decorateClass([
+  customElement("nldd-just-in-time-education")
+], NLDDJustInTimeEducation);
 export {
-  NLDDPageFooter as $,
+  NLDDPage as $,
   NLDDDropdown as A,
   NLDDForm as B,
   NLDDFormActions as C,
@@ -34587,68 +35694,69 @@ export {
   NLDDIconCell as J,
   NLDDImage as K,
   NLDDInlineDialog as L,
-  NLDDKeyboardShortcut as M,
+  NLDDJustInTimeEducation as M,
   NLDDActivityIndicator as N,
-  NLDDLink as O,
-  NLDDList as P,
-  NLDDListItem as Q,
-  NLDDMenu as R,
-  NLDDMenuBar as S,
-  NLDDMenuBarItem as T,
-  NLDDModalDialog as U,
-  NLDDMultiLineTextField as V,
-  NLDDNavigationSplitView as W,
-  NLDDNumberField as X,
-  NLDDOneHalfOneHalfSection as Y,
-  NLDDOneThirdTwoThirdsSection as Z,
-  NLDDPage as _,
+  NLDDKeyboardShortcut as O,
+  NLDDLink as P,
+  NLDDList as Q,
+  NLDDListItem as R,
+  NLDDMenu as S,
+  NLDDMenuBar as T,
+  NLDDMenuBarItem as U,
+  NLDDModalDialog as V,
+  NLDDMultiLineTextField as W,
+  NLDDNavigationSplitView as X,
+  NLDDNumberField as Y,
+  NLDDOneHalfOneHalfSection as Z,
+  NLDDOneThirdTwoThirdsSection as _,
   NLDDAppView as a,
-  NLDDPageFooterLegalBar as a0,
-  NLDDPageFooterLegalBarItem as a1,
-  NLDDPagination as a2,
-  NLDDPasswordField as a3,
-  NLDDPopover as a4,
-  NLDDProgressBar as a5,
-  NLDDProgressBarSegmentIndicator as a6,
-  NLDDProgressCircle as a7,
-  NLDDProgressCircleSegmentIndicator as a8,
-  NLDDRadioButton as a9,
-  NLDDTitleCell as aA,
-  NLDDToggleButton as aB,
-  NLDDToggleButtonGroup as aC,
-  NLDDToken as aD,
-  NLDDToolbar as aE,
-  NLDDTooltip as aF,
-  NLDDTopNavigationBar as aG,
-  NLDDTopTitleBar as aH,
-  NLDDTwoThirdsOneThirdSection as aI,
-  NLDDWindow as aJ,
-  NLDDRadioButtonField as aa,
-  NLDDRadioButtonGroup as ab,
-  NLDDRichText as ac,
-  NLDDSearchField as ad,
-  NLDDSegmentedControl as ae,
-  NLDDSheet as af,
-  NLDDSideBySideSplitView as ag,
-  NLDDSimpleSection as ah,
-  NLDDSkipLink as ai,
-  NLDDSpacer as aj,
-  NLDDSpacerCell as ak,
-  NLDDSplitButton as al,
-  NLDDSplitViewPane as am,
-  NLDDStackedSplitView as an,
-  NLDDStatusBar as ao,
-  NLDDStepper as ap,
-  NLDDSwitch as aq,
-  NLDDSwitchField as ar,
-  NLDDTabBar as as,
-  NLDDTable as at,
-  NLDDTableRow as au,
-  NLDDTag as av,
-  NLDDTextCell as aw,
-  NLDDTextField as ax,
-  NLDDTimelineTrackCell as ay,
-  NLDDTitle as az,
+  NLDDPageFooter as a0,
+  NLDDPageFooterLegalBar as a1,
+  NLDDPageFooterLegalBarItem as a2,
+  NLDDPagination as a3,
+  NLDDPasswordField as a4,
+  NLDDPopover as a5,
+  NLDDProgressBar as a6,
+  NLDDProgressBarSegmentIndicator as a7,
+  NLDDProgressCircle as a8,
+  NLDDProgressCircleSegmentIndicator as a9,
+  NLDDTitle as aA,
+  NLDDTitleCell as aB,
+  NLDDToggleButton as aC,
+  NLDDToggleButtonGroup as aD,
+  NLDDToken as aE,
+  NLDDToolbar as aF,
+  NLDDTooltip as aG,
+  NLDDTopNavigationBar as aH,
+  NLDDTopTitleBar as aI,
+  NLDDTwoThirdsOneThirdSection as aJ,
+  NLDDWindow as aK,
+  NLDDRadioButton as aa,
+  NLDDRadioButtonField as ab,
+  NLDDRadioButtonGroup as ac,
+  NLDDRichText as ad,
+  NLDDSearchField as ae,
+  NLDDSegmentedControl as af,
+  NLDDSheet as ag,
+  NLDDSideBySideSplitView as ah,
+  NLDDSimpleSection as ai,
+  NLDDSkipLink as aj,
+  NLDDSpacer as ak,
+  NLDDSpacerCell as al,
+  NLDDSplitButton as am,
+  NLDDSplitViewPane as an,
+  NLDDStackedSplitView as ao,
+  NLDDStatusBar as ap,
+  NLDDStepper as aq,
+  NLDDSwitch as ar,
+  NLDDSwitchField as as,
+  NLDDTabBar as at,
+  NLDDTable as au,
+  NLDDTableRow as av,
+  NLDDTag as aw,
+  NLDDTextCell as ax,
+  NLDDTextField as ay,
+  NLDDTimelineTrackCell as az,
   NLDDBadge as b,
   NLDDBanner as c,
   NLDDBarSplitView as d,