@nldd/design-system 0.8.52 → 0.8.54

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

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
 export const progressBarStyles = css `
 
 
@@ -6,25 +7,28 @@ export const progressBarStyles = css `
 
 	:host {
 		--_height: var(--components-progress-bar-md-height);
-		--_track-color: var(--components-progress-bar-track-color);
+		--_track-background-color: var(--components-progress-bar-track-background-color);
 		--_track-border-color: var(--components-progress-bar-track-border-color);
 		--_track-border-width: var(--components-progress-bar-track-border-width);
 		--_corner-radius: var(--components-progress-bar-corner-radius);
-		--_segment-gap: var(--components-progress-bar-progress-segment-gap);
-		--_header-gap: var(--components-progress-bar-header-gap);
-		--_header-text-color: var(--components-progress-bar-header-text-color);
-		--_header-value-color: var(--components-progress-bar-header-value-color);
-		--_header-text-font: var(--components-progress-bar-header-text-font);
-		--_header-value-font: var(--components-progress-bar-header-value-font);
-		--_indeterminate-fill-color: var(--components-progress-bar-accent-fill-color);
+		--_segment-indicator-gap: var(--components-progress-bar-progress-segment-indicator-gap);
+		--_caption-gap: var(--components-progress-bar-caption-gap);
+		--_text-color: var(--components-progress-bar-text-color);
+		--_supporting-text-color: var(--components-progress-bar-supporting-text-color);
+		--_text-font: var(--components-progress-bar-text-font);
+		--_supporting-text-font: var(--components-progress-bar-supporting-text-font);
+		--_indeterminate-background-color: var(--components-progress-bar-accent-background-color);
+		--_indeterminate-border-color: var(--components-progress-bar-accent-border-color);
+		--_indeterminate-border-width: var(--components-progress-bar-segment-indicator-border-width);
 		--_indeterminate-bar-width: 20%;
 		--_indeterminate-duration: 800ms;
 
+		${inheritedTextReset}
 		box-sizing: border-box;
 		display: flex;
 		width: 100%;
 		flex-direction: column;
-		gap: var(--_header-gap);
+		gap: var(--_caption-gap);
 	}
 
 	:host([hidden]) {
@@ -36,57 +40,57 @@ export const progressBarStyles = css `
 	:host([size="lg"]) { --_height: var(--components-progress-bar-lg-height); }
 
 	:host([mode="distribution"]) {
-		--_segment-gap: var(--components-progress-bar-distribution-segment-gap);
+		--_segment-indicator-gap: var(--components-progress-bar-distribution-segment-indicator-gap);
 		--_corner-radius: var(--components-progress-bar-distribution-corner-radius);
 	}
 
 
-	/* ## Indeterminate fill colour follows the variant; default is accent (blue) */
+	/* ## Indeterminate fill + border colour follow the variant; default is accent (blue) */
 
-	:host([color="neutral"]) { --_indeterminate-fill-color: var(--components-progress-bar-neutral-fill-color); }
-	:host([color="accent"]) { --_indeterminate-fill-color: var(--components-progress-bar-accent-fill-color); }
-	:host([color="success"]) { --_indeterminate-fill-color: var(--components-progress-bar-success-fill-color); }
-	:host([color="warning"]) { --_indeterminate-fill-color: var(--components-progress-bar-warning-fill-color); }
-	:host([color="critical"]) { --_indeterminate-fill-color: var(--components-progress-bar-critical-fill-color); }
+	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-bar-neutral-background-color); --_indeterminate-border-color: var(--components-progress-bar-neutral-border-color); }
+	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-bar-accent-background-color); --_indeterminate-border-color: var(--components-progress-bar-accent-border-color); }
+	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-bar-success-background-color); --_indeterminate-border-color: var(--components-progress-bar-success-border-color); }
+	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-bar-warning-background-color); --_indeterminate-border-color: var(--components-progress-bar-warning-border-color); }
+	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-bar-critical-background-color); --_indeterminate-border-color: var(--components-progress-bar-critical-border-color); }
 
-	:host([color="coolgray"]) { --_indeterminate-fill-color: var(--components-progress-bar-coolgray-fill-color); }
-	:host([color="lintblauw"]) { --_indeterminate-fill-color: var(--components-progress-bar-lintblauw-fill-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-fill-color: var(--components-progress-bar-donkerblauw-fill-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-fill-color: var(--components-progress-bar-hemelblauw-fill-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-fill-color: var(--components-progress-bar-lichtblauw-fill-color); }
-	:host([color="paars"]) { --_indeterminate-fill-color: var(--components-progress-bar-paars-fill-color); }
-	:host([color="violet"]) { --_indeterminate-fill-color: var(--components-progress-bar-violet-fill-color); }
-	:host([color="robijnrood"]) { --_indeterminate-fill-color: var(--components-progress-bar-robijnrood-fill-color); }
-	:host([color="roze"]) { --_indeterminate-fill-color: var(--components-progress-bar-roze-fill-color); }
-	:host([color="rood"]) { --_indeterminate-fill-color: var(--components-progress-bar-rood-fill-color); }
-	:host([color="oranje"]) { --_indeterminate-fill-color: var(--components-progress-bar-oranje-fill-color); }
-	:host([color="donkergeel"]) { --_indeterminate-fill-color: var(--components-progress-bar-donkergeel-fill-color); }
-	:host([color="geel"]) { --_indeterminate-fill-color: var(--components-progress-bar-geel-fill-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-fill-color: var(--components-progress-bar-donkerbruin-fill-color); }
-	:host([color="bruin"]) { --_indeterminate-fill-color: var(--components-progress-bar-bruin-fill-color); }
-	:host([color="donkergroen"]) { --_indeterminate-fill-color: var(--components-progress-bar-donkergroen-fill-color); }
-	:host([color="groen"]) { --_indeterminate-fill-color: var(--components-progress-bar-groen-fill-color); }
-	:host([color="mosgroen"]) { --_indeterminate-fill-color: var(--components-progress-bar-mosgroen-fill-color); }
-	:host([color="mintgroen"]) { --_indeterminate-fill-color: var(--components-progress-bar-mintgroen-fill-color); }
+	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-bar-coolgray-background-color); --_indeterminate-border-color: var(--components-progress-bar-coolgray-border-color); }
+	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lintblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-lintblauw-border-color); }
+	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkerblauw-border-color); }
+	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-hemelblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-hemelblauw-border-color); }
+	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lichtblauw-background-color); --_indeterminate-border-color: var(--components-progress-bar-lichtblauw-border-color); }
+	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-bar-paars-background-color); --_indeterminate-border-color: var(--components-progress-bar-paars-border-color); }
+	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-bar-violet-background-color); --_indeterminate-border-color: var(--components-progress-bar-violet-border-color); }
+	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-bar-robijnrood-background-color); --_indeterminate-border-color: var(--components-progress-bar-robijnrood-border-color); }
+	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-bar-roze-background-color); --_indeterminate-border-color: var(--components-progress-bar-roze-border-color); }
+	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-bar-rood-background-color); --_indeterminate-border-color: var(--components-progress-bar-rood-border-color); }
+	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-bar-oranje-background-color); --_indeterminate-border-color: var(--components-progress-bar-oranje-border-color); }
+	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergeel-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkergeel-border-color); }
+	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-bar-geel-background-color); --_indeterminate-border-color: var(--components-progress-bar-geel-border-color); }
+	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerbruin-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkerbruin-border-color); }
+	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-bar-bruin-background-color); --_indeterminate-border-color: var(--components-progress-bar-bruin-border-color); }
+	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-donkergroen-border-color); }
+	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-bar-groen-background-color); --_indeterminate-border-color: var(--components-progress-bar-groen-border-color); }
+	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mosgroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-mosgroen-border-color); }
+	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mintgroen-background-color); --_indeterminate-border-color: var(--components-progress-bar-mintgroen-border-color); }
 
 
-	/* # Header */
+	/* # Caption */
 
-	.progress-bar__header {
+	.progress-bar__caption {
 		display: flex;
-		gap: var(--_header-gap);
+		gap: var(--_caption-gap);
 		justify-content: space-between;
 		align-items: baseline;
-		color: var(--_header-text-color);
+		color: var(--_text-color);
 	}
 
 	.progress-bar__text {
-		font: var(--_header-text-font);
+		font: var(--_text-font);
 	}
 
-	.progress-bar__value {
-		color: var(--_header-value-color);
-		font: var(--_header-value-font);
+	.progress-bar__supporting-text {
+		color: var(--_supporting-text-color);
+		font: var(--_supporting-text-font);
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -99,11 +103,11 @@ export const progressBarStyles = css `
 		position: relative;
 		border-radius: var(--_corner-radius);
 		box-shadow: inset 0 0 0 var(--_track-border-width) var(--_track-border-color);
-		background-color: var(--_track-color);
+		background-color: var(--_track-background-color);
 		width: 100%;
 		height: var(--_height);
 		overflow: hidden;
-		gap: var(--_segment-gap);
+		gap: var(--_segment-indicator-gap);
 		container-type: inline-size;
 	}
 
