@nldd/design-system 0.8.53 → 0.8.55

package/dist/components/{index-Cwro7Ee_.js → index-C3JellW2.js}

@@ -2,10 +2,10 @@ var _a, _b, _c;
 import { css, nothing, html, LitElement, unsafeCSS, svg } from "lit";
 import { property, state, customElement, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { classMap } from "lit/directives/class-map.js";
 import { computePosition, offset, flip, shift, autoUpdate, size } from "@floating-ui/dom";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeStatic, html as html$1 } from "lit/static-html.js";
 const slottedReset = css`
@@ -42,6 +42,7 @@ const buttonStyles = css`
 
 		${inheritedTextReset}
 		display: inline-block;
+		position: relative;
 		max-width: 100%;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -247,6 +248,11 @@ const buttonStyles = css`
 		color: var(--_is-active-content-color);
 	}
 
+	/* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
+	:host([loading]) .button {
+		cursor: default;
+	}
+
 	.button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
@@ -258,7 +264,8 @@ const buttonStyles = css`
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.button {
+		.button,
+		.button__content {
 			transition: none;
 		}
 	}
@@ -267,7 +274,32 @@ const buttonStyles = css`
 	/* # Elements */
 
 	.button__content {
-		display: contents;
+		display: inline-flex;
+		max-width: 100%;
+		min-width: 0;
+		align-items: center;
+		gap: var(--_gap);
+		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
+	}
+
+	/* Loading crossfades the content out (opacity, not visibility, so the button
+	   keeps its accessible name) while the indicator fades in. The content stays
+	   laid out, so the button keeps its width. */
+	:host([loading]) .button__content {
+		opacity: 0;
+	}
+
+	/* Wrapper overlaid on the control, positioned against the host (which is
+	   position:relative). It lives outside the <button>/<a> so the indicator's
+	   role="status" live region announces loading without joining the button's
+	   accessible name. The activity-indicator inside fills it and centres its
+	   circle, which inherits the content color via currentColor. */
+	.button__activity-indicator {
+		position: absolute;
+		inset: 0;
+		/* Re-establish the content color here: the indicator lives outside
+		   .button now, so its currentColor stroke can no longer inherit it. */
+		color: var(--_content-color);
 	}
 
 	::slotted(nldd-icon) {
@@ -327,6 +359,15 @@ function template$n(helpers) {
   const content = renderContent$1(this);
   const isDisclosure = this.expandable || !!this.popupType;
   const ariaExpanded = isDisclosure ? String(this.expanded) : this.expanded ? "true" : nothing;
+  const ariaBusy = this.loading ? "true" : nothing;
+  const loadingIndicator = this.loading ? html`
+			<div class="button__activity-indicator">
+				<nldd-activity-indicator
+					timing="instant"
+					size=${this.size === "xs" ? "16" : this.size === "sm" ? "20" : "24"}
+				></nldd-activity-indicator>
+			</div>
+		` : nothing;
   if (this.href) {
     const resolvedRel = this._resolvedRel();
     return html`
