@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/status-and-feedback/step-bar/step-bar.js

@@ -0,0 +1,248 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Step Bar Component (Lit + TypeScript)
+ *
+ * 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. Other systems call this a stepper or a progress indicator.
+ *
+ * Mark the step you are on with `status="current"`. The parent derives the
+ * rest from its position: `past` before it, `future` after. With none marked,
+ * step 1 is current. With more than one, the last one wins and a warning goes
+ * to the console in a dev build: a flow that forgets to clear the previous
+ * step still points at the furthest one. A `status="past"` or
+ * `status="future"` on another step overrides what is derived for that step,
+ * for flows that jump back or skip a step. One attribute, the same three
+ * values as `nldd-step-cell`, so a flow reads in one vocabulary
+ * whether it runs across or down.
+ *
+ * Horizontal only. For steps under each other, build an `nldd-list` with an
+ * `nldd-step-cell` and an `nldd-title-cell` per row: vertical steps
+ * usually carry more than a title, and a list row already does that.
+ *
+ * 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.
+ *
+ * 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-bar
+ *
+ * @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
+ *
+ * @slot - `nldd-step-bar-item` children
+ *
+ * @example
+ * ```html
+ * <nldd-step-bar accessible-label="Voortgang aanvraag">
+ *   <nldd-step-bar-item text="Gegevens"></nldd-step-bar-item>
+ *   <nldd-step-bar-item text="Controle" status="current"></nldd-step-bar-item>
+ *   <nldd-step-bar-item text="Bevestigen"></nldd-step-bar-item>
+ * </nldd-step-bar>
+ * ```
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { nlddStepBarTranslations } from './step-bar.i18n.js';
+import { stepBarStyles, stepBarItemStyles } from './step-bar.styles.js';
+import { stepBarTemplate, stepBarItemTemplate } from './step-bar.template.js';
+import '../../content/icon/icon.js';
+// # nldd-step-bar-item
+/**
+ * One step in an `nldd-step-bar`. `status="current"` marks the step you
+ * are on; the parent derives the status of the others and the number of each,
+ * which live here as internal state rather than as public API. `past` and
+ * `future` override what is derived for this step.
+ *
+ * @element nldd-step-bar-item
+ *
+ * @attr {'past' | 'current' | 'future'} status - How far along this step is. `current` marks the step you are on (`aria-current="step"`) and the parent derives the others from it: with none marked step 1 is current, with more than one the last wins. `past` and `future` override what is derived for this step only
+ * @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 (an alternative to `text`)
+ */
+export class NLDDStepBarItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.icon = '';
+        this.href = '';
+        /** For flows without a URL per step (a wizard inside one window). Ignored
+         *  once `href` is set: one step is one action, and a link outranks a button
+         *  -- the same rule as nldd-card and nldd-avatar. */
+        this.button = false;
+        /** Set by the parent: the derived status when the item has none of its own,
+         *  the position number, and the status text for assistive tech. */
+        this._derivedStatus = 'future';
+        this._index = 1;
+        this._statusText = '';
+    }
+    /** The status that counts. An own `past` or `future` wins over the derived
+     *  one. An own `current` is what the parent derives from, so the derived
+     *  status already says it, and on a step that lost to a later one it does not
+     *  hold. */
+    get resolvedStatus() {
+        return this.status && this.status !== 'current' ? this.status : this._derivedStatus;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Explicit ARIA, like nldd-breadcrumbs: the implicit <li> mapping does not
+        // travel reliably across the slot boundary.
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'listitem');
+    }
+    updated(changed) {
+        if (changed.has('status') || changed.has('_derivedStatus')) {
+            // On the host (the listitem), because that is what assistive tech announces.
+            if (this.resolvedStatus === 'current')
+                this.setAttribute('aria-current', 'step');
+            else
+                this.removeAttribute('aria-current');
+        }
+    }
+    render() {
+        return stepBarItemTemplate(this);
+    }
+}
+NLDDStepBarItem.styles = stepBarItemStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStepBarItem.prototype, "status", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDStepBarItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStepBarItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStepBarItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDStepBarItem.prototype, "button", void 0);
+__decorate([
+    state()
+], NLDDStepBarItem.prototype, "_derivedStatus", void 0);
+__decorate([
+    state()
+], NLDDStepBarItem.prototype, "_index", void 0);
+__decorate([
+    state()
+], NLDDStepBarItem.prototype, "_statusText", void 0);
+// Sub-component of nldd-step-bar. The guard registration (like
+// nldd-breadcrumbs-item's) keeps the first registration authoritative across HMR
+// and test re-imports.
+if (!customElements.get('nldd-step-bar-item')) {
+    customElements.define('nldd-step-bar-item', NLDDStepBarItem);
+}
+// # nldd-step-bar
+let NLDDStepBar = class NLDDStepBar extends withTranslations(LitElement, nlddStepBarTranslations) {
+    constructor() {
+        super(...arguments);
+        this.accessibleLabel = '';
+        /** The steps, tracked so the compact view (text + bar) is driven by the same
+         *  source as the row of markers. */
+        this._items = [];
+        /** `status` lives on the children, so a change there has to reach this
+         *  element: the derived statuses and the compact view follow it. */
+        this._observer = new MutationObserver(() => this.requestUpdate());
+        this._warnedMultipleCurrent = false;
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            this._items = slot.assignedElements({ flatten: true })
+                .filter((el) => el.localName === 'nldd-step-bar-item');
+        };
+    }
+    get total() {
+        return this._items.length;
+    }
+    /** 1-based position of the last item with `status="current"`, or 1 when none has it. */
+    get resolvedCurrent() {
+        const index = this._items.map(item => item.status).lastIndexOf('current');
+        return index === -1 ? 1 : index + 1;
+    }
+    get currentItem() {
+        return this._items.find(item => item.resolvedStatus === 'current')
+            ?? this._items[this.resolvedCurrent - 1];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._observer.observe(this, { subtree: true, attributes: true, attributeFilter: ['status'] });
+    }
+    /** `current` is no longer an attribute of this element. Watched anyway, so a
+     *  leftover one gets a hint, also when a framework sets it after the first
+     *  render: Vue and React fall back to the attribute for an unknown property. */
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'current'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (import.meta.env?.DEV && name === 'current' && value !== null) {
+            console.warn('<nldd-step-bar>: `current` moved to the step. Set `status="current"` on the current `nldd-step-bar-item` instead.');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observer.disconnect();
+    }
+    /** Before render, not after: the compact view reads the current item back out
+     *  of the children, so their statuses have to be fresh by the time this
+     *  element renders. */
+    willUpdate(changed) {
+        // withTranslations merges a consumer's `translations` override in its own
+        // willUpdate; without this call the override is silently ignored.
+        super.willUpdate(changed);
+        this._syncItems();
+        this._warnOnMultipleCurrent();
+    }
+    _warnOnMultipleCurrent() {
+        if (!import.meta.env?.DEV)
+            return;
+        const multiple = this._items.filter(item => item.status === 'current').length > 1;
+        if (multiple && !this._warnedMultipleCurrent) {
+            console.warn('<nldd-step-bar>: more than one step has `status="current"`; the last one wins. Mark only the step you are on.');
+        }
+        this._warnedMultipleCurrent = multiple;
+    }
+    /** Push position, derived status and status text down to the children. Push
+     *  rather than pull: a child cannot see where the current step sits. */
+    _syncItems() {
+        const current = this.resolvedCurrent;
+        this._items.forEach((item, index) => {
+            const position = index + 1;
+            item._index = position;
+            item._derivedStatus = position < current ? 'past' : position === current ? 'current' : 'future';
+            item._statusText = this._t(`components.step-bar.status-${item.resolvedStatus}-label`);
+        });
+    }
+    render() {
+        return stepBarTemplate(this);
+    }
+};
+NLDDStepBar.styles = stepBarStyles;
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDStepBar.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], NLDDStepBar.prototype, "_items", void 0);
+NLDDStepBar = __decorate([
+    customElement('nldd-step-bar')
+], NLDDStepBar);
+export { NLDDStepBar };
+//# sourceMappingURL=step-bar.js.map

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

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

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

