@nldd/design-system 0.8.95 → 0.8.96

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js

@@ -14,12 +14,15 @@ export const topNavigationBarStyles = css `
 	/* # Host */
 
 	:host {
-		--_logo-width: var(--semantics-brand-ribbon-sm-width);
-		--_logo-offset: 0px;
-		--_logo-background-color: #154273;
-		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
-		--_wordmark-max-width: 280px;
-		--_max-width: var(--semantics-page-sections-body-max-width);
+		--_top-navigation-bar-logo-width: var(--semantics-brand-ribbon-sm-width);
+		--_top-navigation-bar-logo-offset: 0px;
+		--_top-navigation-bar-logo-background-color: var(--semantics-brand-ribbon-color);
+		--_top-navigation-bar-wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
+		--_top-navigation-bar-wordmark-max-width: 280px;
+		--_top-navigation-bar-max-width: var(--semantics-page-sections-body-max-width);
+		--_top-navigation-bar-title-sm-font: var(--primitives-font-display-6-sm);
+		--_top-navigation-bar-title-md-font: var(--primitives-font-display-5-sm);
+		--_top-navigation-bar-title-lg-font: var(--primitives-font-display-4-sm);
 
 		${inheritedTextReset}
 		container-type: inline-size;
@@ -38,18 +41,18 @@ export const topNavigationBarStyles = css `
 		/* The ribbon's width, and with it everything measured against the ribbon:
 		   its own height and the wordmark beside it. Here rather than on :host,
 		   because a container query cannot measure the container it sits on. */
-		--_logo-height: calc(var(--_logo-width) * 2);
+		--_top-navigation-bar-logo-height: calc(var(--_top-navigation-bar-logo-width) * 2);
 
 		@container (max-width: ${smMax}) {
-			--_logo-width: var(--semantics-brand-ribbon-sm-width);
+			--_top-navigation-bar-logo-width: var(--semantics-brand-ribbon-sm-width);
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_logo-width: var(--semantics-brand-ribbon-md-width);
+			--_top-navigation-bar-logo-width: var(--semantics-brand-ribbon-md-width);
 		}
 
 		@container (min-width: ${lgMin}) {
-			--_logo-width: var(--semantics-brand-ribbon-lg-width);
+			--_top-navigation-bar-logo-width: var(--semantics-brand-ribbon-lg-width);
 		}
 
 		box-sizing: border-box;