@@ -338,10 +379,12 @@ function template$n(helpers) {
 				aria-label=${this.accessibleLabel || nothing}
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
+				aria-busy=${ariaBusy}
 				@click=${helpers.handleClick}
 			>
 				${content}
 			</a>
+			${loadingIndicator}
 		`;
   }
   return html`
@@ -352,6 +395,7 @@ function template$n(helpers) {
 			aria-label=${this.accessibleLabel || nothing}
 			aria-haspopup=${this.popupType || nothing}
 			aria-expanded=${ariaExpanded}
+			aria-busy=${ariaBusy}
 			popovertarget=${this.popovertarget || nothing}
 			.popoverTargetElement=${this.popoverTargetElement}
 			.popoverTargetAction=${this.popoverTargetAction}
@@ -359,6 +403,7 @@ function template$n(helpers) {
 		>
 			${content}
 		</button>
+		${loadingIndicator}
 	`;
 }
 const iconStyles = css`
@@ -466,6 +511,9 @@ const aliases = {
   "notification": "bell",
   "notifications": "bell",
   "alarm": "bell",
+  // book
+  "guide": "book",
+  "read": "book",
   // bookmark-filled
   "bookmarked": "bookmark-filled",
   // books-vertical
@@ -574,6 +622,8 @@ const aliases = {
   // info-circle
   "info": "info-circle",
   "information": "info-circle",
+  // lightbulb
+  "idea": "lightbulb",
   // link
   "url": "link",
   "hyperlink": "link",
@@ -711,6 +761,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["arrow-up-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="m7 3.586 5.707 5.707-1.414 1.414L8 7.414V20H6V7.414l-3.293 3.293-1.414-1.414zM18 4v12.586l3.293-3.293 1.414 1.414L17 20.414l-5.707-5.707 1.414-1.414L16 16.586V4z"/>\n</svg>'],
   ["bell", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a4 4 0 0 1 3.92 3.2A7 7 0 0 1 19 11v2a3 3 0 0 0 2.02 2.84c.52.18.98.6.98 1.16a1 1 0 0 1-1 1h-5a4 4 0 0 1-8 0H3a1 1 0 0 1-1-1c0-.55.46-.98.98-1.16A3 3 0 0 0 5 13v-2a7 7 0 0 1 3.08-5.8A4 4 0 0 1 12 2m-2 16a2 2 0 1 0 4 0zm2-14a2.02 2.02 0 0 0-1.96 2.4A5 5 0 0 0 7 11v2c0 1.13-.37 2.16-1 3h12c-.63-.84-1-1.87-1-3v-2a5 5 0 0 0-3.04-4.6A2.03 2.03 0 0 0 12 4"/>\n</svg>'],
   ["bold", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a6 6 0 0 1 4.9 9.45A5.98 5.98 0 0 1 13 22H5V2zM9 18h4a2 2 0 1 0 0-4H9zm0-8h3a2 2 0 1 0 0-4H9z"/>\n</svg>'],
+  ["book", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M16.5 3C19.54 3 22 4.8 22 7v13.07c0 .7-1.08 1.07-1.65.66a6.6 6.6 0 0 0-7.61-.08 1.3 1.3 0 0 1-1.48 0 6.5 6.5 0 0 0-7.62.07c-.57.42-1.64.05-1.64-.65V7c0-2.2 2.46-4 5.5-4 1.86 0 3.5.67 4.5 1.7A6.3 6.3 0 0 1 16.5 3m-9 2C6.4 5 4 5.5 4 7v11.2c2.2-1 4.8-1 7 0V6.54A4.6 4.6 0 0 0 7.5 5m9 0c-1.43 0-2.54.55-3.5 1.54V18.2c2.2-1 4.8-1 7 0V7c0-1.5-2.4-2-3.5-2"/>\n</svg>'],
   ["bookmark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M17 5a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v13.65l3.05-2.61.21-.17a3 3 0 0 1 3.7.17L17 18.65zm2 15.83-.01.15a1 1 0 0 1-1.52.7l-.12-.1-4.7-4.02a1 1 0 0 0-1.3 0l-4.7 4.03a1 1 0 0 1-1.64-.6L5 20.82V5a3 3 0 0 1 3-3h8.15A3 3 0 0 1 19 5z"/>\n</svg>'],
   ["bookmark-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M5 5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v15.83a1 1 0 0 1-1.65.76l-4.7-4.03a1 1 0 0 0-1.3 0l-4.7 4.03A1 1 0 0 1 5 20.83z"/>\n</svg>'],
   ["books-vertical", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M6.5 17c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5z"/>\n	<path fill="currentColor" d="M13 1a2 2 0 0 1 2 2v2.92q.2-.07.4-.1l1.97-.36a2 2 0 0 1 2.31 1.63l2.13 12.05a2.07 2.07 0 0 1-1.62 2.32l-1.97.35a2.07 2.07 0 0 1-2.32-1.62l-.9-5.12V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h4V3c0-1.1.9-2 2-2zM4 20h4V7H4zm6 0h3V3h-3zm5.75-12.22 2.12 12.06 1.97-.35-2.13-12.06z"/>\n</svg>'],
@@ -805,6 +856,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["info-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M13 17.5h-2v-7h2zm-1-11A1.25 1.25 0 1 1 12 9a1.25 1.25 0 0 1 0-2.5"/>\n	<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/>\n</svg>'],
   ["info-circle-filled", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m-1 16h2v-8h-2zm1-12a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 12 6"/>\n</svg>'],
   ["italic", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M18 4h-2.821l-4.287 16H14v2H6v-2h2.821l4.287-16H10V2h8z"/>\n</svg>'],
+  ["lightbulb", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M15 20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2zm0-2a.5.5 0 0 1 0 1H9a.5.5 0 0 1 0-1zM12 2a7 7 0 0 1 4.6 12.27c-.36.32-.6.76-.6 1.25 0 .82-.66 1.48-1.48 1.48H9.48C8.66 17 8 16.36 8 15.52c0-.43-.19-.82-.48-1.13l-.13-.12A7 7 0 0 1 12 2m0 2a5 5 0 0 0-3.3 8.76c.6.53 1.12 1.3 1.26 2.24h4.08c.14-.94.65-1.71 1.25-2.24A5 5 0 0 0 12 4"/>\n</svg>'],
   ["link", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M14.47 9.53a5 5 0 0 1 0 7.07l-3.36 3.35a5 5 0 0 1-7.06-7.06l3.13-3.14c-.18.9-.15 1.85.09 2.74l-1.63 1.63a3 3 0 0 0 4.24 4.24l3.18-3.18a3 3 0 0 0-1.8-5.1 2 2 0 0 1 .39-.55l1.12-1.12q.94.36 1.7 1.12"/>\n	<path fill="currentColor" d="M19.78 4.22a5 5 0 0 1 0 7.07l-2.96 2.96c.18-.9.15-1.85-.09-2.74l1.63-1.63a3 3 0 1 0-4.24-4.24l-3.18 3.18a3 3 0 0 0 1.8 5.1 2 2 0 0 1-.39.56l-1.12 1.11a4.98 4.98 0 0 1-1.88-8l3.36-3.37a5 5 0 0 1 7.07 0"/>\n</svg>'],
   ["list", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M2 5h20v2H2zm0 6h20v2H2zm0 6h20v2H2z"/>\n</svg>'],
   ["list-arrow-down", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" d="M3 5h11v2H3zm16 0v10.586l2.293-2.293 1.414 1.414L18 19.414l-4.707-4.707 1.414-1.414L17 15.586V5zM3 11h9v2H3zm0 6h9v2H3z"/>\n</svg>'],
@@ -856,14 +908,14 @@ const iconRegistry = /* @__PURE__ */ new Map([
   ["trash", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n	<path fill="currentColor" fill-rule="evenodd" d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h5v2h-1.08L19 19.046A3 3 0 0 1 16 22H8a3 3 0 0 1-3-2.954L4.08 8H3V6h5zM6.087 8l.91 10.917L7 19a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l.003-.083L17.914 8zM14 6h-4V4h4zm-3 4v8H9v-8zm4 0v8h-2v-8z"/>\n</svg>'],
   ["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$1p = Object.defineProperty;
-var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
-var __decorateClass$1q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1m(target, key) : target;
+var __defProp$1q = Object.defineProperty;
+var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
+var __decorateClass$1r = (decorators, target, key, kind) => {
+  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);
+  if (kind && result) __defProp$1q(target, key, result);
   return result;
 };
 [
@@ -903,21 +955,308 @@ let NLDDIcon = class extends LitElement {
   }
 };
 NLDDIcon.styles = iconStyles;
-__decorateClass$1q([
+__decorateClass$1r([
   property({ type: String })
 ], NLDDIcon.prototype, "name", 2);
-__decorateClass$1q([
+__decorateClass$1r([
   property({ type: String, reflect: true })
 ], NLDDIcon.prototype, "size", 2);
-__decorateClass$1q([
+__decorateClass$1r([
   property({ type: String, reflect: true })
 ], NLDDIcon.prototype, "color", 2);
-__decorateClass$1q([
+__decorateClass$1r([
   state()
 ], NLDDIcon.prototype, "_iconSvg", 2);
-NLDDIcon = __decorateClass$1q([
+NLDDIcon = __decorateClass$1r([
   customElement("nldd-icon")
 ], NLDDIcon);
+const activityIndicatorStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_circle-size: var(--primitives-space-32);
+		--_track-opacity: 0.25;
+		--_stroke-width: 2;
+		--_rotation-duration: 0.8s;
+		--_fade-duration: var(--primitives-transition-duration-slow);
+		--_fade-easing: ease-out;
+		--_pulse-duration: 2s;
+		--_pulse-easing: ease-in-out;
+		--_max-width: var(--primitives-area-240);
+		--_gap: var(--primitives-space-4);
+		--_text-font: var(--primitives-font-body-sm-regular-flat);
+
+		${inheritedTextReset}
+		box-sizing: border-box;
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: auto;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Sizes (icon scale) */
+
+	:host([size="16"]) { --_circle-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_circle-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_circle-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_circle-size: var(--primitives-space-28); }
+	:host([size="32"]) { --_circle-size: var(--primitives-space-32); }
+	:host([size="40"]) { --_circle-size: var(--primitives-space-40); }
+	:host([size="44"]) { --_circle-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_circle-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_circle-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_circle-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_circle-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_circle-size: var(--primitives-space-96); }
+
+
+	/* # Block
+	   Fades the indicator in once it becomes visible (both timing modes), and
+	   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 {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: var(--_max-width);
+		align-items: center;
+		gap: var(--_gap);
+		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+	}
+
+	@keyframes activity-indicator-fade-in {
+		from { opacity: 0; }
+	}
+
+	/* display:contents so the default circle + label (or a slotted override)
+	   are direct flex items of the block. */
+	slot {
+		display: contents;
+	}
+
+
+	/* # Elements */
+
+	/* The whole SVG (stroke included) scales with the size, like an icon. */
+	.activity-indicator__circle {
+		display: block;
+		width: var(--_circle-size);
+		height: var(--_circle-size);
+	}
+
+	.activity-indicator__track {
+		opacity: var(--_track-opacity);
+		stroke: currentColor;
+		stroke-width: var(--_stroke-width);
+	}
+
+	/* Rotate only the arc inside the SVG (around the view-box centre via
+	   transform-origin) rather than the whole <svg> element — rotating the
+	   element visibly wobbles when it sits at a sub-pixel position (next to a
+	   label, or overlaid on a button). Mirrors nldd-progress-circle. */
+	.activity-indicator__indicator {
+		stroke: currentColor;
+		stroke-width: var(--_stroke-width);
+		stroke-linecap: round;
+		stroke-dasharray: 25 100;
+		transform-origin: 50% 50%;
+		animation: activity-indicator-rotate var(--_rotation-duration) linear infinite;
+	}
+
+	@keyframes activity-indicator-rotate {
+		to { transform: rotate(360deg); }
+	}
+
+	.activity-indicator__text {
+		color: currentColor;
+		font: var(--_text-font);
+		text-align: center;
+	}
+
+	/* show-text off (default): the label still renders as the announced
+	   content of the role="status" host, but is visually hidden.
+	   Standard visually-hidden recipe. */
+	.activity-indicator__text--visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		.activity-indicator {
+			animation: none;
+		}
+
+		.activity-indicator__indicator {
+			/* Drop the rotation (vestibular safety); keep the 25 / 100 arc and
+			   pulse its opacity instead, mirroring nldd-progress-circle. */
+			animation: activity-indicator-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;
+		}
+
+		@keyframes activity-indicator-pulse {
+			0%, 100% { opacity: 0.3; }
+			50% { opacity: 0.7; }
+		}
+	}
+`;
+function activityIndicatorTemplate(component) {
+  if (!component._visible || component.complete) return nothing;
+  const text = component._accessibleName;
+  return html`
+		<div class="activity-indicator">
+			<slot>
+				<svg class="activity-indicator__circle"
+					viewBox="0 0 24 24"
+					fill="none"
+					aria-hidden="true"
+					focusable="false"
+				>
+					<circle class="activity-indicator__track"
+						cx="12"
+						cy="12"
+						r="9"
+					></circle>
+					<circle class="activity-indicator__indicator"
+						cx="12"
+						cy="12"
+						r="9"
+						pathLength="100"
+					></circle>
+				</svg>
+				<span class=${classMap({
+    "activity-indicator__text": true,
+    "activity-indicator__text--visually-hidden": !component.showText
+  })}>${text}</span>
+			</slot>
+		</div>
+	`;
+}
+const nlddActivityIndicatorTranslations = {
+  "components.activity-indicator.loading-text": "Laden"
+};
+var __defProp$1p = Object.defineProperty;
+var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
+var __decorateClass$1q = (decorators, target, key, kind) => {
+  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;
+  if (kind && result) __defProp$1p(target, key, result);
+  return result;
+};
+const DELAY_MS = 1e3;
+let NLDDActivityIndicator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "32";
+    this.showText = false;
+    this.text = "";
+    this.timing = "default";
+    this.complete = false;
+    this.translations = {};
+    this._visible = false;
+  }
+  _t(key) {
+    return this.translations[key] ?? nlddActivityIndicatorTranslations[key];
+  }
+  /** Accessible name announced while loading. */
+  get _accessibleName() {
+    return this.text || this._t("components.activity-indicator.loading-text");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._syncAria();
+    this._visible = this.timing === "instant";
+    if (!this._visible && !this.complete) this._scheduleDelay();
+  }
+  willUpdate(changed) {
+    if (changed.has("complete")) {
+      this._syncAria();
+    }
+    if (changed.has("timing")) {
+      this._clearDelay();
+      if (this.timing === "instant") {
+        this._visible = true;
+      } else if (!this._visible && !this.complete) {
+        this._scheduleDelay();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearDelay();
+  }
+  _clearDelay() {
+    if (this._delayTimeout) {
+      clearTimeout(this._delayTimeout);
+      this._delayTimeout = void 0;
+    }
+  }
+  _scheduleDelay() {
+    this._delayTimeout = setTimeout(() => {
+      this._visible = true;
+      this._delayTimeout = void 0;
+    }, DELAY_MS);
+  }
+  /** A polite live region (role="status") while loading; cleared when
+   *  complete. The announced text is the visually-hidden label rendered by
+   *  the template — not an aria-label, and without aria-busy, since a busy
+   *  live region would defer the very announcement we want. */
+  _syncAria() {
+    if (this.complete) {
+      this.removeAttribute("role");
+    } else {
+      this.setAttribute("role", "status");
+    }
+  }
+  render() {
+    return activityIndicatorTemplate(this);
+  }
+};
+NLDDActivityIndicator.styles = activityIndicatorStyles;
+__decorateClass$1q([
+  property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "size", 2);
+__decorateClass$1q([
+  property({ type: Boolean, reflect: true, attribute: "show-text" })
+], NLDDActivityIndicator.prototype, "showText", 2);
+__decorateClass$1q([
+  property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "text", 2);
+__decorateClass$1q([
+  property({ type: String, reflect: true })
+], NLDDActivityIndicator.prototype, "timing", 2);
+__decorateClass$1q([
+  property({ type: Boolean, reflect: true })
+], NLDDActivityIndicator.prototype, "complete", 2);
+__decorateClass$1q([
+  property({ type: Object })
+], NLDDActivityIndicator.prototype, "translations", 2);
+__decorateClass$1q([
+  state()
+], NLDDActivityIndicator.prototype, "_visible", 2);
+NLDDActivityIndicator = __decorateClass$1q([
+  customElement("nldd-activity-indicator")
+], NLDDActivityIndicator);
 var __defProp$1o = Object.defineProperty;
 var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
 var __decorateClass$1p = (decorators, target, key, kind) => {
@@ -941,6 +1280,7 @@ let NLDDButton = class extends LitElement {
     this.popovertarget = void 0;
     this.popoverTargetElement = null;
     this.popoverTargetAction = "toggle";
+    this.loading = false;
     this.disabled = false;
     this.text = "";
     this.singleLine = false;
@@ -970,7 +1310,7 @@ let NLDDButton = class extends LitElement {
     }
   }
   _handleClick(e) {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -1030,6 +1370,9 @@ __decorateClass$1p([
 __decorateClass$1p([
   property({ attribute: false })
 ], NLDDButton.prototype, "popoverTargetAction", 2);
+__decorateClass$1p([
+  property({ type: Boolean, reflect: true })
+], NLDDButton.prototype, "loading", 2);
 __decorateClass$1p([
   property({ type: Boolean, reflect: true })
 ], NLDDButton.prototype, "disabled", 2);
@@ -1084,6 +1427,7 @@ const iconButtonStyles = css`
 
 		${inheritedTextReset}
 		display: inline-block;
+		position: relative;
 		max-width: 100%;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -1276,7 +1620,9 @@ const iconButtonStyles = css`
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.icon-button {
+		.icon-button,
+		.icon-button__icon-area,
+		.icon-button__text {
 			transition: none;
 		}
 	}
@@ -1303,6 +1649,11 @@ const iconButtonStyles = css`
 		color: var(--_is-active-content-color);
 	}
 
+	/* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
+	:host([loading]) .icon-button {
+		cursor: default;
+	}
+
 
 	/* # Elements */
 
@@ -1311,6 +1662,14 @@ const iconButtonStyles = css`
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
+		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
+	}
+
+	/* Loading crossfades the content out (opacity, not visibility, so the control
+	   keeps its accessible name) while the indicator fades in. The content stays
+	   laid out, so the control keeps its size. */
+	:host([loading]) .icon-button__icon-area {
+		opacity: 0;
 	}
 
 	.icon-button__icon {
@@ -1336,6 +1695,24 @@ const iconButtonStyles = css`
 		color: inherit;
 		font: var(--_text-font);
 		white-space: nowrap;
+		transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
+	}
+
+	:host([loading]) .icon-button__text {
+		opacity: 0;
+	}
+
+	/* Wrapper overlaid on the control, positioned against the host (which is
+	   position:relative). It lives outside the <button>/<a> and the tooltip
+	   wrapper so the indicator's role="status" live region works reliably. The
+	   activity-indicator inside fills it and centres its circle, which inherits
+	   the content color via currentColor. */
+	.icon-button__activity-indicator {
+		position: absolute;
+		inset: 0;
+		/* Re-establish the content color here: the indicator lives outside
+		   .icon-button now, so its currentColor stroke can no longer inherit it. */
+		color: var(--_content-color);
 	}
 `;
 const tooltipStyles = css`
@@ -1759,6 +2136,16 @@ function template$l() {
   const tooltipText = this.accessibleLabel || (this.size !== "lg" ? this.text : "");
   const isDisclosure = this.expandable || !!this.popupType;
   const ariaExpanded = isDisclosure ? String(this.expanded) : this.expanded ? "true" : nothing;
+  const ariaBusy = this.loading ? "true" : nothing;
+  const loadingSize = this.size === "xs" ? "16" : this.size === "sm" ? "20" : this.size === "lg" ? "28" : "24";
+  const loadingIndicator = this.loading ? html`
+			<div class="icon-button__activity-indicator">
+				<nldd-activity-indicator
+					timing="instant"
+					size=${loadingSize}
+				></nldd-activity-indicator>
+			</div>
+		` : nothing;
   const renderButton = () => {
     if (this.href) {
       const resolvedRel = this._resolvedRel();
@@ -1771,6 +2158,7 @@ function template$l() {
 					aria-label=${label}
 					aria-haspopup=${this.popupType || nothing}
 					aria-expanded=${ariaExpanded}
+					aria-busy=${ariaBusy}
 					@click=${this._handleClick}
 				>
 					${content}
@@ -1785,6 +2173,7 @@ function template$l() {
 				aria-label=${label}
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
+				aria-busy=${ariaBusy}
 				popovertarget=${this.popovertarget || nothing}
 				.popoverTargetElement=${this.popoverTargetElement}
 				.popoverTargetAction=${this.popoverTargetAction}
@@ -1794,14 +2183,12 @@ function template$l() {
 			</button>
 		`;
   };
-  if (tooltipText && this.tooltipTiming !== "never") {
-    return html`
+  const control = tooltipText && this.tooltipTiming !== "never" ? html`
 			<nldd-tooltip text=${tooltipText} timing=${this.tooltipTiming}>
 				${renderButton()}
 			</nldd-tooltip>
-		`;
-  }
-  return renderButton();
+		` : renderButton();
+  return html`${control}${loadingIndicator}`;
 }
 var __defProp$1m = Object.defineProperty;
 var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
@@ -1819,6 +2206,7 @@ let NLDDIconButton = class extends LitElement {
     this._internals = this.attachInternals();
     this.variant = "neutral-tinted";
     this.size = "md";
+    this.loading = false;
     this.disabled = false;
     this.type = "button";
     this.expandable = false;
@@ -1866,7 +2254,7 @@ let NLDDIconButton = class extends LitElement {
     return "";
   }
   _handleClick(e) {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -1894,6 +2282,9 @@ __decorateClass$1n([
 __decorateClass$1n([
   property({ type: String, reflect: true })
 ], NLDDIconButton.prototype, "size", 2);
+__decorateClass$1n([
+  property({ type: Boolean, reflect: true })
+], NLDDIconButton.prototype, "loading", 2);
 __decorateClass$1n([
   property({ type: Boolean, reflect: true })
 ], NLDDIconButton.prototype, "disabled", 2);
@@ -2103,7 +2494,7 @@ const menuStyles = css`
 		box-sizing: border-box;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--components-menu-box-shadow);
-		background: var(--semantics-surfaces-background-color);
+		background: var(--semantics-surfaces-base-background-color);
 		width: var(--_width);
 		padding: var(--_padding);
 		flex-direction: column;
@@ -2617,6 +3008,12 @@ function template$j() {
 		${this.icon ? html`<nldd-icon name=${this.icon}></nldd-icon>` : html`<slot></slot>`}
 	`;
 }
+const breakpoints = {
+  smMax: "640px",
+  mdMin: "641px",
+  mdMax: "1007px",
+  lgMin: "1008px"
+};
 var __defProp$1l = Object.defineProperty;
 var __decorateClass$1m = (decorators, target, key, kind) => {
   var result = void 0;
@@ -2626,6 +3023,18 @@ var __decorateClass$1m = (decorators, target, key, kind) => {
   if (result) __defProp$1l(target, key, result);
   return result;
 };
+function resolveHideBelow(value) {
+  if (value === "md") return breakpoints.smMax;
+  if (value === "lg") return breakpoints.mdMax;
+  if (value === "sm") return null;
+  return value;
+}
+function resolveHideAbove(value) {
+  if (value === "sm") return breakpoints.mdMin;
+  if (value === "md") return breakpoints.lgMin;
+  if (value === "lg") return null;
+  return value;
+}
 function VisibilityMixin(Base, containerName) {
   class WithVisibility extends Base {
     updated(changed) {
@@ -2638,14 +3047,16 @@ function VisibilityMixin(Base, containerName) {
       if (!this.shadowRoot) return;
       const containerPrefix = `${containerName} `;
       const rules = [];
-      if (this.hideBelow) {
+      const below = this.hideBelow ? resolveHideBelow(this.hideBelow) : null;
+      if (below) {
         rules.push(
-          `:host { @container ${containerPrefix}(max-width: ${this.hideBelow}) { display: none !important; } }`
+          `:host { @container ${containerPrefix}(max-width: ${below}) { display: none !important; } }`
         );
       }
-      if (this.hideAbove) {
+      const above = this.hideAbove ? resolveHideAbove(this.hideAbove) : null;
+      if (above) {
         rules.push(
-          `:host { @container ${containerPrefix}(min-width: ${this.hideAbove}) { display: none !important; } }`
+          `:host { @container ${containerPrefix}(min-width: ${above}) { display: none !important; } }`
         );
       }
       if (rules.length === 0) {
@@ -2678,7 +3089,7 @@ var __decorateClass$1l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1k(target, key, result);
   return result;
 };
-let NLDDIconCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDIconCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.verticalAlignment = "center";
@@ -2762,7 +3173,7 @@ var __decorateClass$1k = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1j(target, key, result);
   return result;
 };
-let NLDDSpacerCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDSpacerCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.size = "16";
@@ -3009,7 +3420,7 @@ var __decorateClass$1j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1i(target, key, result);
   return result;
 };
-let NLDDTextCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDTextCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.size = "md";
@@ -3483,12 +3894,6 @@ __decorateClass$1h([
 NLDDInlineDialog = __decorateClass$1h([
   customElement("nldd-inline-dialog")
 ], NLDDInlineDialog);
-const breakpoints = {
-  smMax: "640px",
-  mdMin: "641px",
-  mdMax: "1007px",
-  lgMin: "1008px"
-};
 var __defProp$1f = Object.defineProperty;
 var __decorateClass$1g = (decorators, target, key, kind) => {
   var result = void 0;
@@ -9078,8 +9483,8 @@ const codeViewerStyles = css`
 	}
 
 	:host([background="base"]) {
-		--_background-color: var(--semantics-surfaces-background-color);
-		--_border-color: var(--semantics-surfaces-border-color);
+		--_background-color: var(--semantics-surfaces-base-background-color);
+		--_border-color: var(--semantics-surfaces-base-border-color);
 	}
 
 	/* variant="simple" drops the entire frame (no rounded corners, no
@@ -9174,15 +9579,9 @@ const codeViewerStyles = css`
 		position: absolute;
 		top: var(--_actions-area-padding);
 		right: var(--_actions-area-padding);
-		bottom: var(--_actions-area-padding);
 		z-index: var(--_actions-z-index);
 	}
 
-	.code-viewer__copy-button {
-		position: sticky;
-		top: var(--_actions-area-padding);
-	}
-
 	/* Visually-hidden live region announces copy success/failure to
 	   screen readers — the static accessible-label on the icon button
 	   alone can't convey state changes. */
@@ -9339,17 +9738,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-C1NT9IBX.js").then((n) => n.p),
+  typescript: () => import("./prism-typescript-Dy2F4cF2.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-yPrYE0Hd.js").then((n) => n.p),
+  rust: () => import("./prism-rust-D4vfxUpk.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-DupfA39T.js").then((n) => n.p)
+  python: () => import("./prism-python-QiimuE8j.js").then((n) => n.p)
 };
 const grammarLoads = /* @__PURE__ */ new Map();
 function loadGrammar(language) {
@@ -16140,7 +16539,7 @@ const appViewStyles = css`
 	/* # Host */
 
 	:host {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 
 		display: flex;
@@ -16237,7 +16636,7 @@ let NLDDAppView = class extends LitElement {
     }
   }
   _writeBodyBackground() {
-    const token = this.background === "tinted" ? "--semantics-surfaces-tinted-background-color" : "--semantics-surfaces-background-color";
+    const token = this.background === "tinted" ? "--semantics-surfaces-tinted-background-color" : "--semantics-surfaces-base-background-color";
     document.body.style.backgroundColor = `var(${token})`;
   }
   render() {
@@ -16257,7 +16656,7 @@ const barSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 
 		display: flex;
 		background-color: var(--_background-color);
@@ -16271,7 +16670,7 @@ const barSplitViewStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -16561,7 +16960,7 @@ const navigationSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 		/* Pane min-widths — read by JS via getComputedStyle in firstUpdated */
 		--_sidebar-min-width: var(--primitives-area-320);
 		--_secondary-sidebar-min-width: var(--primitives-area-320);
@@ -16575,7 +16974,7 @@ const navigationSplitViewStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -16698,7 +17097,7 @@ const navigationSplitViewStyles = css`
 		outline: none;
 		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background: var(--semantics-surfaces-background-color);
+		background: var(--semantics-surfaces-base-background-color);
 		overflow: hidden;
 		padding: 0;
 		flex-direction: column;
@@ -16776,7 +17175,7 @@ const navigationSplitViewStyles = css`
 		outline: none;
 		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background: var(--semantics-surfaces-background-color);
+		background: var(--semantics-surfaces-base-background-color);
 		overflow: hidden;
 		padding: 0;
 		flex-direction: column;
@@ -17231,7 +17630,7 @@ const sideBySideSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 		/* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_pane-min-width: var(--primitives-area-320);
 
@@ -17246,7 +17645,7 @@ const sideBySideSplitViewStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -17379,7 +17778,7 @@ const stackedSplitViewStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 		/* Pane min-height — read by JS via getComputedStyle in firstUpdated */
 		--_pane-min-height: var(--primitives-area-200);
 
@@ -17395,7 +17794,7 @@ const stackedSplitViewStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -17529,7 +17928,7 @@ const splitViewPaneStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 
 		display: flex;
 		width: 100%;
@@ -17545,7 +17944,7 @@ const splitViewPaneStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -17641,7 +18040,7 @@ const pageStyles = css`
 	/* # Host */
 
 	:host {
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 
 		display: flex;
 		background-color: var(--_background-color);
@@ -17661,7 +18060,7 @@ const pageStyles = css`
 	}
 
 	:host([background="base"]) {
-		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--context-parent-background-color: var(--semantics-surfaces-base-background-color);
 		--_background-color: var(--context-parent-background-color);
 	}
 
@@ -17939,7 +18338,7 @@ var __decorateClass$D = (decorators, target, key, kind) => {
   return result;
 };
 const BACKGROUND_TOKEN = {
-  base: "var(--semantics-surfaces-background-color)",
+  base: "var(--semantics-surfaces-base-background-color)",
   tinted: "var(--semantics-surfaces-tinted-background-color)"
 };
 function paddingToValue(size2) {
@@ -20412,7 +20811,7 @@ const popoverStyles = css`
 		outline: none;
 		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background-color: var(--semantics-surfaces-background-color);
+		background-color: var(--semantics-surfaces-base-background-color);
 		overflow: auto;
 		padding: 0;
 		isolation: isolate;
@@ -20920,7 +21319,7 @@ const sheetStyles = css`
 		outline: none;
 		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background: var(--semantics-surfaces-background-color);
+		background: var(--semantics-surfaces-base-background-color);
 		overflow: hidden;
 		padding: 0;
 		flex-direction: column;
@@ -21249,7 +21648,7 @@ const windowStyles = css`
 		border: none;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background-color: var(--semantics-surfaces-background-color);
+		background-color: var(--semantics-surfaces-base-background-color);
 		width: var(--components-window-default-width);
 		max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
 		max-height: calc(100dvh - var(--semantics-overlays-inset) * 2);
@@ -22071,8 +22470,8 @@ const listStyles = css`
 	}
 
 	:host([background="base"]) {
-		--_background-color: var(--semantics-surfaces-background-color);
-		--_border-color: var(--semantics-surfaces-border-color);
+		--_background-color: var(--semantics-surfaces-base-background-color);
+		--_border-color: var(--semantics-surfaces-base-border-color);
 	}
 
 	:host([variant="box"]) .list__items {
@@ -22126,7 +22525,7 @@ const listStyles = css`
 		opacity: var(--_drag-clone-opacity);
 		z-index: var(--_drag-clone-z-index);
 		border-radius: var(--components-list-item-indicator-corner-radius);
-		background: var(--semantics-surfaces-background-color);
+		background: var(--semantics-surfaces-base-background-color);
 		pointer-events: none;
 		width: var(--_drag-clone-width);
 		height: var(--_drag-clone-height);
@@ -22361,7 +22760,7 @@ let NLDDList = class extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.style.containerType = "inline-size";
-    this.style.containerName = "list-container";
+    this.style.containerName = "cells-container";
     this.addEventListener("pointerdown", this._onPointerDown);
     this.addEventListener("keydown", this._onKeyDown);
   }
@@ -23079,27 +23478,407 @@ const listItem = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
     return NLDDListItem;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const cellStyles = css`
-
-
-	/* # Host */
-
+const tableStyles = css`
 	:host {
-		--_width: auto;
-		--_min-width: 0;
-		--_max-width: none;
-		--_min-height: 0;
+		--_columns: none;
+		--_corner-radius: var(--semantics-tables-corner-radius);
+		--_column-gap: var(--semantics-tables-column-gap);
+		--_background-color: var(--semantics-surfaces-base-background-color);
+		--_border-color: var(--semantics-surfaces-base-border-color);
+		/* Shared so the focus-visible rule can compose the focus ring over the
+		   border ring with var(...) instead of repeating the inset literal. */
+		--_border-shadow: inset 0 0 0 var(--semantics-tables-border-width) var(--_border-color);
 
 		${inheritedTextReset}
-		display: flex;
-		width: var(--_width);
-		min-width: var(--_min-width);
-		max-width: var(--_max-width);
-		min-height: var(--_min-height);
-		flex-direction: column;
-		flex-shrink: 0;
-		align-items: flex-start;
-		justify-content: center;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: var(--_columns);
+		width: 100%;
+		/* The table is always a boxed surface and its own horizontal scroll
+		   container: the columns scroll when they don't fit and the table is made
+		   focusable in JS while it scrolls. overflow-y stays hidden so the rounded
+		   corners keep clipping the rows (and their full-bleed dividers). */
+		border-radius: var(--_corner-radius);
+		box-shadow: var(--_border-shadow);
+		background-color: var(--_background-color);
+		overflow-x: auto;
+		overflow-y: hidden;
+		column-gap: var(--_column-gap);
+		row-gap: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* Default surface is base; tinted is opt-in. */
+	:host([background="tinted"]) {
+		--_background-color: var(--semantics-surfaces-tinted-background-color);
+		--_border-color: var(--semantics-surfaces-tinted-border-color);
+	}
+
+	/* Keyboard focus while the table scrolls (it gains tabindex in JS): the
+	   project focus ring, layered over the border ring (mirrors nldd-code-viewer).
+	   Focus first (outer), border second (inner). */
+	:host(:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_border-shadow);
+	}
+
+	:host(:focus:not(:focus-visible)) {
+		outline: none;
+	}
+
+	slot {
+		display: contents;
+	}
+
+	/* Empty state spans all columns below the rows; its own padding gives the
+	   message room. The header is hidden in the empty state (only the message). */
+	.table__empty {
+		grid-column: 1 / -1;
+	}
+
+	.table__empty[hidden] {
+		display: none;
+	}
+
+	.table__empty-cell {
+		padding: var(--primitives-space-16);
+	}
+
+	:host(.is-empty) slot[name="header"] {
+		display: none;
+	}
+`;
+const tableRowStyles = css`
+	:host {
+		--_min-height: var(--semantics-tables-row-min-height);
+		--_padding-block: var(--semantics-tables-row-padding-block);
+		--_padding-inline: var(--semantics-tables-row-padding-inline);
+		--_divider-color: var(--semantics-tables-border-color);
+		--_divider-thickness: var(--semantics-tables-border-width);
+
+		${inheritedTextReset}
+		box-sizing: border-box;
+		display: grid;
+		grid-column: 1 / -1;
+		grid-template-columns: subgrid;
+		min-height: var(--_min-height);
+		border-bottom: var(--_divider-thickness) solid var(--_divider-color);
+		padding-block: var(--_padding-block);
+		padding-inline: var(--_padding-inline);
+		align-items: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* Selection: a full-bleed row tint (reaches the box edges, corners clipped by
+	   the table) plus the selected content color, from the shared table tokens. */
+	:host([selected]) {
+		background-color: var(--semantics-tables-row-is-selected-background-color);
+		--context-cell-content-color: var(--semantics-tables-row-is-selected-content-color);
+	}
+
+	/* The box's border ring is the table's outer frame, so the last row drops its
+	   divider (no doubling on the ring). Inner dividers run full-bleed to the
+	   sides — the padding only insets the cell content, not the row's border. */
+	:host(:last-child) {
+		border-bottom: none;
+	}
+
+	/* display:contents so the cells become grid items of this subgrid. */
+	slot {
+		display: contents;
+	}
+`;
+function tableTemplate(emptyText, emptySupportingText) {
+  return html`
+		<slot name="header"></slot>
+		<slot></slot>
+		<div class="table__empty" role="row" hidden>
+			<div class="table__empty-cell" role="cell">
+				<slot name="empty">
+					<nldd-inline-dialog
+						text=${emptyText}
+						supporting-text=${emptySupportingText || nothing}
+					></nldd-inline-dialog>
+				</slot>
+			</div>
+		</div>
+	`;
+}
+function tableRowTemplate(onSlotChange) {
+  return html`<slot @slotchange=${onSlotChange}></slot>`;
+}
+const nlddTableTranslations = {
+  "components.table.accessible-label": "Tabel",
+  "components.table.empty-text": "Geen items"
+};
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (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$l(target, key, result);
+  return result;
+};
+const SM_MAX = parseInt(breakpoints.smMax, 10);
+const MD_MAX = parseInt(breakpoints.mdMax, 10);
+let NLDDTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.background = "base";
+    this.columns = "";
+    this.smColumns = "";
+    this.mdColumns = "";
+    this.lgColumns = "";
+    this.accessibleLabel = "";
+    this.selectable = false;
+    this.emptyText = "";
+    this.emptySupportingText = "";
+    this.translations = {};
+    this._warnedColumns = false;
+    this._warnedLabel = false;
+    this._width = 0;
+  }
+  _t(key) {
+    return this.translations[key] ?? nlddTableTranslations[key];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "table");
+    this.style.containerType = "inline-size";
+    this.style.containerName = "cells-container";
+    this._resizeObserver = new ResizeObserver((entries) => {
+      this._width = entries[0].contentRect.width;
+      this._applyColumns();
+      this._syncHostA11y();
+    });
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = void 0;
+    this._rowsObserver?.disconnect();
+    this._rowsObserver = void 0;
+  }
+  firstUpdated() {
+    const slot = this.shadowRoot?.querySelector("slot:not([name])");
+    slot?.addEventListener("slotchange", () => this._updateEmpty());
+    this._rowsObserver = new MutationObserver((mutations) => {
+      const relevant = mutations.some((m) => {
+        if (m.type === "childList") return m.target === this;
+        if (m.type === "attributes" && m.attributeName === "hidden") {
+          return m.target instanceof Element && m.target.parentElement === this;
+        }
+        return false;
+      });
+      if (relevant) this._updateEmpty();
+    });
+    this._rowsObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["hidden"]
+    });
+    this._updateEmpty();
+  }
+  /** Show the empty-state slot when there are no visible body rows (header
+   *  excluded). Toggled imperatively (like the tabindex affordance) so it
+   *  doesn't schedule a reactive re-render out of firstUpdated. The `is-empty`
+   *  host class drives hiding the header (CSS) so only the message shows. */
+  _updateEmpty() {
+    const empty = this.shadowRoot?.querySelector(".table__empty");
+    if (!empty) return;
+    const slot = this.shadowRoot?.querySelector("slot:not([name])");
+    const rows = (slot?.assignedElements() ?? []).filter(
+      (el) => el.localName === "nldd-table-row"
+    );
+    const isEmpty = rows.length === 0 || rows.every((row) => row.hasAttribute("hidden"));
+    empty.toggleAttribute("hidden", !isEmpty);
+    this.classList.toggle("is-empty", isEmpty);
+  }
+  /** The track list for the current width: a breakpoint override when set,
+   *  otherwise the base `columns`. */
+  _activeColumns() {
+    if (this._width <= SM_MAX) return this.smColumns || this.columns;
+    if (this._width <= MD_MAX) return this.mdColumns || this.columns;
+    return this.lgColumns || this.columns;
+  }
+  _applyColumns() {
+    const cols = this._activeColumns();
+    if (cols) {
+      this.style.setProperty("--_columns", cols);
+    } else {
+      this.style.removeProperty("--_columns");
+    }
+  }
+  /** Make the table focusable while it scrolls horizontally so keyboard users
+   *  can pan it (mirrors nldd-code-viewer / nldd-rich-text), and keep its
+   *  accessible name in sync. The table is its own scroll container
+   *  (overflow-x: auto); the overflow-x check (not width alone) is defensive.
+   *  accessible-label is the name (role="table" needs one); when it is absent a
+   *  generic fallback keeps the table (and any focusable region) named. */
+  _syncHostA11y() {
+    const overflowX = getComputedStyle(this).overflowX;
+    const scrollableOverflow = overflowX === "auto" || overflowX === "scroll";
+    const scrollable = scrollableOverflow && this.scrollWidth > this.clientWidth;
+    if (scrollable) {
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.removeAttribute("tabindex");
+    }
+    if (this.accessibleLabel) {
+      this.setAttribute("aria-label", this.accessibleLabel);
+    } else {
+      this.setAttribute("aria-label", this._t("components.table.accessible-label"));
+    }
+  }
+  updated(changed) {
+    if (changed.has("columns") || changed.has("smColumns") || changed.has("mdColumns") || changed.has("lgColumns")) {
+      this._applyColumns();
+    }
+    if (changed.has("accessibleLabel")) {
+      this._syncHostA11y();
+    }
+    if (changed.has("selectable")) {
+      for (const row of this.querySelectorAll("nldd-table-row")) {
+        row._syncAriaSelected();
+      }
+    }
+    if (this.columns) {
+      this._warnedColumns = false;
+    }
+    if (this.accessibleLabel) {
+      this._warnedLabel = false;
+    }
+  }
+  render() {
+    return tableTemplate(
+      this.emptyText || this._t("components.table.empty-text"),
+      this.emptySupportingText
+    );
+  }
+};
+NLDDTable.styles = tableStyles;
+__decorateClass$l([
+  property({ type: String, reflect: true })
+], NLDDTable.prototype, "background", 2);
+__decorateClass$l([
+  property({ type: String, reflect: true })
+], NLDDTable.prototype, "columns", 2);
+__decorateClass$l([
+  property({ type: String, reflect: true, attribute: "sm-columns" })
+], NLDDTable.prototype, "smColumns", 2);
+__decorateClass$l([
+  property({ type: String, reflect: true, attribute: "md-columns" })
+], NLDDTable.prototype, "mdColumns", 2);
+__decorateClass$l([
+  property({ type: String, reflect: true, attribute: "lg-columns" })
+], NLDDTable.prototype, "lgColumns", 2);
+__decorateClass$l([
+  property({ type: String, reflect: true, attribute: "accessible-label" })
+], NLDDTable.prototype, "accessibleLabel", 2);
+__decorateClass$l([
+  property({ type: Boolean, reflect: true })
+], NLDDTable.prototype, "selectable", 2);
+__decorateClass$l([
+  property({ type: String, attribute: "empty-text" })
+], NLDDTable.prototype, "emptyText", 2);
+__decorateClass$l([
+  property({ type: String, attribute: "empty-supporting-text" })
+], NLDDTable.prototype, "emptySupportingText", 2);
+__decorateClass$l([
+  property({ type: Object })
+], NLDDTable.prototype, "translations", 2);
+NLDDTable = __decorateClass$l([
+  customElement("nldd-table")
+], NLDDTable);
+let NLDDTableRow = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this._onSlotChangeBound = this._onSlotChange.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "row");
+    this._syncAriaSelected();
+  }
+  updated(changed) {
+    if (changed.has("selected")) {
+      this._syncAriaSelected();
+    }
+  }
+  /** A header row lives in the table's `header` slot. */
+  get _isHeader() {
+    return this.getAttribute("slot") === "header";
+  }
+  /** Reflect `selected` to aria-selected — but only when the parent table is
+   *  `selectable`, so a non-selectable table doesn't announce a false
+   *  selection affordance (ARIA 1.2 §6.6.5). Header rows are never selectable.
+   *  @internal Re-invoked by the parent table when its `selectable` changes. */
+  _syncAriaSelected() {
+    const selectable = !this._isHeader && this.closest("nldd-table")?.hasAttribute("selectable") === true;
+    if (selectable) {
+      this.setAttribute("aria-selected", String(this.selected));
+    } else {
+      this.removeAttribute("aria-selected");
+    }
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const cells = slot.assignedElements();
+    const cellRole = this._isHeader ? "columnheader" : "cell";
+    for (const cell of cells) {
+      cell.setAttribute("role", cellRole);
+      if (cell.localName === "nldd-cell") {
+        const w = cell.getAttribute("width");
+        if (w === null || w === "" || w === "fit-content") {
+          cell.setAttribute("width", "full");
+        }
+      }
+    }
+  }
+  render() {
+    return tableRowTemplate(this._onSlotChangeBound);
+  }
+};
+NLDDTableRow.styles = tableRowStyles;
+__decorateClass$l([
+  property({ type: Boolean, reflect: true })
+], NLDDTableRow.prototype, "selected", 2);
+NLDDTableRow = __decorateClass$l([
+  customElement("nldd-table-row")
+], NLDDTableRow);
+const cellStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_width: auto;
+		--_min-width: 0;
+		--_max-width: none;
+		--_min-height: 0;
+
+		${inheritedTextReset}
+		display: flex;
+		width: var(--_width);
+		min-width: var(--_min-width);
+		max-width: var(--_max-width);
+		min-height: var(--_min-height);
+		flex-direction: column;
+		flex-shrink: 0;
+		align-items: flex-start;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -23171,17 +23950,17 @@ const cellStyles = css`
 	}
 `;
 const template$9 = () => html`<slot></slot>`;
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (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$l(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
-let NLDDCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.width = "fit-content";
@@ -23227,25 +24006,25 @@ let NLDDCell = class extends VisibilityMixin(LitElement, "list-container") {
   }
 };
 NLDDCell.styles = [cellStyles];
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true })
 ], NLDDCell.prototype, "width", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDCell.prototype, "minWidth", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDCell.prototype, "maxWidth", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDCell.prototype, "minHeight", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDCell.prototype, "verticalAlignment", 2);
-__decorateClass$l([
+__decorateClass$k([
   property({ reflect: true, attribute: "horizontal-alignment" })
 ], NLDDCell.prototype, "horizontalAlignment", 2);
-NLDDCell = __decorateClass$l([
+NLDDCell = __decorateClass$k([
   customElement("nldd-cell")
 ], NLDDCell);
 const titleCellStyles = css`
@@ -23472,17 +24251,17 @@ const template$8 = function() {
 		</p>
 	`;
 };
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (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$k(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-let NLDDTitleCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDTitleCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.size = 5;
@@ -23559,58 +24338,58 @@ let NLDDTitleCell = class extends VisibilityMixin(LitElement, "list-container")
   }
 };
 NLDDTitleCell.styles = [titleCellStyles];
-__decorateClass$k([
+__decorateClass$j([
   property({ type: Number, reflect: true })
 ], NLDDTitleCell.prototype, "size", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "color", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true })
 ], NLDDTitleCell.prototype, "width", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDTitleCell.prototype, "minWidth", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDTitleCell.prototype, "maxWidth", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDTitleCell.prototype, "minHeight", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "horizontal-alignment" })
 ], NLDDTitleCell.prototype, "horizontalAlignment", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, reflect: true, attribute: "vertical-alignment" })
 ], NLDDTitleCell.prototype, "verticalAlignment", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "text", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "overline", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTitleCell.prototype, "supportingText", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: Number, attribute: "heading-level" })
 ], NLDDTitleCell.prototype, "headingLevel", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String })
 ], NLDDTitleCell.prototype, "query", 2);
-__decorateClass$k([
+__decorateClass$j([
   property({ type: String, attribute: "query-mark-mode" })
 ], NLDDTitleCell.prototype, "queryMarkMode", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasOverlineSlotted", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasDefaultSlotted", 2);
-__decorateClass$k([
+__decorateClass$j([
   state()
 ], NLDDTitleCell.prototype, "_hasSupportingTextSlotted", 2);
-NLDDTitleCell = __decorateClass$k([
+NLDDTitleCell = __decorateClass$j([
   customElement("nldd-title-cell")
 ], NLDDTitleCell);
 const descriptionCellStyles = css`
@@ -23722,17 +24501,17 @@ const template$7 = () => html`
 	<slot name="title"></slot>
 	<slot name="description"></slot>
 `;
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (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$j(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
-let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "list-container") {
+let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "cells-container") {
   constructor() {
     super(...arguments);
     this.width = "full";
@@ -23777,22 +24556,22 @@ let NLDDDescriptionCell = class extends VisibilityMixin(LitElement, "list-contai
   }
 };
 NLDDDescriptionCell.styles = [descriptionCellStyles];
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true })
 ], NLDDDescriptionCell.prototype, "width", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "min-width" })
 ], NLDDDescriptionCell.prototype, "minWidth", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "max-width" })
 ], NLDDDescriptionCell.prototype, "maxWidth", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ type: String, reflect: true, attribute: "min-height" })
 ], NLDDDescriptionCell.prototype, "minHeight", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ reflect: true, attribute: "vertical-alignment" })
 ], NLDDDescriptionCell.prototype, "verticalAlignment", 2);
-NLDDDescriptionCell = __decorateClass$j([
+NLDDDescriptionCell = __decorateClass$i([
   customElement("nldd-description-cell")
 ], NLDDDescriptionCell);
 const dragHandleCellStyles = css`
@@ -23904,14 +24683,14 @@ function template$6(size2, label) {
 const nlddDragHandleCellTranslations = {
   "components.drag-handle-cell.label-text": "Sleepgreep, druk spatie of enter om te verplaatsen"
 };
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (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$i(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let NLDDDragHandleCell = class extends LitElement {
@@ -23930,13 +24709,13 @@ let NLDDDragHandleCell = class extends LitElement {
   }
 };
 NLDDDragHandleCell.styles = dragHandleCellStyles;
-__decorateClass$i([
+__decorateClass$h([
   property({ type: String, reflect: true })
 ], NLDDDragHandleCell.prototype, "size", 2);
-__decorateClass$i([
+__decorateClass$h([
   property({ type: Object })
 ], NLDDDragHandleCell.prototype, "translations", 2);
-NLDDDragHandleCell = __decorateClass$i([
+NLDDDragHandleCell = __decorateClass$h([
   customElement("nldd-drag-handle-cell")
 ], NLDDDragHandleCell);
 const timelineTrackCellStyles = css`
@@ -24049,14 +24828,14 @@ function timelineTrackCellTemplate(component) {
 		</div>
 	`;
 }
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (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$h(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let NLDDTimelineTrackCell = class extends LitElement {
@@ -24070,13 +24849,13 @@ let NLDDTimelineTrackCell = class extends LitElement {
   }
 };
 NLDDTimelineTrackCell.styles = timelineTrackCellStyles;
-__decorateClass$h([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "step", 2);
-__decorateClass$h([
+__decorateClass$g([
   property({ type: String, reflect: true })
 ], NLDDTimelineTrackCell.prototype, "child", 2);
-NLDDTimelineTrackCell = __decorateClass$h([
+NLDDTimelineTrackCell = __decorateClass$g([
   customElement("nldd-timeline-track-cell")
 ], NLDDTimelineTrackCell);
 const smMax$1 = unsafeCSS(breakpoints.smMax);
@@ -24253,14 +25032,14 @@ const nlddBreadcrumbsTranslations = {
   "components.breadcrumbs.accessible-label": "Kruimelpad",
   "components.breadcrumbs.level-up-label": "Eén niveau omhoog"
 };
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (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$g(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
@@ -24290,13 +25069,13 @@ const _NLDDBreadcrumbsItem = class _NLDDBreadcrumbsItem extends LitElement {
 };
 _NLDDBreadcrumbsItem.styles = breadcrumbsItemStyles;
 let NLDDBreadcrumbsItem = _NLDDBreadcrumbsItem;
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "href", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "current", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, reflect: true })
 ], NLDDBreadcrumbsItem.prototype, "text", 2);
 if (!customElements.get("nldd-breadcrumbs-item")) {
@@ -24375,13 +25154,13 @@ let NLDDBreadcrumbs = class extends LitElement {
   }
 };
 NLDDBreadcrumbs.styles = breadcrumbsStyles;
-__decorateClass$g([
+__decorateClass$f([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDBreadcrumbs.prototype, "accessibleLabel", 2);
-__decorateClass$g([
+__decorateClass$f([
   property({ type: Object })
 ], NLDDBreadcrumbs.prototype, "translations", 2);
-NLDDBreadcrumbs = __decorateClass$g([
+NLDDBreadcrumbs = __decorateClass$f([
   customElement("nldd-breadcrumbs")
 ], NLDDBreadcrumbs);
 const menuBarStyles = css`
@@ -24451,13 +25230,13 @@ function template$5(component) {
 		</nav>
 	`;
 }
-var __defProp$f = Object.defineProperty;
-var __decorateClass$f = (decorators, target, key, kind) => {
+var __defProp$e = Object.defineProperty;
+var __decorateClass$e = (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$f(target, key, result);
+  if (result) __defProp$e(target, key, result);
   return result;
 };
 function withTranslations(Base, defaults) {
@@ -24484,7 +25263,7 @@ function withTranslations(Base, defaults) {
       }
     }
   }
-  __decorateClass$f([
+  __decorateClass$e([
     property({ type: Object })
   ], TranslationsMixin.prototype, "translations");
   return TranslationsMixin;
@@ -24740,14 +25519,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$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$e(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let NLDDMenuBarItem = class extends LitElement {
@@ -24865,62 +25644,62 @@ let NLDDMenuBarItem = class extends LitElement {
   }
 };
 NLDDMenuBarItem.styles = menuBarItemStyles;
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String, reflect: true })
 ], NLDDMenuBarItem.prototype, "text", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "current", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String, attribute: "current-type", reflect: true })
 ], NLDDMenuBarItem.prototype, "currentType", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String })
 ], NLDDMenuBarItem.prototype, "href", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String, reflect: true })
 ], NLDDMenuBarItem.prototype, "icon", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "expandable", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, attribute: "icon-only", reflect: true })
 ], NLDDMenuBarItem.prototype, "iconOnly", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String, attribute: "content-priority", reflect: true })
 ], NLDDMenuBarItem.prototype, "contentPriority", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "compact", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "disabled", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDMenuBarItem.prototype, "accessibleLabel", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: String })
 ], NLDDMenuBarItem.prototype, "haspopup", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBarItem.prototype, "expanded", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ attribute: false })
 ], NLDDMenuBarItem.prototype, "popoverTargetElement", 2);
-__decorateClass$e([
+__decorateClass$d([
   property({ attribute: false })
 ], NLDDMenuBarItem.prototype, "popoverTargetAction", 2);
-NLDDMenuBarItem = __decorateClass$e([
+NLDDMenuBarItem = __decorateClass$d([
   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$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$d(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let NLDDMenuBar = class extends withTranslations(LitElement, nlddMenuBarTranslations) {
@@ -25154,25 +25933,25 @@ let NLDDMenuBar = class extends withTranslations(LitElement, nlddMenuBarTranslat
   }
 };
 NLDDMenuBar.styles = menuBarStyles;
-__decorateClass$d([
+__decorateClass$c([
   property({ type: String, attribute: "overflow-text" })
 ], NLDDMenuBar.prototype, "overflowText", 2);
-__decorateClass$d([
+__decorateClass$c([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDMenuBar.prototype, "accessibleLabel", 2);
-__decorateClass$d([
+__decorateClass$c([
   property({ type: Boolean, reflect: true })
 ], NLDDMenuBar.prototype, "compact", 2);
-__decorateClass$d([
+__decorateClass$c([
   query("slot:not([name])")
 ], NLDDMenuBar.prototype, "_defaultSlot", 2);
-__decorateClass$d([
+__decorateClass$c([
   query(".menu-bar__overflow-button")
 ], NLDDMenuBar.prototype, "_overflowButton", 2);
-__decorateClass$d([
+__decorateClass$c([
   state()
 ], NLDDMenuBar.prototype, "_menuOpen", 2);
-NLDDMenuBar = __decorateClass$d([
+NLDDMenuBar = __decorateClass$c([
   customElement("nldd-menu-bar")
 ], NLDDMenuBar);
 const linkStyles = css`
@@ -25339,14 +26118,14 @@ function template$3(helpers) {
 		</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;
+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$c(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let NLDDLink = class extends LitElement {
@@ -25383,34 +26162,34 @@ let NLDDLink = class extends LitElement {
   }
 };
 NLDDLink.styles = linkStyles;
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "href", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String })
 ], NLDDLink.prototype, "target", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String })
 ], NLDDLink.prototype, "rel", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String, reflect: true })
 ], NLDDLink.prototype, "size", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String })
 ], NLDDLink.prototype, "text", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String, attribute: "start-icon" })
 ], NLDDLink.prototype, "startIcon", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String, attribute: "end-icon" })
 ], NLDDLink.prototype, "endIcon", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDLink.prototype, "accessibleLabel", 2);
-__decorateClass$c([
+__decorateClass$b([
   property({ type: Boolean, reflect: true })
 ], NLDDLink.prototype, "disabled", 2);
-NLDDLink = __decorateClass$c([
+NLDDLink = __decorateClass$b([
   customElement("nldd-link")
 ], NLDDLink);
 const skipLinkStyles = css`
@@ -25445,7 +26224,7 @@ const skipLinkStyles = css`
 		z-index: var(--_z-index);
 		border-radius: var(--semantics-controls-md-corner-radius);
 		box-shadow: var(--_box-shadow);
-		background-color: var(--semantics-surfaces-background-color);
+		background-color: var(--semantics-surfaces-base-background-color);
 		pointer-events: none;
 		justify-content: center;
 	}
@@ -25505,14 +26284,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$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$b(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let NLDDSkipLink = class extends withTranslations(LitElement, nlddSkipLinkTranslations) {
@@ -25542,13 +26321,13 @@ let NLDDSkipLink = class extends withTranslations(LitElement, nlddSkipLinkTransl
   }
 };
 NLDDSkipLink.styles = skipLinkStyles;
-__decorateClass$b([
+__decorateClass$a([
   property({ type: String })
 ], NLDDSkipLink.prototype, "text", 2);
-__decorateClass$b([
+__decorateClass$a([
   property({ type: String })
 ], NLDDSkipLink.prototype, "href", 2);
-NLDDSkipLink = __decorateClass$b([
+NLDDSkipLink = __decorateClass$a([
   customElement("nldd-skip-link")
 ], NLDDSkipLink);
 const smMax = unsafeCSS(breakpoints.smMax);
@@ -26003,14 +26782,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$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$a(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNavigationBarTranslations) {
@@ -26286,46 +27065,46 @@ let NLDDTopNavigationBar = class extends withTranslations(LitElement, nlddTopNav
   }
 };
 NLDDTopNavigationBar.styles = topNavigationBarStyles;
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "website-title" })
 ], NLDDTopNavigationBar.prototype, "websiteTitle", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: Boolean, attribute: "no-logo", reflect: true })
 ], NLDDTopNavigationBar.prototype, "noLogo", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "logo-title" })
 ], NLDDTopNavigationBar.prototype, "logoTitle", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "logo-subtitle" })
 ], NLDDTopNavigationBar.prototype, "logoSubtitle", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "logo-supporting-text-1" })
 ], NLDDTopNavigationBar.prototype, "logoSupportingText1", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "logo-supporting-text-2" })
 ], NLDDTopNavigationBar.prototype, "logoSupportingText2", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "logo-href" })
 ], NLDDTopNavigationBar.prototype, "logoHref", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "website-href" })
 ], NLDDTopNavigationBar.prototype, "websiteHref", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "back-href" })
 ], NLDDTopNavigationBar.prototype, "backHref", 2);