@@ -0,0 +1,3 @@
+export declare const stepBarStyles: import("lit").CSSResult;
+export declare const stepBarItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=step-bar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,yBAqGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBA0L7B,CAAC"}

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

@@ -0,0 +1,294 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+import { inheritedTextReset } from '../../../assets/styles/shadow-resets.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+export const stepBarStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		--_step-bar-compact-text-gap: var(--primitives-space-8);
+		--_step-bar-compact-text-color: var(--semantics-content-color);
+		--_step-bar-compact-count-color: var(--semantics-content-secondary-color);
+		--_step-bar-compact-bar-gap: var(--primitives-space-4);
+		--_step-bar-compact-bar-segment-gap: var(--primitives-space-2);
+		--_step-bar-compact-bar-corner-radius: var(--primitives-corner-radius-full);
+		--_step-bar-track-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+		--_step-bar-compact-bar-height: var(--primitives-space-6);
+		--_step-bar-progress-color: var(--semantics-content-accent-color);
+		--_step-bar-item-gap: var(--primitives-space-4);
+		--_step-bar-marker-size: var(--primitives-space-24);
+		--_step-bar-track-thickness: var(--primitives-space-2);
+		--_step-bar-marker-z-index: 1;
+		--_step-bar-marker-corner-radius: var(--primitives-corner-radius-full);
+		--_step-bar-ring-thickness: var(--semantics-surfaces-ring-thickness);
+		--_step-bar-ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_step-bar-marker-content-color: var(--semantics-content-secondary-color);
+		--_step-bar-progress-content-color: var(--semantics-content-contrast-color);
+		--_step-bar-current-fill-color: light-dark(var(--primitives-color-accent-75), var(--primitives-color-accent-100));
+		--_step-bar-icon-size: var(--primitives-space-16);
+		--_step-bar-title-color: var(--semantics-content-secondary-color);
+		--_step-bar-current-title-color: var(--semantics-content-color);
+		--_step-bar-control-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_step-bar-control-bleed-block: var(--primitives-space-4);
+		--_step-bar-control-bleed-inline: var(--primitives-space-8);
+		--_step-bar-control-fill-z-index: -1;
+		--_step-bar-control-ring-z-index: 1;
+		--_step-bar-control-hover-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+
+		${inheritedTextReset}
+		isolation: isolate;
+		display: block;
+		container-type: inline-size;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.step-bar__items {
+		display: flex;
+		align-items: start;
+
+		/* Stays in the DOM for assistive tech when the compact view takes over.
+		   Standard visually-hidden recipe. */
+		@container (max-width: ${smMax}) {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+	}
+
+	.step-bar__compact-text {
+		display: none;
+		margin: 0;
+		gap: var(--_step-bar-compact-text-gap);
+		justify-content: space-between;
+		align-items: baseline;
+		color: var(--_step-bar-compact-text-color);
+		font: var(--primitives-font-body-md-regular-flat);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-bar__compact-count {
+		color: var(--_step-bar-compact-count-color);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+
+	.step-bar__compact-bar {
+		display: none;
+		margin-top: var(--_step-bar-compact-bar-gap);
+		gap: var(--_step-bar-compact-bar-segment-gap);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-bar__compact-bar-segment {
+		flex: 1;
+		border-radius: var(--_step-bar-compact-bar-corner-radius);
+		background-color: var(--_step-bar-track-color);
+		height: var(--_step-bar-compact-bar-height);
+	}
+
+	.step-bar__compact-bar-segment[data-filled] {
+		background-color: var(--_step-bar-progress-color);
+	}
+`;
+export const stepBarItemStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		${inheritedTextReset}
+		display: block;
+		flex: 1;
+		min-width: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.step-bar__item {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_step-bar-item-gap);
+		text-align: center;
+	}
+
+	.step-bar__item::before,
+	.step-bar__item::after {
+		position: absolute;
+		top: calc(var(--_step-bar-marker-size) / 2 - var(--_step-bar-track-thickness) / 2);
+		height: var(--_step-bar-track-thickness);
+		content: "";
+		background-color: var(--_step-bar-track-color);
+	}
+
+	.step-bar__item::before {
+		left: 0;
+		right: 50%;
+	}
+
+	.step-bar__item::after {
+		left: 50%;
+		right: 0;
+	}
+
+	:host(:first-of-type) .step-bar__item::before {
+		content: none;
+	}
+
+	:host(:last-of-type) .step-bar__item::after {
+		content: none;
+	}
+
+	.step-bar__item.is-past::before {
+		background-color: var(--_step-bar-progress-color);
+	}
+
+	.step-bar__item.is-past::after {
+		background-color: var(--_step-bar-progress-color);
+	}
+
+	.step-bar__item.is-current::before {
+		background-color: var(--_step-bar-progress-color);
+	}
+
+	.step-bar__item-marker {
+		box-sizing: border-box;
+		position: relative;
+		z-index: var(--_step-bar-marker-z-index);
+		display: flex;
+		width: var(--_step-bar-marker-size);
+		height: var(--_step-bar-marker-size);
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--_step-bar-marker-corner-radius);
+		/* Ring in the background color: masks the track running underneath, so
+		   the marker gets breathing room without shortening the track. */
+		box-shadow: 0 0 0 var(--_step-bar-ring-thickness) var(--_step-bar-ring-color);
+		background-color: var(--_step-bar-track-color);
+		color: var(--_step-bar-marker-content-color);
+		font: var(--primitives-font-body-sm-medium-flat);
+
+		@media (forced-colors: active) {
+			border: var(--primitives-border-width-regular) solid CanvasText;
+		}
+	}
+
+	.step-bar__item.is-past .step-bar__item-marker {
+		background-color: var(--_step-bar-progress-color);
+		color: var(--_step-bar-progress-content-color);
+	}
+
+	.step-bar__item.is-current .step-bar__item-marker {
+		border: var(--_step-bar-track-thickness) solid var(--_step-bar-progress-color);
+		background-color: var(--_step-bar-current-fill-color);
+		color: var(--_step-bar-progress-color);
+	}
+
+	.step-bar__item-icon {
+		width: var(--_step-bar-icon-size);
+		height: var(--_step-bar-icon-size);
+	}
+
+	.step-bar__item-title {
+		color: var(--_step-bar-title-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+		overflow-wrap: anywhere;
+	}
+
+	.step-bar__item.is-current .step-bar__item-title {
+		color: var(--_step-bar-current-title-color);
+	}
+
+	/* Standard visually-hidden recipe. */
+	.step-bar__item-status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	.step-bar__item-control {
+		position: relative;
+		display: flex;
+		width: fit-content;
+		max-width: 100%;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_step-bar-item-gap);
+		padding: 0;
+		border: none;
+		border-radius: var(--_step-bar-control-corner-radius);
+		background: none;
+		color: inherit;
+		cursor: var(--semantics-controls-link-cursor);
+		font: inherit;
+		text-decoration: none;
+	}
+
+	/* Two layers on the same box, bleeding past the control rather than padding
+	   it: padding would move the marker down while the track sits at a fixed
+	   offset, and the two would no longer line up. ::before carries the fill and
+	   stays under the track; ::after carries the focus ring and goes over it. */
+	.step-bar__item-control::before,
+	.step-bar__item-control::after {
+		position: absolute;
+		inset: calc(var(--_step-bar-control-bleed-block) * -1) calc(var(--_step-bar-control-bleed-inline) * -1);
+		border-radius: var(--_step-bar-control-corner-radius);
+		content: "";
+		pointer-events: none;
+	}
+
+	.step-bar__item-control::before {
+		z-index: var(--_step-bar-control-fill-z-index);
+	}
+
+	.step-bar__item-control::after {
+		z-index: var(--_step-bar-control-ring-z-index);
+	}
+
+	.step-bar__item-control:focus-visible {
+		/* The ring lives on ::after, so the control's own must go — two rings on
+		   one control is what the browser default would add here. */
+		outline: none;
+	}
+
+	.step-bar__item-control:focus-visible::after {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	/* Hover only on hover-capable devices: keeps a touch-scroll from lighting up
+	   the step under the finger. */
+	@media (hover: hover) {
+		.step-bar__item-control:hover {
+			/* The marker's ring masks the track in the surrounding color, so it
+			   has to follow the hover fill or it paints a halo on top of it. */
+			--_step-bar-ring-color: var(--_step-bar-control-hover-background-color);
+		}
+
+		.step-bar__item-control:hover::before {
+			background-color: var(--_step-bar-control-hover-background-color);
+		}
+	}
+`;
+//# sourceMappingURL=step-bar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmC5B,kBAAkB;;;;;;;;;;;;;;;;2BAgBK,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;;;;;;CAe/B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;IAMhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC"}

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

@@ -0,0 +1,5 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDStepBar, NLDDStepBarItem } from './step-bar.js';
+export declare function stepBarTemplate(component: NLDDStepBar): TemplateResult;
+export declare function stepBarItemTemplate(component: NLDDStepBarItem): TemplateResult;
+//# sourceMappingURL=step-bar.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAElE,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,cAAc,CAmCtE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CAiC9E"}

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

@@ -0,0 +1,69 @@
+import { html, nothing } from 'lit';
+export function stepBarTemplate(component) {
+    const label = component.accessibleLabel || component._t('components.step-bar.accessible-label');
+    const current = component.resolvedCurrent;
+    const total = component.total;
+    const currentTitle = component.currentItem?.text ?? '';
+    const compactText = component._t('components.step-bar.compact-text', { current, total });
+    return html `
+		<nav class="step-bar"
+			aria-label=${label || nothing}
+		>
+			<div class="step-bar__items"
+				role="list"
+			>
+				<slot @slotchange=${component._onSlotChange}></slot>
+			</div>
+			${total > 0 ? html `
+				<p class="step-bar__compact-text"
+					aria-hidden="true"
+				>
+					${currentTitle ? html `<span class="step-bar__compact-title">${currentTitle}</span>` : nothing}
+					<span class="step-bar__compact-count">${compactText}</span>
+				</p>
+				<div class="step-bar__compact-bar"
+					aria-hidden="true"
+				>
+					${Array.from({ length: total }, (_, index) => html `
+						<span class="step-bar__compact-bar-segment"
+							?data-filled=${index + 1 <= current}
+						></span>
+					`)}
+				</div>
+			` : nothing}
+		</nav>
+	`;
+}
+export function stepBarItemTemplate(component) {
+    const status = component.resolvedStatus;
+    // A past step shows a check mark instead of its number; the number stays in
+    // the status text for anyone who can't see it.
+    const marker = component.icon
+        ? html `<nldd-icon class="step-bar__item-icon" icon=${component.icon}></nldd-icon>`
+        : status === 'past'
+            ? html `<nldd-icon class="step-bar__item-icon" icon="check-mark"></nldd-icon>`
+            : html `<span class="step-bar__item-number">${component._index}</span>`;
+    const content = html `
+		<span class="step-bar__item-marker"
+			aria-hidden="true"
+		>${marker}</span>
+		<span class="step-bar__item-title">
+			${component.text || html `<slot></slot>`}
+			<span class="step-bar__item-status">, ${component._statusText}</span>
+		</span>
+	`;
+    return html `
+		<div class="step-bar__item is-${status}">
+			${component.href ? html `
+				<a class="step-bar__item-control"
+					href=${component.href}
+				>${content}</a>
+			` : component.button ? html `
+				<button class="step-bar__item-control"
+					type="button"
+				>${content}</button>
+			` : content}
+		</div>
+	`;
+}
+//# sourceMappingURL=step-bar.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-bar.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-bar/step-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,eAAe,CAAC,SAAsB;IACrD,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,EAAE,CAAC,sCAAsC,CAAC,CAAC;IAChG,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,CAAC;IAC1C,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAC9B,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;IACvD,MAAM,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,kCAAkC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEzF,OAAO,IAAI,CAAA;;gBAEI,KAAK,IAAI,OAAO;;;;;wBAKR,SAAS,CAAC,aAAa;;KAE1C,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;OAId,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,YAAY,SAAS,CAAC,CAAC,CAAC,OAAO;6CACrD,WAAW;;;;;OAKjD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEjC,KAAK,GAAG,CAAC,IAAI,OAAO;;MAEpC,CAAC;;IAEH,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC;IACxC,4EAA4E;IAC5E,+CAA+C;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI;QAC5B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,MAAM,KAAK,MAAM;YAClB,CAAC,CAAC,IAAI,CAAA,uEAAuE;YAC7E,CAAC,CAAC,IAAI,CAAA,uCAAuC,SAAS,CAAC,MAAM,SAAS,CAAC;IAEzE,MAAM,OAAO,GAAG,IAAI,CAAA;;;KAGhB,MAAM;;KAEN,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe;2CACC,SAAS,CAAC,WAAW;;EAE9D,CAAC;IAEF,OAAO,IAAI,CAAA;kCACsB,MAAM;KACnC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEd,SAAS,CAAC,IAAI;OACnB,OAAO;IACV,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;OAGvB,OAAO;IACV,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/components/{visibility-mixin-BU1vIMW7.js → visibility-mixin-Crbt8PFP.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { css, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";

package/dist/components/{with-translations-Dt2DTXJF.js → with-translations-C8_0-9y8.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
+import { t as __decorate } from "./decorate-CO88j7Lc.js";
 import { property } from "lit/decorators.js";
 //#region src/utilities/link-rel.ts
 /**

package/dist/css/document-reset.css

@@ -1,4 +1,11 @@
 @layer reset {
+	/* iOS Safari inflates small text in landscape while this is auto. On the
+	   root it covers the whole page, light DOM and shadow roots alike. */
+	html {
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+	}
+
 	html:has(nldd-app-view),
 	html:has(nldd-app-view) body {
 		margin: 0;