@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js

@@ -9,44 +9,44 @@ export const progressCircleStyles = css `
 	/* # Host */
 
 	:host {
-		--_size: var(--primitives-space-28);
+		--_progress-circle-size: var(--primitives-space-28);
 		/* SVG viewBox is 100×100 user units. To get a visual {N}px stroke at any
 		   rendered size, the user-unit stroke-width must scale up by 100/size.
 		   Per-size overrides below set the appropriate value. Stroke width
 		   grows with circle size — must match getStrokeWidthPx() in the
 		   template file. */
-		--_stroke-width: calc(4px * 100 / 28);
-		--_track-background-color: var(--components-progress-circle-track-background-color);
-		--_track-border-color: var(--components-progress-circle-track-border-color);
-		--_caption-gap: var(--components-progress-circle-caption-gap);
-		--_text-color: var(--components-progress-circle-text-color);
-		--_text-font: var(--components-progress-circle-text-font);
-		--_supporting-text-color: var(--components-progress-circle-supporting-text-color);
-		--_supporting-text-font: var(--components-progress-circle-supporting-text-font);
+		--_progress-circle-stroke-width: calc(4px * 100 / 28);
+		--_progress-circle-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+		--_progress-circle-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+		--_progress-circle-caption-gap: var(--primitives-space-8);
+		--_progress-circle-text-color: var(--semantics-content-color);
+		--_progress-circle-text-font: var(--primitives-font-body-md-regular-tight);
+		--_progress-circle-supporting-text-color: var(--semantics-content-secondary-color);
+		--_progress-circle-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
 		display: inline-flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--_caption-gap);
+		gap: var(--_progress-circle-caption-gap);
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-	:host([size="16"]) { --_size: var(--primitives-space-16); --_stroke-width: calc(3px * 100 / 16); }
-	:host([size="20"]) { --_size: var(--primitives-space-20); --_stroke-width: calc(4px * 100 / 20); }
-	:host([size="24"]) { --_size: var(--primitives-space-24); --_stroke-width: calc(4px * 100 / 24); }
-	:host([size="32"]) { --_size: var(--primitives-space-32); --_stroke-width: calc(5px * 100 / 32); }
-	:host([size="40"]) { --_size: var(--primitives-space-40); --_stroke-width: calc(5px * 100 / 40); }
-	:host([size="44"]) { --_size: var(--primitives-space-44); --_stroke-width: calc(6px * 100 / 44); }
-	:host([size="48"]) { --_size: var(--primitives-space-48); --_stroke-width: calc(6px * 100 / 48); }
-	:host([size="56"]) { --_size: var(--primitives-space-56); --_stroke-width: calc(7px * 100 / 56); }
-	:host([size="64"]) { --_size: var(--primitives-space-64); --_stroke-width: calc(7px * 100 / 64); }
-	:host([size="80"]) { --_size: var(--primitives-space-80); --_stroke-width: calc(8px * 100 / 80); }
-	:host([size="96"]) { --_size: var(--primitives-space-96); --_stroke-width: calc(8px * 100 / 96); }
+	:host([size="16"]) { --_progress-circle-size: var(--primitives-space-16); --_progress-circle-stroke-width: calc(3px * 100 / 16); }
+	:host([size="20"]) { --_progress-circle-size: var(--primitives-space-20); --_progress-circle-stroke-width: calc(4px * 100 / 20); }
+	:host([size="24"]) { --_progress-circle-size: var(--primitives-space-24); --_progress-circle-stroke-width: calc(4px * 100 / 24); }
+	:host([size="32"]) { --_progress-circle-size: var(--primitives-space-32); --_progress-circle-stroke-width: calc(5px * 100 / 32); }
+	:host([size="40"]) { --_progress-circle-size: var(--primitives-space-40); --_progress-circle-stroke-width: calc(5px * 100 / 40); }
+	:host([size="44"]) { --_progress-circle-size: var(--primitives-space-44); --_progress-circle-stroke-width: calc(6px * 100 / 44); }
+	:host([size="48"]) { --_progress-circle-size: var(--primitives-space-48); --_progress-circle-stroke-width: calc(6px * 100 / 48); }
+	:host([size="56"]) { --_progress-circle-size: var(--primitives-space-56); --_progress-circle-stroke-width: calc(7px * 100 / 56); }
+	:host([size="64"]) { --_progress-circle-size: var(--primitives-space-64); --_progress-circle-stroke-width: calc(7px * 100 / 64); }
+	:host([size="80"]) { --_progress-circle-size: var(--primitives-space-80); --_progress-circle-stroke-width: calc(8px * 100 / 80); }
+	:host([size="96"]) { --_progress-circle-size: var(--primitives-space-96); --_progress-circle-stroke-width: calc(8px * 100 / 96); }
 
 
 	/* # SVG wrapper */
@@ -54,8 +54,8 @@ export const progressCircleStyles = css `
 	.progress-circle__circle {
 		display: block;
 		position: relative;
-		width: var(--_size);
-		height: var(--_size);
+		width: var(--_progress-circle-size);
+		height: var(--_progress-circle-size);
 	}
 
 	.progress-circle__svg {
@@ -73,8 +73,8 @@ export const progressCircleStyles = css `
 	   so a 4px stroke is always 4 actual pixels at any circle size. */
 
 	.progress-circle__track {
-		stroke: var(--_track-background-color);
-		stroke-width: var(--_stroke-width);
+		stroke: var(--_progress-circle-track-background-color);
+		stroke-width: var(--_progress-circle-stroke-width);
 	}
 
 
@@ -83,7 +83,7 @@ export const progressCircleStyles = css `
 	   Crossfade with the indeterminate indicator uses opacity on the SVG group. */
 
 	.progress-circle__segment-indicator {
-		stroke-width: var(--_stroke-width);
+		stroke-width: var(--_progress-circle-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;
 	}
@@ -140,11 +140,11 @@ export const progressCircleStyles = css `
 	   CSSOM instead. */
 
 	.progress-circle__flood--track {
-		flood-color: var(--_track-border-color);
+		flood-color: var(--_progress-circle-track-border-color);
 	}
 
 	.progress-circle__flood--indeterminate {
-		flood-color: var(--_indeterminate-border-color);
+		flood-color: var(--_progress-circle-indeterminate-border-color);
 	}
 
 
@@ -157,10 +157,10 @@ export const progressCircleStyles = css `
 	   at every size. transform-origin centers the rotation. */
 
 	.progress-circle__indeterminate-indicator {
-		stroke-width: var(--_stroke-width);
+		stroke-width: var(--_progress-circle-stroke-width);
 		stroke-dasharray: 25 100;
 		stroke-dashoffset: 0;
-		stroke: var(--_indeterminate-background-color);
+		stroke: var(--_progress-circle-indeterminate-background-color);
 		opacity: 1;
 		transform-origin: 50% 50%;
 		transition: opacity var(--primitives-transition-duration-slow) ease-out;
@@ -179,32 +179,32 @@ export const progressCircleStyles = css `
 	/* # Indeterminate fill + border color follow the color variant; default accent (blue) */
 
 	:host {
-		--_indeterminate-background-color: var(--semantics-categories-accent-filled-background-color);
-		--_indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
+		--_progress-circle-indeterminate-background-color: var(--semantics-categories-accent-filled-background-color);
+		--_progress-circle-indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
 	}
 
-	:host([color="neutral"]) { --_indeterminate-background-color: var(--semantics-categories-neutral-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-neutral-filled-highlight-border-color); }
-	:host([color="success"]) { --_indeterminate-background-color: var(--semantics-categories-success-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-success-filled-highlight-border-color); }
-	:host([color="warning"]) { --_indeterminate-background-color: var(--semantics-categories-warning-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-warning-filled-highlight-border-color); }
-	:host([color="critical"]) { --_indeterminate-background-color: var(--semantics-categories-critical-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-critical-filled-highlight-border-color); }
-	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lintblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--semantics-categories-donkerblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--semantics-categories-hemelblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lichtblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color); }
-	:host([color="paars"]) { --_indeterminate-background-color: var(--semantics-categories-paars-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-paars-filled-highlight-border-color); }
-	:host([color="violet"]) { --_indeterminate-background-color: var(--semantics-categories-violet-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-violet-filled-highlight-border-color); }
-	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--semantics-categories-robijnrood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color); }
-	:host([color="roze"]) { --_indeterminate-background-color: var(--semantics-categories-roze-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-roze-filled-highlight-border-color); }
-	:host([color="rood"]) { --_indeterminate-background-color: var(--semantics-categories-rood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-rood-filled-highlight-border-color); }
-	:host([color="oranje"]) { --_indeterminate-background-color: var(--semantics-categories-oranje-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-oranje-filled-highlight-border-color); }
-	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--semantics-categories-donkergeel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color); }
-	:host([color="geel"]) { --_indeterminate-background-color: var(--semantics-categories-geel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-geel-filled-highlight-border-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--semantics-categories-donkerbruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color); }
-	:host([color="bruin"]) { --_indeterminate-background-color: var(--semantics-categories-bruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-bruin-filled-highlight-border-color); }
-	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--semantics-categories-donkergroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color); }
-	:host([color="groen"]) { --_indeterminate-background-color: var(--semantics-categories-groen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-groen-filled-highlight-border-color); }
-	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mosgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color); }
-	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mintgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color); }
+	:host([color="neutral"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-neutral-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-neutral-filled-highlight-border-color); }
+	:host([color="success"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-success-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-success-filled-highlight-border-color); }
+	:host([color="warning"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-warning-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-warning-filled-highlight-border-color); }
+	:host([color="critical"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-critical-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-critical-filled-highlight-border-color); }
+	:host([color="lintblauw"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-lintblauw-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color); }
+	:host([color="donkerblauw"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-donkerblauw-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color); }
+	:host([color="hemelblauw"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-hemelblauw-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color); }
+	:host([color="lichtblauw"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-lichtblauw-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color); }
+	:host([color="paars"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-paars-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-paars-filled-highlight-border-color); }
+	:host([color="violet"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-violet-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-violet-filled-highlight-border-color); }
+	:host([color="robijnrood"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-robijnrood-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color); }
+	:host([color="roze"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-roze-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-roze-filled-highlight-border-color); }
+	:host([color="rood"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-rood-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-rood-filled-highlight-border-color); }
+	:host([color="oranje"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-oranje-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-oranje-filled-highlight-border-color); }
+	:host([color="donkergeel"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-donkergeel-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color); }
+	:host([color="geel"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-geel-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-geel-filled-highlight-border-color); }
+	:host([color="donkerbruin"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-donkerbruin-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color); }
+	:host([color="bruin"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-bruin-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-bruin-filled-highlight-border-color); }
+	:host([color="donkergroen"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-donkergroen-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color); }
+	:host([color="groen"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-groen-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-groen-filled-highlight-border-color); }
+	:host([color="mosgroen"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-mosgroen-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color); }
+	:host([color="mintgroen"]) { --_progress-circle-indeterminate-background-color: var(--semantics-categories-mintgroen-filled-background-color); --_progress-circle-indeterminate-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color); }
 
 
 	/* # Caption (label + value) */
@@ -216,14 +216,14 @@ export const progressCircleStyles = css `
 	}
 
 	.progress-circle__text {
-		color: var(--_text-color);
-		font: var(--_text-font);
+		color: var(--_progress-circle-text-color);
+		font: var(--_progress-circle-text-font);
 		text-align: center;
 	}
 
 	.progress-circle__supporting-text {
-		color: var(--_supporting-text-color);
-		font: var(--_supporting-text-font);
+		color: var(--_progress-circle-supporting-text-color);
+		font: var(--_progress-circle-supporting-text-font);
 		text-align: center;
 	}
 

package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js

@@ -9,7 +9,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 //
 // Stroke width scales with circle size for visual harmony — thin strokes look
 // out of place on a huge ring and thick strokes overpower a tiny ring. Must
-// stay in sync with the per-size --_stroke-width rules in the stylesheet.
+// stay in sync with the per-size --_progress-circle-stroke-width rules in the stylesheet.
 export function getStrokeWidthPx(sizeInPixels) {
     if (sizeInPixels <= 16)
         return 3;

package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map

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

package/dist/components/status-and-feedback/status-bar/status-bar.styles.js

@@ -9,16 +9,16 @@ export const statusBarStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--primitives-corner-radius-none);
-		--_background-color: var(--components-status-bar-neutral-background-color);
-		--_height: var(--components-status-bar-height);
-		--_inline-padding: var(--primitives-space-8);
-		--_gap: var(--primitives-space-2);
-		--_content-color: var(--components-status-bar-neutral-content-color);
-		--_font: var(--primitives-font-body-xs-medium-flat);
-		--_is-hovered-background-color: var(--components-status-bar-neutral-is-hovered-background-color);
-		--_is-active-background-color: var(--components-status-bar-neutral-is-active-background-color);
-		--_action-icon-size: var(--primitives-space-16);
+		--_status-bar-corner-radius: var(--primitives-corner-radius-none);
+		--_status-bar-background-color: var(--semantics-categories-neutral-filled-background-color);
+		--_status-bar-height: var(--semantics-controls-xs-min-size);
+		--_status-bar-inline-padding: var(--primitives-space-8);
+		--_status-bar-gap: var(--primitives-space-2);
+		--_status-bar-content-color: var(--semantics-categories-neutral-filled-content-color);
+		--_status-bar-font: var(--primitives-font-body-xs-medium-flat);
+		--_status-bar-is-hovered-background-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-500));
+		--_status-bar-is-active-background-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-550));
+		--_status-bar-action-icon-size: var(--primitives-space-16);
 
 		${inheritedTextReset}
 		display: block;