-__decorateClass$a([
+__decorateClass$9([
   property({ type: String, attribute: "back-text" })
 ], NLDDTopNavigationBar.prototype, "backText", 2);
-__decorateClass$a([
+__decorateClass$9([
   query(".top-navigation-bar__menu-button")
 ], NLDDTopNavigationBar.prototype, "_menuButton", 2);
-__decorateClass$a([
+__decorateClass$9([
   query('slot[name="global"]')
 ], NLDDTopNavigationBar.prototype, "_globalSlot", 2);
-__decorateClass$a([
+__decorateClass$9([
   query('slot[name="utility"]')
 ], NLDDTopNavigationBar.prototype, "_utilitySlot", 2);
-NLDDTopNavigationBar = __decorateClass$a([
+NLDDTopNavigationBar = __decorateClass$9([
   customElement("nldd-top-navigation-bar")
 ], NLDDTopNavigationBar);
 const topTitleBarStyles = css`
@@ -26519,14 +27298,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$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$9(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let NLDDTopTitleBar = class extends LitElement {
@@ -26631,28 +27410,28 @@ let NLDDTopTitleBar = class extends LitElement {
   }
 };
 NLDDTopTitleBar.styles = topTitleBarStyles;
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String })
 ], NLDDTopTitleBar.prototype, "text", 2);
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDTopTitleBar.prototype, "supportingText", 2);
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String, attribute: "collapse-anchor" })
 ], NLDDTopTitleBar.prototype, "collapseAnchor", 2);
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String, attribute: "back-text" })
 ], NLDDTopTitleBar.prototype, "backText", 2);
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String, attribute: "back-href" })
 ], NLDDTopTitleBar.prototype, "backHref", 2);
-__decorateClass$9([
+__decorateClass$8([
   property({ type: String, attribute: "dismiss-text" })
 ], NLDDTopTitleBar.prototype, "dismissText", 2);
-__decorateClass$9([
+__decorateClass$8([
   state()
 ], NLDDTopTitleBar.prototype, "_hasToolbarItems", 2);
-NLDDTopTitleBar = __decorateClass$9([
+NLDDTopTitleBar = __decorateClass$8([
   customElement("nldd-top-title-bar")
 ], NLDDTopTitleBar);
 const topTitleBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -26932,14 +27711,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$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$8(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let NLDDTabBarItem = class extends LitElement {
@@ -26996,31 +27775,31 @@ let NLDDTabBarItem = class extends LitElement {
   }
 };
 NLDDTabBarItem.styles = tabBarItemStyles;
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBarItem.prototype, "selected", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "href", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "_groupVariant", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String })
 ], NLDDTabBarItem.prototype, "text", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String, reflect: true })
 ], NLDDTabBarItem.prototype, "icon", 2);
-__decorateClass$8([
+__decorateClass$7([
   state()
 ], NLDDTabBarItem.prototype, "_hasIconSlot", 2);
-__decorateClass$8([
+__decorateClass$7([
   state()
 ], NLDDTabBarItem.prototype, "_navigation", 2);
-__decorateClass$8([
+__decorateClass$7([
   state()
 ], NLDDTabBarItem.prototype, "_isFallbackFocusable", 2);
-NLDDTabBarItem = __decorateClass$8([
+NLDDTabBarItem = __decorateClass$7([
   customElement("nldd-tab-bar-item")
 ], NLDDTabBarItem);
 let NLDDTabBar = class extends LitElement {
@@ -27131,19 +27910,19 @@ let NLDDTabBar = class extends LitElement {
   }
 };
 NLDDTabBar.styles = tabBarStyles;
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBar.prototype, "centered", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String, reflect: true })
 ], NLDDTabBar.prototype, "variant", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, reflect: true })
 ], NLDDTabBar.prototype, "navigation", 2);
-__decorateClass$8([
+__decorateClass$7([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDTabBar.prototype, "accessibleLabel", 2);
-NLDDTabBar = __decorateClass$8([
+NLDDTabBar = __decorateClass$7([
   customElement("nldd-tab-bar")
 ], NLDDTabBar);
 const documentTabBarStyles = css`
@@ -27668,14 +28447,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$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$7(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 const DRAG_THRESHOLD = 5;
@@ -27734,37 +28513,37 @@ let NLDDDocumentTabBarItem = class extends LitElement {
 };
 NLDDDocumentTabBarItem.styles = documentTabBarItemStyles;
 NLDDDocumentTabBarItem._idCounter = 0;
-__decorateClass$7([
+__decorateClass$6([
   property({ type: Boolean, reflect: true })
 ], NLDDDocumentTabBarItem.prototype, "selected", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String, attribute: "text" })
 ], NLDDDocumentTabBarItem.prototype, "text", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDDocumentTabBarItem.prototype, "supportingText", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String, attribute: "short-text" })
 ], NLDDDocumentTabBarItem.prototype, "shortText", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String, attribute: "short-supporting-text" })
 ], NLDDDocumentTabBarItem.prototype, "shortSupportingText", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String })
 ], NLDDDocumentTabBarItem.prototype, "href", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_isShort", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_dismissButtonAccessibilityLabel", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_isFallbackFocusable", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBarItem.prototype, "_navigation", 2);
-NLDDDocumentTabBarItem = __decorateClass$7([
+NLDDDocumentTabBarItem = __decorateClass$6([
   customElement("nldd-document-tab-bar-item")
 ], NLDDDocumentTabBarItem);
 let NLDDDocumentTabBar = class extends withTranslations(LitElement, nlddDocumentTabBarTranslations) {
@@ -28327,19 +29106,19 @@ let NLDDDocumentTabBar = class extends withTranslations(LitElement, nlddDocument
 };
 NLDDDocumentTabBar.styles = documentTabBarStyles;
 NLDDDocumentTabBar._idCounter = 0;
-__decorateClass$7([
+__decorateClass$6([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDDocumentTabBar.prototype, "accessibleLabel", 2);
-__decorateClass$7([
+__decorateClass$6([
   property({ type: Boolean, reflect: true })
 ], NLDDDocumentTabBar.prototype, "navigation", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBar.prototype, "_overflowCount", 2);
-__decorateClass$7([
+__decorateClass$6([
   state()
 ], NLDDDocumentTabBar.prototype, "_menuOpen", 2);
-NLDDDocumentTabBar = __decorateClass$7([
+NLDDDocumentTabBar = __decorateClass$6([
   customElement("nldd-document-tab-bar")
 ], NLDDDocumentTabBar);
 const paginationStyles = css`
@@ -28717,14 +29496,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$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$6(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let NLDDPagination = class extends LitElement {
@@ -28811,25 +29590,25 @@ let NLDDPagination = class extends LitElement {
   }
 };
 NLDDPagination.styles = paginationStyles;
-__decorateClass$6([
+__decorateClass$5([
   property({ type: Number, reflect: true })
 ], NLDDPagination.prototype, "current", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ type: Number, reflect: true })
 ], NLDDPagination.prototype, "total", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ type: Boolean, reflect: true })
 ], NLDDPagination.prototype, "disabled", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ type: Boolean, reflect: true })
 ], NLDDPagination.prototype, "centered", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ type: String, attribute: "href-pattern" })
 ], NLDDPagination.prototype, "hrefPattern", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ type: Object })
 ], NLDDPagination.prototype, "translations", 2);
-NLDDPagination = __decorateClass$6([
+NLDDPagination = __decorateClass$5([
   customElement("nldd-pagination")
 ], NLDDPagination);
 const mdMin = unsafeCSS(breakpoints.mdMin);
@@ -28860,7 +29639,7 @@ const modalDialogStyles = css`
 		border: none;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		background-color: var(--semantics-surfaces-background-color);
+		background-color: var(--semantics-surfaces-base-background-color);
 		width: calc(100% - var(--primitives-space-16) * 2);
 		max-width: var(--primitives-area-480);
 		max-height: var(--_max-height);
@@ -28948,14 +29727,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$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$5(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let NLDDModalDialog = class extends LitElement {
@@ -29020,22 +29799,22 @@ let NLDDModalDialog = class extends LitElement {
   }
 };
 NLDDModalDialog.styles = modalDialogStyles;
-__decorateClass$5([
+__decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "variant", 2);
-__decorateClass$5([
+__decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "icon", 2);
-__decorateClass$5([
+__decorateClass$4([
   property({ type: String, reflect: true })
 ], NLDDModalDialog.prototype, "text", 2);
-__decorateClass$5([
+__decorateClass$4([
   property({ type: String, reflect: true, attribute: "supporting-text" })
 ], NLDDModalDialog.prototype, "supportingText", 2);
-__decorateClass$5([
+__decorateClass$4([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDModalDialog.prototype, "accessibleLabel", 2);
-NLDDModalDialog = __decorateClass$5([
+NLDDModalDialog = __decorateClass$4([
   customElement("nldd-modal-dialog")
 ], NLDDModalDialog);
 const bannerStyles = css`
@@ -29254,14 +30033,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$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$4(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 const DEFAULT_ICONS = {
@@ -29367,34 +30146,34 @@ let NLDDBanner = class extends LitElement {
   }
 };
 NLDDBanner.styles = bannerStyles;
-__decorateClass$4([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDBanner.prototype, "variant", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: String, reflect: true })
 ], NLDDBanner.prototype, "icon", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: String })
 ], NLDDBanner.prototype, "text", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: String, attribute: "supporting-text" })
 ], NLDDBanner.prototype, "supportingText", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: Number, reflect: true, attribute: "heading-level" })
 ], NLDDBanner.prototype, "headingLevel", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: Boolean, reflect: true })
 ], NLDDBanner.prototype, "dismissible", 2);
-__decorateClass$4([
+__decorateClass$3([
   property({ type: Object })
 ], NLDDBanner.prototype, "translations", 2);
-__decorateClass$4([
+__decorateClass$3([
   state()
 ], NLDDBanner.prototype, "_hasContent", 2);
-__decorateClass$4([
+__decorateClass$3([
   state()
 ], NLDDBanner.prototype, "_hasActions", 2);
-NLDDBanner = __decorateClass$4([
+NLDDBanner = __decorateClass$3([
   customElement("nldd-banner")
 ], NLDDBanner);
 const badgeStyles = css`
@@ -29584,7 +30363,7 @@ const badgeStyles = css`
 		display: inline-flex;
 		border-radius: var(--components-badge-corner-radius);
 		box-shadow:
-			0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color)),
+			0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)),
 			inset 0 0 0 var(--_border-width) var(--_border-color);
 		background-color: var(--_background-color);
 		min-width: var(--_height);
@@ -29667,14 +30446,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$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$3(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations) {
@@ -29714,28 +30493,28 @@ let NLDDBadge = class extends withTranslations(LitElement, nlddBadgeTranslations
   }
 };
 NLDDBadge.styles = badgeStyles;
-__decorateClass$3([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDBadge.prototype, "color", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: String, reflect: true })
 ], NLDDBadge.prototype, "size", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: String })
 ], NLDDBadge.prototype, "text", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: Number, reflect: true })
 ], NLDDBadge.prototype, "number", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: Number, reflect: true })
 ], NLDDBadge.prototype, "max", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: String })
 ], NLDDBadge.prototype, "icon", 2);
-__decorateClass$3([
+__decorateClass$2([
   property({ type: String, attribute: "accessible-label" })
 ], NLDDBadge.prototype, "accessibleLabel", 2);
-NLDDBadge = __decorateClass$3([
+NLDDBadge = __decorateClass$2([
   customElement("nldd-badge")
 ], NLDDBadge);
 const progressBarStyles = css`
@@ -29749,13 +30528,15 @@ const progressBarStyles = css`
 		--_track-border-color: var(--components-progress-bar-track-border-color);
 		--_track-border-width: var(--components-progress-bar-track-border-width);
 		--_corner-radius: var(--components-progress-bar-corner-radius);
-		--_segment-gap: var(--components-progress-bar-progress-segment-gap);
+		--_segment-indicator-gap: var(--components-progress-bar-progress-segment-indicator-gap);
 		--_caption-gap: var(--components-progress-bar-caption-gap);
 		--_text-color: var(--components-progress-bar-text-color);
 		--_supporting-text-color: var(--components-progress-bar-supporting-text-color);
 		--_text-font: var(--components-progress-bar-text-font);
 		--_supporting-text-font: var(--components-progress-bar-supporting-text-font);
 		--_indeterminate-background-color: var(--components-progress-bar-accent-background-color);
+		--_indeterminate-border-color: var(--components-progress-bar-accent-border-color);
+		--_indeterminate-border-width: var(--components-progress-bar-segment-indicator-border-width);
 		--_indeterminate-bar-width: 20%;
 		--_indeterminate-duration: 800ms;
 
@@ -29776,38 +30557,38 @@ const progressBarStyles = css`
 	:host([size="lg"]) { --_height: var(--components-progress-bar-lg-height); }
 
 	:host([mode="distribution"]) {
-		--_segment-gap: var(--components-progress-bar-distribution-segment-gap);
+		--_segment-indicator-gap: var(--components-progress-bar-distribution-segment-indicator-gap);
 		--_corner-radius: var(--components-progress-bar-distribution-corner-radius);
 	}
 
 
-	/* ## Indeterminate fill colour follows the variant; default is accent (blue) */
-
-	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-bar-neutral-background-color); }
-	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-bar-accent-background-color); }
-	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-bar-success-background-color); }
-	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-bar-warning-background-color); }
-	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-bar-critical-background-color); }
-
-	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-bar-coolgray-background-color); }
-	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lintblauw-background-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerblauw-background-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-hemelblauw-background-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lichtblauw-background-color); }
-	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-bar-paars-background-color); }
-	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-bar-violet-background-color); }
-	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-bar-robijnrood-background-color); }
-	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-bar-roze-background-color); }
-	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-bar-rood-background-color); }
-	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-bar-oranje-background-color); }
-	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergeel-background-color); }
-	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-bar-geel-background-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerbruin-background-color); }
-	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-bar-bruin-background-color); }
-	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergroen-background-color); }
-	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-bar-groen-background-color); }
-	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mosgroen-background-color); }
-	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mintgroen-background-color); }
+	/* ## Indeterminate fill + border colour follow the variant; default is accent (blue) */
+
+	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-bar-neutral-background-color); --_indeterminate-border-color: var(--components-progress-bar-neutral-border-color); }
+	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-bar-accent-background-color); --_indeterminate-border-color: var(--components-progress-bar-accent-border-color); }
+	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-bar-success-background-color); --_indeterminate-border-color: var(--components-progress-bar-success-border-color); }
+	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-bar-warning-background-color); --_indeterminate-border-color: var(--components-progress-bar-warning-border-color); }
+	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-bar-critical-background-color); --_indeterminate-border-color: var(--components-progress-bar-critical-border-color); }
+
+	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-bar-coolgray-background-color); --_indeterminate-border-color: var(--components-progress-bar-coolgray-border-color); }
+	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lintblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-lintblauw-border-color); }
+	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkerblauw-border-color); }
+	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-hemelblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-hemelblauw-border-color); }
+	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lichtblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-lichtblauw-border-color); }
+	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-bar-paars-background-color); --_indeterminate-border-color: var(--components-progress-bar-paars-border-color); }
+	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-bar-violet-background-color); --_indeterminate-border-color: var(--components-progress-bar-violet-border-color); }
+	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-bar-robijnrood-background-color); --_indeterminate-border-color: var(--components-progress-bar-robijnrood-border-color); }
+	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-bar-roze-background-color); --_indeterminate-border-color: var(--components-progress-bar-roze-border-color); }
+	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-bar-rood-background-color); --_indeterminate-border-color: var(--components-progress-bar-rood-border-color); }
+	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-bar-oranje-background-color); --_indeterminate-border-color: var(--components-progress-bar-oranje-border-color); }
+	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergeel-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkergeel-border-color); }
+	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-bar-geel-background-color); --_indeterminate-border-color: var(--components-progress-bar-geel-border-color); }
+	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerbruin-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkerbruin-border-color); }
+	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-bar-bruin-background-color); --_indeterminate-border-color: var(--components-progress-bar-bruin-border-color); }
+	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkergroen-border-color); }
+	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-bar-groen-background-color); --_indeterminate-border-color: var(--components-progress-bar-groen-border-color); }
+	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mosgroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-mosgroen-border-color); }
+	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mintgroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-mintgroen-border-color); }
 
 
 	/* # Caption */
