@nldd/design-system 0.8.95 → 0.8.96

package/dist/components/status-and-feedback/{step-indicator/step-indicator.js → step-bar/step-bar.js}

@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Nederlandse Digitale Dienst Step Indicator Component (Lit + TypeScript)
+ * 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.
+ * 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,
@@ -18,11 +18,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * 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-timeline-track-cell`, so a flow reads in one vocabulary
+ * 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-timeline-track-cell` and an `nldd-title-cell` per row: vertical steps
+ * `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
@@ -35,38 +35,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * 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
+ * @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-indicator-item` children
+ * @slot - `nldd-step-bar-item` children
  *
  * @example
  * ```html
- * <nldd-step-indicator accessible-label="Voortgang aanvraag">
- *   <nldd-step-indicator-item text="Gegevens"></nldd-step-indicator-item>
- *   <nldd-step-indicator-item text="Controle" status="current"></nldd-step-indicator-item>
- *   <nldd-step-indicator-item text="Bevestigen"></nldd-step-indicator-item>
- * </nldd-step-indicator>
+ * <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 { nlddStepIndicatorTranslations } from './step-indicator.i18n.js';
-import { stepIndicatorStyles, stepIndicatorItemStyles } from './step-indicator.styles.js';
-import { stepIndicatorTemplate, stepIndicatorItemTemplate } from './step-indicator.template.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-indicator-item
+// # nldd-step-bar-item
 /**
- * One step in an `nldd-step-indicator`. `status="current"` marks the step you
+ * 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-indicator-item
+ * @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
@@ -76,7 +76,7 @@ import '../../content/icon/icon.js';
  *
  * @slot - Label (an alternative to `text`)
  */
-export class NLDDStepIndicatorItem extends LitElement {
+export class NLDDStepBarItem extends LitElement {
     constructor() {
         super(...arguments);
         this.text = '';
@@ -116,42 +116,42 @@ export class NLDDStepIndicatorItem extends LitElement {
         }
     }
     render() {
-        return stepIndicatorItemTemplate(this);
+        return stepBarItemTemplate(this);
     }
 }
-NLDDStepIndicatorItem.styles = stepIndicatorItemStyles;
+NLDDStepBarItem.styles = stepBarItemStyles;
 __decorate([
     property({ type: String, reflect: true })
-], NLDDStepIndicatorItem.prototype, "status", void 0);
+], NLDDStepBarItem.prototype, "status", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('') })
-], NLDDStepIndicatorItem.prototype, "text", void 0);
+], NLDDStepBarItem.prototype, "text", void 0);
 __decorate([
     property({ type: String })
-], NLDDStepIndicatorItem.prototype, "icon", void 0);
+], NLDDStepBarItem.prototype, "icon", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], NLDDStepIndicatorItem.prototype, "href", void 0);
+], NLDDStepBarItem.prototype, "href", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDStepIndicatorItem.prototype, "button", void 0);
+], NLDDStepBarItem.prototype, "button", void 0);
 __decorate([
     state()
-], NLDDStepIndicatorItem.prototype, "_derivedStatus", void 0);
+], NLDDStepBarItem.prototype, "_derivedStatus", void 0);
 __decorate([
     state()
-], NLDDStepIndicatorItem.prototype, "_index", void 0);
+], NLDDStepBarItem.prototype, "_index", void 0);
 __decorate([
     state()
-], NLDDStepIndicatorItem.prototype, "_statusText", void 0);
-// Sub-component of nldd-step-indicator. The guard registration (like
+], 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-indicator-item')) {
-    customElements.define('nldd-step-indicator-item', NLDDStepIndicatorItem);
+if (!customElements.get('nldd-step-bar-item')) {
+    customElements.define('nldd-step-bar-item', NLDDStepBarItem);
 }
-// # nldd-step-indicator
-let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElement, nlddStepIndicatorTranslations) {
+// # nldd-step-bar
+let NLDDStepBar = class NLDDStepBar extends withTranslations(LitElement, nlddStepBarTranslations) {
     constructor() {
         super(...arguments);
         this.accessibleLabel = '';
@@ -165,7 +165,7 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
         this._onSlotChange = (e) => {
             const slot = e.target;
             this._items = slot.assignedElements({ flatten: true })
-                .filter((el) => el.localName === 'nldd-step-indicator-item');
+                .filter((el) => el.localName === 'nldd-step-bar-item');
         };
     }
     get total() {
@@ -193,7 +193,7 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
     attributeChangedCallback(name, old, value) {
         super.attributeChangedCallback(name, old, value);
         if (import.meta.env?.DEV && name === 'current' && value !== null) {
-            console.warn('<nldd-step-indicator>: `current` moved to the step. Set `status="current"` on the current `nldd-step-indicator-item` instead.');
+            console.warn('<nldd-step-bar>: `current` moved to the step. Set `status="current"` on the current `nldd-step-bar-item` instead.');
         }
     }
     disconnectedCallback() {
@@ -215,7 +215,7 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
             return;
         const multiple = this._items.filter(item => item.status === 'current').length > 1;
         if (multiple && !this._warnedMultipleCurrent) {
-            console.warn('<nldd-step-indicator>: more than one step has `status="current"`; the last one wins. Mark only the step you are on.');
+            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;
     }
@@ -227,22 +227,22 @@ let NLDDStepIndicator = class NLDDStepIndicator extends withTranslations(LitElem
             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`);
+            item._statusText = this._t(`components.step-bar.status-${item.resolvedStatus}-label`);
         });
     }
     render() {
-        return stepIndicatorTemplate(this);
+        return stepBarTemplate(this);
     }
 };
-NLDDStepIndicator.styles = stepIndicatorStyles;
+NLDDStepBar.styles = stepBarStyles;
 __decorate([
     property({ type: String, attribute: 'accessible-label' })
-], NLDDStepIndicator.prototype, "accessibleLabel", void 0);
+], NLDDStepBar.prototype, "accessibleLabel", void 0);
 __decorate([
     state()
-], NLDDStepIndicator.prototype, "_items", void 0);
-NLDDStepIndicator = __decorate([
-    customElement('nldd-step-indicator')
-], NLDDStepIndicator);
-export { NLDDStepIndicator };
-//# sourceMappingURL=step-indicator.js.map
+], 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"}