@nldd/design-system 0.8.79 → 0.8.82

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

@@ -0,0 +1,269 @@
+/**
+ * Nederlandse Digitale Dienst Notification Component (Lit + TypeScript)
+ *
+ * A short message that arrives over the interface and leaves on its own: a
+ * save that worked, a request that failed. Not a banner, which stands in the
+ * page and stays there — this one floats, stacks, and goes away.
+ *
+ * It places itself. Write it wherever it belongs in your code and it moves to
+ * one shared region: top right from md, full width across the top below that.
+ * Nothing about the position is settable, so notifications from anywhere in an
+ * application land in the same place and stack in the same order.
+ *
+ * ## The stack
+ * More than one is a deck, not a list: the front one is readable and the older
+ * ones peek out below it, so a burst of messages takes the room of roughly one.
+ * The newest is in front. Behind it a notification is a bare surface, cut to
+ * the height of the one in front; dismiss the front and it slides up into the
+ * place that came free while its message fades in, because it was standing
+ * there all along.
+ *
+ * Under the front notification sits a strip as wide as the deck and as tall as
+ * the deck is when it fans out. Pointing at it fans the deck out to fill it,
+ * which is the only hint that there is more here than the message you can read;
+ * clicking it, or moving focus into the region, lays the whole deck out as a
+ * list. Clicking or tabbing away puts it back. The notification itself is not a
+ * button: a click on the message you are reading does nothing.
+ *
+ * ## Timing
+ * Only the front of the deck counts down, and only while the deck is closed:
+ * open means someone is reading. The rest wait, so nothing disappears from
+ * under the one you are reading. `critical` never leaves on its own: a
+ * failure is worth reading, and the count-down would take it away while you
+ * were. That also keeps this within WCAG 2.2.1, which allows a time limit when
+ * what disappears is not essential.
+ *
+ * The clock pauses while a pointer moves over the notification and while focus
+ * is inside it, and resumes where it left off rather than starting over. A
+ * pointer that merely happens to rest where the notification appears does not
+ * count: it never moved, so nobody is reading.
+ *
+ * ## ARIA
+ * role follows the variant: `critical` becomes role="alert", the rest
+ * role="status". Focus never moves on its own. Escape dismisses the
+ * notification that focus is in.
+ *
+ * @element nldd-notification
+ *
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - What kind of message this is; sets the icon color and the ARIA role (default: 'neutral')
+ * @attr {string} icon - Icon override. Default per variant: neutral → info-circle-filled, accent → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled
+ * @attr {string} text - The message
+ * @attr {string} supporting-text - A second line under the message
+ * @attr {number} duration - Milliseconds before it leaves once it is front of the deck (default: 10000). `0` keeps it until dismissed, which is what `critical` does regardless.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot actions - At most 2 nldd-button elements, under the text. More than 2 is refused with a DEV warning: a message that needs three choices is a dialog.
+ *
+ * @fires dismiss - Fired when the notification is dismissed, by the button, by Escape, or by its own clock. The consumer removes it.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { notificationStyles } from './notification.styles.js';
+import { notificationTemplate } from './notification.template.js';
+import { joinRegion, leaveRegion } from './notification-region.js';
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { nlddNotificationTranslations } from './notification.i18n.js';
+import '../../content/icon/icon.js';
+import '../../actions/icon-button/icon-button.js';
+const DEFAULT_ICONS = {
+    neutral: 'info-circle-filled',
+    accent: 'info-circle-filled',
+    success: 'check-circle-filled',
+    warning: 'exclamation-triangle-filled',
+    critical: 'exclamation-circle-filled',
+};
+const DEFAULT_DURATION = 10000;
+let NLDDNotification = class NLDDNotification extends withTranslations(LitElement, nlddNotificationTranslations) {
+    constructor() {
+        super(...arguments);
+        this.variant = 'neutral';
+        this.icon = '';
+        this.text = '';
+        this.supportingText = '';
+        this.duration = DEFAULT_DURATION;
+        this._hasActions = false;
+        /** Set by the region: true for the front of the deck, the only one that runs
+         *  its clock. */
+        this._isFront = false;
+        this._timer = null;
+        /** When the running timeout was scheduled, so a pause can work out what is
+         *  left of it. */
+        this._timerStartedAt = 0;
+        /** Remembered from the events rather than read back from the browser with
+         *  `:hover`: what an engine reports about a stationary pointer over a fixed
+         *  spot differs per engine and per platform. */
+        this._pointerInside = false;
+        this._focusInside = false;
+        /** Moving into the region disconnects and reconnects this element. Without
+         *  this the leave-handler would tear down the very region we are joining. */
+        this._moving = false;
+        /** What is left of `duration`, so a pause resumes rather than restarts. */
+        this._remainingDuration = DEFAULT_DURATION;
+        this._onActionsSlotChange = (e) => {
+            const assigned = e.target.assignedElements();
+            this._hasActions = assigned.length > 0;
+            if (import.meta.env?.DEV && assigned.length > 2) {
+                console.warn('[nldd-notification] at most 2 actions: a message that needs three choices '
+                    + 'is a decision, and a decision belongs in a dialog that waits for it.');
+            }
+        };
+        /** A move rather than an enter. A notification arrives at a fixed spot on the
+         *  screen, so the browser hit-tests whatever happens to be under the pointer
+         *  and fires a genuine pointerenter without the pointer having moved. Taking
+         *  that as hover parks the clock forever for anyone whose cursor happens to
+         *  rest in that corner, because the pointerleave that would release it never
+         *  comes. A move is someone pointing at it; sitting still is not. */
+        this._onPointerMove = () => {
+            if (this._pointerInside)
+                return;
+            this._pointerInside = true;
+            this._clearTimer();
+        };
+        this._onPointerLeave = () => {
+            this._pointerInside = false;
+            this._resumeTimer();
+        };
+        this._onFocusIn = () => {
+            this._focusInside = true;
+            this._clearTimer();
+        };
+        this._onFocusOut = (e) => {
+            // Only when focus really left: moving between the action and the dismiss
+            // button is still inside.
+            if (this.contains(e.relatedTarget))
+                return;
+            this._focusInside = false;
+            this._resumeTimer();
+        };
+        this._resumeTimer = () => {
+            if (!this._isFront || !this._leavesOnItsOwn || this._timer !== null)
+                return;
+            if (this._pointerInside || this._focusInside)
+                return;
+            this._timerStartedAt = Date.now();
+            this._timer = window.setTimeout(() => {
+                this._timer = null;
+                this._dismiss();
+            }, this._remainingDuration);
+        };
+        this._onKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            e.stopPropagation();
+            this._dismiss();
+        };
+        this._handleDismiss = () => {
+            this._dismiss();
+        };
+    }
+    get _resolvedIcon() {
+        return this.icon || DEFAULT_ICONS[this.variant];
+    }
+    /** `critical` ignores any duration: a failure stays until it is read. */
+    get _leavesOnItsOwn() {
+        return this.variant !== 'critical' && this.duration > 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', this.variant === 'critical' ? 'alert' : 'status');
+        this._remainingDuration = this.duration;
+        this.addEventListener('pointermove', this._onPointerMove);
+        this.addEventListener('pointerleave', this._onPointerLeave);
+        this.addEventListener('focusin', this._onFocusIn);
+        this.addEventListener('focusout', this._onFocusOut);
+        this.addEventListener('keydown', this._onKeyDown);
+        // Moving itself has to wait a tick: a framework that just created this
+        // element is still holding it, and pulling it out mid-render confuses
+        // the very thing that will later remove it.
+        queueMicrotask(() => {
+            if (!this.isConnected || this._moving)
+                return;
+            const region = document.getElementById('nldd-notification-region');
+            if (this.parentElement === region)
+                return;
+            this._moving = true;
+            joinRegion(this, this._t('components.notification.region-label'));
+            this._moving = false;
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._moving)
+            return;
+        this._clearTimer();
+        this.removeEventListener('pointermove', this._onPointerMove);
+        this.removeEventListener('pointerleave', this._onPointerLeave);
+        this.removeEventListener('focusin', this._onFocusIn);
+        this.removeEventListener('focusout', this._onFocusOut);
+        this.removeEventListener('keydown', this._onKeyDown);
+        leaveRegion(this);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('variant')) {
+            this.setAttribute('role', this.variant === 'critical' ? 'alert' : 'status');
+        }
+        if (changed.has('duration'))
+            this._remainingDuration = this.duration;
+    }
+    /** Called by the region. Starting the clock here rather than on connect is
+     *  the whole point: a notification three deep in the deck is not counting. */
+    _setFront(isFront) {
+        if (this._isFront === isFront)
+            return;
+        this._isFront = isFront;
+        if (isFront)
+            this._resumeTimer();
+        else
+            this._clearTimer();
+    }
+    /** Clears the running timeout and banks what is left of the duration. */
+    _clearTimer() {
+        if (this._timer === null)
+            return;
+        window.clearTimeout(this._timer);
+        this._timer = null;
+        this._remainingDuration = Math.max(0, this._remainingDuration - (Date.now() - this._timerStartedAt));
+    }
+    _dismiss() {
+        this._clearTimer();
+        this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+    }
+    render() {
+        return notificationTemplate(this);
+    }
+};
+NLDDNotification.styles = notificationStyles;
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('neutral') })
+], NLDDNotification.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDNotification.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDNotification.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'supporting-text' })
+], NLDDNotification.prototype, "supportingText", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault(DEFAULT_DURATION) })
+], NLDDNotification.prototype, "duration", void 0);
+__decorate([
+    state()
+], NLDDNotification.prototype, "_hasActions", void 0);
+__decorate([
+    state()
+], NLDDNotification.prototype, "_isFront", void 0);
+NLDDNotification = __decorate([
+    customElement('nldd-notification')
+], NLDDNotification);
+export { NLDDNotification };
+//# sourceMappingURL=notification.js.map

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

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

