@nldd/design-system 0.8.70 → 0.8.71

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

@@ -0,0 +1,210 @@
+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 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * @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)
+ *
+ * @slot - `nldd-step-indicator-item` kinderen
+ *
+ * @example
+ * ```html
+ * <nldd-step-indicator current="2" accessible-label="Voortgang aanvraag">
+ *   <nldd-step-indicator-item text="Gegevens"></nldd-step-indicator-item>
+ *   <nldd-step-indicator-item text="Controle"></nldd-step-indicator-item>
+ *   <nldd-step-indicator-item text="Bevestigen"></nldd-step-indicator-item>
+ * </nldd-step-indicator>
+ * ```
+ */
+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 { nlddStepIndicatorTranslations } from './step-indicator.i18n.js';
+import { stepIndicatorStyles, stepIndicatorItemStyles } from './step-indicator.styles.js';
+import { stepIndicatorTemplate, stepIndicatorItemTemplate } from './step-indicator.template.js';
+import '../../content/icon/icon.js';
+// # nldd-step-indicator-item
+/**
+ * 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`.
+ *
+ * @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
+ *
+ * @slot - Label (alternatief voor `text`)
+ */
+export class NLDDStepIndicatorItem 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: the item's own wins over the derived one. */
+    get resolvedStatus() {
+        return 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 stepIndicatorItemTemplate(this);
+    }
+}
+NLDDStepIndicatorItem.styles = stepIndicatorItemStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStepIndicatorItem.prototype, "status", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDStepIndicatorItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStepIndicatorItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStepIndicatorItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDStepIndicatorItem.prototype, "button", void 0);
+__decorate([
+    state()
+], NLDDStepIndicatorItem.prototype, "_derivedStatus", void 0);
+__decorate([
+    state()
+], NLDDStepIndicatorItem.prototype, "_index", void 0);
+__decorate([
+    state()
+], NLDDStepIndicatorItem.prototype, "_statusText", void 0);
+// Sub-component of nldd-step-indicator. The guard registration (like
+// nldd-breadcrumbs-item's) keeps the first registration authoritative across HMR
+// and test re-imports.
+if (!customElements.get('nldd-step-indicator-item')) {
+    customElements.define('nldd-step-indicator-item', NLDDStepIndicatorItem);
+}
+// # nldd-step-indicator
+let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElement, nlddStepIndicatorTranslations) {
+    constructor() {
+        super(...arguments);
+        this.accessibleLabel = '';
+        this.current = 1;
+        /** The steps, tracked so the compact view (text + bar) is driven by the same
+         *  source as the row of markers. */
+        this._items = [];
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            this._items = slot.assignedElements({ flatten: true })
+                .filter((el) => el.localName === 'nldd-step-indicator-item');
+        };
+    }
+    get total() {
+        return this._items.length;
+    }
+    /** The current step, clamped to the number of steps: an out-of-range
+     *  `current` would otherwise mark every step past (or none at all). */
+    get resolvedCurrent() {
+        if (this.total === 0)
+            return this.current;
+        return Math.min(Math.max(this.current, 1), this.total);
+    }
+    get currentItem() {
+        return this._items.find(item => item.resolvedStatus === 'current')
+            ?? this._items[this.resolvedCurrent - 1];
+    }
+    /** 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) {
+        if (changed.has('current') || changed.has('_items'))
+            this._syncItems();
+    }
+    /** Push position, derived status and status text down to the children. Push
+     *  rather than pull: a child reading its own parent has no way of knowing
+     *  when `current` changes. */
+    _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-indicator.status-${item.resolvedStatus}-label`);
+        });
+    }
+    render() {
+        return stepIndicatorTemplate(this);
+    }
+};
+NLDDStepIndicator.styles = stepIndicatorStyles;
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDStepIndicator.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDStepIndicator.prototype, "current", void 0);
+__decorate([
+    state()
+], NLDDStepIndicator.prototype, "_items", void 0);
+NLDDStepIndicator = __decorate([
+    customElement('nldd-step-indicator')
+], NLDDStepIndicator);
+export { NLDDStepIndicator };
+//# sourceMappingURL=step-indicator.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,yBAqG/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBA0LnC,CAAC"}

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

@@ -0,0 +1,294 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+export const stepIndicatorStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		--_compact-text-gap: var(--primitives-space-8);
+		--_compact-text-color: var(--semantics-content-color);
+		--_compact-count-color: var(--semantics-content-secondary-color);
+		--_compact-bar-gap: var(--primitives-space-4);
+		--_compact-bar-segment-gap: var(--primitives-space-2);
+		--_compact-bar-corner-radius: var(--primitives-corner-radius-full);
+		--_track-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+		--_compact-bar-height: var(--primitives-space-6);
+		--_progress-color: var(--semantics-content-accent-color);
+		--_item-gap: var(--primitives-space-4);
+		--_marker-size: var(--primitives-space-24);
+		--_track-thickness: var(--primitives-space-2);
+		--_marker-z-index: 1;
+		--_marker-corner-radius: var(--primitives-corner-radius-full);
+		--_ring-thickness: var(--primitives-space-2);
+		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_marker-content-color: var(--semantics-content-secondary-color);
+		--_progress-content-color: var(--semantics-content-contrast-color);
+		--_current-fill-color: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-150));
+		--_icon-size: var(--primitives-space-16);
+		--_title-color: var(--semantics-content-secondary-color);
+		--_current-title-color: var(--semantics-content-color);
+		--_control-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_control-bleed-block: var(--primitives-space-4);
+		--_control-bleed-inline: var(--primitives-space-8);
+		--_control-fill-z-index: -1;
+		--_control-ring-z-index: 1;
+		--_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-indicator__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-indicator__compact-text {
+		display: none;
+		margin: 0;
+		gap: var(--_compact-text-gap);
+		justify-content: space-between;
+		align-items: baseline;
+		color: var(--_compact-text-color);
+		font: var(--primitives-font-body-md-regular-flat);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-indicator__compact-count {
+		color: var(--_compact-count-color);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+
+	.step-indicator__compact-bar {
+		display: none;
+		margin-top: var(--_compact-bar-gap);
+		gap: var(--_compact-bar-segment-gap);
+
+		@container (max-width: ${smMax}) {
+			display: flex;
+		}
+	}
+
+	.step-indicator__compact-bar-segment {
+		flex: 1;
+		border-radius: var(--_compact-bar-corner-radius);
+		background-color: var(--_track-color);
+		height: var(--_compact-bar-height);
+	}
+
+	.step-indicator__compact-bar-segment[data-filled] {
+		background-color: var(--_progress-color);
+	}
+`;
+export const stepIndicatorItemStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		${inheritedTextReset}
+		display: block;
+		flex: 1;
+		min-width: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.step-indicator__item {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_item-gap);
+		text-align: center;
+	}
+
+	.step-indicator__item::before,
+	.step-indicator__item::after {
+		position: absolute;
+		top: calc(var(--_marker-size) / 2 - var(--_track-thickness) / 2);
+		height: var(--_track-thickness);
+		content: "";
+		background-color: var(--_track-color);
+	}
+
+	.step-indicator__item::before {
+		left: 0;
+		right: 50%;
+	}
+
+	.step-indicator__item::after {
+		left: 50%;
+		right: 0;
+	}
+
+	:host(:first-of-type) .step-indicator__item::before {
+		content: none;
+	}
+
+	:host(:last-of-type) .step-indicator__item::after {
+		content: none;
+	}
+
+	.step-indicator__item.is-past::before {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item.is-past::after {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item.is-current::before {
+		background-color: var(--_progress-color);
+	}
+
+	.step-indicator__item-marker {
+		box-sizing: border-box;
+		position: relative;
+		z-index: var(--_marker-z-index);
+		display: flex;
+		width: var(--_marker-size);
+		height: var(--_marker-size);
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--_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(--_ring-thickness) var(--_ring-color);
+		background-color: var(--_track-color);
+		color: var(--_marker-content-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+
+		@media (forced-colors: active) {
+			border: var(--primitives-border-width-regular) solid CanvasText;
+		}
+	}
+
+	.step-indicator__item.is-past .step-indicator__item-marker {
+		background-color: var(--_progress-color);
+		color: var(--_progress-content-color);
+	}
+
+	.step-indicator__item.is-current .step-indicator__item-marker {
+		border: var(--_track-thickness) solid var(--_progress-color);
+		background-color: var(--_current-fill-color);
+		color: var(--_progress-color);
+	}
+
+	.step-indicator__item-icon {
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
+	.step-indicator__item-title {
+		color: var(--_title-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+		overflow-wrap: anywhere;
+	}
+
+	.step-indicator__item.is-current .step-indicator__item-title {
+		color: var(--_current-title-color);
+	}
+
+	/* Standard visually-hidden recipe. */
+	.step-indicator__item-status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	.step-indicator__item-control {
+		position: relative;
+		display: flex;
+		width: fit-content;
+		max-width: 100%;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--_item-gap);
+		padding: 0;
+		border: none;
+		border-radius: var(--_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-indicator__item-control::before,
+	.step-indicator__item-control::after {
+		position: absolute;
+		inset: calc(var(--_control-bleed-block) * -1) calc(var(--_control-bleed-inline) * -1);
+		border-radius: var(--_control-corner-radius);
+		content: "";
+		pointer-events: none;
+	}
+
+	.step-indicator__item-control::before {
+		z-index: var(--_control-fill-z-index);
+	}
+
+	.step-indicator__item-control::after {
+		z-index: var(--_control-ring-z-index);
+	}
+
+	.step-indicator__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-indicator__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-indicator__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. */
+			--_ring-color: var(--_control-hover-background-color);
+		}
+
+		.step-indicator__item-control:hover::before {
+			background-color: var(--_control-hover-background-color);
+		}
+	}
+`;
+//# sourceMappingURL=step-indicator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.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,wCAAwC,CAAC;AAE5E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmClC,kBAAkB;;;;;;;;;;;;;;;;2BAgBK,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;;;;;;CAe/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;IAMtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC"}

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

@@ -0,0 +1,5 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDStepIndicator, NLDDStepIndicatorItem } from './step-indicator.js';
+export declare function stepIndicatorTemplate(component: NLDDStepIndicator): TemplateResult;
+export declare function stepIndicatorItemTemplate(component: NLDDStepIndicatorItem): TemplateResult;
+//# sourceMappingURL=step-indicator.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAmClF;AAED,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CAiC1F"}

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

@@ -0,0 +1,69 @@
+import { html, nothing } from 'lit';
+export function stepIndicatorTemplate(component) {
+    const label = component.accessibleLabel || component._t('components.step-indicator.accessible-label');
+    const current = component.resolvedCurrent;
+    const total = component.total;
+    const currentTitle = component.currentItem?.text ?? '';
+    const compactText = component._t('components.step-indicator.compact-text', { current, total });
+    return html `
+		<nav class="step-indicator"
+			aria-label=${label || nothing}
+		>
+			<div class="step-indicator__items"
+				role="list"
+			>
+				<slot @slotchange=${component._onSlotChange}></slot>
+			</div>
+			${total > 0 ? html `
+				<p class="step-indicator__compact-text"
+					aria-hidden="true"
+				>
+					${currentTitle ? html `<span class="step-indicator__compact-title">${currentTitle}</span>` : nothing}
+					<span class="step-indicator__compact-count">${compactText}</span>
+				</p>
+				<div class="step-indicator__compact-bar"
+					aria-hidden="true"
+				>
+					${Array.from({ length: total }, (_, index) => html `
+						<span class="step-indicator__compact-bar-segment"
+							?data-filled=${index + 1 <= current}
+						></span>
+					`)}
+				</div>
+			` : nothing}
+		</nav>
+	`;
+}
+export function stepIndicatorItemTemplate(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-indicator__item-icon" name=${component.icon}></nldd-icon>`
+        : status === 'past'
+            ? html `<nldd-icon class="step-indicator__item-icon" name="check-mark"></nldd-icon>`
+            : html `<span class="step-indicator__item-number">${component._index}</span>`;
+    const content = html `
+		<span class="step-indicator__item-marker"
+			aria-hidden="true"
+		>${marker}</span>
+		<span class="step-indicator__item-title">
+			${component.text || html `<slot></slot>`}
+			<span class="step-indicator__item-status">, ${component._statusText}</span>
+		</span>
+	`;
+    return html `
+		<div class="step-indicator__item is-${status}">
+			${component.href ? html `
+				<a class="step-indicator__item-control"
+					href=${component.href}
+				>${content}</a>
+			` : component.button ? html `
+				<button class="step-indicator__item-control"
+					type="button"
+				>${content}</button>
+			` : content}
+		</div>
+	`;
+}
+//# sourceMappingURL=step-indicator.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,EAAE,CAAC,4CAA4C,CAAC,CAAC;IACtG,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,wCAAwC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAE/F,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,+CAA+C,YAAY,SAAS,CAAC,CAAC,CAAC,OAAO;mDACrD,WAAW;;;;;OAKvD,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,yBAAyB,CAAC,SAAgC;IACzE,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,qDAAqD,SAAS,CAAC,IAAI,eAAe;QACxF,CAAC,CAAC,MAAM,KAAK,MAAM;YAClB,CAAC,CAAC,IAAI,CAAA,6EAA6E;YACnF,CAAC,CAAC,IAAI,CAAA,6CAA6C,SAAS,CAAC,MAAM,SAAS,CAAC;IAE/E,MAAM,OAAO,GAAG,IAAI,CAAA;;;KAGhB,MAAM;;KAEN,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe;iDACO,SAAS,CAAC,WAAW;;EAEpE,CAAC;IAEF,OAAO,IAAI,CAAA;wCAC4B,MAAM;KACzC,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/css/form.css

@@ -9,21 +9,30 @@ nldd-form > form {
 	display: block;
 }
 
-nldd-form > form > * + * {
-	margin-top: var(--semantics-forms-gap);
+/* # Vertical rhythm
+
+   The gap hangs on the BOTTOM of the preceding child, not on the top of the
+   following one. Hidden children (formset management inputs, framework
+   bookkeeping) generate no box, so a top margin would let them push the first
+   visible field down; a bottom margin on them renders nothing. The :has()
+   guard keeps the rhythm from adding a trailing gap when the remaining
+   children are all hidden. */
+
+nldd-form > form > *:has(~ *:not([hidden]):not([type='hidden'])) {
+	margin-bottom: var(--semantics-forms-gap);
 }
 
-nldd-form nldd-form-field + nldd-form-field {
+nldd-form nldd-form-field:has(+ nldd-form-field):has(~ *:not([hidden]):not([type='hidden'])) {
 	@container (max-width: 640px) {
-		margin-top: var(--semantics-forms-gap-tight);
+		margin-bottom: var(--semantics-forms-gap-tight);
 	}
 	@container (min-width: 641px) {
-		margin-top: var(--semantics-forms-gap);
+		margin-bottom: var(--semantics-forms-gap);
 	}
 }
 
-nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) + nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']) {
+nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']):has(+ nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right'])):has(~ *:not([hidden]):not([type='hidden'])) {
 	@container (min-width: 641px) {
-		margin-top: var(--semantics-forms-gap-tight);
+		margin-bottom: var(--semantics-forms-gap-tight);
 	}
 }