@nldd/design-system 0.8.52 → 0.8.54

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

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
 export const progressCircleStyles = css `
 
 
@@ -12,17 +13,20 @@ export const progressCircleStyles = css `
 		   grows with circle size — must match getStrokeWidthPx() in the
 		   template file. */
 		--_stroke-width: calc(4px * 100 / 28);
-		--_track-color: var(--components-progress-circle-track-color);
+		--_track-background-color: var(--components-progress-circle-track-background-color);
 		--_track-border-color: var(--components-progress-circle-track-border-color);
-		--_label-gap: var(--components-progress-circle-label-gap);
-		--_label-color: var(--components-progress-circle-label-color);
-		--_label-font: var(--components-progress-circle-label-font);
+		--_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);
 
+		${inheritedTextReset}
 		box-sizing: border-box;
 		display: inline-flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--_label-gap);
+		gap: var(--_caption-gap);
 	}
 
 	:host([hidden]) {
@@ -30,17 +34,17 @@ export const progressCircleStyles = css `
 	}
 
 	: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(3px * 100 / 20); }
+	: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="28"]) { --_size: var(--primitives-space-28); --_stroke-width: calc(4px * 100 / 28); }
-	:host([size="32"]) { --_size: var(--primitives-space-32); --_stroke-width: calc(4px * 100 / 32); }
-	:host([size="40"]) { --_size: var(--primitives-space-40); --_stroke-width: calc(4px * 100 / 40); }
-	:host([size="44"]) { --_size: var(--primitives-space-44); --_stroke-width: calc(5px * 100 / 44); }
-	:host([size="48"]) { --_size: var(--primitives-space-48); --_stroke-width: calc(5px * 100 / 48); }
-	:host([size="56"]) { --_size: var(--primitives-space-56); --_stroke-width: calc(6px * 100 / 56); }
-	:host([size="64"]) { --_size: var(--primitives-space-64); --_stroke-width: calc(6px * 100 / 64); }
-	:host([size="80"]) { --_size: var(--primitives-space-80); --_stroke-width: calc(6px * 100 / 80); }
-	:host([size="96"]) { --_size: var(--primitives-space-96); --_stroke-width: calc(6px * 100 / 96); }
+	: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); }
 
 
 	/* # SVG wrapper */
@@ -67,7 +71,7 @@ export const progressCircleStyles = css `
 	   so a 4px stroke is always 4 actual pixels at any circle size. */
 
 	.progress-circle__track {
-		stroke: var(--_track-color);
+		stroke: var(--_track-background-color);
 		stroke-width: var(--_stroke-width);
 	}
 
@@ -76,13 +80,13 @@ export const progressCircleStyles = css `
 	   Animate value changes smoothly via stroke-dasharray transition.
 	   Crossfade with the indeterminate indicator uses opacity on the SVG group. */
 
-	.progress-circle__segment {
+	.progress-circle__segment-indicator {
 		stroke-width: var(--_stroke-width);
 		opacity: 1;
 		transition: stroke-dasharray var(--primitives-transition-duration-slow) ease-out, stroke-dashoffset var(--primitives-transition-duration-slow) ease-out, opacity var(--primitives-transition-duration-slow) ease-out;
 	}
 
-	.progress-circle__segment[data-shrink] {
+	.progress-circle__segment-indicator[data-shrink] {
 		opacity: 0;
 	}
 
@@ -91,41 +95,41 @@ export const progressCircleStyles = css `
 	   visible gap between segments stays consistent.
 	   Distribution mode: butt caps keep the segment boundaries crisp. */
 
-	.progress-circle__segment {
+	.progress-circle__segment-indicator {
 		stroke-linecap: round;
 	}
 
-	:host([mode="distribution"]) .progress-circle__segment {
+	:host([mode="distribution"]) .progress-circle__segment-indicator {
 		stroke-linecap: butt;
 	}
 
 
 	/* ## Arc color per variant */
 
-	.progress-circle__segment--neutral { stroke: var(--components-progress-circle-neutral-fill-color); }
-	.progress-circle__segment--accent { stroke: var(--components-progress-circle-accent-fill-color); }
-	.progress-circle__segment--success { stroke: var(--components-progress-circle-success-fill-color); }
-	.progress-circle__segment--warning { stroke: var(--components-progress-circle-warning-fill-color); }
-	.progress-circle__segment--critical { stroke: var(--components-progress-circle-critical-fill-color); }
-	.progress-circle__segment--coolgray { stroke: var(--components-progress-circle-coolgray-fill-color); }
-	.progress-circle__segment--lintblauw { stroke: var(--components-progress-circle-lintblauw-fill-color); }
-	.progress-circle__segment--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-fill-color); }
-	.progress-circle__segment--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-fill-color); }
-	.progress-circle__segment--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-fill-color); }
-	.progress-circle__segment--paars { stroke: var(--components-progress-circle-paars-fill-color); }
-	.progress-circle__segment--violet { stroke: var(--components-progress-circle-violet-fill-color); }
-	.progress-circle__segment--robijnrood { stroke: var(--components-progress-circle-robijnrood-fill-color); }
-	.progress-circle__segment--roze { stroke: var(--components-progress-circle-roze-fill-color); }
-	.progress-circle__segment--rood { stroke: var(--components-progress-circle-rood-fill-color); }
-	.progress-circle__segment--oranje { stroke: var(--components-progress-circle-oranje-fill-color); }
-	.progress-circle__segment--donkergeel { stroke: var(--components-progress-circle-donkergeel-fill-color); }
-	.progress-circle__segment--geel { stroke: var(--components-progress-circle-geel-fill-color); }
-	.progress-circle__segment--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-fill-color); }
-	.progress-circle__segment--bruin { stroke: var(--components-progress-circle-bruin-fill-color); }
-	.progress-circle__segment--donkergroen { stroke: var(--components-progress-circle-donkergroen-fill-color); }
-	.progress-circle__segment--groen { stroke: var(--components-progress-circle-groen-fill-color); }
-	.progress-circle__segment--mosgroen { stroke: var(--components-progress-circle-mosgroen-fill-color); }
-	.progress-circle__segment--mintgroen { stroke: var(--components-progress-circle-mintgroen-fill-color); }
+	.progress-circle__segment-indicator--neutral { stroke: var(--components-progress-circle-neutral-background-color); }
+	.progress-circle__segment-indicator--accent { stroke: var(--components-progress-circle-accent-background-color); }
+	.progress-circle__segment-indicator--success { stroke: var(--components-progress-circle-success-background-color); }
+	.progress-circle__segment-indicator--warning { stroke: var(--components-progress-circle-warning-background-color); }
+	.progress-circle__segment-indicator--critical { stroke: var(--components-progress-circle-critical-background-color); }
+	.progress-circle__segment-indicator--coolgray { stroke: var(--components-progress-circle-coolgray-background-color); }
+	.progress-circle__segment-indicator--lintblauw { stroke: var(--components-progress-circle-lintblauw-background-color); }
+	.progress-circle__segment-indicator--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-background-color); }
+	.progress-circle__segment-indicator--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-background-color); }
+	.progress-circle__segment-indicator--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-background-color); }
+	.progress-circle__segment-indicator--paars { stroke: var(--components-progress-circle-paars-background-color); }
+	.progress-circle__segment-indicator--violet { stroke: var(--components-progress-circle-violet-background-color); }
+	.progress-circle__segment-indicator--robijnrood { stroke: var(--components-progress-circle-robijnrood-background-color); }
+	.progress-circle__segment-indicator--roze { stroke: var(--components-progress-circle-roze-background-color); }
+	.progress-circle__segment-indicator--rood { stroke: var(--components-progress-circle-rood-background-color); }
+	.progress-circle__segment-indicator--oranje { stroke: var(--components-progress-circle-oranje-background-color); }
+	.progress-circle__segment-indicator--donkergeel { stroke: var(--components-progress-circle-donkergeel-background-color); }
+	.progress-circle__segment-indicator--geel { stroke: var(--components-progress-circle-geel-background-color); }
+	.progress-circle__segment-indicator--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-background-color); }
+	.progress-circle__segment-indicator--bruin { stroke: var(--components-progress-circle-bruin-background-color); }
+	.progress-circle__segment-indicator--donkergroen { stroke: var(--components-progress-circle-donkergroen-background-color); }
+	.progress-circle__segment-indicator--groen { stroke: var(--components-progress-circle-groen-background-color); }
+	.progress-circle__segment-indicator--mosgroen { stroke: var(--components-progress-circle-mosgroen-background-color); }
+	.progress-circle__segment-indicator--mintgroen { stroke: var(--components-progress-circle-mintgroen-background-color); }
 
 
 	/* # Spinner (indeterminate)
@@ -140,7 +144,7 @@ export const progressCircleStyles = css `
 		stroke-width: var(--_stroke-width);
 		stroke-dasharray: 25 100;
 		stroke-dashoffset: 0;
-		stroke: var(--_indeterminate-fill-color);
+		stroke: var(--_indeterminate-background-color);
 		opacity: 1;
 		transform-origin: 50% 50%;
 		transition: opacity var(--primitives-transition-duration-slow) ease-out;
@@ -156,43 +160,56 @@ export const progressCircleStyles = css `
 	}
 
 
-	/* # Indeterminate fill colour follows the color variant; default accent (blue) */
+	/* # Indeterminate fill + border colour follow the color variant; default accent (blue) */
 
 	:host {
-		--_indeterminate-fill-color: var(--components-progress-circle-accent-fill-color);
-	}
-
-	:host([color="neutral"]) { --_indeterminate-fill-color: var(--components-progress-circle-neutral-fill-color); }
-	:host([color="accent"]) { --_indeterminate-fill-color: var(--components-progress-circle-accent-fill-color); }
-	:host([color="success"]) { --_indeterminate-fill-color: var(--components-progress-circle-success-fill-color); }
-	:host([color="warning"]) { --_indeterminate-fill-color: var(--components-progress-circle-warning-fill-color); }
-	:host([color="critical"]) { --_indeterminate-fill-color: var(--components-progress-circle-critical-fill-color); }
-	:host([color="coolgray"]) { --_indeterminate-fill-color: var(--components-progress-circle-coolgray-fill-color); }
-	:host([color="lintblauw"]) { --_indeterminate-fill-color: var(--components-progress-circle-lintblauw-fill-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-fill-color: var(--components-progress-circle-donkerblauw-fill-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-fill-color: var(--components-progress-circle-hemelblauw-fill-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-fill-color: var(--components-progress-circle-lichtblauw-fill-color); }
-	:host([color="paars"]) { --_indeterminate-fill-color: var(--components-progress-circle-paars-fill-color); }
-	:host([color="violet"]) { --_indeterminate-fill-color: var(--components-progress-circle-violet-fill-color); }
-	:host([color="robijnrood"]) { --_indeterminate-fill-color: var(--components-progress-circle-robijnrood-fill-color); }
-	:host([color="roze"]) { --_indeterminate-fill-color: var(--components-progress-circle-roze-fill-color); }
-	:host([color="rood"]) { --_indeterminate-fill-color: var(--components-progress-circle-rood-fill-color); }
-	:host([color="oranje"]) { --_indeterminate-fill-color: var(--components-progress-circle-oranje-fill-color); }
-	:host([color="donkergeel"]) { --_indeterminate-fill-color: var(--components-progress-circle-donkergeel-fill-color); }
-	:host([color="geel"]) { --_indeterminate-fill-color: var(--components-progress-circle-geel-fill-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-fill-color: var(--components-progress-circle-donkerbruin-fill-color); }
-	:host([color="bruin"]) { --_indeterminate-fill-color: var(--components-progress-circle-bruin-fill-color); }
-	:host([color="donkergroen"]) { --_indeterminate-fill-color: var(--components-progress-circle-donkergroen-fill-color); }
-	:host([color="groen"]) { --_indeterminate-fill-color: var(--components-progress-circle-groen-fill-color); }
-	:host([color="mosgroen"]) { --_indeterminate-fill-color: var(--components-progress-circle-mosgroen-fill-color); }
-	:host([color="mintgroen"]) { --_indeterminate-fill-color: var(--components-progress-circle-mintgroen-fill-color); }
-
-
-	/* # Label */
+		--_indeterminate-background-color: var(--components-progress-circle-accent-background-color);
+		--_indeterminate-border-color: var(--components-progress-circle-accent-border-color);
+	}
+
+	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-circle-neutral-background-color); --_indeterminate-border-color: var(--components-progress-circle-neutral-border-color); }
+	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-circle-accent-background-color); --_indeterminate-border-color: var(--components-progress-circle-accent-border-color); }
+	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-circle-success-background-color); --_indeterminate-border-color: var(--components-progress-circle-success-border-color); }
+	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-circle-warning-background-color); --_indeterminate-border-color: var(--components-progress-circle-warning-border-color); }
+	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-circle-critical-background-color); --_indeterminate-border-color: var(--components-progress-circle-critical-border-color); }
+	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-circle-coolgray-background-color); --_indeterminate-border-color: var(--components-progress-circle-coolgray-border-color); }
+	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lintblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lintblauw-border-color); }
+	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerblauw-border-color); }
+	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-hemelblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-hemelblauw-border-color); }
+	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lichtblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lichtblauw-border-color); }
+	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-circle-paars-background-color); --_indeterminate-border-color: var(--components-progress-circle-paars-border-color); }
+	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-circle-violet-background-color); --_indeterminate-border-color: var(--components-progress-circle-violet-border-color); }
+	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-circle-robijnrood-background-color); --_indeterminate-border-color: var(--components-progress-circle-robijnrood-border-color); }
+	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-circle-roze-background-color); --_indeterminate-border-color: var(--components-progress-circle-roze-border-color); }
+	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-circle-rood-background-color); --_indeterminate-border-color: var(--components-progress-circle-rood-border-color); }
+	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-circle-oranje-background-color); --_indeterminate-border-color: var(--components-progress-circle-oranje-border-color); }
+	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergeel-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergeel-border-color); }
+	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-circle-geel-background-color); --_indeterminate-border-color: var(--components-progress-circle-geel-border-color); }
+	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerbruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerbruin-border-color); }
+	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-circle-bruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-bruin-border-color); }
+	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergroen-border-color); }
+	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-circle-groen-background-color); --_indeterminate-border-color: var(--components-progress-circle-groen-border-color); }
+	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mosgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mosgroen-border-color); }
+	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mintgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mintgroen-border-color); }
+
+
+	/* # Caption (label + value) */
+
+	.progress-circle__caption {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
 
 	.progress-circle__text {
-		color: var(--_label-color);
-		font: var(--_label-font);
+		color: var(--_text-color);
+		font: var(--_text-font);
+		text-align: center;
+	}
+
+	.progress-circle__supporting-text {
+		color: var(--_supporting-text-color);
+		font: var(--_supporting-text-font);
 		text-align: center;
 	}
 
@@ -223,7 +240,7 @@ export const progressCircleStyles = css `
 			50% { opacity: 0.7; }
 		}
 
-		.progress-circle__segment {
+		.progress-circle__segment-indicator {
 			transition: none;
 			animation: none;
 		}
@@ -231,13 +248,13 @@ export const progressCircleStyles = css `
 
 	@media (forced-colors: active) {
 		.progress-circle__track,
-		.progress-circle__segment,
+		.progress-circle__segment-indicator,
 		.progress-circle__indeterminate-indicator {
 			stroke: CanvasText;
 		}
 	}
 `;
-export const progressCircleSegmentStyles = css `
+export const progressCircleSegmentIndicatorStyles = css `
 	:host {
 		display: none;
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6OtC,CAAC;AAGF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;CAI7C,CAAC"}
+{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;IAqBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOrB,CAAC;AAGF,MAAM,CAAC,MAAM,oCAAoC,GAAG,GAAG,CAAA;;;;CAItD,CAAC"}

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

@@ -2,6 +2,12 @@ import type { NLDDProgressCircle } from './progress-circle.js';
 export declare function getStrokeWidthPx(sizeInPixels: number): number;
 export declare function getRadius(sizeInPixels: number): number;
 export declare function getCircumference(sizeInPixels: number): number;
+/**
+ * Erode radius (in viewBox user units) for a 1px-visual highlight border. The
+ * viewBox is 100u rendered at `size` px, so 1px = 100/size user units — scale it
+ * per size so the border stays a constant 1px at every rendered size.
+ */
+export declare function getBorderErodeRadius(sizeInPixels: number): number;
 /**
  * Lit template — renders the full SVG structure including one `<circle>` per
  * segment and (when needed) an indeterminate indicator. The dynamic per-render

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

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAW/D,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAK7D;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,IAAI,wCA8E7F"}
+{"version":3,"file":"progress-circle.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAW/D,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAO7D;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,IAAI,wCAqH7F"}

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

@@ -10,13 +10,17 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 // 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.
 export function getStrokeWidthPx(sizeInPixels) {
-    if (sizeInPixels <= 20)
+    if (sizeInPixels <= 16)
         return 3;
-    if (sizeInPixels <= 40)
+    if (sizeInPixels <= 28)
         return 4;
-    if (sizeInPixels <= 48)
+    if (sizeInPixels <= 40)
         return 5;
-    return 6;
+    if (sizeInPixels <= 48)
+        return 6;
+    if (sizeInPixels <= 64)
+        return 7;
+    return 8;
 }
 export function getRadius(sizeInPixels) {
     const strokeWidthUserUnits = getStrokeWidthPx(sizeInPixels) * 100 / sizeInPixels;
@@ -25,6 +29,14 @@ export function getRadius(sizeInPixels) {
 export function getCircumference(sizeInPixels) {
     return 2 * Math.PI * getRadius(sizeInPixels);
 }
+/**
+ * Erode radius (in viewBox user units) for a 1px-visual highlight border. The
+ * viewBox is 100u rendered at `size` px, so 1px = 100/size user units — scale it
+ * per size so the border stays a constant 1px at every rendered size.
+ */
+export function getBorderErodeRadius(sizeInPixels) {
+    return 100 / sizeInPixels;
+}
 /**
  * Lit template — renders the full SVG structure including one `<circle>` per
  * segment and (when needed) an indeterminate indicator. The dynamic per-render
@@ -40,12 +52,18 @@ export function progressCircleTemplate(component, onSlotChange) {
     // read them out literally — "49 point 999 percent").
     const ariaValueNow = component.indeterminate ? undefined : Math.round(component._totalValue);
     const isExiting = component._indeterminateExiting;
-    const isIndeterminate = (component.indeterminate || isExiting) && !component._hasSegments;
+    const isIndeterminate = (component.indeterminate || isExiting) && !component._hasSegmentIndicators;
     const showArcs = !component.indeterminate || component._indeterminateEntering;
     const arcs = showArcs ? component._buildArcs() : [];
     const sizeInPixels = Number(component.size) || 28;
     const radius = getRadius(sizeInPixels);
     const circumference = getCircumference(sizeInPixels);
+    const borderErodeRadius = getBorderErodeRadius(sizeInPixels).toFixed(3);
+    // Unique segment colours in use — one border filter each (not all 24).
+    const arcColors = [...new Set(arcs.map(arc => arc.color))];
+    // Per-instance suffix: keeps the SVG filter ids + their url(#…) references
+    // unique so two circles on one page never resolve to each other's filters.
+    const uid = component._uid;
     // 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
@@ -64,24 +82,51 @@ export function progressCircleTemplate(component, onSlotChange) {
 				viewBox="0 0 100 100"
 				aria-hidden="true"
 			>
+				<defs>
+					<filter id="progress-circle-border-track-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+						<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
+						<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
+						<feFlood style="flood-color: var(--_track-border-color)" result="flood"></feFlood>
+						<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
+						<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
+					</filter>
+					${arcColors.map(color => svg `
+						<filter id="progress-circle-border-${color}-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
+							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
+							<feFlood style="flood-color: var(--components-progress-circle-${color}-border-color)" result="flood"></feFlood>
+							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
+							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
+						</filter>
+					`)}
+					${isIndeterminate ? svg `
+						<filter id="progress-circle-border-indeterminate-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
+							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
+							<feFlood style="flood-color: var(--_indeterminate-border-color)" result="flood"></feFlood>
+							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
+							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
+						</filter>
+					` : nothing}
+				</defs>
 				<circle class="progress-circle__track"
 					cx="50"
 					cy="50"
 					r=${radius}
 					fill="none"
+					filter="url(#progress-circle-border-track-${uid})"
 				></circle>
-				<g class="progress-circle__segments">
-					${arcs.map(arc => svg `
-						<circle class="progress-circle__segment progress-circle__segment--${arc.color}"
-							cx="50"
-							cy="50"
-							r=${radius}
-							fill="none"
-							stroke-dasharray="${arc.length} ${circumference}"
-							stroke-dashoffset=${-arc.offset}
-						></circle>
-					`)}
-				</g>
+				${arcs.map(arc => svg `
+					<circle class="progress-circle__segment-indicator progress-circle__segment-indicator--${arc.color}"
+						cx="50"
+						cy="50"
+						r=${radius}
+						fill="none"
+						stroke-dasharray="${arc.length} ${circumference}"
+						stroke-dashoffset=${-arc.offset}
+						filter="url(#progress-circle-border-${arc.color}-${uid})"
+					></circle>
+				`)}
 				${isIndeterminate ? svg `
 					<circle class="progress-circle__indeterminate-indicator"
 						cx="50"
@@ -90,13 +135,14 @@ export function progressCircleTemplate(component, onSlotChange) {
 						fill="none"
 						pathLength="100"
 						stroke-linecap="round"
+						filter="url(#progress-circle-border-indeterminate-${uid})"
 					></circle>
 				` : nothing}
 			</svg>
 		</div>
 	`;
-    // Skip the tooltip wrapper entirely when there's no text (value-format
-    // 'none' with no override) so consumers don't get an inert tooltip.
+    // Skip the tooltip wrapper entirely when there's no tooltip text (e.g.
+    // value-display is not "tooltip") so consumers don't get an inert tooltip.
     const wrappedCircle = tooltipText
         ? html `
 			<nldd-tooltip
@@ -109,7 +155,12 @@ export function progressCircleTemplate(component, onSlotChange) {
     return html `
 		${wrappedCircle}
 		<slot @slotchange=${onSlotChange}></slot>
-		${component.text ? html `<span class="progress-circle__text">${component.text}</span>` : nothing}
+		${component.text || (component.valueDisplay === 'inline' && component._displayValue) ? html `
+			<div class="progress-circle__caption">
+				${component.text ? html `<span class="progress-circle__text">${component.text}</span>` : nothing}
+				${component.valueDisplay === 'inline' && component._displayValue ? html `<span class="progress-circle__supporting-text">${component._displayValue}</span>` : nothing}
+			</div>
+		` : nothing}
 	`;
 }
 //# sourceMappingURL=progress-circle.template.js.map

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/css/rich-text.css

@@ -13,6 +13,7 @@ nldd-rich-text {
 
 	container-type: inline-size;
 	display: grid;
+	width: 100%;
 	grid-template-columns:
 		[full-start]   0
 		[wide-start]   0
@@ -377,10 +378,7 @@ nldd-rich-text hr {
 }
 
 
-/* # Table
-   Spans the full container width by default so wide data tables aren't
-   cramped to the main text width. Same min-block-spacing floor as
-   blockquote so it always reads as a distinct chunk even in flat mode. */
+/* # Table */
 
 nldd-rich-text > table {
 	grid-column: main-start / full-end;
@@ -393,7 +391,11 @@ nldd-rich-text table {
 		0px,
 		calc(var(--components-rich-text-spacing-snug) - var(--_spacing))
 	);
-	border-collapse: collapse;
+	border-collapse: separate;
+	border-spacing: 0;
+	border: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
+	border-radius: var(--semantics-tables-corner-radius);
+	background-color: var(--semantics-surfaces-base-background-color);
 	font: var(--primitives-font-body-md-regular-tight);
 	overflow-x: auto;
 	-webkit-overflow-scrolling: touch;
@@ -406,26 +408,52 @@ nldd-rich-text table {
 	}
 }
 
+/* ## Table Row */
+
+nldd-rich-text tr {
+	/* Row min-height: `min-height` does not apply to a table-cell per spec, so
+	   set it on the row, where `height` acts as a minimum. Mirrors nldd-table. */
+	height: var(--semantics-tables-row-min-height);
+}
 
-/* # Table Header Cell */
+/* ## Table Header Cell */
 
 nldd-rich-text th {
-	padding: var(--primitives-space-6);
-	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
-	font: var(--primitives-font-body-md-bold-snug);
-	text-align: left;
+	min-width: var(--primitives-area-160);
+	padding-block: var(--semantics-tables-row-padding-block);
+	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
+	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
+	font: var(--primitives-font-body-md-bold-tight);
+	text-align: start;
 }
 
-
-/* # Table Data Cell */
+/* ## Table Data Cell */
 
 nldd-rich-text td {
 	min-width: var(--primitives-area-160);
-	padding: var(--primitives-space-6);
-	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
-	font: var(--primitives-font-body-md-regular-snug);
+	padding-block: var(--semantics-tables-row-padding-block);
+	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
+	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
+	font: var(--primitives-font-body-md-regular-tight);
+	text-align: left;
 
 	@container (min-width: 641px) {
 		min-width: unset;
 	}
 }
+
+/* ## Table Outer Cells */
+
+nldd-rich-text tr > :is(th, td):first-child {
+	padding-inline-start: var(--semantics-tables-row-padding-inline);
+}
+
+nldd-rich-text tr > :is(th, td):last-child {
+	padding-inline-end: var(--semantics-tables-row-padding-inline);
+}
+
+/* ## Table Last Row */
+
+nldd-rich-text tr:last-child > :is(th, td) {
+	border-bottom: none;
+}