@@ -29843,7 +30624,7 @@ const progressBarStyles = css`
 		width: 100%;
 		height: var(--_height);
 		overflow: hidden;
-		gap: var(--_segment-gap);
+		gap: var(--_segment-indicator-gap);
 		container-type: inline-size;
 	}
 
@@ -29891,6 +30672,7 @@ const progressBarStyles = css`
 		left: 0;
 		border-radius: var(--_corner-radius);
 		background: var(--_indeterminate-background-color);
+		box-shadow: inset 0 0 0 var(--_indeterminate-border-width) var(--_indeterminate-border-color);
 		width: var(--_indeterminate-bar-width);
 		transform: translateX(0);
 		/* Duration scales with track width via the container queries below.
@@ -29941,17 +30723,17 @@ const progressBarStyles = css`
 		}
 	}
 `;
-const progressBarSegmentStyles = css`
+const progressBarSegmentIndicatorStyles = css`
 
 
 	/* # Host */
 
 	:host {
-		--_width: var(--context-progress-bar-segment-width, 0%);
-		--_min-width: var(--components-progress-bar-segment-min-width);
+		--_width: var(--context-progress-bar-segment-indicator-width, 0%);
+		--_min-width: var(--components-progress-bar-segment-indicator-min-width);
 		--_background-color: var(--components-progress-bar-accent-background-color);
 		--_border-color: var(--components-progress-bar-accent-border-color);
-		--_border-width: var(--components-progress-bar-segment-border-width);
+		--_border-width: var(--components-progress-bar-segment-indicator-border-width);
 
 		box-sizing: border-box;
 		display: block;
@@ -29976,19 +30758,19 @@ const progressBarSegmentStyles = css`
 	   indeterminate and determinate. */
 
 	:host([data-grow]) {
-		animation: progress-bar-segment-grow var(--primitives-transition-duration-slow) ease-out;
+		animation: progress-bar-segment-indicator-grow var(--primitives-transition-duration-slow) ease-out;
 	}
 
 	:host([data-shrink]) {
-		animation: progress-bar-segment-shrink var(--primitives-transition-duration-slow) ease-out forwards;
+		animation: progress-bar-segment-indicator-shrink var(--primitives-transition-duration-slow) ease-out forwards;
 	}
 
-	@keyframes progress-bar-segment-grow {
+	@keyframes progress-bar-segment-indicator-grow {
 		from { width: 0%; }
 		to { width: var(--_width); }
 	}
 
-	@keyframes progress-bar-segment-shrink {
+	@keyframes progress-bar-segment-indicator-shrink {
 		from { width: var(--_width); opacity: 1; }
 		to { width: 0%; opacity: 0; }
 	}
@@ -30115,7 +30897,7 @@ const progressBarSegmentStyles = css`
 	/* # Hover area (tooltip trigger)
 	   Fills the segment; captures hover/focus for the wrapping nldd-tooltip. */
 
-	.progress-bar-segment__tooltip-area {
+	.progress-bar-segment-indicator__tooltip-area {
 		display: block;
 		position: absolute;
 		inset: 0;
@@ -30141,8 +30923,8 @@ function progressBarTemplate(component, onSlotChange) {
   const hasCaption = component._hasCaption;
   const isExiting = component._indeterminateExiting;
   const isEntering = component._indeterminateEntering;
-  const showIndeterminateIndicator = (component.indeterminate || isExiting) && !component._hasSegments;
-  const showInternalSegment = !component._hasSegments && component.value !== null && component.value > 0 && (!component.indeterminate || isEntering);
+  const showIndeterminateIndicator = (component.indeterminate || isExiting) && !component._hasSegmentIndicators;
+  const showInternalSegmentIndicator = !component._hasSegmentIndicators && component.value !== null && component.value > 0 && (!component.indeterminate || isEntering);
   const ariaValueNow = component.indeterminate ? void 0 : Math.round(component._totalValue);
   const ariaLabel = component.text || component._t("components.progress-bar.label-text");
   return html`
@@ -30160,6 +30942,13 @@ function progressBarTemplate(component, onSlotChange) {
 			aria-valuenow=${ifDefined(ariaValueNow)}
 			aria-valuetext=${component._ariaValueText}
 		>
+			${showInternalSegmentIndicator ? html`
+				<nldd-progress-bar-segment-indicator class="progress-bar__segment-indicator"
+					.value=${component.value}
+					color=${component.color}
+				></nldd-progress-bar-segment-indicator>
+			` : nothing}
+			<slot @slotchange=${onSlotChange}></slot>
 			${showIndeterminateIndicator ? html`
 				<div class=${classMap({
     "progress-bar__indeterminate-indicator": true,
@@ -30167,13 +30956,6 @@ function progressBarTemplate(component, onSlotChange) {
     "is-fading-in": isEntering && component.indeterminate
   })}></div>
 			` : nothing}
-			${showInternalSegment ? html`
-				<nldd-progress-bar-segment class="progress-bar__segment"
-					.value=${component.value}
-					color=${component.color}
-				></nldd-progress-bar-segment>
-			` : nothing}
-			<slot @slotchange=${onSlotChange}></slot>
 		</div>
 	`;
 }
@@ -30183,18 +30965,18 @@ 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$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$2(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 const INDETERMINATE_TRANSITION_MS$1 = 300;
-let NLDDProgressBarSegment = class extends LitElement {
+let NLDDProgressBarSegmentIndicator = class extends LitElement {
   constructor() {
     super(...arguments);
     this.value = 0;
@@ -30209,11 +30991,11 @@ let NLDDProgressBarSegment = class extends LitElement {
   render() {
     const text = this._effectiveTooltip;
     if (!text) {
-      return html`<span class="progress-bar-segment__tooltip-area"></span>`;
+      return html`<span class="progress-bar-segment-indicator__tooltip-area"></span>`;
     }
     return html`
 			<nldd-tooltip text=${text} timing="instant">
-				<span class="progress-bar-segment__tooltip-area"
+				<span class="progress-bar-segment-indicator__tooltip-area"
 					tabindex="0"
 					role="img"
 					aria-label=${text}
@@ -30222,25 +31004,25 @@ let NLDDProgressBarSegment = class extends LitElement {
 		`;
   }
 };
-NLDDProgressBarSegment.styles = progressBarSegmentStyles;
-__decorateClass$2([
+NLDDProgressBarSegmentIndicator.styles = progressBarSegmentIndicatorStyles;
+__decorateClass$1([
   property({ type: Number, reflect: true })
-], NLDDProgressBarSegment.prototype, "value", 2);
-__decorateClass$2([
+], NLDDProgressBarSegmentIndicator.prototype, "value", 2);
+__decorateClass$1([
   property({ type: String, reflect: true })
-], NLDDProgressBarSegment.prototype, "color", 2);
-__decorateClass$2([
+], NLDDProgressBarSegmentIndicator.prototype, "color", 2);
+__decorateClass$1([
   property({ type: String, reflect: true })
-], NLDDProgressBarSegment.prototype, "name", 2);
-__decorateClass$2([
+], NLDDProgressBarSegmentIndicator.prototype, "name", 2);
+__decorateClass$1([
   property({ type: String, reflect: true, attribute: "tooltip-text" })
-], NLDDProgressBarSegment.prototype, "tooltipText", 2);
-__decorateClass$2([
+], NLDDProgressBarSegmentIndicator.prototype, "tooltipText", 2);
+__decorateClass$1([
   state()
-], NLDDProgressBarSegment.prototype, "_autoTooltipText", 2);
-NLDDProgressBarSegment = __decorateClass$2([
-  customElement("nldd-progress-bar-segment")
-], NLDDProgressBarSegment);
+], NLDDProgressBarSegmentIndicator.prototype, "_autoTooltipText", 2);
+NLDDProgressBarSegmentIndicator = __decorateClass$1([
+  customElement("nldd-progress-bar-segment-indicator")
+], NLDDProgressBarSegmentIndicator);
 let NLDDProgressBar = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -30256,7 +31038,7 @@ let NLDDProgressBar = class extends LitElement {
     this.accessibleLabel = "";
     this.indeterminate = false;
     this.translations = {};
-    this._segments = [];
+    this._segmentIndicators = [];
     this._indeterminateExiting = false;
     this._indeterminateEntering = false;
     this._onSlotChangeBound = this._onSlotChange.bind(this);
@@ -30265,13 +31047,13 @@ let NLDDProgressBar = class extends LitElement {
     return this.translations[key] ?? nlddProgressBarTranslations[key];
   }
   /** Returns true when the user has provided segment children. */
-  get _hasSegments() {
-    return this._segments.length > 0;
+  get _hasSegmentIndicators() {
+    return this._segmentIndicators.length > 0;
   }
   /** Sum of all segment values, or the parent's own value, or 0. */
   get _totalValue() {
-    if (this._hasSegments) {
-      return this._segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+    if (this._hasSegmentIndicators) {
+      return this._segmentIndicators.reduce((sum, s) => sum + Math.max(0, s.value), 0);
     }
     return Math.max(0, this.value ?? 0);
   }
@@ -30301,21 +31083,21 @@ let NLDDProgressBar = class extends LitElement {
     if (this.indeterminate) return this._t("components.progress-bar.loading-text");
     const completedSuffix = this._t("components.progress-bar.completed-suffix-text");
     const totalPrefix = this._t("components.progress-bar.total-prefix-text");
-    if (!this._hasSegments) {
+    if (!this._hasSegmentIndicators) {
       return `${Math.round(this._percentage)}% ${completedSuffix}`;
     }
-    const named = this._segments.filter((s) => s.name);
-    const allNamed = named.length === this._segments.length && this._segments.length > 0;
-    const segmentDescriptions = this._segments.filter((s) => s.value > 0).map((s) => {
+    const named = this._segmentIndicators.filter((s) => s.name);
+    const allNamed = named.length === this._segmentIndicators.length && this._segmentIndicators.length > 0;
+    const segmentIndicatorDescriptions = this._segmentIndicators.filter((s) => s.value > 0).map((s) => {
       const pct = this.max > 0 ? Math.round(s.value / this.max * 100) : 0;
       return s.name ? `${s.name}: ${pct}%` : `${pct}%`;
     });
     if (this.mode === "distribution") {
-      return segmentDescriptions.join(", ");
+      return segmentIndicatorDescriptions.join(", ");
     }
     const totalPct = Math.round(this._percentage);
     if (allNamed) {
-      return `${segmentDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
+      return `${segmentIndicatorDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
     }
     return `${totalPct}% ${completedSuffix}`;
   }
@@ -30325,7 +31107,7 @@ let NLDDProgressBar = class extends LitElement {
     return !!this.text || this.valueDisplay === "inline" && !!this._displayValue;
   }
   firstUpdated() {
-    this._syncSegments();
+    this._syncSegmentIndicators();
   }
   willUpdate(changed) {
     if (changed.has("indeterminate")) {
@@ -30338,9 +31120,9 @@ let NLDDProgressBar = class extends LitElement {
     }
   }
   updated() {
-    this._syncSegments();
+    this._syncSegmentIndicators();
   }
-  /** Indicator fades out, segment grows from 0 to its target — both 300ms
+  /** Indeterminate indicator fades out, segment-indicator grows from 0 to its target — both 300ms
    *  (matches --primitives-transition-duration-slow and nldd-progress-circle). */
   _beginIndeterminateExit() {
     this._cancelIndeterminateEnter();
@@ -30350,7 +31132,7 @@ let NLDDProgressBar = class extends LitElement {
       this._exitTimeout = void 0;
     }, INDETERMINATE_TRANSITION_MS$1);
   }
-  /** Indicator fades in, segment shrinks from current width to 0 — both 300ms. */
+  /** Indeterminate indicator fades in, segment-indicator shrinks from current width to 0 — both 300ms. */
   _beginIndeterminateEnter() {
     this._cancelIndeterminateExit();
     this._indeterminateEntering = true;
@@ -30373,8 +31155,10 @@ let NLDDProgressBar = class extends LitElement {
     }
     this._indeterminateEntering = false;
   }
-  /** Auto-tooltip based on parent's value-format. Override via segment.tooltip. */
-  _formatSegmentTooltip(seg) {
+  /** Computes a segment-indicator's auto-tooltip from the parent's value-format
+   *  and the segment name. Consumers override it per segment with the
+   *  tooltip-text attribute, which wins over this auto-text. */
+  _formatSegmentIndicatorTooltip(seg) {
     if (this.valueDisplay === "none") return seg.name ?? "";
     const v = Math.max(0, seg.value);
     const pct = this.max > 0 ? Math.round(v / this.max * 100) : 0;
@@ -30402,30 +31186,30 @@ let NLDDProgressBar = class extends LitElement {
   _onSlotChange() {
     const slot = this.shadowRoot?.querySelector("slot:not([name])");
     const assigned = slot?.assignedElements({ flatten: true }) ?? [];
-    this._segments = assigned.filter(
-      (el) => el instanceof NLDDProgressBarSegment
+    this._segmentIndicators = assigned.filter(
+      (el) => el instanceof NLDDProgressBarSegmentIndicator
     );
     this._attributeObserver?.disconnect();
     this._attributeObserver = new MutationObserver(() => this.requestUpdate());
-    for (const seg of this._segments) {
+    for (const seg of this._segmentIndicators) {
       this._attributeObserver.observe(seg, {
         attributes: true,
         attributeFilter: ["value", "color", "name", "tooltip-text"]
       });
     }
   }
-  _syncSegments() {
+  _syncSegmentIndicators() {
     const total = this._totalValue;
     const denominator = total > this.max ? total : this.max;
-    const internalSegment = this.shadowRoot?.querySelector(
-      ".progress-bar__segment"
+    const internalSegmentIndicator = this.shadowRoot?.querySelector(
+      ".progress-bar__segment-indicator"
     ) ?? null;
-    const allSegments = internalSegment ? [internalSegment, ...this._segments] : [...this._segments];
-    const visibleCount = allSegments.filter((s) => Math.max(0, s.value) > 0).length;
+    const allSegmentIndicators = internalSegmentIndicator ? [internalSegmentIndicator, ...this._segmentIndicators] : [...this._segmentIndicators];
+    const visibleCount = allSegmentIndicators.filter((s) => Math.max(0, s.value) > 0).length;
     const suppressAutoTooltip = visibleCount <= 1 && this.valueDisplay !== "tooltip";
     const isExiting = this._indeterminateExiting;
     const isEntering = this._indeterminateEntering;
-    for (const seg of allSegments) {
+    for (const seg of allSegmentIndicators) {
       const v = Math.max(0, seg.value);
       if (v <= 0) {
         seg.hidden = true;
@@ -30435,9 +31219,9 @@ let NLDDProgressBar = class extends LitElement {
       }
       seg.hidden = false;
       const pct = denominator > 0 ? v / denominator * 100 : 0;
-      seg.style.setProperty("--context-progress-bar-segment-width", `${pct}%`);
+      seg.style.setProperty("--context-progress-bar-segment-indicator-width", `${pct}%`);
       seg.setAttribute("data-mode", this.mode);
-      seg._autoTooltipText = suppressAutoTooltip ? "" : this._formatSegmentTooltip(seg);
+      seg._autoTooltipText = suppressAutoTooltip ? "" : this._formatSegmentIndicatorTooltip(seg);
       seg.toggleAttribute("data-grow", isExiting);
       seg.toggleAttribute("data-shrink", isEntering);
     }
@@ -30447,52 +31231,52 @@ let NLDDProgressBar = class extends LitElement {
   }
 };
 NLDDProgressBar.styles = progressBarStyles;
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "mode", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: Number, reflect: true })
 ], NLDDProgressBar.prototype, "max", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: Number, reflect: true })
 ], NLDDProgressBar.prototype, "value", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "color", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "size", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true })
 ], NLDDProgressBar.prototype, "text", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true, attribute: "value-format" })
 ], NLDDProgressBar.prototype, "valueFormat", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true, attribute: "value-text" })
 ], NLDDProgressBar.prototype, "valueText", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true, attribute: "value-display" })
 ], NLDDProgressBar.prototype, "valueDisplay", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDProgressBar.prototype, "accessibleLabel", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: Boolean, reflect: true })
 ], NLDDProgressBar.prototype, "indeterminate", 2);
-__decorateClass$2([
+__decorateClass$1([
   property({ type: Object })
 ], NLDDProgressBar.prototype, "translations", 2);
-__decorateClass$2([
+__decorateClass$1([
   state()
-], NLDDProgressBar.prototype, "_segments", 2);
-__decorateClass$2([
+], NLDDProgressBar.prototype, "_segmentIndicators", 2);
+__decorateClass$1([
   state()
 ], NLDDProgressBar.prototype, "_indeterminateExiting", 2);
-__decorateClass$2([
+__decorateClass$1([
   state()
 ], NLDDProgressBar.prototype, "_indeterminateEntering", 2);
-NLDDProgressBar = __decorateClass$2([
+NLDDProgressBar = __decorateClass$1([
   customElement("nldd-progress-bar")
 ], NLDDProgressBar);
 const progressCircleStyles = css`
@@ -30575,13 +31359,13 @@ const progressCircleStyles = css`
 	   Animate value changes smoothly via stroke-dasharray transition.
 	   Crossfade with the indeterminate indicator uses opacity on the SVG group. */
 
-	.progress-circle__segment {
+	.progress-circle__segment-indicator {
 		stroke-width: var(--_stroke-width);
 		opacity: 1;
 		transition: stroke-dasharray var(--primitives-transition-duration-slow) ease-out, stroke-dashoffset var(--primitives-transition-duration-slow) ease-out, opacity var(--primitives-transition-duration-slow) ease-out;
 	}
 
-	.progress-circle__segment[data-shrink] {
+	.progress-circle__segment-indicator[data-shrink] {
 		opacity: 0;
 	}
 
@@ -30590,41 +31374,41 @@ const progressCircleStyles = css`
 	   visible gap between segments stays consistent.
 	   Distribution mode: butt caps keep the segment boundaries crisp. */
 
-	.progress-circle__segment {
+	.progress-circle__segment-indicator {
 		stroke-linecap: round;
 	}
 
-	:host([mode="distribution"]) .progress-circle__segment {
+	:host([mode="distribution"]) .progress-circle__segment-indicator {
 		stroke-linecap: butt;
 	}
 
 
 	/* ## Arc color per variant */
 
-	.progress-circle__segment--neutral { stroke: var(--components-progress-circle-neutral-background-color); }
-	.progress-circle__segment--accent { stroke: var(--components-progress-circle-accent-background-color); }
-	.progress-circle__segment--success { stroke: var(--components-progress-circle-success-background-color); }
-	.progress-circle__segment--warning { stroke: var(--components-progress-circle-warning-background-color); }
-	.progress-circle__segment--critical { stroke: var(--components-progress-circle-critical-background-color); }
-	.progress-circle__segment--coolgray { stroke: var(--components-progress-circle-coolgray-background-color); }
-	.progress-circle__segment--lintblauw { stroke: var(--components-progress-circle-lintblauw-background-color); }
-	.progress-circle__segment--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-background-color); }
-	.progress-circle__segment--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-background-color); }
-	.progress-circle__segment--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-background-color); }
-	.progress-circle__segment--paars { stroke: var(--components-progress-circle-paars-background-color); }
-	.progress-circle__segment--violet { stroke: var(--components-progress-circle-violet-background-color); }
-	.progress-circle__segment--robijnrood { stroke: var(--components-progress-circle-robijnrood-background-color); }
-	.progress-circle__segment--roze { stroke: var(--components-progress-circle-roze-background-color); }
-	.progress-circle__segment--rood { stroke: var(--components-progress-circle-rood-background-color); }
-	.progress-circle__segment--oranje { stroke: var(--components-progress-circle-oranje-background-color); }
-	.progress-circle__segment--donkergeel { stroke: var(--components-progress-circle-donkergeel-background-color); }
-	.progress-circle__segment--geel { stroke: var(--components-progress-circle-geel-background-color); }
-	.progress-circle__segment--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-background-color); }
-	.progress-circle__segment--bruin { stroke: var(--components-progress-circle-bruin-background-color); }
-	.progress-circle__segment--donkergroen { stroke: var(--components-progress-circle-donkergroen-background-color); }
-	.progress-circle__segment--groen { stroke: var(--components-progress-circle-groen-background-color); }
-	.progress-circle__segment--mosgroen { stroke: var(--components-progress-circle-mosgroen-background-color); }
-	.progress-circle__segment--mintgroen { stroke: var(--components-progress-circle-mintgroen-background-color); }
+	.progress-circle__segment-indicator--neutral { stroke: var(--components-progress-circle-neutral-background-color); }
+	.progress-circle__segment-indicator--accent { stroke: var(--components-progress-circle-accent-background-color); }
+	.progress-circle__segment-indicator--success { stroke: var(--components-progress-circle-success-background-color); }
+	.progress-circle__segment-indicator--warning { stroke: var(--components-progress-circle-warning-background-color); }
+	.progress-circle__segment-indicator--critical { stroke: var(--components-progress-circle-critical-background-color); }
+	.progress-circle__segment-indicator--coolgray { stroke: var(--components-progress-circle-coolgray-background-color); }
+	.progress-circle__segment-indicator--lintblauw { stroke: var(--components-progress-circle-lintblauw-background-color); }
+	.progress-circle__segment-indicator--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-background-color); }
+	.progress-circle__segment-indicator--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-background-color); }
+	.progress-circle__segment-indicator--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-background-color); }
+	.progress-circle__segment-indicator--paars { stroke: var(--components-progress-circle-paars-background-color); }
+	.progress-circle__segment-indicator--violet { stroke: var(--components-progress-circle-violet-background-color); }
+	.progress-circle__segment-indicator--robijnrood { stroke: var(--components-progress-circle-robijnrood-background-color); }
+	.progress-circle__segment-indicator--roze { stroke: var(--components-progress-circle-roze-background-color); }
+	.progress-circle__segment-indicator--rood { stroke: var(--components-progress-circle-rood-background-color); }
+	.progress-circle__segment-indicator--oranje { stroke: var(--components-progress-circle-oranje-background-color); }
+	.progress-circle__segment-indicator--donkergeel { stroke: var(--components-progress-circle-donkergeel-background-color); }
+	.progress-circle__segment-indicator--geel { stroke: var(--components-progress-circle-geel-background-color); }
+	.progress-circle__segment-indicator--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-background-color); }
+	.progress-circle__segment-indicator--bruin { stroke: var(--components-progress-circle-bruin-background-color); }
+	.progress-circle__segment-indicator--donkergroen { stroke: var(--components-progress-circle-donkergroen-background-color); }
+	.progress-circle__segment-indicator--groen { stroke: var(--components-progress-circle-groen-background-color); }
+	.progress-circle__segment-indicator--mosgroen { stroke: var(--components-progress-circle-mosgroen-background-color); }
+	.progress-circle__segment-indicator--mintgroen { stroke: var(--components-progress-circle-mintgroen-background-color); }
 
 
 	/* # Spinner (indeterminate)
@@ -30655,36 +31439,37 @@ const progressCircleStyles = css`
 	}
 
 
-	/* # Indeterminate fill colour follows the color variant; default accent (blue) */
+	/* # Indeterminate fill + border colour follow the color variant; default accent (blue) */
 
 	:host {
 		--_indeterminate-background-color: var(--components-progress-circle-accent-background-color);
-	}
-
-	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-circle-neutral-background-color); }
-	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-circle-accent-background-color); }
-	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-circle-success-background-color); }
-	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-circle-warning-background-color); }
-	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-circle-critical-background-color); }
-	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-circle-coolgray-background-color); }
-	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lintblauw-background-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerblauw-background-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-hemelblauw-background-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lichtblauw-background-color); }
-	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-circle-paars-background-color); }
-	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-circle-violet-background-color); }
-	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-circle-robijnrood-background-color); }
-	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-circle-roze-background-color); }
-	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-circle-rood-background-color); }
-	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-circle-oranje-background-color); }
-	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergeel-background-color); }
-	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-circle-geel-background-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerbruin-background-color); }
-	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-circle-bruin-background-color); }
-	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergroen-background-color); }
-	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-circle-groen-background-color); }
-	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mosgroen-background-color); }
-	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mintgroen-background-color); }
+		--_indeterminate-border-color: var(--components-progress-circle-accent-border-color);
+	}
+
+	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-circle-neutral-background-color); --_indeterminate-border-color: var(--components-progress-circle-neutral-border-color); }
+	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-circle-accent-background-color); --_indeterminate-border-color: var(--components-progress-circle-accent-border-color); }
+	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-circle-success-background-color); --_indeterminate-border-color: var(--components-progress-circle-success-border-color); }
+	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-circle-warning-background-color); --_indeterminate-border-color: var(--components-progress-circle-warning-border-color); }
+	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-circle-critical-background-color); --_indeterminate-border-color: var(--components-progress-circle-critical-border-color); }
+	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-circle-coolgray-background-color); --_indeterminate-border-color: var(--components-progress-circle-coolgray-border-color); }
+	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lintblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lintblauw-border-color); }
+	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerblauw-border-color); }
+	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-hemelblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-hemelblauw-border-color); }
+	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lichtblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lichtblauw-border-color); }
+	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-circle-paars-background-color); --_indeterminate-border-color: var(--components-progress-circle-paars-border-color); }
+	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-circle-violet-background-color); --_indeterminate-border-color: var(--components-progress-circle-violet-border-color); }
+	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-circle-robijnrood-background-color); --_indeterminate-border-color: var(--components-progress-circle-robijnrood-border-color); }
+	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-circle-roze-background-color); --_indeterminate-border-color: var(--components-progress-circle-roze-border-color); }
+	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-circle-rood-background-color); --_indeterminate-border-color: var(--components-progress-circle-rood-border-color); }
+	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-circle-oranje-background-color); --_indeterminate-border-color: var(--components-progress-circle-oranje-border-color); }
+	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergeel-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergeel-border-color); }
+	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-circle-geel-background-color); --_indeterminate-border-color: var(--components-progress-circle-geel-border-color); }
+	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerbruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerbruin-border-color); }
+	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-circle-bruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-bruin-border-color); }
+	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergroen-border-color); }
+	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-circle-groen-background-color); --_indeterminate-border-color: var(--components-progress-circle-groen-border-color); }
+	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mosgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mosgroen-border-color); }
+	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mintgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mintgroen-border-color); }
 
 
 	/* # Caption (label + value) */