@@ -75,7 +78,7 @@ export const topNavigationBarStyles = css `
 	}
 
 	:host([width="full"]) {
-		--_max-width: none;
+		--_top-navigation-bar-max-width: none;
 	}
 
 
@@ -87,15 +90,15 @@ export const topNavigationBarStyles = css `
 		gap: var(--primitives-space-8);
 		align-items: center;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_top-navigation-bar-max-width);
 	}
 
 	/* ## Logo */
 
 	.top-navigation-bar__logo {
 		display: flex;
-		width: var(--_logo-width);
-		height: var(--_logo-height);
+		width: var(--_top-navigation-bar-logo-width);
+		height: var(--_top-navigation-bar-logo-height);
 		grid-column: 2;
 		align-self: start;
 		align-items: center;
@@ -114,11 +117,11 @@ export const topNavigationBarStyles = css `
 		.top-navigation-bar__logo::before {
 			content: '';
 			position: absolute;
-			bottom: calc(100% + var(--_logo-offset));
+			bottom: calc(100% + var(--_top-navigation-bar-logo-offset));
 			left: 0;
 			width: 100%;
 			height: 100lvh;
-			background-color: var(--_logo-background-color);
+			background-color: var(--_top-navigation-bar-logo-background-color);
 			pointer-events: none;
 		}
 
@@ -129,9 +132,9 @@ export const topNavigationBarStyles = css `
 			position: fixed;
 			top: 0;
 			z-index: -1;
-			width: var(--_logo-width);
-			height: var(--_logo-height);
-			background-color: var(--_logo-background-color);
+			width: var(--_top-navigation-bar-logo-width);
+			height: var(--_top-navigation-bar-logo-height);
+			background-color: var(--_top-navigation-bar-logo-background-color);
 			pointer-events: none;
 			animation: top-navigation-bar-ribbon-at-top linear both;
 			animation-timeline: scroll(root);
@@ -214,10 +217,10 @@ export const topNavigationBarStyles = css `
 		   ribbon centred. One unbreakable name would push the ribbon off centre
 		   and the page past the screen. */
 		min-width: 0;
-		min-height: var(--_logo-height);
+		min-height: var(--_top-navigation-bar-logo-height);
 		grid-column: 3;
 		flex-direction: column;
-		color: var(--_wordmark-content-color);
+		color: var(--_top-navigation-bar-wordmark-content-color);
 
 		/* The distance the text keeps from the top edge once it outgrows the
 		   ribbon. Only at the top: space under it would raise the bar for
@@ -225,13 +228,13 @@ export const topNavigationBarStyles = css `
 		   on the middle of the ribbon rather than 6px below it. */
 		@container (max-width: ${smMax}) {
 			align-self: start;
-			min-height: calc(var(--_logo-height) - var(--primitives-space-12));
+			min-height: calc(var(--_top-navigation-bar-logo-height) - var(--primitives-space-12));
 			padding-block-start: var(--primitives-space-12);
 		}
 	}
 
 	.top-navigation-bar__wordmark-spacer {
-		height: var(--_logo-width);
+		height: var(--_top-navigation-bar-logo-width);
 		flex-grow: 0;
 		flex-shrink: 0;
 
@@ -246,7 +249,7 @@ export const topNavigationBarStyles = css `
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 50%;
-		max-width: var(--_wordmark-max-width);
+		max-width: var(--_top-navigation-bar-wordmark-max-width);
 		/* anywhere rather than break-word: only this one takes the break into
 		   the min-content width, which is what the track measures. A name that
 		   cannot break wraps mid-word here, because a name cut off by an
@@ -288,7 +291,7 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar__main-bar {
 		display: flex;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_top-navigation-bar-max-width);
 
 		@container (max-width: ${smMax}) {
 			flex-direction: column;
@@ -297,13 +300,13 @@ export const topNavigationBarStyles = css `
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			flex-direction: row;
 			align-items: center;
-			gap: var(--components-menu-bar-item-inline-padding);
+			gap: var(--semantics-menu-bar-items-inline-padding);
 		}
 
 		@container (min-width: ${lgMin}) {
 			flex-direction: row;
 			align-items: center;
-			gap: var(--components-menu-bar-item-inline-padding);
+			gap: var(--semantics-menu-bar-items-inline-padding);
 		}
 	}
 
@@ -318,7 +321,7 @@ export const topNavigationBarStyles = css `
 		}
 
 		@container (min-width: ${mdMin}) {
-			padding-inline-end: var(--components-menu-bar-item-inline-padding);
+			padding-inline-end: var(--semantics-menu-bar-items-inline-padding);
 			justify-content: flex-start;
 		}
 	}
@@ -341,7 +344,7 @@ export const topNavigationBarStyles = css `
 		align-items: center;
 		min-width: var(--semantics-controls-xs-min-size);
 		min-height: var(--semantics-controls-xs-min-size);
-		font: var(--components-top-navigation-bar-title-sm-font);
+		font: var(--_top-navigation-bar-title-sm-font);
 		color: var(--semantics-content-color);
 		white-space: nowrap;
 
@@ -350,11 +353,11 @@ export const topNavigationBarStyles = css `
 		}
 
 		@container (min-width: ${mdMin}) {
-			font: var(--components-top-navigation-bar-title-md-font);
+			font: var(--_top-navigation-bar-title-md-font);
 		}
 
 		@container (min-width: ${lgMin}) {
-			font: var(--components-top-navigation-bar-title-lg-font);
+			font: var(--_top-navigation-bar-title-lg-font);
 		}
 	}
 
@@ -379,7 +382,7 @@ export const topNavigationBarStyles = css `
 		flex-grow: 1;
 		/* Pull the menu out by the menu-bar items own inline padding so the first
 		   and last item text (not its hit-area) lines up with the content edge. */