@@ -29,31 +29,31 @@ export const statusBarStyles = css `
 	}
 
 	:host([variant="accent"]) {
-		--_background-color: var(--components-status-bar-accent-background-color);
-		--_content-color: var(--components-status-bar-accent-content-color);
-		--_is-hovered-background-color: var(--components-status-bar-accent-is-hovered-background-color);
-		--_is-active-background-color: var(--components-status-bar-accent-is-active-background-color);
+		--_status-bar-background-color: var(--semantics-categories-accent-filled-background-color);
+		--_status-bar-content-color: var(--semantics-categories-accent-filled-content-color);
+		--_status-bar-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-450));
+		--_status-bar-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-500));
 	}
 
 	:host([variant="success"]) {
-		--_background-color: var(--components-status-bar-success-background-color);
-		--_content-color: var(--components-status-bar-success-content-color);
-		--_is-hovered-background-color: var(--components-status-bar-success-is-hovered-background-color);
-		--_is-active-background-color: var(--components-status-bar-success-is-active-background-color);
+		--_status-bar-background-color: var(--semantics-categories-success-filled-background-color);
+		--_status-bar-content-color: var(--semantics-categories-success-filled-content-color);
+		--_status-bar-is-hovered-background-color: var(--primitives-color-success-550);
+		--_status-bar-is-active-background-color: var(--primitives-color-success-600);
 	}
 
 	:host([variant="warning"]) {
-		--_background-color: var(--components-status-bar-warning-background-color);
-		--_content-color: var(--components-status-bar-warning-content-color);
-		--_is-hovered-background-color: var(--components-status-bar-warning-is-hovered-background-color);
-		--_is-active-background-color: var(--components-status-bar-warning-is-active-background-color);
+		--_status-bar-background-color: var(--semantics-categories-warning-filled-background-color);
+		--_status-bar-content-color: var(--semantics-categories-warning-filled-content-color);
+		--_status-bar-is-hovered-background-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-650));
+		--_status-bar-is-active-background-color: light-dark(var(--primitives-color-warning-500), var(--primitives-color-warning-700));
 	}
 
 	:host([variant="critical"]) {
-		--_background-color: var(--components-status-bar-critical-background-color);
-		--_content-color: var(--components-status-bar-critical-content-color);
-		--_is-hovered-background-color: var(--components-status-bar-critical-is-hovered-background-color);
-		--_is-active-background-color: var(--components-status-bar-critical-is-active-background-color);
+		--_status-bar-background-color: var(--semantics-categories-critical-filled-background-color);
+		--_status-bar-content-color: var(--semantics-categories-critical-filled-content-color);
+		--_status-bar-is-hovered-background-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-500));
+		--_status-bar-is-active-background-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-550));
 	}
 
 
@@ -68,17 +68,17 @@ export const statusBarStyles = css `
 		display: flex;
 		margin: 0;
 		border: none;