@@ -30734,7 +31519,7 @@ const progressCircleStyles = css`
 			50% { opacity: 0.7; }
 		}
 
-		.progress-circle__segment {
+		.progress-circle__segment-indicator {
 			transition: none;
 			animation: none;
 		}
@@ -30742,13 +31527,13 @@ const progressCircleStyles = css`
 
 	@media (forced-colors: active) {
 		.progress-circle__track,
-		.progress-circle__segment,
+		.progress-circle__segment-indicator,
 		.progress-circle__indeterminate-indicator {
 			stroke: CanvasText;
 		}
 	}
 `;
-const progressCircleSegmentStyles = css`
+const progressCircleSegmentIndicatorStyles = css`
 	:host {
 		display: none;
 	}
@@ -30776,7 +31561,7 @@ function progressCircleTemplate(component, onSlotChange) {
   const ariaText = component._ariaValueText;
   const ariaValueNow = component.indeterminate ? void 0 : Math.round(component._totalValue);
   const isExiting = component._indeterminateExiting;
-  const isIndeterminate = (component.indeterminate || isExiting) && !component._hasSegments;
+  const isIndeterminate = (component.indeterminate || isExiting) && !component._hasSegmentIndicators;
   const showArcs = !component.indeterminate || component._indeterminateEntering;
   const arcs = showArcs ? component._buildArcs() : [];
   const sizeInPixels = Number(component.size) || 28;
@@ -30816,6 +31601,15 @@ function progressCircleTemplate(component, onSlotChange) {
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>
 					`)}