-		margin-inline: calc(-1 * var(--components-menu-bar-item-inline-padding));
+		margin-inline: calc(-1 * var(--semantics-menu-bar-items-inline-padding));
 	}
 
 	/* ## Menu bar start */

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;IAgBrC,kBAAkB;;;;;;;;;;;;;;;;;;;2BAmBK,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA0JL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;;;2BAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAiCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB/B,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;IAmBrC,kBAAkB;;;;;;;;;;;;;;;;;;;2BAmBK,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA0JL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;;;2BAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAiCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB/B,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-title-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBA6I7B,CAAC"}
+{"version":3,"file":"top-title-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBA+I7B,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js

@@ -9,6 +9,8 @@ export const topTitleBarStyles = css `
 	/* # Host */
 
 	:host {
+		--_top-title-bar-divider-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-350));
+
 		${inheritedTextReset}
 		display: block;
 		width: 100%;
@@ -83,7 +85,7 @@ export const topTitleBarStyles = css `
 
 	.top-title-bar__divider {
 		display: none;
-		background-color: var(--components-top-title-bar-divider-color);
+		background-color: var(--_top-title-bar-divider-color);
 		width: var(--semantics-dividers-thickness);
 		height: var(--primitives-space-24);
 		flex-shrink: 0;

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-title-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;IAShC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIrB,CAAC"}
+{"version":3,"file":"top-title-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;IAWhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIrB,CAAC"}

package/dist/components/{shadow-resets-aG-rgyNQ.js → shadow-resets-CPa58rmc.js}

@@ -24,7 +24,7 @@ import { css } from "lit";
 *     ${slottedReset}
 *     ${inheritedTextReset}
 *     color: var(--semantics-content-color) !important;
-*     font: var(--_font) !important;
+*     font: var(--_title-font) !important;
 *   }
 * `
 * ```

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js

@@ -9,21 +9,21 @@ export const activityIndicatorStyles = css `
 	/* # Host */
 
 	:host {
-		--_circle-size: var(--primitives-space-32);
-		--_color: var(--context-content-color, currentColor);
-		--_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);
-		--_backdrop-blur: 3px;
-		--_overlay-panel-padding: var(--primitives-space-12);
-		--_overlay-panel-corner-radius: var(--primitives-corner-radius-md);
+		--_activity-indicator-circle-size: var(--primitives-space-32);
+		--_activity-indicator-color: var(--context-content-color, currentColor);
+		--_activity-indicator-track-opacity: 0.25;
+		--_activity-indicator-stroke-width: 2;
+		--_activity-indicator-rotation-duration: 0.8s;
+		--_activity-indicator-fade-duration: var(--primitives-transition-duration-slow);
+		--_activity-indicator-fade-easing: ease-out;
+		--_activity-indicator-pulse-duration: 2s;
+		--_activity-indicator-pulse-easing: ease-in-out;
+		--_activity-indicator-max-width: var(--primitives-area-240);
+		--_activity-indicator-gap: var(--primitives-space-4);
+		--_activity-indicator-text-font: var(--primitives-font-body-sm-regular-flat);
+		--_activity-indicator-backdrop-blur: 3px;
+		--_activity-indicator-overlay-panel-padding: var(--primitives-space-12);
+		--_activity-indicator-overlay-panel-corner-radius: var(--primitives-corner-radius-md);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -53,17 +53,17 @@ export const activityIndicatorStyles = css `
 
 	/* ## 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="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); }
+	:host([size="16"]) { --_activity-indicator-circle-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_activity-indicator-circle-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_activity-indicator-circle-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_activity-indicator-circle-size: var(--primitives-space-28); }
+	:host([size="40"]) { --_activity-indicator-circle-size: var(--primitives-space-40); }
+	:host([size="44"]) { --_activity-indicator-circle-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_activity-indicator-circle-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_activity-indicator-circle-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_activity-indicator-circle-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_activity-indicator-circle-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_activity-indicator-circle-size: var(--primitives-space-96); }
 
 
 	/* # Block
@@ -82,13 +82,13 @@ export const activityIndicatorStyles = css `
 		opacity: 0;
 		pointer-events: none;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_activity-indicator-max-width);
 		flex-direction: column;
 		align-items: center;
-		gap: var(--_gap);
+		gap: var(--_activity-indicator-gap);
 		transition-property: opacity, display;
-		transition-duration: var(--_fade-duration);
-		transition-timing-function: var(--_fade-easing);
+		transition-duration: var(--_activity-indicator-fade-duration);
+		transition-timing-function: var(--_activity-indicator-fade-easing);
 		transition-behavior: allow-discrete;
 	}
 
@@ -118,11 +118,11 @@ export const activityIndicatorStyles = css `
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		border-radius: var(--_overlay-panel-corner-radius);
+		border-radius: var(--_activity-indicator-overlay-panel-corner-radius);
 		background-color: var(--semantics-surfaces-base-background-color);
 		width: max-content;
 		max-width: calc(100% - var(--primitives-space-32));
-		padding: var(--_overlay-panel-padding);
+		padding: var(--_activity-indicator-overlay-panel-padding);
 		color: var(--semantics-content-color);
 		transform: translate(-50%, -50%);
 	}
@@ -142,12 +142,12 @@ export const activityIndicatorStyles = css `
 		   the content behind reads as inactive. backdrop-filter degrades
 		   gracefully where unsupported, leaving just the translucent fill. */
 		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
-		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
-		backdrop-filter: blur(var(--_backdrop-blur));
+		-webkit-backdrop-filter: blur(var(--_activity-indicator-backdrop-blur));
+		backdrop-filter: blur(var(--_activity-indicator-backdrop-blur));
 		pointer-events: none;
 		transition-property: opacity, display;
-		transition-duration: var(--_fade-duration);
-		transition-timing-function: var(--_fade-easing);
+		transition-duration: var(--_activity-indicator-fade-duration);
+		transition-timing-function: var(--_activity-indicator-fade-easing);
 		transition-behavior: allow-discrete;
 	}
 