-		border-radius: var(--_corner-radius);
-		background-color: var(--_background-color);
+		border-radius: var(--_status-bar-corner-radius);
+		background-color: var(--_status-bar-background-color);
 		width: 100%;
-		min-height: var(--_height);
+		min-height: var(--_status-bar-height);
 		overflow: hidden;
-		padding-inline: var(--_inline-padding);
-		gap: var(--_gap);
+		padding-inline: var(--_status-bar-inline-padding);
+		gap: var(--_status-bar-gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
-		font: var(--_font);
+		color: var(--_status-bar-content-color);
+		font: var(--_status-bar-font);
 		text-decoration: none;
 		white-space: nowrap;
 	}
@@ -95,12 +95,12 @@ export const statusBarStyles = css `
 
 	a.status-bar:hover,
 	button.status-bar:hover {
-		background-color: var(--_is-hovered-background-color);
+		background-color: var(--_status-bar-is-hovered-background-color);
 	}
 
 	a.status-bar:active,
 	button.status-bar:active {
-		background-color: var(--_is-active-background-color);
+		background-color: var(--_status-bar-is-active-background-color);
 	}
 
 
@@ -139,7 +139,7 @@ export const statusBarStyles = css `
 	.status-bar__action-icon {
 		display: flex;
 		flex-shrink: 0;
-		width: var(--_action-icon-size);
+		width: var(--_status-bar-action-icon-size);
 	}
 `;
 //# sourceMappingURL=status-bar.styles.js.map

package/dist/components/status-and-feedback/step-bar/step-bar.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Nederlandse Digitale Dienst Step Bar Component (Lit + TypeScript)
+ *
+ * Shows where you are in a process of several steps: a row of discs with a
+ * number (or a check mark on what is done), a label under each and a line
+ * connecting them. Other systems call this a stepper or a progress indicator.
+ *
+ * Mark the step you are on with `status="current"`. The parent derives the
+ * rest from its position: `past` before it, `future` after. With none marked,
+ * step 1 is current. With more than one, the last one wins and a warning goes
+ * to the console in a dev build: a flow that forgets to clear the previous
+ * step still points at the furthest one. A `status="past"` or
+ * `status="future"` on another step overrides what is derived for that step,
+ * for flows that jump back or skip a step. One attribute, the same three
+ * values as `nldd-step-cell`, so a flow reads in one vocabulary
+ * whether it runs across or down.
+ *
+ * Horizontal only. For steps under each other, build an `nldd-list` with an
+ * `nldd-step-cell` and an `nldd-title-cell` per row: vertical steps
+ * usually carry more than a title, and a list row already does that.
+ *
+ * Below the sm breakpoint (a container query, so measured on the component
+ * itself rather than on the viewport) it folds into one line of text plus a
+ * segmented bar. The full list of steps stays in the DOM, only visually hidden,
+ * so assistive software hears no less than a wide screen shows.
+ *
+ * Accessibility: a `nav` with a label, holding a `role="list"` with a
+ * `role="listitem"` per step. The current step gets `aria-current="step"`, the
+ * only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as
+ * ARIA tokens and travel along as visually hidden text instead.
+ *
+ * @element nldd-step-bar
+ *
+ * @attr {string} accessible-label - Name of the nav; defaults to the i18n value ("Voortgang")
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot - `nldd-step-bar-item` children
+ *
+ * @example
+ * ```html
+ * <nldd-step-bar accessible-label="Voortgang aanvraag">
+ *   <nldd-step-bar-item text="Gegevens"></nldd-step-bar-item>
+ *   <nldd-step-bar-item text="Controle" status="current"></nldd-step-bar-item>
+ *   <nldd-step-bar-item text="Bevestigen"></nldd-step-bar-item>
+ * </nldd-step-bar>
+ * ```
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import '../../content/icon/icon.js';
+/** The same three names as nldd-step-cell, so one flow reads in a
+ *  single vocabulary whether it runs horizontally or vertically. */
+export type StepBarStatus = 'past' | 'current' | 'future';
+/**
+ * One step in an `nldd-step-bar`. `status="current"` marks the step you
+ * are on; the parent derives the status of the others and the number of each,
+ * which live here as internal state rather than as public API. `past` and
+ * `future` override what is derived for this step.
+ *
+ * @element nldd-step-bar-item
+ *
+ * @attr {'past' | 'current' | 'future'} status - How far along this step is. `current` marks the step you are on (`aria-current="step"`) and the parent derives the others from it: with none marked step 1 is current, with more than one the last wins. `past` and `future` override what is derived for this step only
+ * @attr {string} text - Label under the disc
+ * @attr {string} icon - Icon in the disc instead of the number or the check mark
+ * @attr {string} href - Makes the step a link (back to a completed step, for instance)
+ * @attr {boolean} button - Makes the step a button, for flows without a URL per step; ignored when `href` is set
+ *
+ * @slot - Label (an alternative to `text`)
+ */
+export declare class NLDDStepBarItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    status?: StepBarStatus;
+    text: string;
+    icon: string;
+    href: string;
+    /** For flows without a URL per step (a wizard inside one window). Ignored
+     *  once `href` is set: one step is one action, and a link outranks a button
+     *  -- the same rule as nldd-card and nldd-avatar. */
+    button: boolean;
+    /** Set by the parent: the derived status when the item has none of its own,
+     *  the position number, and the status text for assistive tech. */
+    _derivedStatus: StepBarStatus;
+    _index: number;
+    _statusText: string;
+    /** The status that counts. An own `past` or `future` wins over the derived
+     *  one. An own `current` is what the parent derives from, so the derived
+     *  status already says it, and on a step that lost to a later one it does not
+     *  hold. */
+    get resolvedStatus(): StepBarStatus;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare const NLDDStepBar_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.step-bar.accessible-label': string;
+        'components.step-bar.status-past-label': string;
+        'components.step-bar.status-current-label': string;
+        'components.step-bar.status-future-label': string;
+        'components.step-bar.compact-text': string;
+    }>;
+    _t(key: "components.step-bar.accessible-label" | "components.step-bar.status-past-label" | "components.step-bar.status-current-label" | "components.step-bar.status-future-label" | "components.step-bar.compact-text", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDStepBar extends NLDDStepBar_base {
+    static styles: import("lit").CSSResult;
+    accessibleLabel: string;
+    /** The steps, tracked so the compact view (text + bar) is driven by the same
+     *  source as the row of markers. */
+    _items: NLDDStepBarItem[];
+    get total(): number;
+    /** 1-based position of the last item with `status="current"`, or 1 when none has it. */
+    get resolvedCurrent(): number;
+    get currentItem(): NLDDStepBarItem | undefined;
+    /** `status` lives on the children, so a change there has to reach this
+     *  element: the derived statuses and the compact view follow it. */
+    private _observer;
+    private _warnedMultipleCurrent;
+    connectedCallback(): void;
+    /** `current` is no longer an attribute of this element. Watched anyway, so a
+     *  leftover one gets a hint, also when a framework sets it after the first
+     *  render: Vue and React fall back to the attribute for an unknown property. */
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    disconnectedCallback(): void;
+    _onSlotChange: (e: Event) => void;
+    /** Before render, not after: the compact view reads the current item back out
+     *  of the children, so their statuses have to be fresh by the time this
+     *  element renders. */
+    willUpdate(changed: PropertyValues): void;
+    private _warnOnMultipleCurrent;
+    /** Push position, derived status and status text down to the children. Push
+     *  rather than pull: a child cannot see where the current step sits. */
+    private _syncItems;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-step-bar': NLDDStepBar;
+        'nldd-step-bar-item': NLDDStepBarItem;
+    }
+}
+export {};
+//# sourceMappingURL=step-bar.d.ts.map

package/dist/components/status-and-feedback/step-bar/step-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,4BAA4B,CAAC;AAEpC;oEACoE;AACpE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAK1D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,MAAM,CAAC,EAAE,aAAa,CAAC;IAGvB,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV;;yDAEqD;IAErD,MAAM,UAAS;IAEf;uEACmE;IAEnE,cAAc,EAAE,aAAa,CAAY;IAGzC,MAAM,SAAK;IAGX,WAAW,SAAM;IAEjB;;;gBAGY;IACZ,IAAI,cAAc,IAAI,aAAa,CAElC;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQtC,MAAM;CAGf;;;;;;;;;;;AAYD,qBACa,WAAY,SAAQ,gBAGhC;IACA,OAAgB,MAAM,0BAAiB;IAGvC,eAAe,SAAM;IAErB;wCACoC;IAEpC,MAAM,EAAE,eAAe,EAAE,CAAM;IAE/B,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,wFAAwF;IACxF,IAAI,eAAe,IAAI,MAAM,CAG5B;IAED,IAAI,WAAW,IAAI,eAAe,GAAG,SAAS,CAG7C;IAED;wEACoE;IACpE,OAAO,CAAC,SAAS,CAAoD;IAErE,OAAO,CAAC,sBAAsB,CAAS;IAE9B,iBAAiB,IAAI,IAAI;IAKlC;;oFAEgF;IAChF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOtF,oBAAoB,IAAI,IAAI;IAKrC,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAI9B;IAEF;;2BAEuB;IACd,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,OAAO,CAAC,sBAAsB;IAS9B;4EACwE;IACxE,OAAO,CAAC,UAAU;IAUT,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACtC;CACD"}

package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts

@@ -0,0 +1,9 @@
+export declare const nlddStepBarTranslations: {
+    'components.step-bar.accessible-label': string;
+    'components.step-bar.status-past-label': string;
+    'components.step-bar.status-current-label': string;
+    'components.step-bar.status-future-label': string;
+    'components.step-bar.compact-text': string;
+};
+export type NLDDStepBarTranslations = typeof nlddStepBarTranslations;
+//# sourceMappingURL=step-bar.i18n.d.ts.map

package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;;;CAMnC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,OAAO,uBAAuB,CAAC"}

package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js

@@ -0,0 +1,8 @@
+export const nlddStepBarTranslations = {
+    'components.step-bar.accessible-label': 'Voortgang',
+    'components.step-bar.status-past-label': 'Afgerond',
+    'components.step-bar.status-current-label': 'Huidige stap',
+    'components.step-bar.status-future-label': 'Nog te doen',
+    'components.step-bar.compact-text': 'Stap {current} van {total}',
+};
+//# sourceMappingURL=step-bar.i18n.js.map

package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACtC,sCAAsC,EAAE,WAAW;IACnD,uCAAuC,EAAE,UAAU;IACnD,0CAA0C,EAAE,cAAc;IAC1D,yCAAyC,EAAE,aAAa;IACxD,kCAAkC,EAAE,4BAA4B;CAChE,CAAC"}