package/dist/components/status-and-feedback/notification/notification.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const notificationStyles: import("lit").CSSResult;
+//# sourceMappingURL=notification.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,yBA2K9B,CAAC"}

package/dist/components/status-and-feedback/notification/notification.styles.js

@@ -0,0 +1,177 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+/* # Host */
+export const notificationStyles = css `
+	:host {
+		--_width: var(--primitives-area-400);
+		--_stack-fanned: 0;
+		--_stack-depth: 0;
+		--_stack-base-offset: var(--primitives-space-6);
+		--_stack-fan-offset: var(--primitives-space-6);
+		--_stack-offset: calc(var(--_stack-base-offset) + var(--_stack-fan-offset) * var(--_stack-fanned));
+		--_stack-scale-step: 0.03;
+		--_padding: var(--primitives-space-12);
+		--_gap: var(--primitives-space-6);
+		--_icon-color: var(--components-notification-icon-neutral-color);
+		--_icon-size: var(--primitives-space-32);
+		--_actions-margin-top: var(--primitives-space-4);
+		--_actions-gap: var(--primitives-space-6);
+		--_dismiss-inset: calc(var(--_padding) - (var(--semantics-controls-sm-min-size) - var(--_icon-size)) / 2);
+		--_dismiss-space: calc(var(--_dismiss-inset) + var(--semantics-controls-sm-min-size));
+
+		box-sizing: border-box;
+		display: block;
+		border-radius: var(--components-notification-corner-radius);
+		box-shadow: var(--components-notification-box-shadow);
+		background-color: var(--components-notification-background-color);
+		width: var(--_width);
+		max-width: 100%;
+		overflow: hidden;
+		/* The region is a column with a max height, so without this the messages
+		   squeeze to fit instead of letting the list scroll. */
+		flex-shrink: 0;
+		translate: 0 calc(var(--_stack-offset) * var(--_stack-depth));
+		scale: calc(1 - var(--_stack-scale-step) * var(--_stack-depth)) 1;
+		transform-origin: top center;
+		transition: translate var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default), scale var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
+		animation: notification-arrive var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default) both;
+	}
+
+	:host([variant="accent"]) {
+		--_icon-color: var(--components-notification-icon-accent-color);
+	}
+
+	:host([variant="success"]) {
+		--_icon-color: var(--components-notification-icon-success-color);
+	}
+
+	:host([variant="warning"]) {
+		--_icon-color: var(--components-notification-icon-warning-color);
+	}
+
+	:host([variant="critical"]) {
+		--_icon-color: var(--components-notification-icon-critical-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			transition: none;
+			animation: none;
+		}
+	}
+
+
+	/* # Element */
+
+	/* Hidden behind the front of the deck: the region cuts those to the height of
+	   the one in front, and half a row of buttons along that edge reads as a
+	   mistake rather than as a card further back. */
+	.notification {
+		display: flex;
+		position: relative;
+		opacity: calc(1 - var(--_stack-depth));
+		transition: opacity var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
+		padding: var(--_padding);
+		padding-inline-end: var(--_dismiss-space);
+		gap: var(--_gap);
+		align-items: center;
+	}
+
+	/* Forced colors drop the shadow this floats on, so there it needs an edge. */
+	@media (forced-colors: active) {
+		.notification {
+			border: var(--primitives-border-width-regular) solid CanvasText;
+		}
+	}
+
+
+	/* ## Icon */
+
+	.notification__icon {
+		display: flex;
+		align-self: flex-start;
+		flex-shrink: 0;
+		color: var(--_icon-color);
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
+
+	/* ## Main */
+
+	.notification__main {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+
+	.notification__text {
+		margin: 0;
+		overflow-wrap: break-word;
+		color: var(--semantics-content-color);
+		font: var(--components-notification-text-font);
+		text-wrap: pretty;
+	}
+
+	.notification__supporting-text {
+		margin: 0;
+		overflow-wrap: break-word;
+		color: var(--components-notification-supporting-text-color);
+		font: var(--components-notification-supporting-text-font);
+		text-wrap: pretty;
+	}
+
+	.notification__actions {
+		display: flex;
+		margin-top: var(--_actions-margin-top);
+		flex-wrap: wrap;
+		gap: var(--_actions-gap);
+	}
+
+	.notification__actions[hidden] {
+		display: none;
+	}
+
+
+	/* ## Dismiss */
+
+	/* Out of the flow, so the button cannot make the notification taller than the
+	   message in it. */
+	.notification__dismiss-button {
+		display: flex;
+		position: absolute;
+		top: var(--_dismiss-inset);
+		right: var(--_dismiss-inset);
+	}
+
+
+	/* # Animation */
+
+	/* Past the inset, so it starts off the screen rather than at the margin. */
+	@keyframes notification-arrive {
+		from {
+			opacity: 0;
+			transform: translateX(calc(100% + var(--semantics-overlays-inset)));
+		}
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+
+	/* # Responsive */
+
+	@media (max-width: ${smMax}) {
+		:host {
+			width: 100%;
+		}
+	}
+`;
+//# sourceMappingURL=notification.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAG3C,YAAY;AAEZ,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAsKf,KAAK;;;;;CAK1B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDNotification } from './notification.js';
+export declare function notificationTemplate(component: NLDDNotification): TemplateResult;
+//# sourceMappingURL=notification.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAqChF"}