+					${isIndeterminate ? svg`
+						<filter id="progress-circle-border-indeterminate-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
+							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
+							<feFlood style="flood-color: var(--_indeterminate-border-color)" result="flood"></feFlood>
+							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
+							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
+						</filter>
+					` : nothing}
 				</defs>
 				<circle class="progress-circle__track"
 					cx="50"
@@ -30825,7 +31619,7 @@ function progressCircleTemplate(component, onSlotChange) {
 					filter="url(#progress-circle-border-track-${uid})"
 				></circle>
 				${arcs.map((arc) => svg`
-					<circle class="progress-circle__segment progress-circle__segment--${arc.color}"
+					<circle class="progress-circle__segment-indicator progress-circle__segment-indicator--${arc.color}"
 						cx="50"
 						cy="50"
 						r=${radius}
@@ -30843,6 +31637,7 @@ function progressCircleTemplate(component, onSlotChange) {
 						fill="none"
 						pathLength="100"
 						stroke-linecap="round"
+						filter="url(#progress-circle-border-indeterminate-${uid})"
 					></circle>
 				` : nothing}
 			</svg>
@@ -30872,18 +31667,18 @@ 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 = 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$1(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const INDETERMINATE_TRANSITION_MS = 300;
-let NLDDProgressCircleSegment = class extends LitElement {
+let NLDDProgressCircleSegmentIndicator = class extends LitElement {
   constructor() {
     super(...arguments);
     this.value = 0;
@@ -30894,19 +31689,19 @@ let NLDDProgressCircleSegment = class extends LitElement {
     return nothing;
   }
 };
-NLDDProgressCircleSegment.styles = progressCircleSegmentStyles;
-__decorateClass$1([
+NLDDProgressCircleSegmentIndicator.styles = progressCircleSegmentIndicatorStyles;
+__decorateClass([
   property({ type: Number, reflect: true })
-], NLDDProgressCircleSegment.prototype, "value", 2);
-__decorateClass$1([
+], NLDDProgressCircleSegmentIndicator.prototype, "value", 2);
+__decorateClass([
   property({ type: String, reflect: true })
-], NLDDProgressCircleSegment.prototype, "color", 2);
-__decorateClass$1([
+], NLDDProgressCircleSegmentIndicator.prototype, "color", 2);
+__decorateClass([
   property({ type: String, reflect: true })
-], NLDDProgressCircleSegment.prototype, "name", 2);
-NLDDProgressCircleSegment = __decorateClass$1([
-  customElement("nldd-progress-circle-segment")
-], NLDDProgressCircleSegment);
+], NLDDProgressCircleSegmentIndicator.prototype, "name", 2);
+NLDDProgressCircleSegmentIndicator = __decorateClass([
+  customElement("nldd-progress-circle-segment-indicator")
+], NLDDProgressCircleSegmentIndicator);
 let NLDDProgressCircle = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -30922,7 +31717,7 @@ let NLDDProgressCircle = class extends LitElement {
     this.accessibleLabel = "";
     this.indeterminate = false;
     this.translations = {};
-    this._segments = [];
+    this._segmentIndicators = [];
     this._indeterminateExiting = false;
     this._indeterminateEntering = false;
     this._arcsAtZero = false;
@@ -30932,12 +31727,12 @@ let NLDDProgressCircle = class extends LitElement {
   _t(key) {
     return this.translations[key] ?? nlddProgressCircleTranslations[key];
   }
-  get _hasSegments() {
-    return this._segments.length > 0;
+  get _hasSegmentIndicators() {
+    return this._segmentIndicators.length > 0;
   }
   get _totalValue() {
-    if (this._hasSegments) {
-      return this._segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+    if (this._hasSegmentIndicators) {
+      return this._segmentIndicators.reduce((sum, s) => sum + Math.max(0, s.value), 0);
     }
     return Math.max(0, this.value ?? 0);
   }
@@ -30962,26 +31757,26 @@ let NLDDProgressCircle = class extends LitElement {
     if (this.valueDisplay !== "tooltip") return "";
     if (this.indeterminate) return this._t("components.progress-circle.loading-text");
     if (this.valueText) return this.valueText;
-    if (!this._hasSegments) {
+    if (!this._hasSegmentIndicators) {
       const v = Math.max(0, this.value ?? 0);
       const pct = this.max > 0 ? Math.round(v / this.max * 100) : 0;
       return this._formatValuePart(v, pct);
     }
-    const named = this._segments.filter((s) => s.name);
-    const allNamed = named.length === this._segments.length && this._segments.length > 0;
-    const segmentDescriptions = this._segments.filter((s) => s.value > 0).map((s) => {
+    const named = this._segmentIndicators.filter((s) => s.name);
+    const allNamed = named.length === this._segmentIndicators.length && this._segmentIndicators.length > 0;
+    const segmentIndicatorDescriptions = this._segmentIndicators.filter((s) => s.value > 0).map((s) => {
       const pct = this.max > 0 ? Math.round(s.value / this.max * 100) : 0;
       const valuePart = this._formatValuePart(s.value, pct);
       return s.name ? `${s.name}: ${valuePart}` : valuePart;
     });
     if (this.mode === "distribution") {
-      return segmentDescriptions.join(", ");
+      return segmentIndicatorDescriptions.join(", ");
     }
     const totalPct = Math.round(this._percentage);
     const totalValuePart = this._formatValuePart(this._totalValue, totalPct);
     if (allNamed) {
       const totalPrefix = this._t("components.progress-circle.total-prefix-text");
-      return `${segmentDescriptions.join(", ")}. ${totalPrefix} ${totalValuePart}`;
+      return `${segmentIndicatorDescriptions.join(", ")}. ${totalPrefix} ${totalValuePart}`;
     }
     return totalValuePart;
   }
@@ -30992,22 +31787,22 @@ let NLDDProgressCircle = class extends LitElement {
     if (this.indeterminate) return this._t("components.progress-circle.loading-text");
     const completedSuffix = this._t("components.progress-circle.completed-suffix-text");
     const totalPrefix = this._t("components.progress-circle.total-prefix-text");
-    if (!this._hasSegments) {
+    if (!this._hasSegmentIndicators) {
       return `${Math.round(this._percentage)}% ${completedSuffix}`;
     }
-    const named = this._segments.filter((s) => s.name);
-    const allNamed = named.length === this._segments.length && this._segments.length > 0;
-    const segmentDescriptions = this._segments.filter((s) => s.value > 0).map((s) => {
+    const named = this._segmentIndicators.filter((s) => s.name);
+    const allNamed = named.length === this._segmentIndicators.length && this._segmentIndicators.length > 0;
+    const segmentIndicatorDescriptions = this._segmentIndicators.filter((s) => s.value > 0).map((s) => {
       const pct = this.max > 0 ? Math.round(s.value / this.max * 100) : 0;
       const valuePart = this._formatValuePart(s.value, pct);
       return s.name ? `${s.name}: ${valuePart}` : valuePart;
     });
     if (this.mode === "distribution") {
-      return segmentDescriptions.join(", ");
+      return segmentIndicatorDescriptions.join(", ");
     }
     const totalPct = Math.round(this._percentage);
     if (allNamed) {
-      return `${segmentDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
+      return `${segmentIndicatorDescriptions.join(", ")}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
     }
     return `${totalPct}% ${completedSuffix}`;
   }
@@ -31083,15 +31878,15 @@ let NLDDProgressCircle = class extends LitElement {
   _onSlotChange() {
     const slot = this.shadowRoot?.querySelector("slot:not([name])");
     const assigned = slot?.assignedElements({ flatten: true }) ?? [];
-    this._segments = assigned.filter(
+    this._segmentIndicators = assigned.filter(
       // instanceof, not tagName === '...': tagName comparison breaks
       // under scoped custom-element registries where the same class
       // can be registered under a different tag.
-      (el) => el instanceof NLDDProgressCircleSegment
+      (el) => el instanceof NLDDProgressCircleSegmentIndicator
     );
     this._attributeObserver?.disconnect();
     this._attributeObserver = new MutationObserver(() => this.requestUpdate());
-    for (const seg of this._segments) {
+    for (const seg of this._segmentIndicators) {
       this._attributeObserver.observe(seg, {
         attributes: true,
         attributeFilter: ["value", "color", "name"]
@@ -31107,19 +31902,19 @@ let NLDDProgressCircle = class extends LitElement {
    *  externally — the leading underscore signals "not API". */
   _buildArcs() {
     const arcs = [];
-    const sourceSegments = this._hasSegments ? this._segments.map((s) => ({ value: Math.max(0, s.value), color: s.color })) : this.value !== null ? [{ value: Math.max(0, this.value), color: this.color }] : [];
+    const sourceSegmentIndicators = this._hasSegmentIndicators ? this._segmentIndicators.map((s) => ({ value: Math.max(0, s.value), color: s.color })) : this.value !== null ? [{ value: Math.max(0, this.value), color: this.color }] : [];
     const sizeInPixels = Number(this.size) || 28;
     const strokeWidthPx = getStrokeWidthPx(sizeInPixels);
-    const isMultiSegment = sourceSegments.length > 1 || this.mode === "distribution";
+    const isMultiSegmentIndicator = sourceSegmentIndicators.length > 1 || this.mode === "distribution";
     const isProgressMode = this.mode !== "distribution";
-    const visibleGapPx = isMultiSegment ? isProgressMode ? 1 : 2 : 0;
-    const capCompensationPx = isProgressMode && isMultiSegment ? strokeWidthPx : 0;
+    const visibleGapPx = isMultiSegmentIndicator ? isProgressMode ? 1 : 2 : 0;
+    const capCompensationPx = isProgressMode && isMultiSegmentIndicator ? strokeWidthPx : 0;
     const gapLength = (visibleGapPx + capCompensationPx) * (100 / sizeInPixels);
     const circumference = getCircumference(sizeInPixels);
     const total = this._totalValue;
     const denominator = total > this.max ? total : this.max;
     let cumulative = 0;
-    for (const seg of sourceSegments) {
+    for (const seg of sourceSegmentIndicators) {
       const fraction = denominator > 0 ? seg.value / denominator : 0;
       const rawLength = fraction * circumference;
       const length = this._arcsAtZero || seg.value <= 0 ? 0 : Math.max(0, rawLength - gapLength);
@@ -31144,7 +31939,7 @@ let NLDDProgressCircle = class extends LitElement {
    * always set and live in the Lit template.
    */
   _syncDynamicAttributes() {
-    const segments = this.shadowRoot?.querySelectorAll(".progress-circle__segment");
+    const segments = this.shadowRoot?.querySelectorAll(".progress-circle__segment-indicator");
     if (segments) {
       for (const el of segments) {
         if (this._indeterminateEntering) {
@@ -31166,247 +31961,104 @@ let NLDDProgressCircle = class extends LitElement {
 };
 NLDDProgressCircle.styles = progressCircleStyles;
 NLDDProgressCircle._idCounter = 0;
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "mode", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: Number, reflect: true })
 ], NLDDProgressCircle.prototype, "max", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: Number, reflect: true })
 ], NLDDProgressCircle.prototype, "value", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "color", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "size", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true })
 ], NLDDProgressCircle.prototype, "text", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true, attribute: "value-format" })
 ], NLDDProgressCircle.prototype, "valueFormat", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true, attribute: "value-text" })
 ], NLDDProgressCircle.prototype, "valueText", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true, attribute: "value-display" })
 ], NLDDProgressCircle.prototype, "valueDisplay", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: String, reflect: true, attribute: "accessible-label" })
 ], NLDDProgressCircle.prototype, "accessibleLabel", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: Boolean, reflect: true })
 ], NLDDProgressCircle.prototype, "indeterminate", 2);
-__decorateClass$1([
+__decorateClass([
   property({ type: Object })
 ], NLDDProgressCircle.prototype, "translations", 2);
-__decorateClass$1([
+__decorateClass([
   state()
-], NLDDProgressCircle.prototype, "_segments", 2);
-__decorateClass$1([
+], NLDDProgressCircle.prototype, "_segmentIndicators", 2);
+__decorateClass([
   state()
 ], NLDDProgressCircle.prototype, "_indeterminateExiting", 2);
-__decorateClass$1([
+__decorateClass([
   state()
 ], NLDDProgressCircle.prototype, "_indeterminateEntering", 2);
-__decorateClass$1([
+__decorateClass([
   state()
 ], NLDDProgressCircle.prototype, "_arcsAtZero", 2);
-NLDDProgressCircle = __decorateClass$1([
+NLDDProgressCircle = __decorateClass([
   customElement("nldd-progress-circle")
 ], NLDDProgressCircle);
-const progressStyles = css`
-
-
-	/* # Host */
-
-	:host {
-		--_fade-duration: var(--primitives-transition-duration-slow);
-		--_indicator-max-width: var(--primitives-area-240);
-
-		${inheritedTextReset}
-		box-sizing: border-box;
-		display: flex;
-		flex-grow: 1;
-		flex-shrink: 1;
-		flex-basis: auto;
-		width: 100%;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-
-	/* # Indicator
-	   Wrapper around the slot so we can fade the indicator in once the delay
-	   has passed. The host itself stays visible from mount to take up its
-	   layout space; only the indicator inside fades.
-	   width:100% + max-width gives the bar a concrete width to fill (without
-	   this it has no containing block reference and collapses to 0). The
-	   inner flex centring keeps a small circle aligned in the middle of that
-	   width. */
-
-	.progress__indicator {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-		max-width: var(--_indicator-max-width);
-		animation: progress-fade-in var(--_fade-duration) ease-out;
-	}
-
-	@keyframes progress-fade-in {
-		from { opacity: 0; }
-	}
-
-
-	/* # Accessibility */
-
-	@media (prefers-reduced-motion: reduce) {
-		.progress__indicator {
-			animation: none;
-		}
-	}
-`;
-function progressTemplate(component) {
-  if (!component._visible || component.complete) return nothing;
-  const text = component.noLabel ? "" : component.text || component._t("components.progress.loading-text");
-  return html`
-		<div class="progress__indicator">
-			<slot>
-				<nldd-progress-circle
-					size="28"
-					indeterminate
-					.text=${text}
-				></nldd-progress-circle>
-			</slot>
-		</div>
-	`;
-}
-const nlddProgressTranslations = {
-  "components.progress.loading-text": "Laden"
-};
-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;
-};
-const DELAY_MS = 1e3;
-let NLDDProgress = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.text = "";
-    this.noLabel = false;
-    this.complete = false;
-    this.translations = {};
-    this._visible = false;
-  }
-  _t(key) {
-    return this.translations[key] ?? nlddProgressTranslations[key];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.complete) this.setAttribute("aria-busy", "true");
-    this._visible = false;
-    this._delayTimeout = setTimeout(() => {
-      this._visible = true;
-      this._delayTimeout = void 0;
-    }, DELAY_MS);
-  }
-  willUpdate(changed) {
-    if (changed.has("complete")) {
-      if (this.complete) {
-        this.removeAttribute("aria-busy");
-      } else {
-        this.setAttribute("aria-busy", "true");
-      }
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._delayTimeout) {
-      clearTimeout(this._delayTimeout);
-      this._delayTimeout = void 0;
-    }
-  }
-  render() {
-    return progressTemplate(this);
-  }
-};
-NLDDProgress.styles = progressStyles;
-__decorateClass([
-  property({ type: String, reflect: true })
-], NLDDProgress.prototype, "text", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "no-label" })
-], NLDDProgress.prototype, "noLabel", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], NLDDProgress.prototype, "complete", 2);
-__decorateClass([
-  property({ type: Object })
-], NLDDProgress.prototype, "translations", 2);
-__decorateClass([
-  state()
-], NLDDProgress.prototype, "_visible", 2);
-NLDDProgress = __decorateClass([
-  customElement("nldd-progress")
-], NLDDProgress);
 export {
-  NLDDPagination as $,
-  NLDDFormActions as A,
-  NLDDFormField as B,
-  NLDDFormSection as C,
-  NLDDFullBleedSection as D,
-  NLDDIcon as E,
-  NLDDIconButton as F,
-  NLDDIconCell as G,
-  NLDDImage as H,
-  NLDDInlineDialog as I,
-  NLDDKeyboardShortcut as J,
-  NLDDLink as K,
-  NLDDList as L,
-  NLDDListItem as M,
-  NLDDAppView as N,
-  NLDDMenu as O,
-  NLDDMenuBar as P,
-  NLDDMenuBarItem as Q,
-  NLDDModalDialog as R,
-  NLDDMultiLineTextField as S,
-  NLDDNavigationSplitView as T,
-  NLDDNumberField as U,
-  NLDDOneHalfOneHalfSection as V,
-  NLDDOneThirdTwoThirdsSection as W,
-  NLDDPage as X,
-  NLDDPageFooter as Y,
-  NLDDPageFooterLegalBar as Z,
-  NLDDPageFooterLegalBarItem as _,
-  NLDDBadge as a,
-  NLDDPasswordField as a0,
-  NLDDPopover as a1,
-  NLDDProgress as a2,
+  NLDDPageFooterLegalBarItem as $,
+  NLDDForm as A,
+  NLDDFormActions as B,
+  NLDDFormField as C,
+  NLDDFormSection as D,
+  NLDDFullBleedSection as E,
+  NLDDIcon as F,
+  NLDDIconButton as G,
+  NLDDIconCell as H,
+  NLDDImage as I,
+  NLDDInlineDialog as J,
+  NLDDKeyboardShortcut as K,
+  NLDDLink as L,
+  NLDDList as M,
+  NLDDActivityIndicator as N,
+  NLDDListItem as O,
+  NLDDMenu as P,
+  NLDDMenuBar as Q,
+  NLDDMenuBarItem as R,
+  NLDDModalDialog as S,
+  NLDDMultiLineTextField as T,
+  NLDDNavigationSplitView as U,
+  NLDDNumberField as V,
+  NLDDOneHalfOneHalfSection as W,
+  NLDDOneThirdTwoThirdsSection as X,
+  NLDDPage as Y,
+  NLDDPageFooter as Z,
+  NLDDPageFooterLegalBar as _,
+  NLDDAppView as a,
+  NLDDPagination as a0,
+  NLDDPasswordField as a1,
+  NLDDPopover as a2,
   NLDDProgressBar as a3,
-  NLDDProgressBarSegment as a4,
+  NLDDProgressBarSegmentIndicator as a4,
   NLDDProgressCircle as a5,
-  NLDDProgressCircleSegment as a6,
+  NLDDProgressCircleSegmentIndicator as a6,
   NLDDRadioButton as a7,
   NLDDRadioButtonField as a8,
   NLDDRadioButtonGroup as a9,
-  NLDDTooltip as aA,
-  NLDDTopNavigationBar as aB,
-  NLDDTopTitleBar as aC,
-  NLDDTwoThirdsOneThirdSection as aD,
-  NLDDWindow as aE,
+  NLDDToken as aA,
+  NLDDToolbar as aB,
+  NLDDTooltip as aC,
+  NLDDTopNavigationBar as aD,
+  NLDDTopTitleBar as aE,
+  NLDDTwoThirdsOneThirdSection as aF,
+  NLDDWindow as aG,
   NLDDRichText as aa,
   NLDDSearchField as ab,
   NLDDSegmentedControl as ac,
@@ -31423,39 +32075,39 @@ export {
   NLDDSwitch as an,
   NLDDSwitchField as ao,
   NLDDTabBar as ap,
-  NLDDTag as aq,
-  NLDDTextCell as ar,
-  NLDDTextField as as,
-  NLDDTimelineTrackCell as at,
-  NLDDTitle as au,
-  NLDDTitleCell as av,
-  NLDDToggleButton as aw,
-  NLDDToggleButtonGroup as ax,
-  NLDDToken as ay,
-  NLDDToolbar as az,
-  NLDDBanner as b,
-  NLDDBarSplitView as c,
-  NLDDBlockquote as d,
-  NLDDBox as e,
-  NLDDBreadcrumbs as f,
+  NLDDTable as aq,
+  NLDDTableRow as ar,
+  NLDDTag as as,
+  NLDDTextCell as at,
+  NLDDTextField as au,
+  NLDDTimelineTrackCell as av,
+  NLDDTitle as aw,
+  NLDDTitleCell as ax,
+  NLDDToggleButton as ay,
+  NLDDToggleButtonGroup as az,
+  NLDDBadge as b,
+  NLDDBanner as c,
+  NLDDBarSplitView as d,
+  NLDDBlockquote as e,
+  NLDDBox as f,
   getDefaultExportFromCjs as g,
-  NLDDBreadcrumbsItem as h,
-  NLDDButton as i,
-  NLDDButtonBar as j,
-  NLDDButtonGroup as k,
-  NLDDCard as l,
-  NLDDCell as m,
-  NLDDCheckbox as n,
-  NLDDCheckboxField as o,
-  NLDDCodeEditor as p,
-  NLDDCodeViewer as q,
-  NLDDCollection as r,
-  NLDDComboBox as s,
-  NLDDContainer as t,
-  NLDDDescriptionCell as u,
-  NLDDDivider as v,
-  NLDDDocumentTabBar as w,
-  NLDDDragHandleCell as x,
-  NLDDDropdown as y,
-  NLDDForm as z
+  NLDDBreadcrumbs as h,
+  NLDDBreadcrumbsItem as i,
+  NLDDButton as j,
+  NLDDButtonBar as k,
+  NLDDButtonGroup as l,
+  NLDDCard as m,
+  NLDDCell as n,
+  NLDDCheckbox as o,
+  NLDDCheckboxField as p,
+  NLDDCodeEditor as q,
+  NLDDCodeViewer as r,
+  NLDDCollection as s,
+  NLDDComboBox as t,
+  NLDDContainer as u,
+  NLDDDescriptionCell as v,
+  NLDDDivider as w,
+  NLDDDocumentTabBar as x,
+  NLDDDragHandleCell as y,
+  NLDDDropdown as z
 };