@nldd/design-system 0.8.95 → 0.8.97

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":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,wEAAwE;AACxE,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,6DAA6D;AAC7D,EAAE;AACF,8EAA8E;AAC9E,4EAA4E;AAC5E,0EAA0E;AAC1E,MAAM,UAAU,gBAAgB,CAAC,YAAoB;IACpD,IAAI,YAAY,IAAI,EAAE;QAAE,OAAO,CAAC,CAAC;IACjC,IAAI,YAAY,IAAI,EAAE;QAAE,OAAO,CAAC,CAAC;IACjC,IAAI,YAAY,IAAI,EAAE;QAAE,OAAO,CAAC,CAAC;IACjC,IAAI,YAAY,IAAI,EAAE;QAAE,OAAO,CAAC,CAAC;IACjC,IAAI,YAAY,IAAI,EAAE;QAAE,OAAO,CAAC,CAAC;IACjC,OAAO,CAAC,CAAC;AACV,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,YAAoB;IAC7C,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG,GAAG,GAAG,YAAY,CAAC;IACjF,OAAO,EAAE,GAAG,oBAAoB,GAAG,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,YAAoB;IACpD,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,YAAoB;IACxD,OAAO,GAAG,GAAG,YAAY,CAAC;AAC3B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB,CAAC,SAA6B,EAAE,YAAwB;IAC7F,MAAM,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,QAAQ,GAAG,SAAS,CAAC,cAAc,CAAC;IAC1C,oEAAoE;IACpE,qDAAqD;IACrD,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7F,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,CAAC;IAClD,MAAM,eAAe,GAAG,CAAC,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC;IACnG,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,sBAAsB,CAAC;IAC9E,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAClD,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,sEAAsE;IACtE,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC3D,2EAA2E;IAC3E,2EAA2E;IAC3E,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC;IAC3B,mEAAmE;IACnE,yEAAyE;IACzE,uEAAuE;IACvE,sEAAsE;IACtE,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,6CAA6C,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,IAAI,CAAA;;;gBAGJ,SAAS;;mBAEN,SAAS,CAAC,GAAG;mBACb,SAAS,CAAC,YAAY,CAAC;oBACtB,QAAQ;;;;;;;;yCAQa,GAAG;;;;;;;;;;;gBAW5B,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;OAwB1B,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAA;;oCAEG,KAAK,IAAI,GAAG;;;;;;;;;;;iBAW/B,iBAAiB;;;;;;;;;;gBAUlB,QAAQ,CAAC,EAAE,UAAU,EAAE,8BAA8B,KAAK,iCAAiC,EAAE,CAAC;;;;;;;;;;;;;;;MAexG,CAAC;OACA,eAAe,CAAC,CAAC,CAAC,GAAG,CAAA;;kDAEsB,GAAG;;;;;;;;;;;iBAWpC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;MAwB5B,CAAC,CAAC,CAAC,OAAO;;;;;SAKP,MAAM;;iDAEkC,GAAG;;MAE9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAA;6FACoE,GAAG,CAAC,KAAK;;;UAG5F,MAAM;;0BAEU,GAAG,CAAC,MAAM,IAAI,aAAa;0BAC3B,CAAC,GAAG,CAAC,MAAM;4CACO,GAAG,CAAC,KAAK,IAAI,GAAG;;KAEvD,CAAC;MACA,eAAe,CAAC,CAAC,CAAC,GAAG,CAAA;;;;UAIjB,MAAM;;;;0DAI0C,GAAG;;KAExD,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;IACF,uEAAuE;IACvE,2EAA2E;IAC3E,MAAM,aAAa,GAAG,WAAW;QAChC,CAAC,CAAC,IAAI,CAAA;;WAEG,WAAW;;;MAGhB,MAAM;GACT;QACD,CAAC,CAAC,MAAM,CAAC;IACV,OAAO,IAAI,CAAA;IACR,aAAa;sBACK,YAAY;IAC9B,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,QAAQ,IAAI,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;MAEvF,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,SAAS,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,OAAO;MAC7F,SAAS,CAAC,YAAY,KAAK,QAAQ,IAAI,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,SAAS,CAAC,aAAa,SAAS,CAAC,CAAC,CAAC,OAAO;;GAEpK,CAAC,CAAC,CAAC,OAAO;EACX,CAAC;AACH,CAAC"}
+{"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.d.ts

@@ -20,6 +20,13 @@
  * action per bar at most; several actions, or links in running text, belong in
  * nldd-banner.
  *
+ * ## Placement
+ * The bar is the first thing on the screen: above nldd-top-navigation-bar or
+ * nldd-top-title-bar, across the whole app, also when a split view shows
+ * several panes. It reports the state of the service, not of one page, so it
+ * never sits inside the content or below a top bar. Below a top bar it says so
+ * in development.
+ *
  * ## ARIA
  * role and aria-live are set automatically from the variant:
  * - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader)