@@ -150,7 +154,8 @@ export const progressBarStyles = css `
 		inset-block: 0;
 		left: 0;
 		border-radius: var(--_corner-radius);
-		background: var(--_indeterminate-fill-color);
+		background: var(--_indeterminate-background-color);
+		box-shadow: inset 0 0 0 var(--_indeterminate-border-width) var(--_indeterminate-border-color);
 		width: var(--_indeterminate-bar-width);
 		transform: translateX(0);
 		/* Duration scales with track width via the container queries below.
@@ -190,8 +195,8 @@ export const progressBarStyles = css `
 		}
 
 		@keyframes progress-bar-indeterminate-pulse {
-			0%, 100% { background-color: color-mix(in srgb, var(--_indeterminate-fill-color) 20%, transparent); }
-			50% { background-color: color-mix(in srgb, var(--_indeterminate-fill-color) 50%, transparent); }
+			0%, 100% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 20%, transparent); }
+			50% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 50%, transparent); }
 		}
 	}
 
@@ -201,23 +206,23 @@ export const progressBarStyles = css `
 		}
 	}
 `;
-export const progressBarSegmentStyles = css `
+export const progressBarSegmentIndicatorStyles = css `
 
 
 	/* # Host */
 
 	:host {
-		--_width: var(--context-progress-bar-segment-width, 0%);
-		--_min-width: var(--components-progress-bar-segment-min-width);
-		--_fill-color: var(--components-progress-bar-accent-fill-color);
+		--_width: var(--context-progress-bar-segment-indicator-width, 0%);
+		--_min-width: var(--components-progress-bar-segment-indicator-min-width);
+		--_background-color: var(--components-progress-bar-accent-background-color);
 		--_border-color: var(--components-progress-bar-accent-border-color);
-		--_border-width: var(--components-progress-bar-segment-border-width);
+		--_border-width: var(--components-progress-bar-segment-indicator-border-width);
 
 		box-sizing: border-box;
 		display: block;
 		position: relative;
 		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
-		background-color: var(--_fill-color);
+		background-color: var(--_background-color);
 		width: var(--_width);
 		min-width: var(--_min-width);
 		height: 100%;
@@ -236,19 +241,19 @@ export const progressBarSegmentStyles = css `
 	   indeterminate and determinate. */
 
 	:host([data-grow]) {
-		animation: progress-bar-segment-grow var(--primitives-transition-duration-slow) ease-out;
+		animation: progress-bar-segment-indicator-grow var(--primitives-transition-duration-slow) ease-out;
 	}
 
 	:host([data-shrink]) {
-		animation: progress-bar-segment-shrink var(--primitives-transition-duration-slow) ease-out forwards;
+		animation: progress-bar-segment-indicator-shrink var(--primitives-transition-duration-slow) ease-out forwards;
 	}
 
-	@keyframes progress-bar-segment-grow {
+	@keyframes progress-bar-segment-indicator-grow {
 		from { width: 0%; }
 		to { width: var(--_width); }
 	}
 
-	@keyframes progress-bar-segment-shrink {
+	@keyframes progress-bar-segment-indicator-shrink {
 		from { width: var(--_width); opacity: 1; }
 		to { width: 0%; opacity: 0; }
 	}
@@ -271,23 +276,23 @@ export const progressBarSegmentStyles = css `
 	/* ## Variants — semantic */
 
 	:host([color="neutral"]) {
-		--_fill-color: var(--components-progress-bar-neutral-fill-color);
+		--_background-color: var(--components-progress-bar-neutral-background-color);
 		--_border-color: var(--components-progress-bar-neutral-border-color);
 	}
 	:host([color="accent"]) {
-		--_fill-color: var(--components-progress-bar-accent-fill-color);
+		--_background-color: var(--components-progress-bar-accent-background-color);
 		--_border-color: var(--components-progress-bar-accent-border-color);
 	}
 	:host([color="success"]) {
-		--_fill-color: var(--components-progress-bar-success-fill-color);
+		--_background-color: var(--components-progress-bar-success-background-color);
 		--_border-color: var(--components-progress-bar-success-border-color);
 	}
 	:host([color="warning"]) {
-		--_fill-color: var(--components-progress-bar-warning-fill-color);
+		--_background-color: var(--components-progress-bar-warning-background-color);
 		--_border-color: var(--components-progress-bar-warning-border-color);
 	}
 	:host([color="critical"]) {
-		--_fill-color: var(--components-progress-bar-critical-fill-color);
+		--_background-color: var(--components-progress-bar-critical-background-color);
 		--_border-color: var(--components-progress-bar-critical-border-color);
 	}
 
@@ -295,79 +300,79 @@ export const progressBarSegmentStyles = css `
 	/* ## Variants — Rijkskleuren */
 
 	:host([color="coolgray"]) {
-		--_fill-color: var(--components-progress-bar-coolgray-fill-color);
+		--_background-color: var(--components-progress-bar-coolgray-background-color);
 		--_border-color: var(--components-progress-bar-coolgray-border-color);
 	}
 	:host([color="lintblauw"]) {
-		--_fill-color: var(--components-progress-bar-lintblauw-fill-color);
+		--_background-color: var(--components-progress-bar-lintblauw-background-color);
 		--_border-color: var(--components-progress-bar-lintblauw-border-color);
 	}
 	:host([color="donkerblauw"]) {
-		--_fill-color: var(--components-progress-bar-donkerblauw-fill-color);
+		--_background-color: var(--components-progress-bar-donkerblauw-background-color);
 		--_border-color: var(--components-progress-bar-donkerblauw-border-color);
 	}
 	:host([color="hemelblauw"]) {
-		--_fill-color: var(--components-progress-bar-hemelblauw-fill-color);
+		--_background-color: var(--components-progress-bar-hemelblauw-background-color);
 		--_border-color: var(--components-progress-bar-hemelblauw-border-color);
 	}
 	:host([color="lichtblauw"]) {
-		--_fill-color: var(--components-progress-bar-lichtblauw-fill-color);
+		--_background-color: var(--components-progress-bar-lichtblauw-background-color);
 		--_border-color: var(--components-progress-bar-lichtblauw-border-color);
 	}
 	:host([color="paars"]) {
-		--_fill-color: var(--components-progress-bar-paars-fill-color);
+		--_background-color: var(--components-progress-bar-paars-background-color);
 		--_border-color: var(--components-progress-bar-paars-border-color);
 	}
 	:host([color="violet"]) {
-		--_fill-color: var(--components-progress-bar-violet-fill-color);
+		--_background-color: var(--components-progress-bar-violet-background-color);
 		--_border-color: var(--components-progress-bar-violet-border-color);
 	}
 	:host([color="robijnrood"]) {
-		--_fill-color: var(--components-progress-bar-robijnrood-fill-color);
+		--_background-color: var(--components-progress-bar-robijnrood-background-color);
 		--_border-color: var(--components-progress-bar-robijnrood-border-color);
 	}
 	:host([color="roze"]) {
-		--_fill-color: var(--components-progress-bar-roze-fill-color);
+		--_background-color: var(--components-progress-bar-roze-background-color);
 		--_border-color: var(--components-progress-bar-roze-border-color);
 	}
 	:host([color="rood"]) {
-		--_fill-color: var(--components-progress-bar-rood-fill-color);
+		--_background-color: var(--components-progress-bar-rood-background-color);
 		--_border-color: var(--components-progress-bar-rood-border-color);
 	}
 	:host([color="oranje"]) {
-		--_fill-color: var(--components-progress-bar-oranje-fill-color);
+		--_background-color: var(--components-progress-bar-oranje-background-color);
 		--_border-color: var(--components-progress-bar-oranje-border-color);
 	}
 	:host([color="donkergeel"]) {
-		--_fill-color: var(--components-progress-bar-donkergeel-fill-color);
+		--_background-color: var(--components-progress-bar-donkergeel-background-color);
 		--_border-color: var(--components-progress-bar-donkergeel-border-color);
 	}
 	:host([color="geel"]) {
-		--_fill-color: var(--components-progress-bar-geel-fill-color);
+		--_background-color: var(--components-progress-bar-geel-background-color);
 		--_border-color: var(--components-progress-bar-geel-border-color);
 	}
 	:host([color="donkerbruin"]) {
-		--_fill-color: var(--components-progress-bar-donkerbruin-fill-color);
+		--_background-color: var(--components-progress-bar-donkerbruin-background-color);
 		--_border-color: var(--components-progress-bar-donkerbruin-border-color);
 	}
 	:host([color="bruin"]) {
-		--_fill-color: var(--components-progress-bar-bruin-fill-color);
+		--_background-color: var(--components-progress-bar-bruin-background-color);
 		--_border-color: var(--components-progress-bar-bruin-border-color);
 	}
 	:host([color="donkergroen"]) {
-		--_fill-color: var(--components-progress-bar-donkergroen-fill-color);
+		--_background-color: var(--components-progress-bar-donkergroen-background-color);
 		--_border-color: var(--components-progress-bar-donkergroen-border-color);
 	}
 	:host([color="groen"]) {
-		--_fill-color: var(--components-progress-bar-groen-fill-color);
+		--_background-color: var(--components-progress-bar-groen-background-color);
 		--_border-color: var(--components-progress-bar-groen-border-color);
 	}
 	:host([color="mosgroen"]) {
-		--_fill-color: var(--components-progress-bar-mosgroen-fill-color);
+		--_background-color: var(--components-progress-bar-mosgroen-background-color);
 		--_border-color: var(--components-progress-bar-mosgroen-border-color);
 	}
 	:host([color="mintgroen"]) {
-		--_fill-color: var(--components-progress-bar-mintgroen-fill-color);
+		--_background-color: var(--components-progress-bar-mintgroen-background-color);
 		--_border-color: var(--components-progress-bar-mintgroen-border-color);
 	}
 
@@ -375,7 +380,7 @@ export const progressBarSegmentStyles = css `
 	/* # Hover area (tooltip trigger)
 	   Fills the segment; captures hover/focus for the wrapping nldd-tooltip. */
 
-	.progress-bar-segment__hover-area {
+	.progress-bar-segment-indicator__tooltip-area {
 		display: block;
 		position: absolute;
 		inset: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyMnC,CAAC;AAGF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmM1C,CAAC"}
+{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-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;;;;;;;;;;;;;;;;;;;;;;;IAuBhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmMnD,CAAC"}

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

@@ -2,34 +2,34 @@ import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 export function progressBarTemplate(component, onSlotChange) {
-    // Header only renders when `text` is set. The value lives next to the text
-    // and shouldn't appear on its own — otherwise it'd pop in/out when toggling
-    // indeterminate (since `_displayValue` is empty during indeterminate).
-    const hasHeader = !!component.text;
+    // Caption renders when there's a label or an inline value to show
+    // (value-display="inline"). _hasCaption stays empty during indeterminate (no
+    // value), so the row doesn't pop in/out on a determinate↔indeterminate flip.
+    const hasCaption = component._hasCaption;
     const isExiting = component._indeterminateExiting;
     const isEntering = component._indeterminateEntering;
-    // Indicator renders during indeterminate and during an exit-fade.
-    const showIndeterminateIndicator = (component.indeterminate || isExiting) && !component._hasSegments;
-    // Segment renders during determinate and during an enter-shrink (otherwise
-    // it can't shrink — it would unmount immediately). Its dynamic attributes
-    // (width, mode, tooltip-text, grow/shrink) are applied by _syncSegments
-    // so the slotted and internal paths share one code path.
-    const showInternalSegment = !component._hasSegments
+    // The indeterminate indicator renders while indeterminate, and during its exit-fade.
+    const showIndeterminateIndicator = (component.indeterminate || isExiting) && !component._hasSegmentIndicators;
+    // The internal segment-indicator renders while determinate, and during an
+    // enter-shrink (otherwise it can't shrink — it would unmount immediately).
+    // Its dynamic attributes (width, mode, tooltip-text, grow/shrink) are applied
+    // by _syncSegmentIndicators so the slotted and internal paths share one code path.
+    const showInternalSegmentIndicator = !component._hasSegmentIndicators
         && component.value !== null && component.value > 0
         && (!component.indeterminate || isEntering);
     // Round so aria-valuenow doesn't produce floats (some screenreaders
     // read them out literally — "49 point 999 percent").
     const ariaValueNow = component.indeterminate ? undefined : Math.round(component._totalValue);
-    // Accessible name: use aria-label with the visible header text or a
+    // Accessible name: use aria-label with the visible label text or a
     // translated fallback. aria-labelledby would be cleaner but VoiceOver on
     // Safari can't resolve IDREFs scoped to a shadow root, so we duplicate
     // the string into aria-label for cross-browser screen-reader support.
     const ariaLabel = component.text || component._t('components.progress-bar.label-text');
     return html `
-		${hasHeader ? html `
-			<div class="progress-bar__header">
+		${hasCaption ? html `
+			<div class="progress-bar__caption">
 				<span class="progress-bar__text">${component.text}</span>
-				<span class="progress-bar__value">${component._displayValue}</span>
+				${component.valueDisplay === 'inline' && component._displayValue ? html `<span class="progress-bar__supporting-text">${component._displayValue}</span>` : nothing}
 			</div>
 		` : nothing}
 		<div class="progress-bar__track"
@@ -40,6 +40,13 @@ export function progressBarTemplate(component, onSlotChange) {
 			aria-valuenow=${ifDefined(ariaValueNow)}
 			aria-valuetext=${component._ariaValueText}
 		>
+			${showInternalSegmentIndicator ? html `
+				<nldd-progress-bar-segment-indicator class="progress-bar__segment-indicator"
+					.value=${component.value}
+					color=${component.color}
+				></nldd-progress-bar-segment-indicator>
+			` : nothing}
+			<slot @slotchange=${onSlotChange}></slot>
 			${showIndeterminateIndicator ? html `
 				<div class=${classMap({
         'progress-bar__indeterminate-indicator': true,
@@ -47,13 +54,6 @@ export function progressBarTemplate(component, onSlotChange) {
         'is-fading-in': isEntering && component.indeterminate,
     })}></div>
 			` : nothing}
-			${showInternalSegment ? html `
-				<nldd-progress-bar-segment class="progress-bar__segment"
-					.value=${component.value}
-					color=${component.color}
-				></nldd-progress-bar-segment>
-			` : nothing}
-			<slot @slotchange=${onSlotChange}></slot>
 		</div>
 	`;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,mBAAmB,CAAC,SAA0B,EAAE,YAAwB;IACvF,2EAA2E;IAC3E,4EAA4E;IAC5E,uEAAuE;IACvE,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IACnC,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,CAAC;IAClD,MAAM,UAAU,GAAG,SAAS,CAAC,sBAAsB,CAAC;IACpD,kEAAkE;IAClE,MAAM,0BAA0B,GAAG,CAAC,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrG,2EAA2E;IAC3E,0EAA0E;IAC1E,wEAAwE;IACxE,yDAAyD;IACzD,MAAM,mBAAmB,GAAG,CAAC,SAAS,CAAC,YAAY;WAC/C,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI,SAAS,CAAC,KAAK,GAAG,CAAC;WAC/C,CAAC,CAAC,SAAS,CAAC,aAAa,IAAI,UAAU,CAAC,CAAC;IAC7C,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,oEAAoE;IACpE,yEAAyE;IACzE,uEAAuE;IACvE,sEAAsE;IACtE,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC;IACvF,OAAO,IAAI,CAAA;IACR,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;uCAEmB,SAAS,CAAC,IAAI;wCACb,SAAS,CAAC,aAAa;;GAE5D,CAAC,CAAC,CAAC,OAAO;;;gBAGG,SAAS;;mBAEN,SAAS,CAAC,GAAG;mBACb,SAAS,CAAC,YAAY,CAAC;oBACtB,SAAS,CAAC,cAAc;;KAEvC,0BAA0B,CAAC,CAAC,CAAC,IAAI,CAAA;iBACrB,QAAQ,CAAC;QACrB,uCAAuC,EAAE,IAAI;QAC7C,eAAe,EAAE,SAAS,IAAI,CAAC,SAAS,CAAC,aAAa;QACtD,cAAc,EAAE,UAAU,IAAI,SAAS,CAAC,aAAa;KACrD,CAAC;IACF,CAAC,CAAC,CAAC,OAAO;KACT,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEjB,SAAS,CAAC,KAAM;aACjB,SAAS,CAAC,KAAK;;IAExB,CAAC,CAAC,CAAC,OAAO;uBACS,YAAY;;EAEjC,CAAC;AACH,CAAC"}
+{"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,mBAAmB,CAAC,SAA0B,EAAE,YAAwB;IACvF,kEAAkE;IAClE,6EAA6E;IAC7E,6EAA6E;IAC7E,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,CAAC;IAClD,MAAM,UAAU,GAAG,SAAS,CAAC,sBAAsB,CAAC;IACpD,qFAAqF;IACrF,MAAM,0BAA0B,GAAG,CAAC,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC9G,0EAA0E;IAC1E,2EAA2E;IAC3E,8EAA8E;IAC9E,mFAAmF;IACnF,MAAM,4BAA4B,GAAG,CAAC,SAAS,CAAC,qBAAqB;WACjE,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI,SAAS,CAAC,KAAK,GAAG,CAAC;WAC/C,CAAC,CAAC,SAAS,CAAC,aAAa,IAAI,UAAU,CAAC,CAAC;IAC7C,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,mEAAmE;IACnE,yEAAyE;IACzE,uEAAuE;IACvE,sEAAsE;IACtE,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC;IACvF,OAAO,IAAI,CAAA;IACR,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;uCAEkB,SAAS,CAAC,IAAI;MAC/C,SAAS,CAAC,YAAY,KAAK,QAAQ,IAAI,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,aAAa,SAAS,CAAC,CAAC,CAAC,OAAO;;GAEjK,CAAC,CAAC,CAAC,OAAO;;;gBAGG,SAAS;;mBAEN,SAAS,CAAC,GAAG;mBACb,SAAS,CAAC,YAAY,CAAC;oBACtB,SAAS,CAAC,cAAc;;KAEvC,4BAA4B,CAAC,CAAC,CAAC,IAAI,CAAA;;cAE1B,SAAS,CAAC,KAAM;aACjB,SAAS,CAAC,KAAK;;IAExB,CAAC,CAAC,CAAC,OAAO;uBACS,YAAY;KAC9B,0BAA0B,CAAC,CAAC,CAAC,IAAI,CAAA;iBACrB,QAAQ,CAAC;QACrB,uCAAuC,EAAE,IAAI;QAC7C,eAAe,EAAE,SAAS,IAAI,CAAC,SAAS,CAAC,aAAa;QACtD,cAAc,EAAE,UAAU,IAAI,SAAS,CAAC,aAAa;KACrD,CAAC;IACF,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts

@@ -1,7 +1,7 @@
 /**
  * Nederlandse Digitale Dienst Progress Circle Component (Lit + TypeScript)
  *
- * Exports both NLDDProgressCircle and NLDDProgressCircleSegment.
+ * Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator.
  *
  * A circular progress indicator that mirrors the API of nldd-progress-bar:
  * single-value or multi-segment, progress or distribution mode, 24 colours,
@@ -24,12 +24,14 @@
  * @attr {string}  color             - Color. Semantic (neutral, accent, success, warning, critical) or a Rijkskleur. Default 'accent'.
  * @attr {string} size              - Circle diameter in px. Matches nldd-icon sizes: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96 (default: '28')
  * @attr {string}  text              - Label below the circle
- * @attr {'percentage'|'absolute'|'fraction'|'none'} value-format - Format the tooltip uses for the auto-text
- * @attr {string}  accessible-label  - Full override of aria-valuetext (and tooltip text)
+ * @attr {'percentage'|'absolute'|'fraction'} value-format - Format of the displayed value (default: 'percentage')
+ * @attr {'inline'|'tooltip'|'none'} value-display - Where the value shows: inline below the label, in a tooltip, or hidden (default: 'tooltip')
+ * @attr {string}  value-text        - Full override of the displayed value (inline + tooltip)
+ * @attr {string}  accessible-label  - Full override of aria-valuetext
  * @attr {boolean} indeterminate     - Renders the rotating elastic arc animation
  * @attr {object}  translations      - Override translation keys; unset keys fall back to Dutch
  *
- * @element nldd-progress-circle-segment
+ * @element nldd-progress-circle-segment-indicator
  *
  * @attr {number}  value - Share of the parent's total (default 0; <=0 hides segment)
  * @attr {string}  color - Color (semantic or Rijkskleur). Default 'accent'.
@@ -45,9 +47,10 @@ import '../../content/tooltip/tooltip.js';
 export declare const INDETERMINATE_TRANSITION_MS = 300;
 export type ProgressCircleMode = 'progress' | 'distribution';
 export type ProgressCircleSize = '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
-export type ProgressCircleValueFormat = 'percentage' | 'absolute' | 'fraction' | 'none';
+export type ProgressCircleValueFormat = 'percentage' | 'absolute' | 'fraction';
+export type ProgressCircleValueDisplay = 'inline' | 'tooltip' | 'none';
 export type ProgressCircleColor = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
-export declare class NLDDProgressCircleSegment extends LitElement {
+export declare class NLDDProgressCircleSegmentIndicator extends LitElement {
     static styles: import("lit").CSSResult;
     value: number;
     color: ProgressCircleColor;
@@ -63,10 +66,12 @@ export declare class NLDDProgressCircle extends LitElement {
     size: ProgressCircleSize;
     text: string;
     valueFormat: ProgressCircleValueFormat;
+    valueText: string;
+    valueDisplay: ProgressCircleValueDisplay;
     accessibleLabel: string;
     indeterminate: boolean;
     translations: Partial<NLDDProgressCircleTranslations>;
-    private _segments;
+    private _segmentIndicators;
     _indeterminateExiting: boolean;
     _indeterminateEntering: boolean;
     /** When true, _buildArcs returns zero-length arcs so the first render
@@ -78,15 +83,27 @@ export declare class NLDDProgressCircle extends LitElement {
     private _enterTimeout?;
     private _growRafId?;
     private _attributeObserver?;
+    private static _idCounter;
+    /** Per-instance suffix so the in-shadow SVG <filter> ids and their url(#…)
+     *  references stay unique per element. Fragment references resolve within a
+     *  shadow tree's own scope in modern browsers, but a per-instance id removes
+     *  any cross-instance ambiguity (and old-WebKit shadow-SVG reference quirks).
+     *  Browser-only: the module counter would need stable ids for SSR hydration.
+     *  @internal */
+    readonly _uid: string;
     _t(key: keyof NLDDProgressCircleTranslations): string;
-    get _hasSegments(): boolean;
+    get _hasSegmentIndicators(): boolean;
     get _totalValue(): number;
     get _percentage(): number;
-    /** Compact text shown in the tooltip. Follows value-format (matching the
-     *  per-segment tooltip style of nldd-progress-bar) and omits the "voltooid"
-     *  suffix that aria-valuetext uses for screen readers. Returns '' when
-     *  value-format is 'none' so the template can skip rendering the tooltip
-     *  wrapper entirely. accessibleLabel and indeterminate still produce text. */
+    /** Formatted value for inline display (value-display="inline"). Mirrors
+     *  nldd-progress-bar: valueText wins, empty while indeterminate, otherwise
+     *  the total formatted per value-format. */
+    get _displayValue(): string;
+    /** Compact text shown in the tooltip — only in value-display="tooltip" mode
+     *  (returns '' otherwise, so the template skips the tooltip wrapper). Follows
+     *  value-format (matching nldd-progress-bar's per-segment tooltip style) and
+     *  omits the "voltooid" suffix that aria-valuetext uses for screen readers.
+     *  valueText overrides the whole thing; indeterminate shows the loading text. */
     get _tooltipText(): string;
     /** Verbose text used for aria-valuetext (screen readers). Includes the
      *  "voltooid" suffix and total-prefix for clearer announcements. */
@@ -126,7 +143,7 @@ export declare class NLDDProgressCircle extends LitElement {
 declare global {
     interface HTMLElementTagNameMap {
         'nldd-progress-circle': NLDDProgressCircle;
-        'nldd-progress-circle-segment': NLDDProgressCircleSegment;
+        'nldd-progress-circle-segment-indicator': NLDDProgressCircleSegmentIndicator;
     }
 }
 //# sourceMappingURL=progress-circle.d.ts.map

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

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