@nldd/design-system 0.8.49 → 0.8.51

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

@@ -0,0 +1,245 @@
+import { css } from 'lit';
+export const progressCircleStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_size: var(--primitives-space-28);
+		/* SVG viewBox is 100×100 user units. To get a visual {N}px stroke at any
+		   rendered size, the user-unit stroke-width must scale up by 100/size.
+		   Per-size overrides below set the appropriate value. Stroke width
+		   grows with circle size — must match getStrokeWidthPx() in the
+		   template file. */
+		--_stroke-width: calc(4px * 100 / 28);
+		--_track-color: var(--components-progress-circle-track-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);
+
+		box-sizing: border-box;
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_label-gap);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([size="16"]) { --_size: var(--primitives-space-16); --_stroke-width: calc(3px * 100 / 16); }
+	:host([size="20"]) { --_size: var(--primitives-space-20); --_stroke-width: calc(3px * 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); }
+
+
+	/* # SVG wrapper */
+
+	.progress-circle__circle {
+		display: block;
+		position: relative;
+		width: var(--_size);
+		height: var(--_size);
+	}
+
+	.progress-circle__svg {
+		display: block;
+		width: 100%;
+		height: 100%;
+		/* Start segments at 12 o'clock instead of the default 3 o'clock. */
+		transform: rotate(-90deg);
+	}
+
+
+	/* # Track ring (background)
+	   vector-effect: non-scaling-stroke keeps the stroke at its specified
+	   CSS pixel width regardless of the viewBox-to-rendered-size ratio,
+	   so a 4px stroke is always 4 actual pixels at any circle size. */
+
+	.progress-circle__track {
+		stroke: var(--_track-color);
+		stroke-width: var(--_stroke-width);
+	}
+
+
+	/* # Arc segments
+	   Animate value changes smoothly via stroke-dasharray transition.
+	   Crossfade with the indeterminate indicator uses opacity on the SVG group. */
+
+	.progress-circle__segment {
+		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] {
+		opacity: 0;
+	}
+
+	/* Progress mode: rounded caps for friendly segment ends. The JS gap
+	   calculation compensates for the half-stroke-width extension so the
+	   visible gap between segments stays consistent.
+	   Distribution mode: butt caps keep the segment boundaries crisp. */
+
+	.progress-circle__segment {
+		stroke-linecap: round;
+	}
+
+	:host([mode="distribution"]) .progress-circle__segment {
+		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); }
+
+
+	/* # Spinner (indeterminate)
+	   GitHub-style: a fixed-width arc (25 / 100 = quarter turn, 90°) that
+	   simply rotates around the circle. Calmer than Material's elastic
+	   grow + shrink, which at small sizes (default 28 px) reads as visually
+	   busy. pathLength="100" on the indicator normalises the dash pattern
+	   to percentages of the circumference so the same numbers stay correct
+	   at every size. transform-origin centres the rotation. */
+
+	.progress-circle__indeterminate-indicator {
+		stroke-width: var(--_stroke-width);
+		stroke-dasharray: 25 100;
+		stroke-dashoffset: 0;
+		stroke: var(--_indeterminate-fill-color);
+		opacity: 1;
+		transform-origin: 50% 50%;
+		transition: opacity var(--primitives-transition-duration-slow) ease-out;
+		animation: progress-circle-indeterminate-indicator-rotate 1s linear infinite;
+	}
+
+	.progress-circle__indeterminate-indicator[data-fade="out"] {
+		opacity: 0;
+	}
+
+	@keyframes progress-circle-indeterminate-indicator-rotate {
+		100% { transform: rotate(360deg); }
+	}
+
+
+	/* # Indeterminate fill colour follows 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 */
+
+	.progress-circle__text {
+		color: var(--_label-color);
+		font: var(--_label-font);
+		text-align: center;
+	}
+
+
+	/* # Slot
+	   Segment children are data-only; hide them visually but keep them in
+	   the DOM so consumers can mutate values. */
+
+	slot {
+		display: none;
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-circle__indeterminate-indicator {
+			/* Static arc with the same 25 / 100 dash pattern as the full-motion
+			   spinner — only the rotation is removed and an opacity pulse
+			   takes its place. Keeping the dasharray identical means the
+			   placeholder shape doesn't visibly jump when a user toggles
+			   reduce-motion at runtime. */
+			animation: progress-circle-indeterminate-indicator-pulse 2s ease-in-out infinite;
+		}
+
+		@keyframes progress-circle-indeterminate-indicator-pulse {
+			0%, 100% { opacity: 0.3; }
+			50% { opacity: 0.7; }
+		}
+
+		.progress-circle__segment {
+			transition: none;
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.progress-circle__track,
+		.progress-circle__segment,
+		.progress-circle__indeterminate-indicator {
+			stroke: CanvasText;
+		}
+	}
+`;
+export const progressCircleSegmentStyles = css `
+	:host {
+		display: none;
+	}
+`;
+//# sourceMappingURL=progress-circle.styles.js.map

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

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

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

@@ -0,0 +1,14 @@
+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;
+/**
+ * Lit template — renders the full SVG structure including one `<circle>` per
+ * segment and (when needed) an indeterminate indicator. The dynamic per-render
+ * attributes (stroke-dasharray, stroke-dashoffset, data-shrink, data-fade) are
+ * NOT set here — they're applied by the component's _syncDynamicAttributes()
+ * in the updated() lifecycle. Keeping them out of the Lit binding avoids the
+ * SVG attribute removal quirks that bit us earlier.
+ */
+export declare function progressCircleTemplate(component: NLDDProgressCircle, onSlotChange: () => void): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=progress-circle.template.d.ts.map

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

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

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

@@ -0,0 +1,115 @@
+import { html, svg, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// SVG geometry: viewBox 100×100, ring centred. The stroke would extend
+// half-width past the path on each side; at small sizes that half-stroke is
+// large in user units (size 16, stroke 2px → 12.5u, half = 6.25u) and could
+// clip outside the viewBox. So radius shrinks with size so that the stroke's
+// outer edge aligns with the viewBox edge (50u from centre).
+//
+// Stroke width scales with circle size for visual harmony — thin strokes look
+// out of place on a huge ring and thick strokes overpower a tiny ring. Must
+// stay in sync with the per-size --_stroke-width rules in the stylesheet.
+export function getStrokeWidthPx(sizeInPixels) {
+    if (sizeInPixels <= 20)
+        return 3;
+    if (sizeInPixels <= 40)
+        return 4;
+    if (sizeInPixels <= 48)
+        return 5;
+    return 6;
+}
+export function getRadius(sizeInPixels) {
+    const strokeWidthUserUnits = getStrokeWidthPx(sizeInPixels) * 100 / sizeInPixels;
+    return 50 - strokeWidthUserUnits / 2;
+}
+export function getCircumference(sizeInPixels) {
+    return 2 * Math.PI * getRadius(sizeInPixels);
+}
+/**
+ * Lit template — renders the full SVG structure including one `<circle>` per
+ * segment and (when needed) an indeterminate indicator. The dynamic per-render
+ * attributes (stroke-dasharray, stroke-dashoffset, data-shrink, data-fade) are
+ * NOT set here — they're applied by the component's _syncDynamicAttributes()
+ * in the updated() lifecycle. Keeping them out of the Lit binding avoids the
+ * SVG attribute removal quirks that bit us earlier.
+ */
+export function progressCircleTemplate(component, onSlotChange) {
+    const tooltipText = component._tooltipText;
+    const ariaText = component._ariaValueText;
+    // 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);
+    const isExiting = component._indeterminateExiting;
+    const isIndeterminate = (component.indeterminate || isExiting) && !component._hasSegments;
+    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);
+    // 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-circle.label-text');
+    const circle = html `
+		<div class="progress-circle__circle"
+			role="progressbar"
+			aria-label=${ariaLabel}
+			aria-valuemin="0"
+			aria-valuemax=${component.max}
+			aria-valuenow=${ifDefined(ariaValueNow)}
+			aria-valuetext=${ariaText}
+		>
+			<svg class="progress-circle__svg"
+				viewBox="0 0 100 100"
+				aria-hidden="true"
+			>
+				<circle class="progress-circle__track"
+					cx="50"
+					cy="50"
+					r=${radius}
+					fill="none"
+				></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>
+				${isIndeterminate ? svg `
+					<circle class="progress-circle__indeterminate-indicator"
+						cx="50"
+						cy="50"
+						r=${radius}
+						fill="none"
+						pathLength="100"
+						stroke-linecap="round"
+					></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.
+    const wrappedCircle = tooltipText
+        ? html `
+			<nldd-tooltip
+				text=${tooltipText}
+				placement="top"
+				timing="instant"
+			>${circle}</nldd-tooltip>
+		`
+        : circle;
+    return html `
+		${wrappedCircle}
+		<slot @slotchange=${onSlotChange}></slot>
+		${component.text ? html `<span class="progress-circle__text">${component.text}</span>` : nothing}
+	`;
+}
+//# sourceMappingURL=progress-circle.template.js.map

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

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