@nldd/design-system 0.8.49 → 0.8.51

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

@@ -0,0 +1,400 @@
+import { css } from 'lit';
+export const progressBarStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_height: var(--components-progress-bar-md-height);
+		--_track-color: var(--components-progress-bar-track-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);
+		--_indeterminate-bar-width: 20%;
+		--_indeterminate-duration: 800ms;
+
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		gap: var(--_header-gap);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([size="sm"]) { --_height: var(--components-progress-bar-sm-height); }
+	:host([size="md"]) { --_height: var(--components-progress-bar-md-height); }
+	:host([size="lg"]) { --_height: var(--components-progress-bar-lg-height); }
+
+	:host([mode="distribution"]) {
+		--_segment-gap: var(--components-progress-bar-distribution-segment-gap);
+		--_corner-radius: var(--components-progress-bar-distribution-corner-radius);
+	}
+
+
+	/* ## Indeterminate fill colour follows 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="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); }
+
+
+	/* # Header */
+
+	.progress-bar__header {
+		display: flex;
+		gap: var(--_header-gap);
+		justify-content: space-between;
+		align-items: baseline;
+		color: var(--_header-text-color);
+	}
+
+	.progress-bar__text {
+		font: var(--_header-text-font);
+	}
+
+	.progress-bar__value {
+		color: var(--_header-value-color);
+		font: var(--_header-value-font);
+		font-variant-numeric: tabular-nums;
+	}
+
+
+	/* # Track */
+
+	.progress-bar__track {
+		box-sizing: border-box;
+		display: flex;
+		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);
+		width: 100%;
+		height: var(--_height);
+		overflow: hidden;
+		gap: var(--_segment-gap);
+		container-type: inline-size;
+	}
+
+	slot {
+		display: contents;
+	}
+
+
+	/* # Indeterminate
+	   Knight Rider style: track filled with a translucent variant tint,
+	   a solid bar bounces left-right. ease-in-out + alternate
+	   gives the typical "scanner" acceleration at the ends. */
+
+	/* Indicator has no own bg — the track (and its inset border)
+	   simply show through. Only the K.I.T.T. bar is visible.
+	   On fade-out the bar fades away and track + border remain. */
+
+	.progress-bar__indeterminate-indicator {
+		position: absolute;
+		inset: 0;
+		opacity: 1;
+		transition: opacity var(--primitives-transition-duration-slow) ease-out;
+	}
+
+	.progress-bar__indeterminate-indicator.is-fading-out {
+		opacity: 0;
+	}
+
+	.progress-bar__indeterminate-indicator.is-fading-in {
+		animation: progress-bar-indicator-fade-in var(--primitives-transition-duration-slow) ease-out;
+	}
+
+	@keyframes progress-bar-indicator-fade-in {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	/* K.I.T.T. bar. translateX uses calc(100cqw - 100%): cqw is the
+	   container (track) width, 100% is the bar's own width. */
+
+	.progress-bar__indeterminate-indicator::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		left: 0;
+		border-radius: var(--_corner-radius);
+		background: var(--_indeterminate-fill-color);
+		width: var(--_indeterminate-bar-width);
+		transform: translateX(0);
+		/* Duration scales with track width via the container queries below.
+		   Wider tracks need longer sweeps so the perceived velocity feels
+		   constant — a fast 800 ms cycle reads as frantic on a 1000 px bar
+		   and as too slow on a 200 px bar at the same wall-clock time. */
+		animation: progress-bar-indeterminate var(--_indeterminate-duration) ease-in-out infinite alternate;
+	}
+
+	@container (min-width: 401px) and (max-width: 720px) {
+		.progress-bar__indeterminate-indicator::before {
+			--_indeterminate-duration: 1000ms;
+		}
+	}
+
+	@container (min-width: 721px) {
+		.progress-bar__indeterminate-indicator::before {
+			--_indeterminate-duration: 1200ms;
+		}
+	}
+
+	@keyframes progress-bar-indeterminate {
+		0% { transform: translateX(0); }
+		100% { transform: translateX(calc(100cqw - 100%)); }
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-bar__indeterminate-indicator::before {
+			display: none;
+		}
+
+		.progress-bar__indeterminate-indicator {
+			animation: progress-bar-indeterminate-pulse 2s ease-in-out infinite;
+		}
+
+		@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); }
+		}
+	}
+
+	@media (forced-colors: active) {
+		.progress-bar__track {
+			border: 1px solid CanvasText;
+		}
+	}
+`;
+export const progressBarSegmentStyles = 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);
+		--_border-color: var(--components-progress-bar-accent-border-color);
+		--_border-width: var(--components-progress-bar-segment-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);
+		width: var(--_width);
+		min-width: var(--_min-width);
+		height: 100%;
+		overflow: hidden;
+		transition: width var(--primitives-transition-duration-medium) ease-out;
+	}
+
+	:host([value="0"]),
+	:host(:not([value])) {
+		display: none;
+	}
+
+
+	/* ## Grow / shrink
+	   Set by the parent (data-grow / data-shrink) on the transitions between
+	   indeterminate and determinate. */
+
+	:host([data-grow]) {
+		animation: progress-bar-segment-grow var(--primitives-transition-duration-slow) ease-out;
+	}
+
+	:host([data-shrink]) {
+		animation: progress-bar-segment-shrink var(--primitives-transition-duration-slow) ease-out forwards;
+	}
+
+	@keyframes progress-bar-segment-grow {
+		from { width: 0%; }
+		to { width: var(--_width); }
+	}
+
+	@keyframes progress-bar-segment-shrink {
+		from { width: var(--_width); opacity: 1; }
+		to { width: 0%; opacity: 0; }
+	}
+
+
+	/* ## Rounding per mode
+	   Progress mode: every segment is its own capsule. Distribution mode:
+	   segments use a small radius matching the track's outer corners.
+	   data-mode is set by the parent. */
+
+	:host([data-mode="progress"]) {
+		border-radius: var(--components-progress-bar-corner-radius);
+	}
+
+	:host([data-mode="distribution"]) {
+		border-radius: var(--components-progress-bar-distribution-corner-radius);
+	}
+
+
+	/* ## Variants — semantic */
+
+	:host([color="neutral"]) {
+		--_fill-color: var(--components-progress-bar-neutral-fill-color);
+		--_border-color: var(--components-progress-bar-neutral-border-color);
+	}
+	:host([color="accent"]) {
+		--_fill-color: var(--components-progress-bar-accent-fill-color);
+		--_border-color: var(--components-progress-bar-accent-border-color);
+	}
+	:host([color="success"]) {
+		--_fill-color: var(--components-progress-bar-success-fill-color);
+		--_border-color: var(--components-progress-bar-success-border-color);
+	}
+	:host([color="warning"]) {
+		--_fill-color: var(--components-progress-bar-warning-fill-color);
+		--_border-color: var(--components-progress-bar-warning-border-color);
+	}
+	:host([color="critical"]) {
+		--_fill-color: var(--components-progress-bar-critical-fill-color);
+		--_border-color: var(--components-progress-bar-critical-border-color);
+	}
+
+
+	/* ## Variants — Rijkskleuren */
+
+	:host([color="coolgray"]) {
+		--_fill-color: var(--components-progress-bar-coolgray-fill-color);
+		--_border-color: var(--components-progress-bar-coolgray-border-color);
+	}
+	:host([color="lintblauw"]) {
+		--_fill-color: var(--components-progress-bar-lintblauw-fill-color);
+		--_border-color: var(--components-progress-bar-lintblauw-border-color);
+	}
+	:host([color="donkerblauw"]) {
+		--_fill-color: var(--components-progress-bar-donkerblauw-fill-color);
+		--_border-color: var(--components-progress-bar-donkerblauw-border-color);
+	}
+	:host([color="hemelblauw"]) {
+		--_fill-color: var(--components-progress-bar-hemelblauw-fill-color);
+		--_border-color: var(--components-progress-bar-hemelblauw-border-color);
+	}
+	:host([color="lichtblauw"]) {
+		--_fill-color: var(--components-progress-bar-lichtblauw-fill-color);
+		--_border-color: var(--components-progress-bar-lichtblauw-border-color);
+	}
+	:host([color="paars"]) {
+		--_fill-color: var(--components-progress-bar-paars-fill-color);
+		--_border-color: var(--components-progress-bar-paars-border-color);
+	}
+	:host([color="violet"]) {
+		--_fill-color: var(--components-progress-bar-violet-fill-color);
+		--_border-color: var(--components-progress-bar-violet-border-color);
+	}
+	:host([color="robijnrood"]) {
+		--_fill-color: var(--components-progress-bar-robijnrood-fill-color);
+		--_border-color: var(--components-progress-bar-robijnrood-border-color);
+	}
+	:host([color="roze"]) {
+		--_fill-color: var(--components-progress-bar-roze-fill-color);
+		--_border-color: var(--components-progress-bar-roze-border-color);
+	}
+	:host([color="rood"]) {
+		--_fill-color: var(--components-progress-bar-rood-fill-color);
+		--_border-color: var(--components-progress-bar-rood-border-color);
+	}
+	:host([color="oranje"]) {
+		--_fill-color: var(--components-progress-bar-oranje-fill-color);
+		--_border-color: var(--components-progress-bar-oranje-border-color);
+	}
+	:host([color="donkergeel"]) {
+		--_fill-color: var(--components-progress-bar-donkergeel-fill-color);
+		--_border-color: var(--components-progress-bar-donkergeel-border-color);
+	}
+	:host([color="geel"]) {
+		--_fill-color: var(--components-progress-bar-geel-fill-color);
+		--_border-color: var(--components-progress-bar-geel-border-color);
+	}
+	:host([color="donkerbruin"]) {
+		--_fill-color: var(--components-progress-bar-donkerbruin-fill-color);
+		--_border-color: var(--components-progress-bar-donkerbruin-border-color);
+	}
+	:host([color="bruin"]) {
+		--_fill-color: var(--components-progress-bar-bruin-fill-color);
+		--_border-color: var(--components-progress-bar-bruin-border-color);
+	}
+	:host([color="donkergroen"]) {
+		--_fill-color: var(--components-progress-bar-donkergroen-fill-color);
+		--_border-color: var(--components-progress-bar-donkergroen-border-color);
+	}
+	:host([color="groen"]) {
+		--_fill-color: var(--components-progress-bar-groen-fill-color);
+		--_border-color: var(--components-progress-bar-groen-border-color);
+	}
+	:host([color="mosgroen"]) {
+		--_fill-color: var(--components-progress-bar-mosgroen-fill-color);
+		--_border-color: var(--components-progress-bar-mosgroen-border-color);
+	}
+	:host([color="mintgroen"]) {
+		--_fill-color: var(--components-progress-bar-mintgroen-fill-color);
+		--_border-color: var(--components-progress-bar-mintgroen-border-color);
+	}
+
+
+	/* # Hover area (tooltip trigger)
+	   Fills the segment; captures hover/focus for the wrapping nldd-tooltip. */
+
+	.progress-bar-segment__hover-area {
+		display: block;
+		position: absolute;
+		inset: 0;
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		:host {
+			background-color: CanvasText;
+			border: 1px solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=progress-bar.styles.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+import type { NLDDProgressBar } from './progress-bar.js';
+export declare function progressBarTemplate(component: NLDDProgressBar, onSlotChange: () => void): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=progress-bar.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,IAAI,wCAuDvF"}

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

@@ -0,0 +1,60 @@
+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;
+    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
+        && 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
+    // 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">
+				<span class="progress-bar__text">${component.text}</span>
+				<span class="progress-bar__value">${component._displayValue}</span>
+			</div>
+		` : nothing}
+		<div class="progress-bar__track"
+			role="progressbar"
+			aria-label=${ariaLabel}
+			aria-valuemin="0"
+			aria-valuemax=${component.max}
+			aria-valuenow=${ifDefined(ariaValueNow)}
+			aria-valuetext=${component._ariaValueText}
+		>
+			${showIndeterminateIndicator ? html `
+				<div class=${classMap({
+        'progress-bar__indeterminate-indicator': true,
+        'is-fading-out': isExiting && !component.indeterminate,
+        '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>
+	`;
+}
+//# sourceMappingURL=progress-bar.template.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,132 @@
+/**
+ * Nederlandse Digitale Dienst Progress Circle Component (Lit + TypeScript)
+ *
+ * Exports both NLDDProgressCircle and NLDDProgressCircleSegment.
+ *
+ * A circular progress indicator that mirrors the API of nldd-progress-bar:
+ * single-value or multi-segment, progress or distribution mode, 24 colours,
+ * fade transitions between determinate/indeterminate, indeterminate indicator.
+ *
+ * Visual differences vs the bar:
+ * - SVG arcs instead of rectangular bars.
+ * - Label below the circle (not above).
+ * - No centre text; the consumer can wrap the circle if needed.
+ * - One combined tooltip on the whole circle showing all segment info
+ *   (no per-segment tooltips).
+ * - Indeterminate uses a rotating elastic arc (Material-style) instead of
+ *   the bar's Knight Rider scanner.
+ *
+ * @element nldd-progress-circle
+ *
+ * @attr {'progress'|'distribution'} mode - Semantics for ARIA and gap behaviour (default: 'progress')
+ * @attr {number}  max               - Total value (default: 100)
+ * @attr {number}  value             - Single-segment shorthand (ignored when segment children exist)
+ * @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 {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
+ *
+ * @attr {number}  value - Share of the parent's total (default 0; <=0 hides segment)
+ * @attr {string}  color - Color (semantic or Rijkskleur). Default 'accent'.
+ * @attr {string}  name  - Optional name used in the combined tooltip + screenreader text
+ */
+import { LitElement } from 'lit';
+import type { NLDDProgressCircleTranslations } from './progress-circle.i18n.js';
+import '../../content/tooltip/tooltip.js';
+/** Indeterminate ↔ determinate crossfade duration. Must stay in sync with
+ *  --primitives-transition-duration-slow used by the matching CSS animations
+ *  and with nldd-progress-bar's matching constant. Exported so the test
+ *  suite can cross-check this value against the resolved CSS token. */
+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 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 {
+    static styles: import("lit").CSSResult;
+    value: number;
+    color: ProgressCircleColor;
+    name: string;
+    render(): symbol;
+}
+export declare class NLDDProgressCircle extends LitElement {
+    static styles: import("lit").CSSResult;
+    mode: ProgressCircleMode;
+    max: number;
+    value: number | null;
+    color: ProgressCircleColor;
+    size: ProgressCircleSize;
+    text: string;
+    valueFormat: ProgressCircleValueFormat;
+    accessibleLabel: string;
+    indeterminate: boolean;
+    translations: Partial<NLDDProgressCircleTranslations>;
+    private _segments;
+    _indeterminateExiting: boolean;
+    _indeterminateEntering: boolean;
+    /** When true, _buildArcs returns zero-length arcs so the first render
+     *  after the indeterminate→determinate transition starts at length 0.
+     *  Cleared on the next frame so the CSS dasharray transition animates
+     *  the segments growing into their final positions. */
+    private _arcsAtZero;
+    private _exitTimeout?;
+    private _enterTimeout?;
+    private _growRafId?;
+    private _attributeObserver?;
+    _t(key: keyof NLDDProgressCircleTranslations): string;
+    get _hasSegments(): 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. */
+    get _tooltipText(): string;
+    /** Verbose text used for aria-valuetext (screen readers). Includes the
+     *  "voltooid" suffix and total-prefix for clearer announcements. */
+    get _ariaValueText(): string;
+    private _formatValuePart;
+    willUpdate(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _beginIndeterminateExit;
+    private _beginIndeterminateEnter;
+    private _cancelIndeterminateExit;
+    private _cancelIndeterminateEnter;
+    private _onSlotChange;
+    /** Build the SVG arc list for the current segments (or a single synthetic
+     *  segment when the user provides only `value`). Each arc gets a length
+     *  and offset on the shared circle so they line up.
+     *
+     *  @internal `public` here is required for the render template to call
+     *  this method (templates live outside the class). Treat it as private
+     *  externally — the leading underscore signals "not API". */
+    _buildArcs(): Array<{
+        length: number;
+        offset: number;
+        color: ProgressCircleColor;
+    }>;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Toggle the data-shrink / data-fade attributes after Lit's render. These
+     * are conditional (presence-or-absence) and Lit's `=${expr}` binding has
+     * quirks removing SVG attributes; setAttribute/removeAttribute is reliable.
+     * Other dynamic SVG attributes (stroke-dasharray, stroke-dashoffset) are
+     * always set and live in the Lit template.
+     */
+    private _syncDynamicAttributes;
+    private _onSlotChangeBound;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-progress-circle': NLDDProgressCircle;
+        'nldd-progress-circle-segment': NLDDProgressCircleSegment;
+    }
+}
+//# sourceMappingURL=progress-circle.d.ts.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,8 @@
+export declare const nlddProgressCircleTranslations: {
+    'components.progress-circle.completed-suffix-text': string;
+    'components.progress-circle.total-prefix-text': string;
+    'components.progress-circle.loading-text': string;
+    'components.progress-circle.label-text': string;
+};
+export type NLDDProgressCircleTranslations = typeof nlddProgressCircleTranslations;
+//# sourceMappingURL=progress-circle.i18n.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+export const nlddProgressCircleTranslations = {
+    'components.progress-circle.completed-suffix-text': 'voltooid',
+    'components.progress-circle.total-prefix-text': 'Totaal',
+    'components.progress-circle.loading-text': 'Aan het laden',
+    'components.progress-circle.label-text': 'Voortgang',
+};
+//# sourceMappingURL=progress-circle.i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,kDAAkD,EAAE,UAAU;IAC9D,8CAA8C,EAAE,QAAQ;IACxD,yCAAyC,EAAE,eAAe;IAC1D,uCAAuC,EAAE,WAAW;CACpD,CAAC"}