@@ -174,14 +174,14 @@ export const activityIndicatorStyles = css `
 	/* 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);
+		width: var(--_activity-indicator-circle-size);
+		height: var(--_activity-indicator-circle-size);
 	}
 
 	.activity-indicator__track {
-		opacity: var(--_track-opacity);
-		stroke: var(--_color);
-		stroke-width: var(--_stroke-width);
+		opacity: var(--_activity-indicator-track-opacity);
+		stroke: var(--_activity-indicator-color);
+		stroke-width: var(--_activity-indicator-stroke-width);
 	}
 
 	/* Rotate only the arc inside the SVG (around the view-box center via
@@ -189,12 +189,12 @@ export const activityIndicatorStyles = css `
 	   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: var(--_color);
-		stroke-width: var(--_stroke-width);
+		stroke: var(--_activity-indicator-color);
+		stroke-width: var(--_activity-indicator-stroke-width);
 		stroke-linecap: round;
 		stroke-dasharray: 25 100;
 		transform-origin: 50% 50%;
-		animation: activity-indicator-rotate var(--_rotation-duration) linear infinite;
+		animation: activity-indicator-rotate var(--_activity-indicator-rotation-duration) linear infinite;
 	}
 
 	@keyframes activity-indicator-rotate {
@@ -203,7 +203,7 @@ export const activityIndicatorStyles = css `
 
 	.activity-indicator__text {
 		color: currentColor;
-		font: var(--_text-font);
+		font: var(--_activity-indicator-text-font);
 		text-align: center;
 	}
 
@@ -231,7 +231,7 @@ export const activityIndicatorStyles = css `
 		.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;
+			animation: activity-indicator-pulse var(--_activity-indicator-pulse-duration) var(--_activity-indicator-pulse-easing) infinite;
 		}
 
 		@keyframes activity-indicator-pulse {

package/dist/components/status-and-feedback/badge/badge.js

@@ -60,9 +60,9 @@ let NLDDBadge = class NLDDBadge extends withTranslations(LitElement, nlddBadgeTr
         if (!changed.has('customColor'))
             return;
         if (this.customColor)
-            this.style.setProperty('--_custom-color', this.customColor);
+            this.style.setProperty('--_badge-custom-color', this.customColor);
         else
-            this.style.removeProperty('--_custom-color');
+            this.style.removeProperty('--_badge-custom-color');
     }
     get _hasText() {
         return !!this.text || typeof this.number === 'number';

package/dist/components/status-and-feedback/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA2UvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA4UvB,CAAC"}