@@ -52,6 +59,9 @@ export declare class NLDDStatusBar extends LitElement {
     rel: string;
     button: boolean;
     connectedCallback(): void;
+    firstUpdated(): void;
+    /** DEV-only: warns when a top bar comes before the status bar. Top bars in an overlay are left out, since a sheet or dialog has its own. */
+    private _checkPlacement;
     updated(changed: Map<string, unknown>): void;
     private _applyAriaForVariant;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYzB,YAAY,IAAI,IAAI;IAI7B,4IAA4I;IAC5I,OAAO,CAAC,eAAe;IAWd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

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

@@ -26,6 +26,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * action per bar at most; several actions, or links in running text, belong in
  * nldd-banner.
  *
+ * ## Placement
+ * The bar is the first thing on the screen: above nldd-top-navigation-bar or
+ * nldd-top-title-bar, across the whole app, also when a split view shows
+ * several panes. It reports the state of the service, not of one page, so it
+ * never sits inside the content or below a top bar. Below a top bar it says so
+ * in development.
+ *
  * ## ARIA
  * role and aria-live are set automatically from the variant:
  * - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader)
@@ -73,6 +80,20 @@ let NLDDStatusBar = class NLDDStatusBar extends LitElement {
         // on later variant changes.
         this._applyAriaForVariant(this.variant);
     }