package/dist/components/status-and-feedback/notification/notification.template.js

@@ -0,0 +1,40 @@
+import { html, nothing } from 'lit';
+export function notificationTemplate(component) {
+    return html `
+		<div class="notification">
+			<div class="notification__icon"
+				aria-hidden="true"
+			>
+				<nldd-icon name=${component._resolvedIcon}></nldd-icon>
+			</div>
+			<div class="notification__main">
+				${component.text ? html `
+					<p class="notification__text">
+						${component.text}
+					</p>
+				` : nothing}
+				${component.supportingText ? html `
+					<p class="notification__supporting-text">
+						${component.supportingText}
+					</p>
+				` : nothing}
+				<div class="notification__actions"
+					?hidden=${!component._hasActions}
+				>
+					<slot name="actions" @slotchange=${component._onActionsSlotChange}></slot>
+				</div>
+			</div>
+			<div class="notification__dismiss-button">
+				<nldd-icon-button
+					icon="dismiss-small"
+					size="sm"
+					variant="neutral-transparent"
+					tooltip-timing="never"
+					accessible-label=${component._t('components.notification.dismiss-action')}
+					@click=${component._handleDismiss}
+				></nldd-icon-button>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=notification.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notification.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,OAAO,IAAI,CAAA;;;;;sBAKU,SAAS,CAAC,aAAa;;;MAGvC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;QAEnB,SAAS,CAAC,IAAI;;KAEjB,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;QAE7B,SAAS,CAAC,cAAc;;KAE3B,CAAC,CAAC,CAAC,OAAO;;eAEA,CAAC,SAAS,CAAC,WAAW;;wCAEG,SAAS,CAAC,oBAAoB;;;;;;;;;wBAS9C,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;cAChE,SAAS,CAAC,cAAc;;;;EAIpC,CAAC;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBA+M7B,CAAC;AAGF,eAAO,MAAM,iCAAiC,yBA8M7C,CAAC"}
+{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBAgN7B,CAAC;AAGF,eAAO,MAAM,iCAAiC,yBA8M7C,CAAC"}

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

@@ -91,6 +91,7 @@ export const progressBarStyles = css `
 		color: var(--_supporting-text-color);
 		font: var(--_supporting-text-font);
 		font-variant-numeric: tabular-nums;
+		text-align: right;
 	}
 
 

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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MnD,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;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MnD,CAAC"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts

