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

package/fesm2022/slotted-angular-wizard.mjs

@@ -0,0 +1,1715 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, booleanAttribute, input, TemplateRef, Directive, forwardRef, ElementRef, DestroyRef, model, numberAttribute, output, contentChildren, contentChild, Injector, viewChild, computed, signal, untracked, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+import { isDirty, hasErrors, normaliseErrors } from '@slotted/core/form';
+import { wizardMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { formValues, clampStep, replacementStep, stepPosition, previousStep, nextDestination, stepComplete, assertUniqueSteps, reachableStep, firstIncomplete, includedValues, createSnapshot } from '@slotted/core/wizard';
+import { SlAlert, SlAlertContent, SlAlertDescription, SlAlertTitle } from '@slotted/angular/alert';
+import { SlButton } from '@slotted/angular/button';
+import { SlForm } from '@slotted/angular/form';
+import { injectMessages, injectLocale } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+import { SlStepper, SlStepperList, SlStepperStep } from '@slotted/angular/stepper';
+import { SlTag } from '@slotted/angular/tag';
+
+/**
+ * `linear` is on: the wave's scope says direct navigation depends on the
+ * steps already completed. `delay` and `minDuration` are the loading-states
+ * pair, so a restore that answers in eighty milliseconds draws nothing.
+ */
+const WIZARD_FALLBACK = {
+    delay: 200,
+    level: 2,
+    linear: true,
+    minDuration: 400,
+    progress: 'start',
+    scroll: 'ancestor',
+};
+const WIZARD_DEFAULTS = new InjectionToken('slotted wizard defaults', {
+    providedIn: 'root',
+    factory: () => WIZARD_FALLBACK,
+});
+/**
+ * An application decides once how its wizards lay out. A wizard that states
+ * any of it itself still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideWizardDefaults(defaults) {
+    return {
+        provide: WIZARD_DEFAULTS,
+        useFactory: () => ({ ...WIZARD_FALLBACK, ...defaults }),
+    };
+}
+function injectWizardDefaults() {
+    return inject(WIZARD_DEFAULTS);
+}
+
+let counter = 0;
+const EMPTY = {};
+const isPromise = (candidate) => typeof candidate === 'object' && candidate !== null && 'then' in candidate;
+const optionalBoolean = (raw) => (raw === undefined ? undefined : booleanAttribute(raw));
+function without(map, name) {
+    if (!Object.hasOwn(map, name))
+        return map;
+    const next = { ...map };
+    delete next[name];
+    return next;
+}
+/**
+ * One step: its name, its label and its content, which is rendered only while
+ * it is the current step. A branch is `@if` around the template; the wizard
+ * reacts to the list changing under the reader by the rules of the design
+ * (§5.6).
+ */
+class SlWizardStep {
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'slWizardStep' });
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Runs after the platform's and Reactive Forms' own validation pass. */
+    validate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
+    /** The answers to accept instead of the form's values. */
+    values = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return context !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardStep, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlWizardStep, isStandalone: true, selector: "ng-template[slWizardStep]", inputs: { name: { classPropertyName: "name", publicName: "slWizardStep", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slWizardStep"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardStep, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slWizardStep]', standalone: true, exportAs: 'slWizardStep' }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "slWizardStep", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }] } });
+/** What stands in place of the step and the actions after an accepted submission. */
+class SlWizardComplete {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardComplete, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardComplete, isStandalone: true, selector: "ng-template[slWizardComplete]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardComplete, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slWizardComplete]', standalone: true }]
+        }] });
+/** A row of actions of the consumer's own, in place of the default one. */
+class SlWizardActions {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardActions, isStandalone: true, selector: "ng-template[slWizardActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActions, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slWizardActions]', standalone: true }]
+        }] });
+/** The group of actions that leave the flow, at the start of the row. */
+class SlWizardActionsStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActionsStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardActionsStart, isStandalone: true, selector: "[slWizardActionsStart]", host: { attributes: { "data-part": "actions-start" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActionsStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slWizardActionsStart]',
+                    standalone: true,
+                    host: { 'data-part': 'actions-start' },
+                }]
+        }] });
+/** The group of actions that move the flow, at the end of the row. */
+class SlWizardActionsEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActionsEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardActionsEnd, isStandalone: true, selector: "[slWizardActionsEnd]", host: { attributes: { "data-part": "actions-end" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardActionsEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slWizardActionsEnd]',
+                    standalone: true,
+                    host: { 'data-part': 'actions-end' },
+                }]
+        }] });
+/**
+ * The step's form. It is the consumer's `form[slForm]`, because
+ * `formControlName` resolves its `ControlContainer` through the injector of
+ * the template it is written in, and a form the wizard rendered would not be
+ * that one. With a `FormGroup` on it, the group's raw value is the step's
+ * answers and its pending status holds the step; without one, `FormData`.
+ */
+class SlWizardForm {
+    wizard = inject(forwardRef(() => SlWizard));
+    form = inject(SlForm, { self: true });
+    container = inject(ControlContainer, { optional: true, self: true });
+    element = inject(ElementRef).nativeElement;
+    constructor() {
+        this.wizard.registerForm(this);
+        inject(DestroyRef).onDestroy(() => this.wizard.unregisterForm(this));
+        const subscription = this.form.formSubmit.subscribe(({ event, values, errors, pending }) => {
+            const control = this.container?.control;
+            const run = () => this.wizard.commit(control?.getRawValue() ?? values, event);
+            if (control?.pending === true) {
+                pending(new Promise((resolve) => {
+                    const watch = control.statusChanges.subscribe((status) => {
+                        if (status === 'PENDING')
+                            return;
+                        watch.unsubscribe();
+                        if (status === 'INVALID') {
+                            this.form.validateNow();
+                            resolve(undefined);
+                            return;
+                        }
+                        const answer = run();
+                        if (isPromise(answer))
+                            void answer.then(resolve);
+                        else
+                            resolve(answer);
+                    });
+                }));
+                return;
+            }
+            const answer = run();
+            if (isPromise(answer))
+                pending(answer);
+            else if (answer !== undefined)
+                errors(answer);
+        });
+        inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+    }
+    /** What is typed now, whatever has been accepted. */
+    typed() {
+        const control = this.container?.control;
+        if (control !== null && control !== undefined)
+            return control.getRawValue();
+        return formValues(new FormData(this.element));
+    }
+    dirty() {
+        const control = this.container?.control;
+        return control !== null && control !== undefined ? control.dirty : isDirty(this.element);
+    }
+    submit() {
+        this.element.requestSubmit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardForm, isStandalone: true, selector: "form[slWizardForm]", host: { properties: { "attr.id": "wizard.formId", "attr.aria-labelledby": "wizard.titleId" } }, exportAs: ["slWizardForm"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[slWizardForm]',
+                    standalone: true,
+                    exportAs: 'slWizardForm',
+                    host: {
+                        '[attr.id]': 'wizard.formId',
+                        '[attr.aria-labelledby]': 'wizard.titleId',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A flow of steps that accumulates answers.
+ *
+ * **The steps are the templates the consumer writes**, and a branch is `@if`
+ * around one. The wizard reacts to the list changing under the reader by the
+ * eight rules of the design (§5.6): the current step is never moved because a
+ * step appeared before it, a current step that left the list gives way to the
+ * next one still present, and an absent step keeps its answers without
+ * submitting them.
+ *
+ * **Each step's form is the consumer's `form[slForm][slWizardForm]`**, so a
+ * `FormGroup` lives in the consumer's component, keeps what was typed across
+ * steps, and validates through Reactive Forms before the step's own
+ * `validate`. The next button stands outside the form and submits it through
+ * the platform's `form` attribute.
+ *
+ * **It holds accepted answers, not typed ones.** A step is complete exactly
+ * when its name is in `value`.
+ */
+class SlWizard {
+    /** The current step's name. Two-way; a router binds it. */
+    step = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** The accepted answers, by step name. Two-way. */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Whether the compact list of steps is open. Two-way. */
+    progressOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressOpen" }] : /* istanbul ignore next */ []));
+    /** The step an unbound wizard starts on, read once and clamped to one in reach. */
+    defaultStep = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultStep" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Whether an unbound compact list starts open, read once. */
+    defaultProgressOpen = input(false, { ...(ngDevMode ? { debugName: "defaultProgressOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    progress = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    scroll = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    linear = input(undefined, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * name of the list of steps (`progress`), the position, the actions, the
+     * draft status and the failures.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** An error of the consumer's own, shown above the step; it wins over a failed submission. */
+    error = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Called with the answers of the steps present, once the last step is accepted. */
+    submitWizard = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitWizard" }] : /* istanbul ignore next */ []));
+    persistence = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "persistence" }] : /* istanbul ignore next */ []));
+    /** The flow's version; a draft of another version is not restored. */
+    version = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
+    /** Defaults to `step` when `persistence` is given, `none` otherwise. */
+    autosave = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autosave" }] : /* istanbul ignore next */ []));
+    guardUnsaved = input(false, { ...(ngDevMode ? { debugName: "guardUnsaved" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Shows the cancel action. An Angular output cannot say whether anything
+     * listens to it, which is how the React binding decides; here it is stated.
+     */
+    cancellable = input(false, { ...(ngDevMode ? { debugName: "cancellable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Shows the save-draft action without `persistence`, for a `(draftSave)` of the consumer's own. */
+    draftable = input(false, { ...(ngDevMode ? { debugName: "draftable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : numberAttribute(raw)) });
+    minDuration = input(undefined, { ...(ngDevMode ? { debugName: "minDuration" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : numberAttribute(raw)) });
+    /** One output per transition, carrying its reason and `cancel()`. */
+    stepChangeRequest = output();
+    valueChangeRequest = output();
+    progressOpenChangeRequest = output();
+    /** Asked by the cancel action; the family closes nothing itself. */
+    cancelRequest = output();
+    /** A draft was written, before `persistence` keeps it. */
+    draftSave = output();
+    /** The submission was accepted. */
+    completed = output();
+    steps = contentChildren(SlWizardStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    completeTemplate = contentChild(SlWizardComplete, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completeTemplate" }] : /* istanbul ignore next */ []));
+    actionsTemplate = contentChild(SlWizardActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
+    defaults = injectWizardDefaults();
+    injector = inject(Injector);
+    titleRef = viewChild('title', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleRef" }] : /* istanbul ignore next */ []));
+    alertRef = viewChild('alert', { ...(ngDevMode ? { debugName: "alertRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+    completeRef = viewChild('complete', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completeRef" }] : /* istanbul ignore next */ []));
+    toggleRef = viewChild('toggle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleRef" }] : /* istanbul ignore next */ []));
+    id = `slotted-wizard-${(counter += 1)}`;
+    formId = `${this.id}-form`;
+    titleId = `${this.id}-title`;
+    listId = `${this.id}-list`;
+    /** The family's words in the language in force, with this wizard's `messages` laid over them. */
+    t = injectMessages(wizardMessages, this.messages);
+    /** The locale in force: what the hour a draft was saved is written in. */
+    locale = injectLocale();
+    /**
+     * The list of steps is a stepper named by this family's `progress`: the
+     * written word is handed over as a message function, so the stepper never
+     * reads it as message grammar again.
+     */
+    stepperMessages = computed(() => {
+        const progress = this.t('progress');
+        return { label: () => progress };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperMessages" }] : /* istanbul ignore next */ []));
+    resolvedProgress = computed(() => this.progress() ?? this.defaults.progress, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedProgress" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.scroll() ?? this.defaults.scroll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    resolvedLinear = computed(() => this.linear() ?? this.defaults.linear, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLinear" }] : /* istanbul ignore next */ []));
+    resolvedLevel = computed(() => this.level() ?? this.defaults.level, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLevel" }] : /* istanbul ignore next */ []));
+    resolvedAutosave = computed(() => this.autosave() ?? (this.persistence() === undefined ? 'none' : 'step'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutosave" }] : /* istanbul ignore next */ []));
+    entries = computed(() => this.steps().map((step) => ({ disabled: step.disabled(), name: step.name() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    accepted = computed(() => this.value() ?? EMPTY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accepted" }] : /* istanbul ignore next */ []));
+    drafts = signal(EMPTY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drafts" }] : /* istanbul ignore next */ []));
+    invalid = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    pending = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    phase = signal('editing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
+    failure = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failure" }] : /* istanbul ignore next */ []));
+    draftState = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftState" }] : /* istanbul ignore next */ []));
+    savedAt = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "savedAt" }] : /* istanbul ignore next */ []));
+    restoring = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoring" }] : /* istanbul ignore next */ []));
+    skeleton = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeleton" }] : /* istanbul ignore next */ []));
+    returnTo = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "returnTo" }] : /* istanbul ignore next */ []));
+    epoch = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "epoch" }] : /* istanbul ignore next */ []));
+    stepErrors = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepErrors" }] : /* istanbul ignore next */ []));
+    form = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    /** The list before its last change, for a current step that left it. */
+    previousEntries = [];
+    /** The step the family itself last wrote, so a router's write can be told apart. */
+    ownWrite;
+    validation;
+    jumpTarget;
+    focusNext;
+    initialised = false;
+    usable(name) {
+        return this.entries().some((entry) => entry.name === name && entry.disabled !== true);
+    }
+    /**
+     * The step shown. A requested step that is absent gives way to the next one
+     * still present in the old order (decision 2 shows that one at once); the
+     * current step is never moved because a step appeared before it (decision 1).
+     */
+    current = computed(() => {
+        const requested = this.step();
+        const entries = this.entries();
+        if (this.usable(requested))
+            return requested;
+        const before = untracked(() => this.previousEntries);
+        const linear = this.resolvedLinear();
+        return requested === undefined
+            ? clampStep({ linear, requested, steps: entries, value: this.accepted() })
+            : (replacementStep({ after: entries, before, current: requested }) ??
+                clampStep({ linear, requested, steps: entries, value: this.accepted() }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /**
+     * After an accepted submission the flow has no current step: the stepper is
+     * given the index past the last, so every header reads complete. Left on the
+     * last step, that header kept its number, because a current step outranks a
+     * complete one.
+     */
+    finished = computed(() => this.phase() === 'complete', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finished" }] : /* istanbul ignore next */ []));
+    currentIndex = computed(() => Math.max(0, this.entries().findIndex((entry) => entry.name === this.current())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    currentStep = computed(() => this.steps().find((step) => step.name() === this.current()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    optionalStep = computed(() => this.currentStep()?.optional() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionalStep" }] : /* istanbul ignore next */ []));
+    position = computed(() => stepPosition(this.entries(), this.current()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    positionText = computed(() => this.t('position', { index: this.position().index, count: this.position().count }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionText" }] : /* istanbul ignore next */ []));
+    isFirst = computed(() => {
+        const current = this.current();
+        return current === undefined || previousStep({ current, steps: this.entries() }) === undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    returning = computed(() => {
+        const back = this.returnTo();
+        return back !== undefined && this.entries().some((entry) => entry.name === back);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "returning" }] : /* istanbul ignore next */ []));
+    isFinal = computed(() => {
+        const current = this.current();
+        if (current === undefined)
+            return false;
+        return (nextDestination({
+            current,
+            returnTo: this.returnTo(),
+            steps: this.entries(),
+            value: { ...this.accepted(), [current]: {} },
+        }).kind === 'submit');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFinal" }] : /* istanbul ignore next */ []));
+    nextLabel = computed(() => this.t(this.returning() ? 'return' : this.isFinal() ? 'submit' : 'next'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    busy = computed(() => this.pending() !== undefined || this.phase() === 'submitting', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    hasForm = computed(() => this.form() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasForm" }] : /* istanbul ignore next */ []));
+    canCancel = computed(() => this.cancellable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canCancel" }] : /* istanbul ignore next */ []));
+    canSaveDraft = computed(() => this.draftable() || this.persistence() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSaveDraft" }] : /* istanbul ignore next */ []));
+    errorShown = computed(() => this.error() !== undefined || this.failure() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorShown" }] : /* istanbul ignore next */ []));
+    renderKey = computed(() => `${this.current() ?? ''}-${this.epoch()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderKey" }] : /* istanbul ignore next */ []));
+    stepContext = computed(() => {
+        const name = this.current() ?? '';
+        const values = this.drafts()[name] ?? this.accepted()[name] ?? {};
+        return {
+            $implicit: values,
+            complete: stepComplete(this.accepted(), name),
+            errors: this.stepErrors()[name],
+            name,
+            optional: this.optionalStep(),
+            values,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepContext" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* A resolved step that differs from the requested one is written back. */
+        effect(() => {
+            const current = this.current();
+            const requested = this.step();
+            const entries = this.entries();
+            untracked(() => {
+                this.previousEntries = entries;
+                if (!this.initialised)
+                    return;
+                assertUniqueSteps(entries);
+                if (current === undefined || current === requested)
+                    return;
+                this.leave();
+                this.requestStep(current, 'programmatic', undefined, false);
+            });
+        });
+        /* A step a router wrote on its own is clamped to one in reach. */
+        effect(() => {
+            const requested = this.step();
+            untracked(() => {
+                if (!this.initialised || requested === undefined || requested === this.ownWrite)
+                    return;
+                const clamped = clampStep({
+                    linear: this.resolvedLinear(),
+                    requested,
+                    steps: this.entries(),
+                    value: this.accepted(),
+                });
+                if (clamped !== undefined && clamped !== requested) {
+                    this.requestStep(clamped, 'programmatic', undefined, false);
+                }
+            });
+        });
+        /* Focus follows the step, the failure or the completion, after render. */
+        effect(() => {
+            this.current();
+            this.phase();
+            this.failure();
+            untracked(() => {
+                const target = this.focusNext;
+                if (target === undefined)
+                    return;
+                afterNextRender(() => {
+                    if (this.focusNext !== target)
+                        return;
+                    const element = target === 'alert'
+                        ? this.alertRef()?.nativeElement
+                        : target === 'complete'
+                            ? this.completeRef()?.nativeElement
+                            : this.titleRef()?.nativeElement;
+                    if (element === undefined)
+                        return;
+                    this.focusNext = undefined;
+                    element.focus();
+                }, { injector: this.injector });
+            });
+        });
+        const destroyRef = inject(DestroyRef);
+        const onBeforeUnload = (event) => {
+            if (this.guardUnsaved() && this.dirty())
+                event.preventDefault();
+        };
+        if (typeof window !== 'undefined') {
+            window.addEventListener('beforeunload', onBeforeUnload);
+            destroyRef.onDestroy(() => window.removeEventListener('beforeunload', onBeforeUnload));
+        }
+        destroyRef.onDestroy(() => this.validation?.abort());
+    }
+    ngAfterContentInit() {
+        assertUniqueSteps(this.entries());
+        if (this.defaultProgressOpen() && !this.progressOpen())
+            this.progressOpen.set(true);
+        const loaded = this.persistence()?.load();
+        const snapshot = isPromise(loaded) ? undefined : loaded;
+        /* A restored value is requested in either mode, so a consumer that derives
+           a branch from it — through [(value)] or (valueChangeRequest) — hears it. */
+        if (snapshot !== undefined)
+            this.requestValue(snapshot.value, 'programmatic');
+        else if (this.value() === undefined)
+            this.value.set(this.defaultValue() ?? EMPTY);
+        if (snapshot !== undefined) {
+            this.drafts.set(snapshot.drafts);
+            this.resolveRestored(snapshot.step);
+        }
+        const requested = snapshot?.step ?? this.step() ?? this.defaultStep();
+        const start = clampStep({
+            linear: this.resolvedLinear(),
+            requested,
+            steps: this.entries(),
+            value: this.accepted(),
+        });
+        if (start !== undefined && start !== this.step()) {
+            if (this.step() === undefined) {
+                this.ownWrite = start;
+                this.step.set(start);
+            }
+            else
+                this.requestStep(start, 'programmatic', undefined, false);
+        }
+        this.initialised = true;
+        if (isPromise(loaded))
+            this.restore(loaded);
+    }
+    /* ── Requests ──────────────────────────────────────────────────────── */
+    requestStep(next, reason, source, focus = true) {
+        const from = this.current();
+        if (next === from && next === this.step())
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.step() ?? from ?? next,
+            onRequest: (raw) => {
+                this.stepChangeRequest.emit(this.wrap(raw, reason));
+                cancelled = raw.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (!moved || cancelled)
+            return false;
+        this.ownWrite = next;
+        this.step.set(next);
+        if (focus)
+            this.focusNext = 'title';
+        return true;
+    }
+    requestValue(next, reason, source) {
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.accepted(),
+            onRequest: (raw) => {
+                this.valueChangeRequest.emit(this.wrap(raw, reason));
+                cancelled = raw.cancelled;
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return false;
+        this.value.set(next);
+        return true;
+    }
+    requestOpen(next, reason, source) {
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.progressOpen(),
+            onRequest: (raw) => {
+                this.progressOpenChangeRequest.emit(this.wrap(raw, reason));
+                cancelled = raw.cancelled;
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        this.progressOpen.set(next);
+    }
+    wrap(raw, reason) {
+        return {
+            cancel: () => raw.cancel(),
+            get cancelled() {
+                return raw.cancelled;
+            },
+            previous: raw.previous,
+            reason,
+            source: raw.source,
+            value: raw.value,
+        };
+    }
+    /* ── Forms ─────────────────────────────────────────────────────────── */
+    registerForm(form) {
+        this.form.set(form);
+    }
+    unregisterForm(form) {
+        if (this.form() === form)
+            this.form.set(undefined);
+    }
+    isComplete(name) {
+        return stepComplete(this.accepted(), name);
+    }
+    isReachable(name) {
+        return (this.phase() === 'complete' ||
+            reachableStep({
+                current: this.current(),
+                linear: this.resolvedLinear(),
+                steps: this.entries(),
+                target: name,
+                value: this.accepted(),
+            }));
+    }
+    /* ── The cycle of a step ───────────────────────────────────────────── */
+    /**
+     * The step's form passed the platform's and Reactive Forms' validation. The
+     * step's `validate` runs next; a promise holds the next button in its
+     * loading state and is aborted when the reader leaves (decision 4).
+     */
+    commit(typed, source) {
+        const name = this.current();
+        if (name === undefined || this.pending() !== undefined || this.phase() !== 'editing')
+            return;
+        const step = this.currentStep();
+        const answers = step?.values() ?? typed;
+        const check = step?.validate();
+        if (check === undefined) {
+            this.accept(name, answers, source);
+            return;
+        }
+        this.validation?.abort();
+        const controller = new AbortController();
+        this.validation = controller;
+        const found = (errors) => {
+            if (controller.signal.aborted)
+                return;
+            if (this.validation === controller)
+                this.validation = undefined;
+            this.pending.set(undefined);
+            if (errors !== undefined && errors !== null && hasErrors(normaliseErrors(errors))) {
+                this.markInvalid(name, true);
+                this.jumpTarget = undefined;
+                return errors;
+            }
+            if (this.current() !== name)
+                return;
+            this.accept(name, answers, source);
+        };
+        const result = check(answers, { signal: controller.signal, value: this.accepted() });
+        if (!isPromise(result))
+            return found(result);
+        this.pending.set(name);
+        return result.then(found, () => {
+            if (!controller.signal.aborted)
+                this.pending.set(undefined);
+        });
+    }
+    accept(name, answers, source) {
+        const accepted = { ...this.accepted(), [name]: answers };
+        if (!this.requestValue(accepted, 'submit', source))
+            return;
+        const drafts = without(this.drafts(), name);
+        this.drafts.set(drafts);
+        this.stepErrors.update((errors) => {
+            if (!(name in errors))
+                return errors;
+            const next = { ...errors };
+            delete next[name];
+            return next;
+        });
+        this.markInvalid(name, false);
+        /**
+         * Where the flow goes is decided after the consumer's template has run
+         * again with the new value, not now. A step the answer opens — Company
+         * after Business, an `@if` over the value — exists only once the view
+         * that declares it has been checked; decided here, the destination
+         * skipped it and went to the step after.
+         */
+        afterNextRender(() => {
+            if (this.current() !== name || this.phase() !== 'editing')
+                return;
+            if (this.resolvedAutosave() === 'step') {
+                const destination = nextDestination({
+                    current: name,
+                    returnTo: this.returnTo(),
+                    steps: this.entries(),
+                    value: accepted,
+                });
+                void this.write(accepted, drafts, destination.kind === 'step' ? destination.name : name, 'submit', source);
+            }
+            this.route(accepted, name, source);
+        }, { injector: this.injector });
+    }
+    route(accepted, name, source) {
+        const steps = this.entries();
+        const jump = this.jumpTarget;
+        this.jumpTarget = undefined;
+        if (jump !== undefined &&
+            reachableStep({
+                current: name,
+                linear: this.resolvedLinear(),
+                steps,
+                target: jump,
+                value: accepted,
+            })) {
+            this.requestStep(jump, 'pointer', source);
+            return;
+        }
+        const back = this.returnTo();
+        const destination = nextDestination({ current: name, returnTo: back, steps, value: accepted });
+        if (back !== undefined && (destination.kind === 'submit' || destination.name === back)) {
+            this.returnTo.set(undefined);
+        }
+        if (back !== undefined && !steps.some((entry) => entry.name === back))
+            this.returnTo.set(undefined);
+        if (destination.kind === 'step')
+            this.requestStep(destination.name, 'submit', source);
+        else
+            this.submitFlow(accepted, source);
+    }
+    submitFlow(accepted, source) {
+        const open = firstIncomplete({ steps: this.entries(), value: accepted });
+        if (open !== undefined) {
+            this.requestStep(open, 'submit', source);
+            this.failure.set({ message: this.t('incomplete') });
+            this.focusNext = 'alert';
+            return;
+        }
+        this.failure.set(undefined);
+        this.phase.set('submitting');
+        const settle = (answer) => {
+            if (typeof answer === 'object' && answer !== null) {
+                this.fail(answer, source);
+                return;
+            }
+            this.phase.set('complete');
+            this.drafts.set(EMPTY);
+            void this.persistence()?.clear();
+            this.focusNext = 'complete';
+            this.completed.emit(accepted);
+        };
+        let answer;
+        try {
+            answer = this.submitWizard()?.(includedValues(accepted, this.entries()), {
+                reason: 'submit',
+                source,
+                value: accepted,
+            });
+        }
+        catch {
+            this.fail({}, source);
+            return;
+        }
+        if (isPromise(answer)) {
+            answer.then(settle, () => this.fail({}, source));
+            return;
+        }
+        settle(answer);
+    }
+    fail(reported, source) {
+        this.phase.set('editing');
+        this.failure.set(reported);
+        const target = reported.step;
+        if (target !== undefined && this.entries().some((entry) => entry.name === target)) {
+            if (reported.errors !== undefined) {
+                this.stepErrors.update((errors) => ({
+                    ...errors,
+                    [target]: reported.errors,
+                }));
+                this.markInvalid(target, true);
+            }
+            if (target === this.current())
+                this.epoch.update((epoch) => epoch + 1);
+            else
+                this.requestStep(target, 'programmatic', source);
+        }
+        this.focusNext = 'alert';
+    }
+    /** The errors a failed submission sent back for this step, for its form. */
+    errorsFor(name) {
+        return this.stepErrors()[name];
+    }
+    markInvalid(name, invalid) {
+        this.invalid.update((names) => {
+            if (names.has(name) === invalid)
+                return names;
+            const next = new Set(names);
+            if (invalid)
+                next.add(name);
+            else
+                next.delete(name);
+            return next;
+        });
+    }
+    leave() {
+        this.validation?.abort();
+        this.validation = undefined;
+        this.pending.set(undefined);
+    }
+    /** What was typed on this step and not accepted, kept for when it returns. */
+    stash() {
+        const form = this.form();
+        const name = this.current();
+        if (form === undefined || name === undefined || !form.dirty())
+            return this.drafts();
+        const next = { ...this.drafts(), [name]: form.typed() };
+        this.drafts.set(next);
+        return next;
+    }
+    async write(value, drafts, step, reason, source) {
+        const persistence = this.persistence();
+        const snapshot = createSnapshot({ drafts, step, value, version: this.version() });
+        this.draftState.set('saving');
+        try {
+            this.draftSave.emit({ reason, snapshot, source });
+            await persistence?.save(snapshot);
+            this.savedAt.set(new Date(snapshot.savedAt));
+            this.draftState.set('saved');
+        }
+        catch {
+            this.draftState.set('failed');
+        }
+    }
+    restore(load) {
+        this.restoring.set(true);
+        let shownAt;
+        const delay = this.delay() ?? this.defaults.delay;
+        const minDuration = this.minDuration() ?? this.defaults.minDuration;
+        const timer = setTimeout(() => {
+            shownAt = Date.now();
+            this.skeleton.set(true);
+        }, delay);
+        const finish = (snapshot) => {
+            clearTimeout(timer);
+            const apply = () => {
+                this.skeleton.set(false);
+                this.restoring.set(false);
+                if (snapshot === undefined)
+                    return;
+                this.requestValue(snapshot.value, 'programmatic');
+                this.drafts.set(snapshot.drafts);
+                this.resolveRestored(snapshot.step);
+            };
+            const remaining = shownAt === undefined ? 0 : minDuration - (Date.now() - shownAt);
+            if (remaining > 0)
+                setTimeout(apply, remaining);
+            else
+                apply();
+        };
+        load.then(finish, () => finish(undefined));
+    }
+    /**
+     * The step a draft was saved on, resolved after the consumer's template has
+     * run with the restored value: the step may be one that value opens, and
+     * before that render it does not exist.
+     */
+    resolveRestored(step) {
+        afterNextRender(() => {
+            const target = clampStep({
+                linear: this.resolvedLinear(),
+                requested: step,
+                steps: this.entries(),
+                value: this.accepted(),
+            });
+            if (target !== undefined && target !== this.current()) {
+                this.requestStep(target, 'programmatic', undefined, false);
+            }
+        }, { injector: this.injector });
+    }
+    dirty() {
+        const form = this.form();
+        return (this.phase() !== 'complete' &&
+            ((form !== undefined && form.dirty()) ||
+                Object.keys(this.drafts()).length > 0 ||
+                Object.keys(this.accepted()).length > 0));
+    }
+    /* ── The moves ─────────────────────────────────────────────────────── */
+    /** Submits the current step, as the next button does. */
+    next(source) {
+        if (this.disabled() || this.phase() !== 'editing')
+            return;
+        const form = this.form();
+        if (form !== undefined) {
+            form.submit();
+            return;
+        }
+        const name = this.current();
+        if (name !== undefined)
+            void this.commit({}, source);
+    }
+    /** One step back, keeping what was typed. */
+    previous(source) {
+        const name = this.current();
+        if (name === undefined || this.busy() || this.disabled() || this.phase() !== 'editing')
+            return;
+        const target = previousStep({ current: name, steps: this.entries() });
+        if (target === undefined)
+            return;
+        this.stash();
+        this.leave();
+        this.requestStep(target, 'pointer', source);
+    }
+    /** Goes to a step: back freely, forward through a submission of this one. */
+    goTo(name, reason = 'programmatic', source) {
+        const from = this.current();
+        const steps = this.entries();
+        if (from === undefined || name === from || this.phase() !== 'editing' || this.disabled())
+            return;
+        const target = steps.findIndex((entry) => entry.name === name);
+        const here = steps.findIndex((entry) => entry.name === from);
+        if (target === -1)
+            return;
+        if (target < here) {
+            this.stash();
+            this.leave();
+            this.requestStep(name, reason, source);
+            return;
+        }
+        if (this.pending() !== undefined)
+            return;
+        if (!reachableStep({
+            current: from,
+            linear: this.resolvedLinear(),
+            steps,
+            target: name,
+            value: { ...this.accepted(), [from]: {} },
+        })) {
+            return;
+        }
+        this.jumpTarget = name;
+        this.next(source);
+        if (this.validation === undefined && this.jumpTarget === name)
+            this.jumpTarget = undefined;
+    }
+    /** Goes to a step and comes back here once it is accepted. */
+    edit(name, source) {
+        const from = this.current();
+        if (from === undefined || this.phase() !== 'editing' || this.disabled())
+            return;
+        this.returnTo.set(from);
+        this.stash();
+        this.leave();
+        this.requestStep(name, 'pointer', source);
+    }
+    /** Accepts an optional step with no answers. */
+    skip(source) {
+        const name = this.current();
+        if (name === undefined || !this.optionalStep() || this.busy() || this.disabled())
+            return;
+        if (this.phase() !== 'editing')
+            return;
+        this.leave();
+        this.accept(name, {}, source);
+    }
+    cancel(source) {
+        if (this.phase() === 'submitting')
+            return;
+        this.cancelRequest.emit({ dirty: this.dirty(), source });
+    }
+    saveDraft(reason = 'programmatic', source) {
+        const name = this.current();
+        if (name === undefined || this.phase() !== 'editing')
+            return;
+        const drafts = this.stash();
+        void this.write(this.accepted(), drafts, name, reason, source);
+    }
+    clearDraft() {
+        this.draftState.set('idle');
+        this.savedAt.set(undefined);
+        void this.persistence()?.clear();
+    }
+    /** Back to the first step, with no answers, no draft and no error. */
+    reset() {
+        this.leave();
+        this.jumpTarget = undefined;
+        this.returnTo.set(undefined);
+        this.failure.set(undefined);
+        this.phase.set('editing');
+        this.drafts.set(EMPTY);
+        this.stepErrors.set({});
+        this.invalid.set(new Set());
+        this.draftState.set('idle');
+        this.savedAt.set(undefined);
+        this.requestValue(EMPTY, 'clear');
+        const first = clampStep({
+            linear: this.resolvedLinear(),
+            requested: undefined,
+            steps: this.entries(),
+            value: EMPTY,
+        });
+        if (first !== undefined)
+            this.requestStep(first, 'programmatic', undefined);
+        void this.persistence()?.clear();
+    }
+    focus() {
+        this.titleRef()?.nativeElement.focus();
+    }
+    /* ── The progress ──────────────────────────────────────────────────── */
+    onHeader(request) {
+        const target = this.entries()[request.value]?.name;
+        if (target === undefined)
+            return;
+        if (this.progressOpen())
+            this.requestOpen(false, 'select', request.source);
+        this.goTo(target, request.reason === 'keyboard' ? 'keyboard' : 'pointer', request.source);
+    }
+    toggleProgress(event) {
+        this.requestOpen(!this.progressOpen(), event.detail === 0 ? 'keyboard' : 'pointer', event);
+    }
+    onProgressKeydown(event) {
+        if (event.key !== 'Escape' || !this.progressOpen())
+            return;
+        event.preventDefault();
+        this.requestOpen(false, 'escape', event);
+        this.toggleRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlWizard, isStandalone: true, selector: "[slWizard]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, progressOpen: { classPropertyName: "progressOpen", publicName: "progressOpen", isSignal: true, isRequired: false, transformFunction: null }, defaultStep: { classPropertyName: "defaultStep", publicName: "defaultStep", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, defaultProgressOpen: { classPropertyName: "defaultProgressOpen", publicName: "defaultProgressOpen", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, submitWizard: { classPropertyName: "submitWizard", publicName: "submitWizard", isSignal: true, isRequired: false, transformFunction: null }, persistence: { classPropertyName: "persistence", publicName: "persistence", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, autosave: { classPropertyName: "autosave", publicName: "autosave", isSignal: true, isRequired: false, transformFunction: null }, guardUnsaved: { classPropertyName: "guardUnsaved", publicName: "guardUnsaved", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, draftable: { classPropertyName: "draftable", publicName: "draftable", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minDuration: { classPropertyName: "minDuration", publicName: "minDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange", value: "valueChange", progressOpen: "progressOpenChange", stepChangeRequest: "stepChangeRequest", valueChangeRequest: "valueChangeRequest", progressOpenChangeRequest: "progressOpenChangeRequest", cancelRequest: "cancelRequest", draftSave: "draftSave", completed: "completed" }, host: { attributes: { "data-ui": "wizard", "data-part": "root" }, properties: { "attr.data-progress": "resolvedProgress()", "attr.data-scroll": "resolvedScroll()", "attr.data-loading": "phase() === 'submitting' || restoring() ? '' : null", "attr.data-invalid": "errorShown() ? '' : null", "attr.data-complete": "phase() === 'complete' ? '' : null", "attr.data-disabled": "disabled() ? '' : null" } }, queries: [{ propertyName: "steps", predicate: SlWizardStep, isSignal: true }, { propertyName: "completeTemplate", first: true, predicate: SlWizardComplete, descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SlWizardActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "titleRef", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "completeRef", first: true, predicate: ["complete"], descendants: true, isSignal: true }, { propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, isSignal: true }], exportAs: ["slWizard"], ngImport: i0, template: `
+    <div data-part="layout">
+      @if (resolvedProgress() !== 'none') {
+        <div
+          data-part="progress"
+          [attr.data-open]="progressOpen() ? '' : null"
+          (keydown)="onProgressKeydown($event)"
+        >
+          <button
+            #toggle
+            data-part="progress-toggle"
+            type="button"
+            [attr.aria-controls]="listId"
+            [attr.aria-expanded]="progressOpen()"
+            (click)="toggleProgress($event)"
+          >
+            <span data-part="progress-position">{{ positionText() }}</span>
+            <span aria-hidden="true" data-part="progress-track">
+              @for (entry of entries(); track entry.name) {
+                <span
+                  data-part="progress-segment"
+                  [attr.data-complete]="
+                    finished() || (entry.name !== current() && isComplete(entry.name)) ? '' : null
+                  "
+                  [attr.data-current]="!finished() && entry.name === current() ? '' : null"
+                  [attr.data-invalid]="invalid().has(entry.name) ? '' : null"
+                ></span>
+              }
+            </span>
+            <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+          </button>
+          <div
+            slStepper
+            [messages]="stepperMessages()"
+            [navigation]="phase() === 'complete' ? 'none' : 'button'"
+            [orientation]="resolvedProgress() === 'top' ? 'horizontal' : 'vertical'"
+            [step]="finished() ? entries().length : currentIndex()"
+            (stepChange)="onHeader($event)"
+          >
+            <ol slStepperList [attr.id]="listId">
+              @for (item of steps(); track item.name()) {
+                <li
+                  slStepperStep
+                  [complete]="phase() === 'complete' || isComplete(item.name())"
+                  [description]="item.optional() ? t('optional') : undefined"
+                  [disabled]="disabled() || item.disabled() || !isReachable(item.name())"
+                  [invalid]="invalid().has(item.name())"
+                  [label]="item.label()"
+                  [loading]="pending() === item.name()"
+                ></li>
+              }
+            </ol>
+          </div>
+        </div>
+      }
+
+      <div data-part="main">
+        @if (errorShown()) {
+          <div data-part="error">
+            <section #alert slAlert live="off" reach="section" tone="danger">
+              <div slAlertContent>
+                <div slAlertTitle>{{ error() ?? t('submitFailed') }}</div>
+                @if (error() === undefined && failure()?.message) {
+                  <p slAlertDescription>{{ failure()?.message }}</p>
+                }
+              </div>
+            </section>
+          </div>
+        }
+
+        @if (phase() === 'complete') {
+          <div #complete data-part="complete" tabindex="-1">
+            @if (completeTemplate(); as done) {
+              <ng-container *ngTemplateOutlet="done.template"></ng-container>
+            }
+          </div>
+        } @else {
+          <div data-part="step" [attr.aria-busy]="restoring() ? 'true' : null">
+            @if (restoring()) {
+              @if (skeleton()) {
+                <div aria-hidden="true" data-part="step-header">
+                  <div data-part="step-title">
+                    <span data-part="position"><span slSkeleton inlineSize="5.5rem"></span></span>
+                    <span slSkeleton inlineSize="13rem"></span>
+                  </div>
+                </div>
+                <div aria-hidden="true" data-part="skeleton">
+                  <div data-label-placement="top" data-part="root" data-size="md" data-ui="field">
+                    <span data-part="label"><span slSkeleton inlineSize="7rem"></span></span>
+                    <div data-part="control">
+                      <span
+                        slSkeleton
+                        shape="block"
+                        blockSize="var(--slotted-control-height-md)"
+                      ></span>
+                    </div>
+                  </div>
+                </div>
+              }
+            } @else if (currentStep(); as step) {
+              <div data-part="step-header">
+                @switch (resolvedLevel()) {
+                  @case (3) {
+                    <h3 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h3>
+                  }
+                  @case (4) {
+                    <h4 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h4>
+                  }
+                  @default {
+                    <h2 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h2>
+                  }
+                }
+                @if (step.description()) {
+                  <p data-part="step-description">{{ step.description() }}</p>
+                }
+              </div>
+              @for (key of [renderKey()]; track key) {
+                <ng-container *ngTemplateOutlet="step.template; context: stepContext()" />
+              }
+            }
+          </div>
+          @if (!restoring()) {
+            <div data-part="actions">
+              @if (actionsTemplate(); as custom) {
+                <ng-container *ngTemplateOutlet="custom.template"></ng-container>
+              } @else {
+                <div slWizardActionsStart>
+                  @if (canCancel()) {
+                    <button
+                      slButton
+                      slWizardCancel
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="phase() === 'submitting'"
+                    >
+                      {{ t('cancel') }}
+                    </button>
+                  }
+                  @if (canSaveDraft()) {
+                    <button
+                      slButton
+                      slWizardSaveDraft
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                      [loading]="draftState() === 'saving'"
+                    >
+                      {{ t('saveDraft') }}
+                    </button>
+                    <span slWizardDraftStatus></span>
+                  }
+                </div>
+                <div slWizardActionsEnd>
+                  @if (optionalStep()) {
+                    <button
+                      slButton
+                      slWizardSkip
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                    >
+                      {{ t('skip') }}
+                    </button>
+                  }
+                  @if (!isFirst()) {
+                    <button
+                      slButton
+                      slWizardPrevious
+                      tone="secondary"
+                      variant="outline"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                    >
+                      {{ t('previous') }}
+                    </button>
+                  }
+                  <button
+                    slButton
+                    slWizardNext
+                    tone="accent"
+                    variant="solid"
+                    focusableWhenDisabled
+                    [disabled]="disabled()"
+                    [loading]="busy()"
+                    [type]="hasForm() ? 'submit' : 'button'"
+                  >
+                    {{ nextLabel() }}
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    </div>
+
+    <ng-template #heading let-step>
+      <span data-part="position">{{ positionText() }}</span>
+      {{ step.label() }}
+      @if (step.optional()) {
+        <span data-part="optional"
+          >{{ ' '
+          }}<span slTag shape="pill" size="sm" tone="secondary" variant="soft">{{
+            t('optional')
+          }}</span>
+        </span>
+      }
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=wizard]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-wizard-border, var(--slotted-border-subtle, ButtonBorder));--_rule-size: var(--slotted-border-width-thin, 1px);--_progress-size: var(--slotted-wizard-progress-inline-size, 14rem);--_gap: var(--slotted-wizard-gap, var(--slotted-space-9, 2rem));--_rhythm: var(--slotted-wizard-rhythm, var(--slotted-space-8, 1.5rem));--_header-gap: var(--slotted-wizard-header-gap, var(--slotted-space-6, 1rem));--_action-gap: var(--slotted-control-gap-md, var(--slotted-space-3, .375rem));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_ring-room: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );color:var(--_text);container-name:slotted-wizard;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=wizard]>[data-part=layout]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=wizard][data-progress=start]>[data-part=layout]{align-items:start;grid-template-columns:var(--_progress-size) minmax(0,1fr)}[data-ui=wizard][data-progress=none]>[data-part=layout]>[data-part=progress]{display:none}[data-ui=wizard]>[data-part=layout]>[data-part=progress]{display:flex;flex-direction:column;gap:var(--slotted-space-4, .5rem);min-inline-size:0}[data-ui=wizard][data-progress=start]:not([data-scroll=self])>[data-part=layout]>[data-part=progress]{inset-block-start:var(--slotted-page-sticky-top, 0px);position:sticky}[data-ui=wizard][data-progress=top]>[data-part=layout]>[data-part=progress]{border-block-end:var(--_rule-size) solid var(--_rule);padding-block-end:var(--_rhythm)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]{align-items:center;appearance:none;background-color:var(--slotted-control-surface, Field);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-control-radius, 6px);box-shadow:var(--slotted-control-shadow, none);color:inherit;column-gap:var(--slotted-space-5, .75rem);cursor:pointer;display:none;font:inherit;grid-template-areas:\"position icon\" \"track icon\";grid-template-columns:minmax(0,1fr) auto;inline-size:100%;margin:0;min-block-size:var(--slotted-control-height-lg, 2.75rem);padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-control-padding-inline-md, .75rem);row-gap:var(--slotted-space-3, .375rem);text-align:start;transition:border-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard, ease)),box-shadow var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard, ease))}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:hover:not(:disabled):not([data-disabled]){border-color:var( --slotted-wizard-toggle-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-wizard-toggle-active-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:focus-visible{box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-position]{font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);grid-area:position;line-height:var(--slotted-line-height-sm, 1.45)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]{align-items:center;block-size:var(--slotted-space-2, .25rem);display:flex;gap:var(--slotted-space-1, .125rem);grid-area:track;min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment]{background-color:var( --slotted-wizard-segment-color, var(--slotted-control-border-color, ButtonBorder) );block-size:100%;border-radius:var(--slotted-radius-full, 9999px);flex:1 1 0;transition:background-color var(--slotted-duration-medium) var(--slotted-easing-standard, ease)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment]:is([data-complete],[data-current]){background-color:var( --slotted-wizard-segment-color-complete, var(--slotted-tone-accent-solid, Highlight) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment][data-invalid]{background-color:var( --slotted-wizard-segment-color-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-ui=icon]{color:var(--_muted);grid-area:icon;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard, ease)}[data-ui=wizard]>[data-part=layout]>[data-part=progress][data-open]>[data-part=progress-toggle]>[data-ui=icon]{rotate:180deg}[data-ui=wizard]>[data-part=layout]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=error]{min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]{display:flex;flex-direction:column;gap:var(--_header-gap);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]{display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-2xl, 1.25rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-2xl, 1.4);margin:0;outline:none;overflow-wrap:anywhere}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position]{color:var(--_muted);display:block;font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.45);margin-block-end:var(--slotted-space-1, .125rem)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=optional]{margin-inline-start:var(--slotted-space-1, .125rem);vertical-align:middle}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-description]{color:var(--_muted);font-size:var(--slotted-font-size-md, .875rem);line-height:var(--slotted-line-height-md, 1.5);margin:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=skeleton]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_action-gap) var(--_gap);justify-content:space-between;padding-block-start:var(--_rhythm)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>:is([data-part=actions-start],[data-part=actions-end]){align-items:center;display:flex;flex-wrap:wrap;gap:var(--_action-gap);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]{align-items:baseline}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-end]{justify-content:flex-end;margin-inline-start:auto}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-ui=button][data-variant=ghost]:first-child{flex:none;max-inline-size:none;margin-inline-start:calc(var(--slotted-control-padding-inline-md, .75rem) * -1)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-part=draft-status]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-part=draft-status]:empty{display:none}[data-ui=wizard] [data-part=edit]{appearance:none;background:none;border:0;border-radius:var(--slotted-radius-xs, 2px);color:var(--slotted-wizard-edit-color, var(--slotted-tone-accent-text, LinkText));cursor:pointer;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);margin:0;padding:0;text-decoration-line:none;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:.2em}[data-ui=wizard] [data-part=edit]:hover:not(:disabled):not([aria-disabled=true]){text-decoration-line:underline}[data-ui=wizard] [data-part=edit]: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=wizard] [data-part=edit]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=complete]{min-inline-size:0;outline:none}[data-ui=wizard][data-scroll=self]{block-size:100%;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]{block-size:100%;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=progress]{max-block-size:100%;overflow:auto;padding:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]{block-size:100%;gap:0;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>:is([data-part=step],[data-part=complete]){flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_ring-room) var(--_rhythm);padding-inline:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>[data-part=error]{padding-block-end:var(--_rhythm);padding-inline:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>[data-part=actions]{background-color:var(--_ground);flex:none;padding-block-end:0;padding-inline:var(--_ring-room)}@container slotted-wizard (width < 600px){[data-ui=wizard]>[data-part=layout]{gap:var(--_rhythm)}[data-ui=wizard][data-progress=start]>[data-part=layout]{grid-template-columns:minmax(0,1fr)}[data-ui=wizard][data-progress]>[data-part=layout]>[data-part=progress]{border-block-end:0;padding-block-end:0;position:static}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]{display:grid}[data-ui=wizard]>[data-part=layout]>[data-part=progress]:not([data-open])>[data-ui=stepper]{display:none}[data-ui=wizard]>[data-part=layout]>[data-part=progress][data-open]>[data-ui=stepper]{background-color:var(--slotted-surface-sunken, Canvas);border-radius:var(--slotted-control-radius, 6px);padding:var(--slotted-space-5, .75rem)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>:is([data-part=actions-start],[data-part=actions-end]){inline-size:100%}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-end]>[data-ui=button]:not([data-variant=ghost]){flex:1 1 0}[data-ui=wizard][data-progress=start]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position],[data-ui=wizard][data-progress=top]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}}}\n", "@layer slotted.components{[data-ui=field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px);--_row-gap: var(--slotted-field-row-gap, var(--slotted-space-3, .375rem));--_column-gap: var(--slotted-field-column-gap, var(--slotted-space-5, .75rem));align-content:start;container-name:slotted-field;container-type:inline-size;display:grid;font-family:var(--slotted-field-font-family, var(--slotted-control-font-family, sans-serif));grid-template-columns:minmax(0,var(--slotted-field-label-inline-size, 12rem)) minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_row-gap)}[data-ui=field][data-part=root]>*{grid-column:1 / -1}[data-ui=field]>[data-part=control]{min-inline-size:0}[data-ui=field][data-part=root][data-size=sm]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_control-block-size: var(--slotted-control-height-sm, 30px)}[data-ui=field][data-part=root][data-size=md]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px)}[data-ui=field][data-part=root][data-size=lg]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-md, 16px) );--_help-inner-size: var(--slotted-control-inner-size-md, 24px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_control-block-size: var(--slotted-control-height-lg, 38px)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]>[data-part=label]{color:var(--slotted-field-label-color, var(--slotted-text));font-size:var(--_font-size);font-weight:var(--slotted-field-label-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]{grid-column:1 / -1;grid-row:1}[data-ui=field][data-part=root]:has(>[data-part=counter])>[data-part=label]{grid-column:1 / 3}[data-ui=field]>[data-part=label]>[data-part=mark],[data-ui=field]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-color, var(--slotted-tone-danger-text));margin-inline-start:var(--slotted-field-mark-gap, var(--slotted-space-2, .25rem));overflow-wrap:normal;unicode-bidi:isolate}[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=label]>[data-part=mark],[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-text-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=field]>[data-part=header]{align-items:baseline;column-gap:var(--slotted-field-header-gap, var(--slotted-space-3, .375rem));display:flex;flex-wrap:wrap;font-size:var(--_font-size);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0}[data-ui=field]>[data-part=header]>[data-part=label]{flex:0 1 auto}[data-ui=field]>[data-part=header]>[data-part=action],[data-ui=field]>[data-part=header]>[data-part=counter]{margin-inline-start:auto}[data-ui=field]>[data-part=header]>[data-part=action]~[data-part=counter]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=field]>[data-part=header]>[data-part=help]{--_box: max( min(calc(var(--_help-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--_help-inner-size)), 1lh );--slotted-icon-size: var(--_help-glyph);appearance:none;background-color:transparent;block-size:var(--_box);border:0;border-radius:var(--slotted-field-help-radius, var(--slotted-control-radius, 4px));color:var(--slotted-field-help-color, var(--slotted-text-muted));cursor:pointer;display:inline-block;flex:none;font:inherit;inline-size:var(--_box);margin-block:calc((var(--_font-size) * var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45)) - var(--_box)) / 2);margin-inline-start:calc(var(--slotted-space-1, .125rem) - var(--slotted-field-header-gap, var(--slotted-space-3, .375rem)));padding:0;position:relative;text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=header]>[data-part=help]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=field]>[data-part=header]>[data-part=help]>[data-ui=icon]{vertical-align:calc(((1cap + 1ex) / 2 - var(--_help-glyph)) / 2)}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:hover,[data-ui=field]>[data-part=header]>[data-part=help][data-open]{background-color:var( --slotted-field-help-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:active{background-color:var( --slotted-field-help-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]: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=field]>[data-part=header]>[data-part=indicator]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:inline-flex;flex-wrap:wrap}[data-ui=field]>[data-part=header]>[data-part=action]{--_rest: var(--slotted-field-action-color, var(--slotted-tone-accent-text, LinkText));align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-field-action-radius, var(--slotted-control-radius, 4px));color:var(--_rest);cursor:pointer;display:inline-flex;flex:none;font-family:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));margin-block:calc((1lh - var(--slotted-target-min, 24px)) / 2);padding:0;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.15em;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),text-decoration-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):hover{color:var( --slotted-field-action-color-hover, color-mix(in oklab, var(--_rest) 65%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):active{color:var( --slotted-field-action-color-active, color-mix(in oklab, var(--_rest) 35%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}@media(pointer:coarse){[data-ui=field]>[data-part=header]>[data-part=action]{position:relative}[data-ui=field]>[data-part=header]>[data-part=help]:before,[data-ui=field]>[data-part=header]>[data-part=action]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=field]>[data-part=counter],[data-ui=field]>[data-part=header]>[data-part=counter]{color:var(--slotted-field-counter-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-variant-numeric:tabular-nums;line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=counter]{align-self:end;grid-column:3;grid-row:1;justify-self:end;padding-inline-start:var(--_column-gap)}[data-ui=field]>[data-part=counter][data-invalid],[data-ui=field]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-field-counter-invalid-color, var(--slotted-tone-danger-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=field]>[data-ui=inline-message]:not([data-reserve]):has([data-part=text]:empty){display:none}[data-ui=field][data-part=root]>[data-ui=inline-message]{font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=danger],[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=success]{font-weight:var(--slotted-font-weight-medium, 500)}@container slotted-field (min-width: 320px){[data-ui=field][data-part=root][data-label-placement=side]>*{align-self:start;grid-column:2 / 3}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=label],[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]{grid-column:1;grid-row:1;padding-block-start:max(0px,calc((var(--_control-block-size) - 1lh) / 2));padding-inline-end:var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=counter]{grid-column:1;grid-row:2;justify-self:end;padding-inline:0 var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]>[data-part=counter]{flex-basis:100%;margin-inline-start:0;text-align:end}}[data-ui=field][data-part=root][data-disabled]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=counter],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=label]>[data-part=mark],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=counter][data-invalid],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-disabled-foreground);font-weight:var(--slotted-font-weight-regular, 400)}}\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: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SlAlert), selector: "[slAlert]", inputs: ["tone", "variant", "reach", "live", "hideIcon", "dismissible", "messages", "open", "defaultOpen", "restoreFocus"], outputs: ["openChange"], exportAs: ["slAlert"] }, { kind: "directive", type: i0.forwardRef(() => SlAlertContent), selector: "[slAlertContent]", exportAs: ["slAlertContent"] }, { kind: "directive", type: i0.forwardRef(() => SlAlertDescription), selector: "[slAlertDescription]", exportAs: ["slAlertDescription"] }, { kind: "component", type: i0.forwardRef(() => SlAlertTitle), selector: "[slAlertTitle]", exportAs: ["slAlertTitle"] }, { kind: "component", type: i0.forwardRef(() => SlButton), selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: i0.forwardRef(() => SlGlyph), selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: i0.forwardRef(() => SlIcon), selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: i0.forwardRef(() => SlSkeleton), selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: i0.forwardRef(() => SlStepper), selector: "[slStepper]", inputs: ["step", "defaultStep", "messages", "orientation", "labelPlacement", "navigation", "linear", "autoComplete"], outputs: ["stepChange"], exportAs: ["slStepper"] }, { kind: "directive", type: i0.forwardRef(() => SlStepperList), selector: "ol[slStepperList]", exportAs: ["slStepperList"] }, { kind: "component", type: i0.forwardRef(() => SlStepperStep), selector: "li[slStepperStep]", inputs: ["label", "description", "complete", "disabled", "invalid", "loading", "href"], exportAs: ["slStepperStep"] }, { kind: "component", type: i0.forwardRef(() => SlTag), selector: "[slTag]", inputs: ["tone", "variant", "size", "shape", "disabled", "removable", "removeDisabled", "messages"], outputs: ["remove"], exportAs: ["slTag"] }, { kind: "directive", type: i0.forwardRef(() => SlWizardNext), selector: "button[slWizardNext]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardPrevious), selector: "button[slWizardPrevious]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardCancel), selector: "button[slWizardCancel]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardSaveDraft), selector: "button[slWizardSaveDraft]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardSkip), selector: "button[slWizardSkip]" }, { kind: "component", type: i0.forwardRef(() => SlWizardDraftStatus), selector: "[slWizardDraftStatus]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardActionsStart), selector: "[slWizardActionsStart]" }, { kind: "directive", type: i0.forwardRef(() => SlWizardActionsEnd), selector: "[slWizardActionsEnd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizard, decorators: [{
+            type: Component,
+            args: [{ selector: '[slWizard]', standalone: true, exportAs: 'slWizard', imports: [
+                        NgTemplateOutlet,
+                        SlAlert,
+                        SlAlertContent,
+                        SlAlertDescription,
+                        SlAlertTitle,
+                        SlButton,
+                        SlGlyph,
+                        SlIcon,
+                        SlSkeleton,
+                        SlStepper,
+                        SlStepperList,
+                        SlStepperStep,
+                        SlTag,
+                        forwardRef(() => SlWizardNext),
+                        forwardRef(() => SlWizardPrevious),
+                        forwardRef(() => SlWizardCancel),
+                        forwardRef(() => SlWizardSaveDraft),
+                        forwardRef(() => SlWizardSkip),
+                        forwardRef(() => SlWizardDraftStatus),
+                        SlWizardActionsStart,
+                        SlWizardActionsEnd,
+                    ], template: `
+    <div data-part="layout">
+      @if (resolvedProgress() !== 'none') {
+        <div
+          data-part="progress"
+          [attr.data-open]="progressOpen() ? '' : null"
+          (keydown)="onProgressKeydown($event)"
+        >
+          <button
+            #toggle
+            data-part="progress-toggle"
+            type="button"
+            [attr.aria-controls]="listId"
+            [attr.aria-expanded]="progressOpen()"
+            (click)="toggleProgress($event)"
+          >
+            <span data-part="progress-position">{{ positionText() }}</span>
+            <span aria-hidden="true" data-part="progress-track">
+              @for (entry of entries(); track entry.name) {
+                <span
+                  data-part="progress-segment"
+                  [attr.data-complete]="
+                    finished() || (entry.name !== current() && isComplete(entry.name)) ? '' : null
+                  "
+                  [attr.data-current]="!finished() && entry.name === current() ? '' : null"
+                  [attr.data-invalid]="invalid().has(entry.name) ? '' : null"
+                ></span>
+              }
+            </span>
+            <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+          </button>
+          <div
+            slStepper
+            [messages]="stepperMessages()"
+            [navigation]="phase() === 'complete' ? 'none' : 'button'"
+            [orientation]="resolvedProgress() === 'top' ? 'horizontal' : 'vertical'"
+            [step]="finished() ? entries().length : currentIndex()"
+            (stepChange)="onHeader($event)"
+          >
+            <ol slStepperList [attr.id]="listId">
+              @for (item of steps(); track item.name()) {
+                <li
+                  slStepperStep
+                  [complete]="phase() === 'complete' || isComplete(item.name())"
+                  [description]="item.optional() ? t('optional') : undefined"
+                  [disabled]="disabled() || item.disabled() || !isReachable(item.name())"
+                  [invalid]="invalid().has(item.name())"
+                  [label]="item.label()"
+                  [loading]="pending() === item.name()"
+                ></li>
+              }
+            </ol>
+          </div>
+        </div>
+      }
+
+      <div data-part="main">
+        @if (errorShown()) {
+          <div data-part="error">
+            <section #alert slAlert live="off" reach="section" tone="danger">
+              <div slAlertContent>
+                <div slAlertTitle>{{ error() ?? t('submitFailed') }}</div>
+                @if (error() === undefined && failure()?.message) {
+                  <p slAlertDescription>{{ failure()?.message }}</p>
+                }
+              </div>
+            </section>
+          </div>
+        }
+
+        @if (phase() === 'complete') {
+          <div #complete data-part="complete" tabindex="-1">
+            @if (completeTemplate(); as done) {
+              <ng-container *ngTemplateOutlet="done.template"></ng-container>
+            }
+          </div>
+        } @else {
+          <div data-part="step" [attr.aria-busy]="restoring() ? 'true' : null">
+            @if (restoring()) {
+              @if (skeleton()) {
+                <div aria-hidden="true" data-part="step-header">
+                  <div data-part="step-title">
+                    <span data-part="position"><span slSkeleton inlineSize="5.5rem"></span></span>
+                    <span slSkeleton inlineSize="13rem"></span>
+                  </div>
+                </div>
+                <div aria-hidden="true" data-part="skeleton">
+                  <div data-label-placement="top" data-part="root" data-size="md" data-ui="field">
+                    <span data-part="label"><span slSkeleton inlineSize="7rem"></span></span>
+                    <div data-part="control">
+                      <span
+                        slSkeleton
+                        shape="block"
+                        blockSize="var(--slotted-control-height-md)"
+                      ></span>
+                    </div>
+                  </div>
+                </div>
+              }
+            } @else if (currentStep(); as step) {
+              <div data-part="step-header">
+                @switch (resolvedLevel()) {
+                  @case (3) {
+                    <h3 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h3>
+                  }
+                  @case (4) {
+                    <h4 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h4>
+                  }
+                  @default {
+                    <h2 #title data-part="step-title" tabindex="-1" [id]="titleId">
+                      <ng-container *ngTemplateOutlet="heading; context: { $implicit: step }" />
+                    </h2>
+                  }
+                }
+                @if (step.description()) {
+                  <p data-part="step-description">{{ step.description() }}</p>
+                }
+              </div>
+              @for (key of [renderKey()]; track key) {
+                <ng-container *ngTemplateOutlet="step.template; context: stepContext()" />
+              }
+            }
+          </div>
+          @if (!restoring()) {
+            <div data-part="actions">
+              @if (actionsTemplate(); as custom) {
+                <ng-container *ngTemplateOutlet="custom.template"></ng-container>
+              } @else {
+                <div slWizardActionsStart>
+                  @if (canCancel()) {
+                    <button
+                      slButton
+                      slWizardCancel
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="phase() === 'submitting'"
+                    >
+                      {{ t('cancel') }}
+                    </button>
+                  }
+                  @if (canSaveDraft()) {
+                    <button
+                      slButton
+                      slWizardSaveDraft
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                      [loading]="draftState() === 'saving'"
+                    >
+                      {{ t('saveDraft') }}
+                    </button>
+                    <span slWizardDraftStatus></span>
+                  }
+                </div>
+                <div slWizardActionsEnd>
+                  @if (optionalStep()) {
+                    <button
+                      slButton
+                      slWizardSkip
+                      tone="secondary"
+                      variant="ghost"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                    >
+                      {{ t('skip') }}
+                    </button>
+                  }
+                  @if (!isFirst()) {
+                    <button
+                      slButton
+                      slWizardPrevious
+                      tone="secondary"
+                      variant="outline"
+                      focusableWhenDisabled
+                      [disabled]="disabled() || busy()"
+                    >
+                      {{ t('previous') }}
+                    </button>
+                  }
+                  <button
+                    slButton
+                    slWizardNext
+                    tone="accent"
+                    variant="solid"
+                    focusableWhenDisabled
+                    [disabled]="disabled()"
+                    [loading]="busy()"
+                    [type]="hasForm() ? 'submit' : 'button'"
+                  >
+                    {{ nextLabel() }}
+                  </button>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    </div>
+
+    <ng-template #heading let-step>
+      <span data-part="position">{{ positionText() }}</span>
+      {{ step.label() }}
+      @if (step.optional()) {
+        <span data-part="optional"
+          >{{ ' '
+          }}<span slTag shape="pill" size="sm" tone="secondary" variant="soft">{{
+            t('optional')
+          }}</span>
+        </span>
+      }
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'wizard',
+                        'data-part': 'root',
+                        '[attr.data-progress]': 'resolvedProgress()',
+                        '[attr.data-scroll]': 'resolvedScroll()',
+                        '[attr.data-loading]': "phase() === 'submitting' || restoring() ? '' : null",
+                        '[attr.data-invalid]': "errorShown() ? '' : null",
+                        '[attr.data-complete]': "phase() === 'complete' ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=wizard]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-wizard-border, var(--slotted-border-subtle, ButtonBorder));--_rule-size: var(--slotted-border-width-thin, 1px);--_progress-size: var(--slotted-wizard-progress-inline-size, 14rem);--_gap: var(--slotted-wizard-gap, var(--slotted-space-9, 2rem));--_rhythm: var(--slotted-wizard-rhythm, var(--slotted-space-8, 1.5rem));--_header-gap: var(--slotted-wizard-header-gap, var(--slotted-space-6, 1rem));--_action-gap: var(--slotted-control-gap-md, var(--slotted-space-3, .375rem));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_ring-room: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );color:var(--_text);container-name:slotted-wizard;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=wizard]>[data-part=layout]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=wizard][data-progress=start]>[data-part=layout]{align-items:start;grid-template-columns:var(--_progress-size) minmax(0,1fr)}[data-ui=wizard][data-progress=none]>[data-part=layout]>[data-part=progress]{display:none}[data-ui=wizard]>[data-part=layout]>[data-part=progress]{display:flex;flex-direction:column;gap:var(--slotted-space-4, .5rem);min-inline-size:0}[data-ui=wizard][data-progress=start]:not([data-scroll=self])>[data-part=layout]>[data-part=progress]{inset-block-start:var(--slotted-page-sticky-top, 0px);position:sticky}[data-ui=wizard][data-progress=top]>[data-part=layout]>[data-part=progress]{border-block-end:var(--_rule-size) solid var(--_rule);padding-block-end:var(--_rhythm)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]{align-items:center;appearance:none;background-color:var(--slotted-control-surface, Field);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-control-radius, 6px);box-shadow:var(--slotted-control-shadow, none);color:inherit;column-gap:var(--slotted-space-5, .75rem);cursor:pointer;display:none;font:inherit;grid-template-areas:\"position icon\" \"track icon\";grid-template-columns:minmax(0,1fr) auto;inline-size:100%;margin:0;min-block-size:var(--slotted-control-height-lg, 2.75rem);padding-block:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-control-padding-inline-md, .75rem);row-gap:var(--slotted-space-3, .375rem);text-align:start;transition:border-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard, ease)),box-shadow var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard, ease))}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:hover:not(:disabled):not([data-disabled]){border-color:var( --slotted-wizard-toggle-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-wizard-toggle-active-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]:focus-visible{box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-position]{font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);grid-area:position;line-height:var(--slotted-line-height-sm, 1.45)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]{align-items:center;block-size:var(--slotted-space-2, .25rem);display:flex;gap:var(--slotted-space-1, .125rem);grid-area:track;min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment]{background-color:var( --slotted-wizard-segment-color, var(--slotted-control-border-color, ButtonBorder) );block-size:100%;border-radius:var(--slotted-radius-full, 9999px);flex:1 1 0;transition:background-color var(--slotted-duration-medium) var(--slotted-easing-standard, ease)}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment]:is([data-complete],[data-current]){background-color:var( --slotted-wizard-segment-color-complete, var(--slotted-tone-accent-solid, Highlight) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-part=progress-track]>[data-part=progress-segment][data-invalid]{background-color:var( --slotted-wizard-segment-color-invalid, var(--slotted-tone-danger-solid, Mark) )}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]>[data-ui=icon]{color:var(--_muted);grid-area:icon;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard, ease)}[data-ui=wizard]>[data-part=layout]>[data-part=progress][data-open]>[data-part=progress-toggle]>[data-ui=icon]{rotate:180deg}[data-ui=wizard]>[data-part=layout]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=error]{min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]{display:flex;flex-direction:column;gap:var(--_header-gap);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]{display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-2xl, 1.25rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-2xl, 1.4);margin:0;outline:none;overflow-wrap:anywhere}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position]{color:var(--_muted);display:block;font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.45);margin-block-end:var(--slotted-space-1, .125rem)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=optional]{margin-inline-start:var(--slotted-space-1, .125rem);vertical-align:middle}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-description]{color:var(--_muted);font-size:var(--slotted-font-size-md, .875rem);line-height:var(--slotted-line-height-md, 1.5);margin:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=skeleton]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--_action-gap) var(--_gap);justify-content:space-between;padding-block-start:var(--_rhythm)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>:is([data-part=actions-start],[data-part=actions-end]){align-items:center;display:flex;flex-wrap:wrap;gap:var(--_action-gap);min-inline-size:0}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]{align-items:baseline}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-end]{justify-content:flex-end;margin-inline-start:auto}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-ui=button][data-variant=ghost]:first-child{flex:none;max-inline-size:none;margin-inline-start:calc(var(--slotted-control-padding-inline-md, .75rem) * -1)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-part=draft-status]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);line-height:var(--slotted-line-height-sm, 1.45)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-start]>[data-part=draft-status]:empty{display:none}[data-ui=wizard] [data-part=edit]{appearance:none;background:none;border:0;border-radius:var(--slotted-radius-xs, 2px);color:var(--slotted-wizard-edit-color, var(--slotted-tone-accent-text, LinkText));cursor:pointer;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);margin:0;padding:0;text-decoration-line:none;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:.2em}[data-ui=wizard] [data-part=edit]:hover:not(:disabled):not([aria-disabled=true]){text-decoration-line:underline}[data-ui=wizard] [data-part=edit]: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=wizard] [data-part=edit]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=complete]{min-inline-size:0;outline:none}[data-ui=wizard][data-scroll=self]{block-size:100%;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]{block-size:100%;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=progress]{max-block-size:100%;overflow:auto;padding:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]{block-size:100%;gap:0;min-block-size:0}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>:is([data-part=step],[data-part=complete]){flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_ring-room) var(--_rhythm);padding-inline:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>[data-part=error]{padding-block-end:var(--_rhythm);padding-inline:var(--_ring-room)}[data-ui=wizard][data-scroll=self]>[data-part=layout]>[data-part=main]>[data-part=actions]{background-color:var(--_ground);flex:none;padding-block-end:0;padding-inline:var(--_ring-room)}@container slotted-wizard (width < 600px){[data-ui=wizard]>[data-part=layout]{gap:var(--_rhythm)}[data-ui=wizard][data-progress=start]>[data-part=layout]{grid-template-columns:minmax(0,1fr)}[data-ui=wizard][data-progress]>[data-part=layout]>[data-part=progress]{border-block-end:0;padding-block-end:0;position:static}[data-ui=wizard]>[data-part=layout]>[data-part=progress]>[data-part=progress-toggle]{display:grid}[data-ui=wizard]>[data-part=layout]>[data-part=progress]:not([data-open])>[data-ui=stepper]{display:none}[data-ui=wizard]>[data-part=layout]>[data-part=progress][data-open]>[data-ui=stepper]{background-color:var(--slotted-surface-sunken, Canvas);border-radius:var(--slotted-control-radius, 6px);padding:var(--slotted-space-5, .75rem)}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>:is([data-part=actions-start],[data-part=actions-end]){inline-size:100%}[data-ui=wizard]>[data-part=layout]>[data-part=main]>[data-part=actions]>[data-part=actions-end]>[data-ui=button]:not([data-variant=ghost]){flex:1 1 0}[data-ui=wizard][data-progress=start]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position],[data-ui=wizard][data-progress=top]>[data-part=layout]>[data-part=main]>[data-part=step]>[data-part=step-header]>[data-part=step-title]>[data-part=position]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}}}\n", "@layer slotted.components{[data-ui=field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px);--_row-gap: var(--slotted-field-row-gap, var(--slotted-space-3, .375rem));--_column-gap: var(--slotted-field-column-gap, var(--slotted-space-5, .75rem));align-content:start;container-name:slotted-field;container-type:inline-size;display:grid;font-family:var(--slotted-field-font-family, var(--slotted-control-font-family, sans-serif));grid-template-columns:minmax(0,var(--slotted-field-label-inline-size, 12rem)) minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_row-gap)}[data-ui=field][data-part=root]>*{grid-column:1 / -1}[data-ui=field]>[data-part=control]{min-inline-size:0}[data-ui=field][data-part=root][data-size=sm]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_control-block-size: var(--slotted-control-height-sm, 30px)}[data-ui=field][data-part=root][data-size=md]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px)}[data-ui=field][data-part=root][data-size=lg]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-md, 16px) );--_help-inner-size: var(--slotted-control-inner-size-md, 24px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_control-block-size: var(--slotted-control-height-lg, 38px)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]>[data-part=label]{color:var(--slotted-field-label-color, var(--slotted-text));font-size:var(--_font-size);font-weight:var(--slotted-field-label-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]{grid-column:1 / -1;grid-row:1}[data-ui=field][data-part=root]:has(>[data-part=counter])>[data-part=label]{grid-column:1 / 3}[data-ui=field]>[data-part=label]>[data-part=mark],[data-ui=field]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-color, var(--slotted-tone-danger-text));margin-inline-start:var(--slotted-field-mark-gap, var(--slotted-space-2, .25rem));overflow-wrap:normal;unicode-bidi:isolate}[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=label]>[data-part=mark],[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-text-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=field]>[data-part=header]{align-items:baseline;column-gap:var(--slotted-field-header-gap, var(--slotted-space-3, .375rem));display:flex;flex-wrap:wrap;font-size:var(--_font-size);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0}[data-ui=field]>[data-part=header]>[data-part=label]{flex:0 1 auto}[data-ui=field]>[data-part=header]>[data-part=action],[data-ui=field]>[data-part=header]>[data-part=counter]{margin-inline-start:auto}[data-ui=field]>[data-part=header]>[data-part=action]~[data-part=counter]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=field]>[data-part=header]>[data-part=help]{--_box: max( min(calc(var(--_help-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--_help-inner-size)), 1lh );--slotted-icon-size: var(--_help-glyph);appearance:none;background-color:transparent;block-size:var(--_box);border:0;border-radius:var(--slotted-field-help-radius, var(--slotted-control-radius, 4px));color:var(--slotted-field-help-color, var(--slotted-text-muted));cursor:pointer;display:inline-block;flex:none;font:inherit;inline-size:var(--_box);margin-block:calc((var(--_font-size) * var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45)) - var(--_box)) / 2);margin-inline-start:calc(var(--slotted-space-1, .125rem) - var(--slotted-field-header-gap, var(--slotted-space-3, .375rem)));padding:0;position:relative;text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=header]>[data-part=help]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=field]>[data-part=header]>[data-part=help]>[data-ui=icon]{vertical-align:calc(((1cap + 1ex) / 2 - var(--_help-glyph)) / 2)}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:hover,[data-ui=field]>[data-part=header]>[data-part=help][data-open]{background-color:var( --slotted-field-help-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:active{background-color:var( --slotted-field-help-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]: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=field]>[data-part=header]>[data-part=indicator]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:inline-flex;flex-wrap:wrap}[data-ui=field]>[data-part=header]>[data-part=action]{--_rest: var(--slotted-field-action-color, var(--slotted-tone-accent-text, LinkText));align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-field-action-radius, var(--slotted-control-radius, 4px));color:var(--_rest);cursor:pointer;display:inline-flex;flex:none;font-family:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));margin-block:calc((1lh - var(--slotted-target-min, 24px)) / 2);padding:0;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.15em;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),text-decoration-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):hover{color:var( --slotted-field-action-color-hover, color-mix(in oklab, var(--_rest) 65%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):active{color:var( --slotted-field-action-color-active, color-mix(in oklab, var(--_rest) 35%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}@media(pointer:coarse){[data-ui=field]>[data-part=header]>[data-part=action]{position:relative}[data-ui=field]>[data-part=header]>[data-part=help]:before,[data-ui=field]>[data-part=header]>[data-part=action]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=field]>[data-part=counter],[data-ui=field]>[data-part=header]>[data-part=counter]{color:var(--slotted-field-counter-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-variant-numeric:tabular-nums;line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=counter]{align-self:end;grid-column:3;grid-row:1;justify-self:end;padding-inline-start:var(--_column-gap)}[data-ui=field]>[data-part=counter][data-invalid],[data-ui=field]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-field-counter-invalid-color, var(--slotted-tone-danger-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=field]>[data-ui=inline-message]:not([data-reserve]):has([data-part=text]:empty){display:none}[data-ui=field][data-part=root]>[data-ui=inline-message]{font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=danger],[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=success]{font-weight:var(--slotted-font-weight-medium, 500)}@container slotted-field (min-width: 320px){[data-ui=field][data-part=root][data-label-placement=side]>*{align-self:start;grid-column:2 / 3}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=label],[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]{grid-column:1;grid-row:1;padding-block-start:max(0px,calc((var(--_control-block-size) - 1lh) / 2));padding-inline-end:var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=counter]{grid-column:1;grid-row:2;justify-self:end;padding-inline:0 var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]>[data-part=counter]{flex-basis:100%;margin-inline-start:0;text-align:end}}[data-ui=field][data-part=root][data-disabled]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=counter],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=label]>[data-part=mark],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=counter][data-invalid],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-disabled-foreground);font-weight:var(--slotted-font-weight-regular, 400)}}\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"] }]
+        }], ctorParameters: () => [], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }, { type: i0.Output, args: ["stepChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], progressOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressOpen", required: false }] }, { type: i0.Output, args: ["progressOpenChange"] }], defaultStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultStep", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], defaultProgressOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultProgressOpen", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], submitWizard: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitWizard", required: false }] }], persistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistence", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], autosave: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosave", required: false }] }], guardUnsaved: [{ type: i0.Input, args: [{ isSignal: true, alias: "guardUnsaved", required: false }] }], cancellable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancellable", required: false }] }], draftable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftable", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDuration", required: false }] }], stepChangeRequest: [{ type: i0.Output, args: ["stepChangeRequest"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], progressOpenChangeRequest: [{ type: i0.Output, args: ["progressOpenChangeRequest"] }], cancelRequest: [{ type: i0.Output, args: ["cancelRequest"] }], draftSave: [{ type: i0.Output, args: ["draftSave"] }], completed: [{ type: i0.Output, args: ["completed"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlWizardStep), { isSignal: true }] }], completeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlWizardComplete), { isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlWizardActions), { isSignal: true }] }], titleRef: [{ type: i0.ViewChild, args: ['title', { isSignal: true }] }], alertRef: [{ type: i0.ViewChild, args: ['alert', { ...{ read: ElementRef }, isSignal: true }] }], completeRef: [{ type: i0.ViewChild, args: ['complete', { isSignal: true }] }], toggleRef: [{ type: i0.ViewChild, args: ['toggle', { isSignal: true }] }] } });
+/* ── The actions ─────────────────────────────────────────────────────── */
+/**
+ * The next button. On a plain `button` a consumer wrote it submits the step's
+ * form; beside `slButton` in the default row it is `type="submit"` associated
+ * to the form by the platform's `form` attribute. The part is a binding, so it
+ * wins over `slButton`'s static `data-part="root"` and follows the switch to
+ * `submit` on the final step.
+ */
+class SlWizardNext {
+    wizard = inject(SlWizard);
+    button = inject(ElementRef).nativeElement;
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        if (this.wizard.busy() || this.wizard.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.button.type === 'submit' && this.wizard.hasForm())
+            return;
+        this.wizard.next(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardNext, isStandalone: true, selector: "button[slWizardNext]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-part": "wizard.isFinal() && !wizard.returning() ? 'submit' : 'next'", "attr.data-final": "wizard.isFinal() && !wizard.returning() ? '' : null", "attr.form": "wizard.hasForm() ? wizard.formId : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slWizardNext]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-part]': "wizard.isFinal() && !wizard.returning() ? 'submit' : 'next'",
+                        '[attr.data-final]': "wizard.isFinal() && !wizard.returning() ? '' : null",
+                        '[attr.form]': 'wizard.hasForm() ? wizard.formId : null',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+class SlWizardPrevious {
+    wizard = inject(SlWizard);
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.wizard.previous(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardPrevious, isStandalone: true, selector: "button[slWizardPrevious]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-part": "'previous'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardPrevious, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slWizardPrevious]',
+                    standalone: true,
+                    host: { '[attr.data-part]': "'previous'", '(click)': 'onClick($event)' },
+                }]
+        }] });
+class SlWizardCancel {
+    wizard = inject(SlWizard);
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.wizard.cancel(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardCancel, isStandalone: true, selector: "button[slWizardCancel]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-part": "'cancel'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardCancel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slWizardCancel]',
+                    standalone: true,
+                    host: { '[attr.data-part]': "'cancel'", '(click)': 'onClick($event)' },
+                }]
+        }] });
+class SlWizardSaveDraft {
+    wizard = inject(SlWizard);
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.wizard.saveDraft('pointer', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardSaveDraft, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardSaveDraft, isStandalone: true, selector: "button[slWizardSaveDraft]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-part": "'save-draft'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardSaveDraft, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slWizardSaveDraft]',
+                    standalone: true,
+                    host: { '[attr.data-part]': "'save-draft'", '(click)': 'onClick($event)' },
+                }]
+        }] });
+class SlWizardSkip {
+    wizard = inject(SlWizard);
+    onClick(event) {
+        if (!event.defaultPrevented)
+            this.wizard.skip(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardSkip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardSkip, isStandalone: true, selector: "button[slWizardSkip]", host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-part": "'skip'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardSkip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slWizardSkip]',
+                    standalone: true,
+                    host: { '[attr.data-part]': "'skip'", '(click)': 'onClick($event)' },
+                }]
+        }] });
+/** The polite status that says when the draft was saved. */
+class SlWizardDraftStatus {
+    wizard = inject(SlWizard);
+    text = computed(() => {
+        const t = this.wizard.t;
+        const state = this.wizard.draftState();
+        const savedAt = this.wizard.savedAt();
+        if (state === 'saving')
+            return t('saving');
+        if (state === 'failed')
+            return t('draftFailed');
+        if (state === 'saved' && savedAt !== undefined) {
+            const time = new Intl.DateTimeFormat(this.wizard.locale(), {
+                hour: '2-digit',
+                minute: '2-digit',
+            }).format(savedAt);
+            return t('saved', { time });
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardDraftStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlWizardDraftStatus, isStandalone: true, selector: "[slWizardDraftStatus]", host: { attributes: { "data-part": "draft-status", "role": "status" } }, ngImport: i0, template: '{{ text() }}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardDraftStatus, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slWizardDraftStatus]',
+                    standalone: true,
+                    template: '{{ text() }}',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'draft-status', role: 'status' },
+                }]
+        }] });
+/**
+ * The control a review step puts beside each answer: it goes to the named
+ * step and sets the return point. Its name is the label and the step's label,
+ * "Change shipping address".
+ */
+class SlWizardEdit {
+    wizard = inject(SlWizard);
+    step = input.required({ ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), alias: 'slWizardEdit' });
+    target = computed(() => this.wizard.steps().find((candidate) => candidate.name() === this.step()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    unavailable = computed(() => this.wizard.disabled() || this.wizard.busy() || this.target() === undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented || this.unavailable())
+            return;
+        this.wizard.edit(this.step(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardEdit, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlWizardEdit, isStandalone: true, selector: "button[slWizardEdit]", inputs: { step: { classPropertyName: "step", publicName: "slWizardEdit", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-part": "edit", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-disabled": "unavailable() ? 'true' : null" } }, ngImport: i0, template: `<ng-content>{{ wizard.t('edit') }}</ng-content>
+    @if (target(); as step) {
+      {{ ' ' }}<span data-ui="visually-hidden">{{ step.label() }}</span>
+    }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlWizardEdit, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slWizardEdit]',
+                    standalone: true,
+                    template: `<ng-content>{{ wizard.t('edit') }}</ng-content>
+    @if (target(); as step) {
+      {{ ' ' }}<span data-ui="visually-hidden">{{ step.label() }}</span>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'edit',
+                        type: 'button',
+                        '[attr.aria-disabled]': "unavailable() ? 'true' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "slWizardEdit", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlWizard, SlWizardActions, SlWizardActionsEnd, SlWizardActionsStart, SlWizardCancel, SlWizardComplete, SlWizardDraftStatus, SlWizardEdit, SlWizardForm, SlWizardNext, SlWizardPrevious, SlWizardSaveDraft, SlWizardSkip, SlWizardStep, WIZARD_DEFAULTS, WIZARD_FALLBACK, injectWizardDefaults, provideWizardDefaults };
+//# sourceMappingURL=slotted-angular-wizard.mjs.map