+    firstUpdated() {
+        if (import.meta.env?.DEV)
+            this._checkPlacement();
+    }
+    /** DEV-only: warns when a top bar comes before the status bar. Top bars in an overlay are left out, since a sheet or dialog has its own. */
+    _checkPlacement() {
+        const root = this.getRootNode();
+        const above = [...root.querySelectorAll('nldd-top-navigation-bar, nldd-top-title-bar')].some((bar) => !bar.closest('nldd-sheet, nldd-modal-dialog, nldd-popover, dialog')
+            && (bar.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+            && !bar.contains(this));
+        if (above) {
+            console.warn('<nldd-status-bar>: The status bar sits below a top bar. It belongs above it, as the first thing on the screen.', this);
+        }
+    }
     updated(changed) {
         if (changed.has('variant'))
             this._applyAriaForVariant(this.variant);

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

@@ -1 +1 @@
-{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,4BAA4B,CAAC;AAK7B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIN,YAAO,GAAqB,SAAS,CAAC;QAGtC,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAEV,+DAA+D;QAE/D,WAAM,GAAG,EAAE,CAAC;QAEZ,sDAAsD;QAEtD,QAAG,GAAG,EAAE,CAAC;QAGT,WAAM,GAAG,KAAK,CAAC;IAwChB,CAAC;IAtCS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,uEAAuE;QACvE,4EAA4E;QAC5E,4EAA4E;QAC5E,4EAA4E;QAC5E,6EAA6E;QAC7E,4BAA4B;QAC5B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrE,CAAC;IAEO,oBAAoB,CAAC,OAAyB;QACrD,2EAA2E;QAC3E,0EAA0E;QAC1E,2EAA2E;QAC3E,8EAA8E;QAC9E,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC;QACD,oEAAoE;QACpE,6DAA6D;QAC7D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACd,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;;AA3De,oBAAM,GAAG,eAAe,AAAlB,CAAmB;AAGzC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAmB,SAAS,CAAC,EAAE,CAAC;8CACjD;AAGtC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;2CAC5D;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAIV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC5B;AArBH,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA6DzB"}
+{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.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-indicator/step-indicator.d.ts → step-bar/step-bar.d.ts}

@@ -1,9 +1,9 @@
 /**
- * Nederlandse Digitale Dienst Step Indicator Component (Lit + TypeScript)
+ * 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.
+ * 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,
@@ -12,11 +12,11 @@
  * 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-timeline-track-cell`, so a flow reads in one vocabulary
+ * 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-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps
+ * `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
@@ -29,34 +29,34 @@
  * 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-indicator
+ * @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-indicator-item` children
+ * @slot - `nldd-step-bar-item` children
  *
  * @example
  * ```html
- * <nldd-step-indicator accessible-label="Voortgang aanvraag">
- *   <nldd-step-indicator-item text="Gegevens"></nldd-step-indicator-item>
- *   <nldd-step-indicator-item text="Controle" status="current"></nldd-step-indicator-item>
- *   <nldd-step-indicator-item text="Bevestigen"></nldd-step-indicator-item>
- * </nldd-step-indicator>
+ * <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-timeline-track-cell, so one flow reads in a
+/** The same three names as nldd-step-cell, so one flow reads in a
  *  single vocabulary whether it runs horizontally or vertically. */
-export type StepIndicatorStatus = 'past' | 'current' | 'future';
+export type StepBarStatus = 'past' | 'current' | 'future';
 /**
- * One step in an `nldd-step-indicator`. `status="current"` marks the step you
+ * 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-indicator-item
+ * @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
@@ -66,9 +66,9 @@ export type StepIndicatorStatus = 'past' | 'current' | 'future';
  *
  * @slot - Label (an alternative to `text`)
  */
-export declare class NLDDStepIndicatorItem extends LitElement {
+export declare class NLDDStepBarItem extends LitElement {
     static styles: import("lit").CSSResult;
-    status?: StepIndicatorStatus;
+    status?: StepBarStatus;
     text: string;
     icon: string;
     href: string;
@@ -78,38 +78,38 @@ export declare class NLDDStepIndicatorItem extends LitElement {
     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: StepIndicatorStatus;
+    _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(): StepIndicatorStatus;
+    get resolvedStatus(): StepBarStatus;
     connectedCallback(): void;
     updated(changed: PropertyValues): void;
     render(): import("lit-html").TemplateResult;
 }
-declare const NLDDStepIndicator_base: (abstract new (...args: any[]) => LitElement & {
+declare const NLDDStepBar_base: (abstract new (...args: any[]) => LitElement & {
     translations: Partial<{
-        'components.step-indicator.accessible-label': string;
-        'components.step-indicator.status-past-label': string;
-        'components.step-indicator.status-current-label': string;
-        'components.step-indicator.status-future-label': string;
-        'components.step-indicator.compact-text': string;
+        '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-indicator.accessible-label" | "components.step-indicator.status-past-label" | "components.step-indicator.status-current-label" | "components.step-indicator.status-future-label" | "components.step-indicator.compact-text", vars?: Record<string, string | number>): 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 NLDDStepIndicator extends NLDDStepIndicator_base {
+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: NLDDStepIndicatorItem[];
+    _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(): NLDDStepIndicatorItem | undefined;
+    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;
@@ -134,9 +134,9 @@ export declare class NLDDStepIndicator extends NLDDStepIndicator_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'nldd-step-indicator': NLDDStepIndicator;
-        'nldd-step-indicator-item': NLDDStepIndicatorItem;
+        'nldd-step-bar': NLDDStepBar;
+        'nldd-step-bar-item': NLDDStepBarItem;
     }
 }
 export {};
-//# sourceMappingURL=step-indicator.d.ts.map
+//# 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"}