@@ -1,35 +1,35 @@
 /**
  * Nederlandse Digitale Dienst Step Indicator Component (Lit + TypeScript)
  *
- * Toont waar je staat in een proces van meerdere stappen: een rij bollen met
- * een cijfer (of een vinkje op wat af is), een label eronder en een lijn die
- * ze verbindt.
+ * Shows where you are in a process of several steps: a row of discs with a
+ * number (or a check mark on what is done), a label under each and a line
+ * connecting them.
  *
- * De ouder houdt de waarheid vast: `current` (1-based) leidt de status van elk
- * kind af — ervoor `past`, daarna `future`. Een kind kan dat overschrijven met
- * een eigen `status`, voor flows die terugspringen of een stap overslaan.
+ * The parent holds the truth: `current` (1-based) derives the status of every
+ * child — `past` before it, `future` after. A child can override that with a
+ * `status` of its own, for flows that jump back or skip a step.
  *
- * Alleen horizontaal. Wil je stappen onder elkaar, bouw dan een `nldd-list` met
- * per rij een `nldd-timeline-track-cell` en een `nldd-title-cell`: verticale
- * stappen dragen meestal meer dan een titel, en dat kan een lijstrij al.
+ * Horizontal only. For steps under each other, build an `nldd-list` with an
+ * `nldd-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps
+ * usually carry more than a title, and a list row already does that.
  *
- * Onder de sm-breakpoint (container query, dus gemeten op het component zelf en
- * niet op de viewport) klapt het om naar één regel tekst plus een segmentbalk. De volledige stappenlijst blijft
- * dan in de DOM staan, alleen visueel verborgen, zodat hulpsoftware niet minder
- * te horen krijgt dan een breed scherm laat zien.
+ * Below the sm breakpoint (a container query, so measured on the component
+ * itself rather than on the viewport) it folds into one line of text plus a
+ * segmented bar. The full list of steps stays in the DOM, only visually hidden,
+ * so assistive software hears no less than a wide screen shows.
  *
- * Toegankelijkheid: een `nav` met een label, daarin een `role="list"` met per
- * stap een `role="listitem"`. De huidige stap krijgt `aria-current="step"` —
- * het enige begrip dat WAI-ARIA hiervoor kent. "Afgerond" en "nog te doen"
- * bestaan niet als ARIA-token en reizen daarom als visueel verborgen tekst mee.
+ * Accessibility: a `nav` with a label, holding a `role="list"` with a
+ * `role="listitem"` per step. The current step gets `aria-current="step"`, the
+ * only notion WAI-ARIA has for this. "Done" and "still to do" do not exist as
+ * ARIA tokens and travel along as visually hidden text instead.
  *
  * @element nldd-step-indicator
  *
- * @attr {string} accessible-label - Naam van de nav; standaard de i18n-waarde ("Voortgang")
- * @attr {object} translations - Overschrijf vertaalsleutels; niet gezette vallen terug op Nederlands
- * @attr {number} current - 1-based nummer van de huidige stap (standaard 1)
+ * @attr {string} accessible-label - Name of the nav; defaults to the i18n value ("Voortgang")
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ * @attr {number} current - 1-based number of the current step (default 1)
  *
- * @slot - `nldd-step-indicator-item` kinderen
+ * @slot - `nldd-step-indicator-item` children
  *
  * @example
  * ```html
@@ -46,19 +46,19 @@ import '../../content/icon/icon.js';
  *  single vocabulary whether it runs horizontally or vertically. */
 export type StepIndicatorStatus = 'past' | 'current' | 'future';
 /**
- * Eén stap in een `nldd-step-indicator`. De ouder bepaalt de status en het
- * volgnummer; die staan hier als interne state en niet als publieke API, op
- * `status` na — dat overschrijft de afleiding uit `current`.
+ * One step in an `nldd-step-indicator`. The parent decides the status and the
+ * number; those live here as internal state rather than as public API, except
+ * for `status`, which overrides what `current` derives.
  *
  * @element nldd-step-indicator-item
  *
- * @attr {string} status - `past` | `current` | `future`; overschrijft wat de ouder afleidt
- * @attr {string} text   - Label onder de bol
- * @attr {string} icon   - Icoon in de bol in plaats van het cijfer of het vinkje
- * @attr {string} href   - Maakt de stap een link (bijvoorbeeld terug naar een afgeronde stap)
- * @attr {boolean} button - Maakt de stap een knop, voor flows zonder eigen URL per stap; genegeerd wanneer `href` is gezet
+ * @attr {string} status - `past` | `current` | `future`; overrides what the parent derives
+ * @attr {string} text   - Label under the disc
+ * @attr {string} icon   - Icon in the disc instead of the number or the check mark
+ * @attr {string} href   - Makes the step a link (back to a completed step, for instance)
+ * @attr {boolean} button - Makes the step a button, for flows without a URL per step; ignored when `href` is set
  *
- * @slot - Label (alternatief voor `text`)
+ * @slot - Label (an alternative to `text`)
  */
 export declare class NLDDStepIndicatorItem extends LitElement {
     static styles: import("lit").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,4BAA4B,CAAC;AAEpC;oEACoE;AACpE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAKhE;;;;;;;;;;;;;;GAcG;AACH,qBAAa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAG7B,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV;;yDAEqD;IAErD,MAAM,UAAS;IAEf;uEACmE;IAEnE,cAAc,EAAE,mBAAmB,CAAY;IAG/C,MAAM,SAAK;IAGX,WAAW,SAAM;IAEjB,wEAAwE;IACxE,IAAI,cAAc,IAAI,mBAAmB,CAExC;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQtC,MAAM;CAGf;;;;;;;;;;;AAYD,qBACa,iBAAkB,SAAQ,sBAGtC;IACA,OAAgB,MAAM,0BAAuB;IAG7C,eAAe,SAAM;IAGrB,OAAO,SAAK;IAEZ;wCACoC;IAEpC,MAAM,EAAE,qBAAqB,EAAE,CAAM;IAErC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;2EACuE;IACvE,IAAI,eAAe,IAAI,MAAM,CAG5B;IAED,IAAI,WAAW,IAAI,qBAAqB,GAAG,SAAS,CAGnD;IAED,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAI9B;IAEF;;2BAEuB;IACd,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAIlD;;kCAE8B;IAC9B,OAAO,CAAC,UAAU;IAUT,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;QACzC,0BAA0B,EAAE,qBAAqB,CAAC;KAClD;CACD"}
+{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,4BAA4B,CAAC;AAEpC;oEACoE;AACpE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAKhE;;;;;;;;;;;;;;GAcG;AACH,qBAAa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAG7B,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV;;yDAEqD;IAErD,MAAM,UAAS;IAEf;uEACmE;IAEnE,cAAc,EAAE,mBAAmB,CAAY;IAG/C,MAAM,SAAK;IAGX,WAAW,SAAM;IAEjB,wEAAwE;IACxE,IAAI,cAAc,IAAI,mBAAmB,CAExC;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQtC,MAAM;CAGf;;;;;;;;;;;AAYD,qBACa,iBAAkB,SAAQ,sBAGtC;IACA,OAAgB,MAAM,0BAAuB;IAG7C,eAAe,SAAM;IAGrB,OAAO,SAAK;IAEZ;wCACoC;IAEpC,MAAM,EAAE,qBAAqB,EAAE,CAAM;IAErC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;2EACuE;IACvE,IAAI,eAAe,IAAI,MAAM,CAG5B;IAED,IAAI,WAAW,IAAI,qBAAqB,GAAG,SAAS,CAGnD;IAED,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAI9B;IAEF;;2BAEuB;IACd,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOlD;;kCAE8B;IAC9B,OAAO,CAAC,UAAU;IAUT,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;QACzC,0BAA0B,EAAE,qBAAqB,CAAC;KAClD;CACD"}