@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-stepper.mjs

@@ -0,0 +1,536 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, numberAttribute, booleanAttribute, output, signal, computed, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, forwardRef, ElementRef, HostAttributeToken, effect, Directive } from '@angular/core';
+import { injectMessages, injectLocale } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { stepperMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { stepPercent, stepStatus, stepReachable, stepFocusIndex } from '@slotted/core/steps';
+
+const STEPPER_DEFAULT_ORIENTATION = 'horizontal';
+const STEPPER_DEFAULT_LABEL_PLACEMENT = 'end';
+const STEPPER_DEFAULT_NAVIGATION = 'button';
+const STEPPER_DEFAULTS_TOKEN = new InjectionToken('slotted stepper defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An application decides once which way its flows run, where the labels sit,
+ * whether a header can be pressed, and whether the order is enforced. A
+ * stepper that states any of those itself still wins: an explicit input is
+ * never overridden by the token. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideStepperDefaults(defaults) {
+    return { provide: STEPPER_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectStepperDefaults() {
+    return inject(STEPPER_DEFAULTS_TOKEN);
+}
+
+let counter = 0;
+/**
+ * Where the reader is in a sequence of steps, which steps they may reach, and
+ * the panel belonging to the step they are on.
+ *
+ * **It refuses the tab role.** Angular Material gives a horizontal stepper
+ * `role="tablist"`; section 7 of the feature guide forbids it in the Tabs entry
+ * itself — tabs are for peer views in one context, not for the steps of a
+ * process. What replaces it is `ol` and `li` for the sequence,
+ * `aria-current="step"` for where the reader is, and a visually hidden status
+ * inside each header so a reader hears "Step 2 of 5, completed" rather than
+ * "2".
+ *
+ * **It validates nothing.** A consumer refuses a move by cancelling the change
+ * request, which every mutable value in this library already carries. Zag ships
+ * `isStepValid` and `onStepInvalid` for that job; this family needs neither.
+ *
+ * **It never claims completion.** `complete` is the consumer's fact about one
+ * step; `autoComplete` is the shorthand for the flow where reaching step three
+ * does mean the first two are done, and it is off.
+ */
+class SlStepper {
+    /** Present means controlled, for the life of the component. */
+    stepValue = input(undefined, { ...(ngDevMode ? { debugName: "stepValue" } : /* istanbul ignore next */ {}), alias: 'step', transform: optionalNumber });
+    /** What an uncontrolled stepper starts from, read once. */
+    defaultStep = input(0, { ...(ngDevMode ? { debugName: "defaultStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * list's name (`label`), the position, and the status each step announces.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    labelPlacement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    navigation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    autoComplete = input(false, { ...(ngDevMode ? { debugName: "autoComplete" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emitted before the step moves, carrying what it replaces, the reason and
+     * the event. It is not the second half of a two-way binding: one slot can
+     * carry none of those, and cancelling the request is how a consumer refuses
+     * a move.
+     */
+    stepChange = output();
+    defaults = injectStepperDefaults();
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    steps = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    id = `slotted-stepper-${(counter += 1)}`;
+    step = computed(() => this.stepValue() ?? this.own() ?? this.defaultStep(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    count = computed(() => this.steps().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    orientationValue = computed(() => this.orientation() ?? this.defaults.orientation ?? STEPPER_DEFAULT_ORIENTATION, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientationValue" }] : /* istanbul ignore next */ []));
+    labelPlacementValue = computed(() => this.labelPlacement() ?? this.defaults.labelPlacement ?? STEPPER_DEFAULT_LABEL_PLACEMENT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacementValue" }] : /* istanbul ignore next */ []));
+    navigationValue = computed(() => this.navigation() ?? this.defaults.navigation ?? STEPPER_DEFAULT_NAVIGATION, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationValue" }] : /* istanbul ignore next */ []));
+    linearValue = computed(() => this.linear() || this.defaults.linear === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linearValue" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this stepper's `messages` laid over them. */
+    t = injectMessages(stepperMessages, this.messages);
+    /** The locale in force: what the descriptors a step announces are listed in. */
+    locale = injectLocale();
+    /** How far along the row the reader has travelled, nought to a hundred. */
+    percent = computed(() => stepPercent({ count: this.count(), step: this.step() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    canGoPrevious = computed(() => this.step() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
+    canGoNext = computed(() => this.count() > 0 && this.step() < this.count() - 1 && this.reachable(this.step() + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+    register(steps) {
+        this.steps.set(steps);
+    }
+    statusOf(index) {
+        return stepStatus({
+            autoComplete: this.autoComplete(),
+            complete: this.steps()[index]?.complete(),
+            index,
+            step: this.step(),
+        });
+    }
+    reachable(index) {
+        return stepReachable({
+            autoComplete: this.autoComplete(),
+            complete: this.steps()[index]?.complete(),
+            count: this.count(),
+            disabled: this.steps()[index]?.disabled(),
+            index,
+            isComplete: (candidate) => this.statusOf(candidate) === 'complete',
+            linear: this.linearValue(),
+            step: this.step(),
+        });
+    }
+    goToStep(next, reason = 'pointer', source) {
+        if (next < 0 || (this.count() > 0 && next >= this.count()))
+            return;
+        const state = createControllable({
+            controlled: untracked(() => this.stepValue()),
+            initial: untracked(() => this.step()),
+            onRequest: (request) => this.stepChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.own.set(next);
+    }
+    next(reason = 'pointer', source) {
+        this.goToStep(this.step() + 1, reason, source);
+    }
+    previous(reason = 'pointer', source) {
+        this.goToStep(this.step() - 1, reason, source);
+    }
+    reset(source) {
+        this.goToStep(this.defaultStep(), 'programmatic', source);
+    }
+    triggerId(index) {
+        return `${this.id}-trigger-${index}`;
+    }
+    panelId(index) {
+        return `${this.id}-panel-${index}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlStepper, isStandalone: true, selector: "[slStepper]", inputs: { stepValue: { classPropertyName: "stepValue", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, defaultStep: { classPropertyName: "defaultStep", publicName: "defaultStep", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, host: { attributes: { "data-ui": "stepper", "data-part": "root" }, properties: { "attr.data-orientation": "orientationValue()", "attr.data-label-placement": "labelPlacementValue()", "attr.data-navigation": "navigationValue()" } }, exportAs: ["slStepper"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=stepper]{--_marker: var(--slotted-stepper-marker-size, var(--slotted-control-height-md, 34px));--_gap: var(--slotted-stepper-gap, var(--slotted-control-gap-md, 8px));--_rule: var(--slotted-stepper-connector-thickness, var(--slotted-border-width-thick, 2px));--_muted: var(--slotted-stepper-color-muted, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-stepper-color, var(--slotted-text, CanvasText));--_pending-line: var(--slotted-stepper-connector-color, var(--slotted-border-subtle, GrayText));--_pending-ring: var( --slotted-stepper-marker-border, var(--slotted-control-border-color, ButtonBorder) );--_done-line: var( --slotted-stepper-connector-color-complete, var(--slotted-tone-accent-solid, Highlight) );--_state-press: color-mix( in oklab, var(--_strong) var(--slotted-stepper-marker-press-strength, 14%), transparent );color:var(--_strong);container-name:slotted-stepper;container-type:inline-size;display:block;font-family:var(--slotted-stepper-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-stepper-font-size, var(--slotted-control-font-size-md, 13px))}[data-ui=stepper] [data-part=list]{display:flex;list-style:none;margin:0;padding:0}[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:flex-start;flex-direction:row}[data-ui=stepper][data-orientation=vertical] [data-part=list]{flex-direction:column}[data-ui=stepper] [data-part=item]{display:flex;position:relative}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:1 1 0;min-inline-size:0}[data-ui=stepper][data-orientation=vertical] [data-part=item]{flex-direction:column}[data-ui=stepper] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-stepper-radius, var(--slotted-control-radius, 4px));color:inherit;column-gap:var(--_gap);display:flex;font:inherit;padding:0;text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] button[data-part=trigger],[data-ui=stepper] a[data-part=trigger]{cursor:pointer}[data-ui=stepper][data-label-placement=bottom] [data-part=trigger]{align-items:center;flex-direction:column;padding-inline:var(--slotted-stepper-column-inset, var(--slotted-space-3, .375rem));row-gap:var(--slotted-stepper-label-gap, var(--slotted-space-3, .375rem));text-align:center}[data-ui=stepper] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=stepper] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-complete, var(--slotted-tone-accent-on-solid, HighlightText) );--_mark-size: var(--slotted-stepper-glyph-size, var(--slotted-control-icon-size-md, 16px));align-items:center;background-color:var(--slotted-stepper-marker-surface, transparent);block-size:var(--_marker);border:var(--_rule) solid var(--_pending-ring);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--_muted);display:flex;flex:none;font-variant-numeric:tabular-nums;font-weight:var(--slotted-stepper-marker-weight, var(--slotted-font-weight-semibold, 600));inline-size:var(--_marker);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] [data-current] [data-part=marker]{border-color:var(--slotted-stepper-marker-border-current, var(--_done-line));color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-complete]:not([data-current],[data-invalid]) [data-part=marker]{background-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line));border-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line))}[data-ui=stepper] [data-invalid] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-invalid, var(--slotted-tone-danger-on-solid, MarkText) );background-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) );border-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=marker]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] :is([data-complete],[data-invalid]) [data-part=marker]{color:transparent}[data-ui=stepper] [data-part=marker]>[data-ui=icon]{--slotted-icon-size: var(--_mark-size);color:var(--_mark);inset:0;margin:auto;position:absolute}[data-ui=stepper] [data-current]:not([data-invalid]) [data-part=marker]{color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-part=label]{color:var(--_muted);font-weight:var(--slotted-stepper-label-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere}[data-ui=stepper] :is([data-current],[data-complete]) [data-part=label]{color:var(--_strong)}[data-ui=stepper] [data-invalid] [data-part=label]{color:var(--slotted-stepper-label-color-invalid, var(--slotted-tone-danger-text, MarkText))}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=label]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] [data-part=description]{color:var(--_muted);display:block;font-size:var(--slotted-stepper-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));margin-block-start:var(--slotted-stepper-description-gap, var(--slotted-space-1, .125rem))}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:hover [data-part=label]{color:var(--_strong);text-decoration-color:currentColor;text-decoration-line:underline;text-underline-offset:var(--slotted-stepper-underline-offset, .2em)}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:active [data-part=marker]{box-shadow:inset 0 0 0 var(--_marker) var(--_state-press)}[data-ui=stepper] [data-part=separator]{background-color:var(--_pending-line);display:block;flex:none}[data-ui=stepper] [data-part=separator][data-complete]{background-color:var(--_done-line)}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=separator]{align-self:center;block-size:var(--_rule);flex:1 1 auto;margin-inline:var(--slotted-stepper-track-gap, var(--slotted-space-5, .75rem));min-inline-size:var(--slotted-stepper-track-min, var(--slotted-space-8, 1.5rem));position:static}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=trigger]{flex:0 1 auto;min-inline-size:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=separator]{block-size:var(--_rule);inset-block-start:calc(.5 * (var(--_marker) - var(--_rule)));inset-inline-end:calc(-50% + .5 * var(--_marker) + var(--_gap));inset-inline-start:calc(50% + .5 * var(--_marker) + var(--_gap));position:absolute}[data-ui=stepper][data-orientation=vertical] [data-part=separator]{--_rule-room: var(--slotted-stepper-connector-gap, var(--slotted-space-2, .25rem));inline-size:var(--_rule);inset-block-end:var(--_rule-room);inset-block-start:calc(var(--_marker) + var(--_rule-room));inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));position:absolute}[data-ui=stepper] [data-part=item]:last-child [data-part=separator]{display:none}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=trigger]{inline-size:100%}[data-ui=stepper][data-orientation=vertical] [data-part=item]{padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper][data-orientation=vertical] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=vertical] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}[data-ui=stepper][data-orientation=horizontal] [data-part=panel]{padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper] [data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-stepper (max-width: 30rem){[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:stretch;flex-direction:column}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:none;flex-direction:column;padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));padding-inline-end:0}[data-ui=stepper][data-orientation=horizontal] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=trigger]{align-items:center;flex-direction:row;inline-size:auto;padding-inline:0;text-align:start}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=separator]{block-size:auto;flex:none;inline-size:var(--_rule);inset-block-end:0;inset-block-start:calc(var(--_marker) + var(--_gap));inset-inline-end:auto;inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));margin-inline:0;min-inline-size:0;position:absolute}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}}@media(forced-colors:active){[data-ui=stepper] [data-part=separator]{background-color:GrayText}[data-ui=stepper] [data-part=separator][data-complete]{background-color:Highlight}[data-ui=stepper] :is([data-complete],[data-invalid]):not([data-current]) [data-part=marker]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepper, decorators: [{
+            type: Component,
+            args: [{ selector: '[slStepper]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slStepper', host: {
+                        'data-ui': 'stepper',
+                        'data-part': 'root',
+                        '[attr.data-orientation]': 'orientationValue()',
+                        '[attr.data-label-placement]': 'labelPlacementValue()',
+                        '[attr.data-navigation]': 'navigationValue()',
+                    }, styles: ["@layer slotted.components{[data-ui=stepper]{--_marker: var(--slotted-stepper-marker-size, var(--slotted-control-height-md, 34px));--_gap: var(--slotted-stepper-gap, var(--slotted-control-gap-md, 8px));--_rule: var(--slotted-stepper-connector-thickness, var(--slotted-border-width-thick, 2px));--_muted: var(--slotted-stepper-color-muted, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-stepper-color, var(--slotted-text, CanvasText));--_pending-line: var(--slotted-stepper-connector-color, var(--slotted-border-subtle, GrayText));--_pending-ring: var( --slotted-stepper-marker-border, var(--slotted-control-border-color, ButtonBorder) );--_done-line: var( --slotted-stepper-connector-color-complete, var(--slotted-tone-accent-solid, Highlight) );--_state-press: color-mix( in oklab, var(--_strong) var(--slotted-stepper-marker-press-strength, 14%), transparent );color:var(--_strong);container-name:slotted-stepper;container-type:inline-size;display:block;font-family:var(--slotted-stepper-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-stepper-font-size, var(--slotted-control-font-size-md, 13px))}[data-ui=stepper] [data-part=list]{display:flex;list-style:none;margin:0;padding:0}[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:flex-start;flex-direction:row}[data-ui=stepper][data-orientation=vertical] [data-part=list]{flex-direction:column}[data-ui=stepper] [data-part=item]{display:flex;position:relative}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:1 1 0;min-inline-size:0}[data-ui=stepper][data-orientation=vertical] [data-part=item]{flex-direction:column}[data-ui=stepper] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-stepper-radius, var(--slotted-control-radius, 4px));color:inherit;column-gap:var(--_gap);display:flex;font:inherit;padding:0;text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] button[data-part=trigger],[data-ui=stepper] a[data-part=trigger]{cursor:pointer}[data-ui=stepper][data-label-placement=bottom] [data-part=trigger]{align-items:center;flex-direction:column;padding-inline:var(--slotted-stepper-column-inset, var(--slotted-space-3, .375rem));row-gap:var(--slotted-stepper-label-gap, var(--slotted-space-3, .375rem));text-align:center}[data-ui=stepper] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=stepper] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-complete, var(--slotted-tone-accent-on-solid, HighlightText) );--_mark-size: var(--slotted-stepper-glyph-size, var(--slotted-control-icon-size-md, 16px));align-items:center;background-color:var(--slotted-stepper-marker-surface, transparent);block-size:var(--_marker);border:var(--_rule) solid var(--_pending-ring);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--_muted);display:flex;flex:none;font-variant-numeric:tabular-nums;font-weight:var(--slotted-stepper-marker-weight, var(--slotted-font-weight-semibold, 600));inline-size:var(--_marker);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] [data-current] [data-part=marker]{border-color:var(--slotted-stepper-marker-border-current, var(--_done-line));color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-complete]:not([data-current],[data-invalid]) [data-part=marker]{background-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line));border-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line))}[data-ui=stepper] [data-invalid] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-invalid, var(--slotted-tone-danger-on-solid, MarkText) );background-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) );border-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=marker]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] :is([data-complete],[data-invalid]) [data-part=marker]{color:transparent}[data-ui=stepper] [data-part=marker]>[data-ui=icon]{--slotted-icon-size: var(--_mark-size);color:var(--_mark);inset:0;margin:auto;position:absolute}[data-ui=stepper] [data-current]:not([data-invalid]) [data-part=marker]{color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-part=label]{color:var(--_muted);font-weight:var(--slotted-stepper-label-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere}[data-ui=stepper] :is([data-current],[data-complete]) [data-part=label]{color:var(--_strong)}[data-ui=stepper] [data-invalid] [data-part=label]{color:var(--slotted-stepper-label-color-invalid, var(--slotted-tone-danger-text, MarkText))}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=label]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] [data-part=description]{color:var(--_muted);display:block;font-size:var(--slotted-stepper-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));margin-block-start:var(--slotted-stepper-description-gap, var(--slotted-space-1, .125rem))}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:hover [data-part=label]{color:var(--_strong);text-decoration-color:currentColor;text-decoration-line:underline;text-underline-offset:var(--slotted-stepper-underline-offset, .2em)}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:active [data-part=marker]{box-shadow:inset 0 0 0 var(--_marker) var(--_state-press)}[data-ui=stepper] [data-part=separator]{background-color:var(--_pending-line);display:block;flex:none}[data-ui=stepper] [data-part=separator][data-complete]{background-color:var(--_done-line)}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=separator]{align-self:center;block-size:var(--_rule);flex:1 1 auto;margin-inline:var(--slotted-stepper-track-gap, var(--slotted-space-5, .75rem));min-inline-size:var(--slotted-stepper-track-min, var(--slotted-space-8, 1.5rem));position:static}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=trigger]{flex:0 1 auto;min-inline-size:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=separator]{block-size:var(--_rule);inset-block-start:calc(.5 * (var(--_marker) - var(--_rule)));inset-inline-end:calc(-50% + .5 * var(--_marker) + var(--_gap));inset-inline-start:calc(50% + .5 * var(--_marker) + var(--_gap));position:absolute}[data-ui=stepper][data-orientation=vertical] [data-part=separator]{--_rule-room: var(--slotted-stepper-connector-gap, var(--slotted-space-2, .25rem));inline-size:var(--_rule);inset-block-end:var(--_rule-room);inset-block-start:calc(var(--_marker) + var(--_rule-room));inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));position:absolute}[data-ui=stepper] [data-part=item]:last-child [data-part=separator]{display:none}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=trigger]{inline-size:100%}[data-ui=stepper][data-orientation=vertical] [data-part=item]{padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper][data-orientation=vertical] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=vertical] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}[data-ui=stepper][data-orientation=horizontal] [data-part=panel]{padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper] [data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-stepper (max-width: 30rem){[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:stretch;flex-direction:column}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:none;flex-direction:column;padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));padding-inline-end:0}[data-ui=stepper][data-orientation=horizontal] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=trigger]{align-items:center;flex-direction:row;inline-size:auto;padding-inline:0;text-align:start}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=separator]{block-size:auto;flex:none;inline-size:var(--_rule);inset-block-end:0;inset-block-start:calc(var(--_marker) + var(--_gap));inset-inline-end:auto;inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));margin-inline:0;min-inline-size:0;position:absolute}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}}@media(forced-colors:active){[data-ui=stepper] [data-part=separator]{background-color:GrayText}[data-ui=stepper] [data-part=separator][data-complete]{background-color:Highlight}[data-ui=stepper] :is([data-complete],[data-invalid]):not([data-current]) [data-part=marker]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], propDecorators: { stepValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], defaultStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultStep", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
+/**
+ * The ordered list, and the one part that knows how many steps there are.
+ *
+ * The keyboard is handled here rather than on each header, because the
+ * destination of an arrow is another header and only the list knows them all.
+ * Every header stays in the tab sequence: the arrows are added on top of it
+ * rather than replacing it with a roving tab stop, which is the model a
+ * `tablist` has and the model this family declined.
+ */
+class SlStepperList {
+    stepper = inject(SlStepper);
+    /* The step is declared below this class, and the dev-server transform puts
+       the query predicate in a static initializer — a direct reference would read
+       the binding before it exists. `forwardRef` defers the read to the query. */
+    items = contentChildren(forwardRef(() => SlStepperStep), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    element = inject((ElementRef)).nativeElement;
+    ownLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    accessibleLabel = computed(() => this.ownLabel ?? this.stepper.t('label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const items = this.items();
+            this.stepper.register(items);
+            for (const [index, item] of items.entries()) {
+                item.index.set(index);
+                item.last.set(index === items.length - 1);
+            }
+        });
+    }
+    onKeydown(event) {
+        const trigger = event.target?.closest?.('[data-part="trigger"]');
+        const from = Number(trigger?.getAttribute('data-index') ?? -1);
+        if (!Number.isInteger(from) || from < 0)
+            return;
+        const view = this.element.ownerDocument.defaultView;
+        const direction = view?.getComputedStyle(this.element).direction === 'rtl' ? 'rtl' : 'ltr';
+        /**
+         * Every header, reachable or not. The arrows move focus exactly where Tab
+         * moves it, because that is the whole reason they were added on top of the
+         * tab sequence: a step a linear flow has not opened is still one a reader
+         * is allowed to find.
+         */
+        const next = stepFocusIndex({
+            count: this.stepper.count(),
+            direction,
+            from,
+            key: event.key,
+            orientation: this.stepper.orientationValue(),
+        });
+        if (next === -1)
+            return;
+        event.preventDefault();
+        this.element.ownerDocument.getElementById(this.stepper.triggerId(next))?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.7", type: SlStepperList, isStandalone: true, selector: "ol[slStepperList]", host: { attributes: { "data-part": "list" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "accessibleLabel()" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => SlStepperStep), isSignal: true }], exportAs: ["slStepperList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ol[slStepperList]',
+                    standalone: true,
+                    exportAs: 'slStepperList',
+                    host: {
+                        'data-part': 'list',
+                        '[attr.aria-label]': 'accessibleLabel()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => SlStepperStep), { isSignal: true }] }] } });
+/**
+ * One step: its marker, its name, the second line under it, and the connector
+ * that runs to the next one.
+ *
+ * A step a linear flow has not reached carries `aria-disabled` rather than
+ * `disabled`, so it stays in the tab sequence: a reader can find out the step
+ * exists and that it is not yet available.
+ */
+class SlStepperStep {
+    stepper = inject(SlStepper);
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    complete = input(undefined, { ...(ngDevMode ? { debugName: "complete" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    href = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Written by the list, the only part that can see the whole sequence. */
+    index = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    last = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.index() === this.stepper.step(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    travelled = computed(() => this.index() < this.stepper.step(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "travelled" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.stepper.statusOf(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    unreachable = computed(() => this.disabled() === true || !this.stepper.reachable(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unreachable" }] : /* istanbul ignore next */ []));
+    /**
+     * The glyph drawn over the number: a cross for a step in error, a check for
+     * a finished one the reader has left. The current step keeps its number
+     * even when it is also complete, because the number is what says where the
+     * reader is.
+     */
+    mark = computed(() => this.invalid() ? 'x' : this.status() === 'complete' && !this.current() ? 'check' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+    /** A list of descriptors, written the way the locale in force lists them. */
+    announced = computed(() => {
+        const t = this.stepper.t;
+        const state = this.invalid()
+            ? t('invalid')
+            : this.current()
+                ? t('current')
+                : this.status() === 'complete'
+                    ? t('complete')
+                    : undefined;
+        return new Intl.ListFormat(this.stepper.locale(), { type: 'unit' }).format([
+            t('position', { index: this.index() + 1, count: this.stepper.count() }),
+            state,
+            this.loading() ? t('loading') : undefined,
+            this.unreachable() && !this.current() ? t('unavailable') : undefined,
+        ].filter((part) => part !== undefined));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announced" }] : /* istanbul ignore next */ []));
+    activate(event) {
+        if (this.unreachable() || this.loading())
+            return;
+        this.stepper.goToStep(this.index(), 'pointer', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlStepperStep, isStandalone: true, selector: "li[slStepperStep]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, complete: { classPropertyName: "complete", publicName: "complete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-current": "current() ? \"\" : null", "attr.data-complete": "status() === \"complete\" ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-disabled": "unreachable() ? \"\" : null" } }, exportAs: ["slStepperStep"], ngImport: i0, template: `
+    @switch (stepper.navigationValue()) {
+      @case ('none') {
+        <span
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.data-index]="index()"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </span>
+      }
+      @case ('link') {
+        <a
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.aria-disabled]="unreachable() ? 'true' : null"
+          [attr.data-index]="index()"
+          [attr.href]="unreachable() ? null : (href() ?? null)"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+          (click)="activate($event)"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </a>
+      }
+      @default {
+        <button
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.aria-disabled]="unreachable() ? 'true' : null"
+          [attr.data-index]="index()"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+          type="button"
+          (click)="activate($event)"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </button>
+      }
+    }
+    <ng-content></ng-content>
+    @if (!last()) {
+      <span
+        [attr.data-complete]="travelled() ? '' : null"
+        aria-hidden="true"
+        data-part="separator"
+      ></span>
+    }
+
+    <ng-template #header>
+      <span aria-hidden="true" data-part="marker"
+        >{{ index() + 1 }}
+        @if (mark(); as mark) {
+          <span slIcon><svg slGlyph [name]="mark"></svg></span>
+        }
+      </span>
+      <span data-part="label">
+        {{ label() }}
+        @if (description()) {
+          <span data-part="description">{{ description() }}</span>
+        }
+      </span>
+      <!--
+        The visible name and this run concatenate into one accessible name, and
+        nothing separates two elements' text: without the comma a reader hears
+        "CartStep 1 of 4".
+      -->
+      <span data-part="status" data-ui="visually-hidden">{{ ', ' + announced() }}</span>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=stepper]{--_marker: var(--slotted-stepper-marker-size, var(--slotted-control-height-md, 34px));--_gap: var(--slotted-stepper-gap, var(--slotted-control-gap-md, 8px));--_rule: var(--slotted-stepper-connector-thickness, var(--slotted-border-width-thick, 2px));--_muted: var(--slotted-stepper-color-muted, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-stepper-color, var(--slotted-text, CanvasText));--_pending-line: var(--slotted-stepper-connector-color, var(--slotted-border-subtle, GrayText));--_pending-ring: var( --slotted-stepper-marker-border, var(--slotted-control-border-color, ButtonBorder) );--_done-line: var( --slotted-stepper-connector-color-complete, var(--slotted-tone-accent-solid, Highlight) );--_state-press: color-mix( in oklab, var(--_strong) var(--slotted-stepper-marker-press-strength, 14%), transparent );color:var(--_strong);container-name:slotted-stepper;container-type:inline-size;display:block;font-family:var(--slotted-stepper-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-stepper-font-size, var(--slotted-control-font-size-md, 13px))}[data-ui=stepper] [data-part=list]{display:flex;list-style:none;margin:0;padding:0}[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:flex-start;flex-direction:row}[data-ui=stepper][data-orientation=vertical] [data-part=list]{flex-direction:column}[data-ui=stepper] [data-part=item]{display:flex;position:relative}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:1 1 0;min-inline-size:0}[data-ui=stepper][data-orientation=vertical] [data-part=item]{flex-direction:column}[data-ui=stepper] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-stepper-radius, var(--slotted-control-radius, 4px));color:inherit;column-gap:var(--_gap);display:flex;font:inherit;padding:0;text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] button[data-part=trigger],[data-ui=stepper] a[data-part=trigger]{cursor:pointer}[data-ui=stepper][data-label-placement=bottom] [data-part=trigger]{align-items:center;flex-direction:column;padding-inline:var(--slotted-stepper-column-inset, var(--slotted-space-3, .375rem));row-gap:var(--slotted-stepper-label-gap, var(--slotted-space-3, .375rem));text-align:center}[data-ui=stepper] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=stepper] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-complete, var(--slotted-tone-accent-on-solid, HighlightText) );--_mark-size: var(--slotted-stepper-glyph-size, var(--slotted-control-icon-size-md, 16px));align-items:center;background-color:var(--slotted-stepper-marker-surface, transparent);block-size:var(--_marker);border:var(--_rule) solid var(--_pending-ring);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--_muted);display:flex;flex:none;font-variant-numeric:tabular-nums;font-weight:var(--slotted-stepper-marker-weight, var(--slotted-font-weight-semibold, 600));inline-size:var(--_marker);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] [data-current] [data-part=marker]{border-color:var(--slotted-stepper-marker-border-current, var(--_done-line));color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-complete]:not([data-current],[data-invalid]) [data-part=marker]{background-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line));border-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line))}[data-ui=stepper] [data-invalid] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-invalid, var(--slotted-tone-danger-on-solid, MarkText) );background-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) );border-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=marker]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] :is([data-complete],[data-invalid]) [data-part=marker]{color:transparent}[data-ui=stepper] [data-part=marker]>[data-ui=icon]{--slotted-icon-size: var(--_mark-size);color:var(--_mark);inset:0;margin:auto;position:absolute}[data-ui=stepper] [data-current]:not([data-invalid]) [data-part=marker]{color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-part=label]{color:var(--_muted);font-weight:var(--slotted-stepper-label-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere}[data-ui=stepper] :is([data-current],[data-complete]) [data-part=label]{color:var(--_strong)}[data-ui=stepper] [data-invalid] [data-part=label]{color:var(--slotted-stepper-label-color-invalid, var(--slotted-tone-danger-text, MarkText))}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=label]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] [data-part=description]{color:var(--_muted);display:block;font-size:var(--slotted-stepper-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));margin-block-start:var(--slotted-stepper-description-gap, var(--slotted-space-1, .125rem))}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:hover [data-part=label]{color:var(--_strong);text-decoration-color:currentColor;text-decoration-line:underline;text-underline-offset:var(--slotted-stepper-underline-offset, .2em)}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:active [data-part=marker]{box-shadow:inset 0 0 0 var(--_marker) var(--_state-press)}[data-ui=stepper] [data-part=separator]{background-color:var(--_pending-line);display:block;flex:none}[data-ui=stepper] [data-part=separator][data-complete]{background-color:var(--_done-line)}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=separator]{align-self:center;block-size:var(--_rule);flex:1 1 auto;margin-inline:var(--slotted-stepper-track-gap, var(--slotted-space-5, .75rem));min-inline-size:var(--slotted-stepper-track-min, var(--slotted-space-8, 1.5rem));position:static}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=trigger]{flex:0 1 auto;min-inline-size:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=separator]{block-size:var(--_rule);inset-block-start:calc(.5 * (var(--_marker) - var(--_rule)));inset-inline-end:calc(-50% + .5 * var(--_marker) + var(--_gap));inset-inline-start:calc(50% + .5 * var(--_marker) + var(--_gap));position:absolute}[data-ui=stepper][data-orientation=vertical] [data-part=separator]{--_rule-room: var(--slotted-stepper-connector-gap, var(--slotted-space-2, .25rem));inline-size:var(--_rule);inset-block-end:var(--_rule-room);inset-block-start:calc(var(--_marker) + var(--_rule-room));inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));position:absolute}[data-ui=stepper] [data-part=item]:last-child [data-part=separator]{display:none}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=trigger]{inline-size:100%}[data-ui=stepper][data-orientation=vertical] [data-part=item]{padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper][data-orientation=vertical] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=vertical] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}[data-ui=stepper][data-orientation=horizontal] [data-part=panel]{padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper] [data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-stepper (max-width: 30rem){[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:stretch;flex-direction:column}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:none;flex-direction:column;padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));padding-inline-end:0}[data-ui=stepper][data-orientation=horizontal] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=trigger]{align-items:center;flex-direction:row;inline-size:auto;padding-inline:0;text-align:start}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=separator]{block-size:auto;flex:none;inline-size:var(--_rule);inset-block-end:0;inset-block-start:calc(var(--_marker) + var(--_gap));inset-inline-end:auto;inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));margin-inline:0;min-inline-size:0;position:absolute}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}}@media(forced-colors:active){[data-ui=stepper] [data-part=separator]{background-color:GrayText}[data-ui=stepper] [data-part=separator][data-complete]{background-color:Highlight}[data-ui=stepper] :is([data-complete],[data-invalid]):not([data-current]) [data-part=marker]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperStep, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[slStepperStep]', standalone: true, imports: [NgTemplateOutlet, SlGlyph, SlIcon], template: `
+    @switch (stepper.navigationValue()) {
+      @case ('none') {
+        <span
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.data-index]="index()"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </span>
+      }
+      @case ('link') {
+        <a
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.aria-disabled]="unreachable() ? 'true' : null"
+          [attr.data-index]="index()"
+          [attr.href]="unreachable() ? null : (href() ?? null)"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+          (click)="activate($event)"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </a>
+      }
+      @default {
+        <button
+          [attr.aria-current]="current() ? 'step' : null"
+          [attr.aria-disabled]="unreachable() ? 'true' : null"
+          [attr.data-index]="index()"
+          [id]="stepper.triggerId(index())"
+          data-part="trigger"
+          type="button"
+          (click)="activate($event)"
+        >
+          <ng-container *ngTemplateOutlet="header"></ng-container>
+        </button>
+      }
+    }
+    <ng-content></ng-content>
+    @if (!last()) {
+      <span
+        [attr.data-complete]="travelled() ? '' : null"
+        aria-hidden="true"
+        data-part="separator"
+      ></span>
+    }
+
+    <ng-template #header>
+      <span aria-hidden="true" data-part="marker"
+        >{{ index() + 1 }}
+        @if (mark(); as mark) {
+          <span slIcon><svg slGlyph [name]="mark"></svg></span>
+        }
+      </span>
+      <span data-part="label">
+        {{ label() }}
+        @if (description()) {
+          <span data-part="description">{{ description() }}</span>
+        }
+      </span>
+      <!--
+        The visible name and this run concatenate into one accessible name, and
+        nothing separates two elements' text: without the comma a reader hears
+        "CartStep 1 of 4".
+      -->
+      <span data-part="status" data-ui="visually-hidden">{{ ', ' + announced() }}</span>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slStepperStep', host: {
+                        'data-part': 'item',
+                        '[attr.data-current]': 'current() ? "" : null',
+                        '[attr.data-complete]': 'status() === "complete" ? "" : null',
+                        '[attr.data-invalid]': 'invalid() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '[attr.data-disabled]': 'unreachable() ? "" : null',
+                    }, styles: ["@layer slotted.components{[data-ui=stepper]{--_marker: var(--slotted-stepper-marker-size, var(--slotted-control-height-md, 34px));--_gap: var(--slotted-stepper-gap, var(--slotted-control-gap-md, 8px));--_rule: var(--slotted-stepper-connector-thickness, var(--slotted-border-width-thick, 2px));--_muted: var(--slotted-stepper-color-muted, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-stepper-color, var(--slotted-text, CanvasText));--_pending-line: var(--slotted-stepper-connector-color, var(--slotted-border-subtle, GrayText));--_pending-ring: var( --slotted-stepper-marker-border, var(--slotted-control-border-color, ButtonBorder) );--_done-line: var( --slotted-stepper-connector-color-complete, var(--slotted-tone-accent-solid, Highlight) );--_state-press: color-mix( in oklab, var(--_strong) var(--slotted-stepper-marker-press-strength, 14%), transparent );color:var(--_strong);container-name:slotted-stepper;container-type:inline-size;display:block;font-family:var(--slotted-stepper-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-stepper-font-size, var(--slotted-control-font-size-md, 13px))}[data-ui=stepper] [data-part=list]{display:flex;list-style:none;margin:0;padding:0}[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:flex-start;flex-direction:row}[data-ui=stepper][data-orientation=vertical] [data-part=list]{flex-direction:column}[data-ui=stepper] [data-part=item]{display:flex;position:relative}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:1 1 0;min-inline-size:0}[data-ui=stepper][data-orientation=vertical] [data-part=item]{flex-direction:column}[data-ui=stepper] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-radius:var(--slotted-stepper-radius, var(--slotted-control-radius, 4px));color:inherit;column-gap:var(--_gap);display:flex;font:inherit;padding:0;text-align:start;text-decoration:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] button[data-part=trigger],[data-ui=stepper] a[data-part=trigger]{cursor:pointer}[data-ui=stepper][data-label-placement=bottom] [data-part=trigger]{align-items:center;flex-direction:column;padding-inline:var(--slotted-stepper-column-inset, var(--slotted-space-3, .375rem));row-gap:var(--slotted-stepper-label-gap, var(--slotted-space-3, .375rem));text-align:center}[data-ui=stepper] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=stepper] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-complete, var(--slotted-tone-accent-on-solid, HighlightText) );--_mark-size: var(--slotted-stepper-glyph-size, var(--slotted-control-icon-size-md, 16px));align-items:center;background-color:var(--slotted-stepper-marker-surface, transparent);block-size:var(--_marker);border:var(--_rule) solid var(--_pending-ring);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--_muted);display:flex;flex:none;font-variant-numeric:tabular-nums;font-weight:var(--slotted-stepper-marker-weight, var(--slotted-font-weight-semibold, 600));inline-size:var(--_marker);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=stepper] [data-current] [data-part=marker]{border-color:var(--slotted-stepper-marker-border-current, var(--_done-line));color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-complete]:not([data-current],[data-invalid]) [data-part=marker]{background-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line));border-color:var(--slotted-stepper-marker-surface-complete, var(--_done-line))}[data-ui=stepper] [data-invalid] [data-part=marker]{--_mark: var( --slotted-stepper-marker-color-invalid, var(--slotted-tone-danger-on-solid, MarkText) );background-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) );border-color:var( --slotted-stepper-marker-surface-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=marker]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText);color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] :is([data-complete],[data-invalid]) [data-part=marker]{color:transparent}[data-ui=stepper] [data-part=marker]>[data-ui=icon]{--slotted-icon-size: var(--_mark-size);color:var(--_mark);inset:0;margin:auto;position:absolute}[data-ui=stepper] [data-current]:not([data-invalid]) [data-part=marker]{color:var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight))}[data-ui=stepper] [data-part=label]{color:var(--_muted);font-weight:var(--slotted-stepper-label-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere}[data-ui=stepper] :is([data-current],[data-complete]) [data-part=label]{color:var(--_strong)}[data-ui=stepper] [data-invalid] [data-part=label]{color:var(--slotted-stepper-label-color-invalid, var(--slotted-tone-danger-text, MarkText))}[data-ui=stepper] [data-disabled]:not([data-invalid]) [data-part=label]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=stepper] [data-part=description]{color:var(--_muted);display:block;font-size:var(--slotted-stepper-description-font-size, var(--slotted-font-size-xs, .75rem));line-height:var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));margin-block-start:var(--slotted-stepper-description-gap, var(--slotted-space-1, .125rem))}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:hover [data-part=label]{color:var(--_strong);text-decoration-color:currentColor;text-decoration-line:underline;text-underline-offset:var(--slotted-stepper-underline-offset, .2em)}[data-ui=stepper] [data-part=item]:not([data-disabled],[data-loading]) :is(button,a)[data-part=trigger]:active [data-part=marker]{box-shadow:inset 0 0 0 var(--_marker) var(--_state-press)}[data-ui=stepper] [data-part=separator]{background-color:var(--_pending-line);display:block;flex:none}[data-ui=stepper] [data-part=separator][data-complete]{background-color:var(--_done-line)}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=separator]{align-self:center;block-size:var(--_rule);flex:1 1 auto;margin-inline:var(--slotted-stepper-track-gap, var(--slotted-space-5, .75rem));min-inline-size:var(--slotted-stepper-track-min, var(--slotted-space-8, 1.5rem));position:static}[data-ui=stepper][data-orientation=horizontal][data-label-placement=end] [data-part=trigger]{flex:0 1 auto;min-inline-size:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=separator]{block-size:var(--_rule);inset-block-start:calc(.5 * (var(--_marker) - var(--_rule)));inset-inline-end:calc(-50% + .5 * var(--_marker) + var(--_gap));inset-inline-start:calc(50% + .5 * var(--_marker) + var(--_gap));position:absolute}[data-ui=stepper][data-orientation=vertical] [data-part=separator]{--_rule-room: var(--slotted-stepper-connector-gap, var(--slotted-space-2, .25rem));inline-size:var(--_rule);inset-block-end:var(--_rule-room);inset-block-start:calc(var(--_marker) + var(--_rule-room));inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));position:absolute}[data-ui=stepper] [data-part=item]:last-child [data-part=separator]{display:none}[data-ui=stepper][data-orientation=horizontal][data-label-placement=bottom] [data-part=trigger]{inline-size:100%}[data-ui=stepper][data-orientation=vertical] [data-part=item]{padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper][data-orientation=vertical] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=vertical] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}[data-ui=stepper][data-orientation=horizontal] [data-part=panel]{padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-6, 1rem))}[data-ui=stepper] [data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-stepper (max-width: 30rem){[data-ui=stepper][data-orientation=horizontal] [data-part=list]{align-items:stretch;flex-direction:column}[data-ui=stepper][data-orientation=horizontal] [data-part=item]{flex:none;flex-direction:column;padding-block-end:var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));padding-inline-end:0}[data-ui=stepper][data-orientation=horizontal] [data-part=item]:last-child{padding-block-end:0}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=trigger]{align-items:center;flex-direction:row;inline-size:auto;padding-inline:0;text-align:start}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=separator]{block-size:auto;flex:none;inline-size:var(--_rule);inset-block-end:0;inset-block-start:calc(var(--_marker) + var(--_gap));inset-inline-end:auto;inset-inline-start:calc(.5 * (var(--_marker) - var(--_rule)));margin-inline:0;min-inline-size:0;position:absolute}[data-ui=stepper][data-orientation=horizontal][data-label-placement] [data-part=panel]{margin-inline-start:calc(var(--_marker) + var(--_gap));padding-block-start:var(--slotted-stepper-panel-gap, var(--slotted-space-4, .5rem))}}@media(forced-colors:active){[data-ui=stepper] [data-part=separator]{background-color:GrayText}[data-ui=stepper] [data-part=separator][data-complete]{background-color:Highlight}[data-ui=stepper] :is([data-complete],[data-invalid]):not([data-current]) [data-part=marker]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], complete: [{ type: i0.Input, args: [{ isSignal: true, alias: "complete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }] } });
+/**
+ * The content of the step it is written inside. It is a `group` labelled by its
+ * own header rather than a `tabpanel`, for the reason the root refuses the tab
+ * role, and it is focusable so a consumer moving focus after a step change has
+ * somewhere to put it.
+ */
+class SlStepperPanel {
+    stepper = inject(SlStepper);
+    step = inject(SlStepperStep);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStepperPanel, isStandalone: true, selector: "[slStepperPanel]", host: { attributes: { "data-part": "panel", "role": "group", "tabindex": "-1" }, properties: { "attr.id": "stepper.panelId(step.index())", "attr.aria-labelledby": "stepper.triggerId(step.index())", "hidden": "!step.current()" } }, exportAs: ["slStepperPanel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStepperPanel]',
+                    standalone: true,
+                    exportAs: 'slStepperPanel',
+                    host: {
+                        'data-part': 'panel',
+                        role: 'group',
+                        tabindex: '-1',
+                        '[attr.id]': 'stepper.panelId(step.index())',
+                        '[attr.aria-labelledby]': 'stepper.triggerId(step.index())',
+                        '[hidden]': '!step.current()',
+                    },
+                }]
+        }] });
+/**
+ * The two directives that move the flow, on the consumer's own button.
+ *
+ * Angular Material reaches the same shape with `matStepperNext`: a family that
+ * shipped its own advance button would ship a second button nobody could theme
+ * with the first.
+ */
+class SlStepperNext {
+    stepper = inject(SlStepper);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStepperNext, isStandalone: true, selector: "button[slStepperNext]", host: { listeners: { "click": "stepper.next(\"pointer\", $event)" }, properties: { "disabled": "!stepper.canGoNext()" } }, exportAs: ["slStepperNext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slStepperNext]',
+                    standalone: true,
+                    exportAs: 'slStepperNext',
+                    host: {
+                        '[disabled]': '!stepper.canGoNext()',
+                        '(click)': 'stepper.next("pointer", $event)',
+                    },
+                }]
+        }] });
+class SlStepperPrevious {
+    stepper = inject(SlStepper);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStepperPrevious, isStandalone: true, selector: "button[slStepperPrevious]", host: { listeners: { "click": "stepper.previous(\"pointer\", $event)" }, properties: { "disabled": "!stepper.canGoPrevious()" } }, exportAs: ["slStepperPrevious"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStepperPrevious, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slStepperPrevious]',
+                    standalone: true,
+                    exportAs: 'slStepperPrevious',
+                    host: {
+                        '[disabled]': '!stepper.canGoPrevious()',
+                        '(click)': 'stepper.previous("pointer", $event)',
+                    },
+                }]
+        }] });
+/** Absence has to survive the transform, so an unset input stays unset. */
+function optionalBoolean(value) {
+    return value === undefined ? undefined : booleanAttribute(value);
+}
+function optionalNumber(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const parsed = numberAttribute(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STEPPER_DEFAULTS_TOKEN, STEPPER_DEFAULT_LABEL_PLACEMENT, STEPPER_DEFAULT_NAVIGATION, STEPPER_DEFAULT_ORIENTATION, SlStepper, SlStepperList, SlStepperNext, SlStepperPanel, SlStepperPrevious, SlStepperStep, injectStepperDefaults, provideStepperDefaults };
+//# sourceMappingURL=slotted-angular-stepper.mjs.map