@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/stat/stat.js

@@ -1,250 +1,5 @@
-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 { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './stat.class.js';
+import { LyraStat } from './stat.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { nextId, srOnly } from '../../internal/a11y.js';
-import { styles } from './stat.styles.js';
-/**
- * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
- * "metric row" / "KPI card" pattern common to dashboard UIs.
- *
- * @customElement lyra-stat
- * @slot - Leading icon.
- * @slot caption - Rich caption content (overrides the `caption` attribute).
- * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
- *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
- * @slot sub - Rich sub-line content (overrides the `sub` attribute).
- * @csspart base - The component's root wrapper.
- * @csspart icon - Container for the leading icon slot.
- * @csspart label - The label text.
- * @csspart value-row - Wrapper around the value and unit.
- * @csspart value - The value text. Accessibly labelled by the `label` part (via
- *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
- *   (focusable when `exactValue` is set) control still announces which metric it is.
- * @csspart unit - The unit text.
- * @csspart trend - The trend pill.
- * @csspart sub - Container for the `sub` attribute/slot.
- * @csspart spark - Container for the `spark` slot.
- * @csspart caption - Container for the caption attribute/slot.
- * @csspart rows - Container for the `rows` breakdown list.
- * @csspart row - A single breakdown row (one per `rows` entry).
- * @csspart row-label - The label text of a breakdown row.
- * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
- *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
- *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
- */
-export class LyraStat extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.value = '';
-        this.unit = '';
-        this.variant = 'neutral';
-        this.trend = NaN;
-        this.caption = '';
-        /** Which trend direction counts as "good" — inverts arrow/color polarity for
-         *  cost/latency/error-rate-style metrics where a decrease is the win. */
-        this.goodDirection = 'up';
-        /** Breakdown rows rendered as a simple label/value list beneath the caption. */
-        this.rows = [];
-        /** Visual emphasis (e.g. for a "headline" stat in a group) — orthogonal to
-         *  the status `variant`; see the `[part='value']` selector below for how
-         *  the two combine. */
-        this.emphasis = false;
-        /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
-         *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
-         *  reachable without a pointer. */
-        this.exactValue = '';
-        /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
-         *  trend pill and the caption. */
-        this.sub = '';
-        /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
-         *  numeric headline style, and hides `unit`. */
-        this.prose = false;
-        /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
-        this.compact = false;
-        // Same fix `lyra-empty` already established: `[part]:empty` never matches
-        // because the part always contains a literal `<slot>` child. Track real
-        // slot assignment in JS instead.
-        this.hasIcon = false;
-        this.hasCaptionSlot = false;
-        this.hasSparkSlot = false;
-        this.hasSubSlot = false;
-        // Stable id pairing `[part='label']` with `[part='value']` via
-        // aria-labelledby, so a keyboard user tabbing straight to the (focusable,
-        // tooltip-bearing) value still gets an accessible name like "Revenue
-        // $1.2K" instead of the bare value.
-        this.labelId = nextId('stat-label');
-        this.valueId = `${this.labelId}-value`;
-        // One id per `rows` entry, regenerated only when the `rows` array itself is
-        // reassigned (not on every render) so `aria-labelledby` references stay
-        // stable across unrelated re-renders.
-        this.rowLabelIds = [];
-        this.onIconSlotChange = (e) => {
-            this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onCaptionSlotChange = (e) => {
-            this.hasCaptionSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onSparkSlotChange = (e) => {
-            this.hasSparkSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onSubSlotChange = (e) => {
-            this.hasSubSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
-            this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
-            this.hasSparkSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'spark');
-            this.hasSubSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'sub');
-        }
-        if (changed.has('rows')) {
-            this.rowLabelIds = this.rows.map(() => nextId('stat-row-label'));
-        }
-    }
-    render() {
-        // Lit's built-in Number converter maps a removed/absent attribute to
-        // `null`, not NaN, even though the property is typed `number` — so
-        // `isNaN(this.trend)` alone is false for a cleared attribute and the pill
-        // would reappear showing a fabricated "unchanged, 0%". Treat null/undefined
-        // the same as NaN here instead of trusting the static type.
-        const hasTrend = this.trend != null && !isNaN(this.trend);
-        const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
-        const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
-        // The trend pill previously rendered literal ▲/▼ glyphs — font-dependent
-        // and inconsistent with the rest of the icon set — swapped for the
-        // shared chevronIcon(), rotated per direction via CSS on the wrapping
-        // [part='trend'].
-        const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
-        const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
-        const hasSub = this.hasSubSlot || this.sub.length > 0;
-        // The visible pill only ever shows the icon rotation + color to convey
-        // direction and good/bad polarity; both are invisible to screen readers,
-        // so mirror them into a plain-language sr-only announcement.
-        const trendAnnouncement = rawDirection === 'flat'
-            ? 'unchanged'
-            : `${rawDirection === 'up' ? 'increased' : 'decreased'} ${Math.abs(this.trend)}%${isGood == null ? '' : isGood ? ', good' : ', bad'}`;
-        return html `
-      <div part="base">
-        <span part="icon" ?hidden=${!this.hasIcon}
-          ><slot @slotchange=${this.onIconSlotChange}></slot
-        ></span>
-        <span part="label" id=${this.labelId}>${this.label}</span>
-        <div part="value-row">
-          <span
-            part="value"
-            id=${this.valueId}
-            title=${this.exactValue || nothing}
-            tabindex=${this.exactValue ? '0' : nothing}
-            aria-labelledby=${this.label ? `${this.labelId} ${this.valueId}` : nothing}
-            >${this.value}</span
-          >
-          <span part="unit">${this.unit}</span>
-        </div>
-        ${hasTrend
-            ? html `<span
-              part="trend"
-              data-direction=${rawDirection}
-              data-polarity=${isGood == null ? nothing : isGood ? 'good' : 'bad'}
-            >
-              <span aria-hidden="true">${arrow} ${Math.abs(this.trend)}%</span>
-              <span class="sr-only">${trendAnnouncement}</span>
-            </span>`
-            : nothing}
-        <div part="sub" ?hidden=${!hasSub}>
-          <slot name="sub" @slotchange=${this.onSubSlotChange}>${this.sub}</slot>
-        </div>
-        <div part="spark" ?hidden=${!this.hasSparkSlot}>
-          <slot name="spark" @slotchange=${this.onSparkSlotChange}></slot>
-        </div>
-        <div part="caption" ?hidden=${!hasCaption}>
-          <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
-        </div>
-        <div part="rows" ?hidden=${this.rows.length === 0}>
-          ${this.rows.map((row, i) => {
-            const rowLabelId = this.rowLabelIds[i];
-            const rowValueId = `${rowLabelId}-value`;
-            return html `
-              <div part="row">
-                <span part="row-label" id=${rowLabelId}>${row.label}</span>
-                <span
-                  part="row-value"
-                  id=${rowValueId}
-                  title=${row.exactValue || nothing}
-                  tabindex=${row.exactValue ? '0' : nothing}
-                  aria-labelledby=${row.label ? `${rowLabelId} ${rowValueId}` : nothing}
-                  >${row.value}</span
-                >
-              </div>
-            `;
-        })}
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraStat.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "value", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "unit", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraStat.prototype, "variant", void 0);
-__decorate([
-    property({ type: Number })
-], LyraStat.prototype, "trend", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "caption", void 0);
-__decorate([
-    property({ attribute: 'good-direction' })
-], LyraStat.prototype, "goodDirection", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraStat.prototype, "rows", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "emphasis", void 0);
-__decorate([
-    property({ attribute: 'exact-value' })
-], LyraStat.prototype, "exactValue", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "sub", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "prose", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "compact", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasIcon", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasCaptionSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasSparkSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasSubSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "rowLabelIds", void 0);
 defineElement('stat', LyraStat);
+//# sourceMappingURL=stat.js.map

package/dist/components/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sourceRoot":"","sources":["../../../src/components/stat/stat.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

package/dist/components/stat/stat.styles.d.ts

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

package/dist/components/stat/stat.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.styles.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsJlB,CAAC"}

package/dist/components/stat/stat.styles.js

@@ -8,9 +8,11 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
     padding: var(--lyra-space-m);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
+    block-size: 100%;
+    box-sizing: border-box;
   }
   [part='icon'] {
     color: var(--lyra-color-text-quiet);
@@ -19,10 +21,10 @@ export const styles = css `
     display: none;
   }
   [part='label'] {
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
   [part='value-row'] {
@@ -31,26 +33,26 @@ export const styles = css `
     gap: var(--lyra-space-xs);
   }
   [part='value'] {
-    font-size: 1.75rem;
-    font-weight: 700;
-    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: var(--lyra-font-size-2xl);
+    font-weight: var(--lyra-font-weight-bold);
+    font-family: var(--lyra-font-mono);
   }
   [part='unit'] {
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='trend'] {
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-xs);
-    font-size: 0.8125rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
     border-radius: var(--lyra-radius);
     /* 0.05rem/0.4rem don't cleanly map to any --lyra-space-* step (the
        smallest, --lyra-space-xs, is 0.25rem): rounding the vertical value
        up to xs would 5x this chip's padding and blow out the compact
        trend-chip look, so both stay literal here. */
-    padding: 0.05rem 0.4rem;
+    padding: var(--lyra-size-0-05rem) var(--lyra-size-0-4rem);
     align-self: flex-start;
   }
   [part='trend'][data-direction='up'] svg {
@@ -85,14 +87,14 @@ export const styles = css `
     display: none;
   }
   [part='sub'] {
-    font-size: 0.8125rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='sub'][hidden] {
     display: none;
   }
   [part='caption'] {
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='caption'][hidden] {
@@ -104,7 +106,7 @@ export const styles = css `
     /* Slightly tighter than the card's own --lyra-space-xs gap so the
        breakdown list reads as one nested group rather than siblings of
        equal weight with label/value/caption. */
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
   [part='rows'][hidden] {
     display: none;
@@ -114,20 +116,20 @@ export const styles = css `
     align-items: baseline;
     justify-content: space-between;
     gap: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
   }
   [part='row-label'] {
     color: var(--lyra-color-text-quiet);
   }
   [part='row-value'] {
-    font-family: ui-monospace, SFMono-Regular, monospace;
-    font-weight: 600;
+    font-family: var(--lyra-font-mono);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   /* Orthogonal to the status variant: an accent edge that marks a stat as
      visually emphasized (e.g. the "headline" stat in a group) regardless of
      status color. */
   :host([emphasis]) [part='base'] {
-    border-inline-start: 3px solid var(--lyra-color-brand);
+    border-inline-start: var(--lyra-border-width-thick) solid var(--lyra-color-brand);
   }
   /* Status semantics win over visual emphasis: only tint the value with the
      brand color when there's no status variant already claiming it. */
@@ -135,8 +137,8 @@ export const styles = css `
     color: var(--lyra-color-brand);
   }
   :host([prose]) [part='value'] {
-    font-size: 0.9375rem;
-    font-weight: 400;
+    font-size: var(--lyra-size-0-9375rem);
+    font-weight: var(--lyra-font-weight-normal);
     font-family: inherit;
     color: var(--lyra-color-text-quiet);
   }
@@ -145,6 +147,7 @@ export const styles = css `
   }
   :host([compact]) [part='base'] {
     padding: var(--lyra-space-s);
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
 `;
+//# sourceMappingURL=stat.styles.js.map

package/dist/components/stat/stat.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.styles.js","sourceRoot":"","sources":["../../../src/components/stat/stat.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC"}

package/dist/components/stepper/stepper.class.d.ts

@@ -0,0 +1,52 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type StepState = 'pending' | 'current' | 'completed' | 'disabled' | 'error';
+export interface StepItem {
+    id: string;
+    label: string;
+    state: StepState;
+}
+export interface LyraStepperEventMap {
+    'lyra-step-select': CustomEvent<{
+        index: number;
+        id: string;
+    }>;
+}
+/**
+ * `<lyra-stepper>` — ordered multi-step wizard/form navigation: label + index per step,
+ * current/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome
+ * equivalent). Fully data-driven and controlled, like `lyra-table`'s `columns`/`rows` -- it never
+ * mutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable
+ * `lyra-step-select`, and the host decides whether/how `steps` changes in response (mirroring
+ * `lyra-dialog-close`'s cancelable-event convention).
+ *
+ * @customElement lyra-stepper
+ * @event lyra-step-select - Fired on click, or Enter/Space while focused, on a non-`disabled`
+ *   step. `detail: { index, id }`. Cancelable, though this component takes no default action of
+ *   its own to prevent (it never mutates `steps`) -- `preventDefault()` is available for a host
+ *   that wants a single place to short-circuit its own listener's follow-up work.
+ * @csspart base - The root wrapper.
+ * @csspart step - A single step button.
+ * @csspart step-index - The numbered index chip, shown for `pending`/`current`/`error` steps.
+ * @csspart step-check - The completed-checkmark glyph, shown for `completed` steps instead of `step-index`.
+ * @csspart step-label - The step's label text.
+ */
+export declare class LyraStepper extends LyraElement<LyraStepperEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Ordered step data. Never mutated by this component -- see the class doc's controlled-
+     *  component contract. Empty (the default) renders nothing. */
+    steps: StepItem[];
+    /** `'horizontal'` (the default) lays steps out in a row (Left/Right, RTL-aware, to navigate);
+     *  `'vertical'` stacks them (Up/Down navigate instead, no RTL swap needed). */
+    orientation: 'horizontal' | 'vertical';
+    private selectStep;
+    private focusStep;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-stepper': LyraStepper;
+    }
+}
+//# sourceMappingURL=stepper.class.d.ts.map

package/dist/components/stepper/stepper.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.class.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnF,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChE;AAqBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,WAAY,SAAQ,WAAW,CAAC,mBAAmB,CAAC;IAC/D,MAAM,CAAC,MAAM,iCAAgC;IAE7C;mEAC+D;IAC/B,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvD;mFAC+E;IAClD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEnF,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,SAAS,CAuCf;IAEF,MAAM,IAAI,cAAc,CAyBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/components/stepper/stepper.class.js

@@ -0,0 +1,138 @@
+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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { isRtl } from '../../internal/rtl.js';
+import { styles } from './stepper.styles.js';
+const GLYPH_VIEW_BOX = '0 0 24 24';
+const GLYPH_STROKE_WIDTH = '1.75';
+function checkmarkGlyph() {
+    return html `<svg
+    part="step-check"
+    width="1em"
+    height="1em"
+    viewBox=${GLYPH_VIEW_BOX}
+    fill="none"
+    stroke="currentColor"
+    stroke-width=${GLYPH_STROKE_WIDTH}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>`;
+}
+/**
+ * `<lyra-stepper>` — ordered multi-step wizard/form navigation: label + index per step,
+ * current/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome
+ * equivalent). Fully data-driven and controlled, like `lyra-table`'s `columns`/`rows` -- it never
+ * mutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable
+ * `lyra-step-select`, and the host decides whether/how `steps` changes in response (mirroring
+ * `lyra-dialog-close`'s cancelable-event convention).
+ *
+ * @customElement lyra-stepper
+ * @event lyra-step-select - Fired on click, or Enter/Space while focused, on a non-`disabled`
+ *   step. `detail: { index, id }`. Cancelable, though this component takes no default action of
+ *   its own to prevent (it never mutates `steps`) -- `preventDefault()` is available for a host
+ *   that wants a single place to short-circuit its own listener's follow-up work.
+ * @csspart base - The root wrapper.
+ * @csspart step - A single step button.
+ * @csspart step-index - The numbered index chip, shown for `pending`/`current`/`error` steps.
+ * @csspart step-check - The completed-checkmark glyph, shown for `completed` steps instead of `step-index`.
+ * @csspart step-label - The step's label text.
+ */
+export class LyraStepper extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Ordered step data. Never mutated by this component -- see the class doc's controlled-
+         *  component contract. Empty (the default) renders nothing. */
+        this.steps = [];
+        /** `'horizontal'` (the default) lays steps out in a row (Left/Right, RTL-aware, to navigate);
+         *  `'vertical'` stacks them (Up/Down navigate instead, no RTL swap needed). */
+        this.orientation = 'horizontal';
+        this.onKeyDown = (e) => {
+            const navigable = this.steps.filter((s) => s.state !== 'disabled');
+            if (navigable.length === 0)
+                return;
+            const focused = this.renderRoot.activeElement;
+            const currentId = focused?.dataset.id;
+            const currentIndex = navigable.findIndex((s) => s.id === currentId);
+            const vertical = this.orientation === 'vertical';
+            const rtl = !vertical && isRtl(this);
+            const forwardKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+            let targetIndex;
+            switch (e.key) {
+                case forwardKey:
+                    targetIndex = Math.min(navigable.length - 1, (currentIndex < 0 ? -1 : currentIndex) + 1);
+                    break;
+                case backwardKey:
+                    targetIndex = Math.max(0, (currentIndex < 0 ? 1 : currentIndex) - 1);
+                    break;
+                case 'Home':
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    targetIndex = navigable.length - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (currentIndex >= 0) {
+                        const idx = this.steps.findIndex((s) => s.id === navigable[currentIndex].id);
+                        this.selectStep(navigable[currentIndex], idx);
+                    }
+                    return;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = navigable[targetIndex];
+            this.focusStep(target.id);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    selectStep(step, index) {
+        if (step.state === 'disabled')
+            return;
+        this.emit('lyra-step-select', { index, id: step.id }, { cancelable: true });
+    }
+    focusStep(id) {
+        const button = this.renderRoot.querySelector(`[part="step"][data-id="${id}"]`);
+        button?.focus();
+    }
+    render() {
+        return html `
+      <div part="base" role="tablist" aria-orientation=${this.orientation} @keydown=${this.onKeyDown}>
+        ${repeat(this.steps, (step) => step.id, (step, index) => html `<button
+            type="button"
+            part="step"
+            data-id=${step.id}
+            data-state=${step.state}
+            role="tab"
+            aria-current=${step.state === 'current' ? 'step' : nothing}
+            aria-disabled=${step.state === 'disabled' ? 'true' : 'false'}
+            tabindex=${step.state === 'current' ? '0' : '-1'}
+            @click=${() => this.selectStep(step, index)}
+          >
+            ${step.state === 'completed'
+            ? checkmarkGlyph()
+            : html `<span part="step-index">${index + 1}</span>`}
+            <span part="step-label">${step.label}</span>
+          </button>`)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraStepper.prototype, "steps", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraStepper.prototype, "orientation", void 0);
+//# sourceMappingURL=stepper.class.js.map

package/dist/components/stepper/stepper.class.js.map

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

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,2 @@
+export * from './stepper.class.js';
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/stepper/stepper.js

@@ -0,0 +1,5 @@
+export * from './stepper.class.js';
+import { LyraStepper } from './stepper.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('stepper', LyraStepper);
+//# sourceMappingURL=stepper.js.map

package/dist/components/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC"}

package/dist/components/stepper/stepper.styles.d.ts

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

package/dist/components/stepper/stepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgElB,CAAC"}