@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/wizard/wizard.js

@@ -1,748 +1,831 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { attr, nullableNumberConverter, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { keyEnter, keyEnd, keyHome, keyArrowDown, keyArrowUp, keyEscape, uniqueId } from '@microsoft/fast-web-utilities';
+import '../wizard-panel/wizard-panel.js';
+import { WizardStepStates } from '../wizard-step/wizard-step.options.js';
+import '../wizard-step/wizard-step.js';
+import { WizardEvents } from './wizard.options.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { FASTElement, Updates, attr, nullableNumberConverter, observable } from "@microsoft/fast-element";
-import { keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
-import { WizardStepState } from "../wizard-step/wizard-step.options.js";
 /**
- * Wizard
+ * # Wizard
+ * A customizable wizard component for a step-by-step interface.
  *
- * @extends FASTElement
+ * @summary A customizable wizard component for a step-by-step interface.
+ *
+ * @example
+ * ```html
+ * <fabric-wizard numbered linear disable-on-complete>
+ *   <fabric-wizard-step slot='step'>Step One</fabric-wizard-step>
+ *   <fabric-wizard-panel slot='panel'>Content for Step One</fabric-wizard-panel>
+ *   <fabric-wizard-step slot='step'>Step Two</fabric-wizard-step>
+ *   <fabric-wizard-panel slot='panel'>Content for Step Two</fabric-wizard-panel>
+ *   <div slot='title'>Wizard Title</div>
+ *   <fabric-wizard-button slot='button'>Next</fabric-wizard-button>
+ * </fabric-wizard>
+ * ```
+ *
+ * @attr {boolean} numbered - Determines whether the step state indicator should be labeled with the order of the steps.
+ * @attr {boolean} linear - Indicates whether the wizard enforces linear step completion.
+ * @attr {boolean} disable-on-complete - Indicates whether steps should be disabled on completion.
+ * @attr {number} current-index - The current index of the active step.
+ *
+ * @prop {number} numbered - Determines whether the step state indicator should be labeled with the order of the steps.
+ * @prop {boolean} linear - Indicates whether the wizard enforces linear step completion.
+ * @prop {number} currentIndex - The current index of the active step.
+ * @prop {boolean} disableOnComplete - Indicates whether steps should be disabled on completion.
+ * @prop {HTMLElement} stepcontainer - The container for wizard steps.
+ * @prop {HTMLElement} panelcontainer - The container for wizard panels.
+ * @prop {HTMLElement[]} slottedsteps - The list of slotted wizard steps.
+ * @prop {Button[]} slottedactions - The list of slotted buttons.
+ * @prop {HTMLElement[]} slottedpanels - The list of slotted wizard panels.
+ * @prop {string | undefined} activeid - The ID of the active step.
+ * @prop {WizardStep | undefined} activestep - The currently active step.
+ * @prop {number | undefined} prevActiveStepIndex - The index of the previously active step.
  *
  * @slot step - Slot for adding WizardStep components, representing each step in the wizard.
  * @slot panel - Slot for adding WizardPanel components, representing the content of each step.
  * @slot title - Slot for adding a title to the wizard.
  * @slot button - Slot for adding buttons to the wizard toolbar.
+ * @slot actions - Slot for action buttons rendered in the toolbar area, such as Back and Next controls.
+ * @slot end - Slot for content appended after the panels container.
+ * @slot start - Slot for content prepended before the main wizard area.
  *
- * @attribute {boolean} ordered - Determines whether the step state indicator should be labeled with the order of the steps.
- * @attribute {boolean} disable-on-complete - Determines whether the step state indicator should be disabled after completing the step.
- * @attribute {number} current-index - The index of the currently active step.
+ * @csspart wizard - The root element of the wizard component.
+ * @csspart steps - The navigation element (tablist) that contains the WizardStep components.
+ * @csspart panels - The wrapper element containing all WizardPanel components.
+ * @csspart panels-container - The outer container wrapping the toolbar and panels sections.
+ * @csspart title - The element that renders the title slot content.
+ * @csspart toolbar - The toolbar row containing the title element and action buttons.
+ * @csspart button-container - The container element wrapping the actions slot inside the toolbar.
  *
- * @property {boolean} ordered - Determines whether the step state indicator should be labeled with the order of the steps.
+ * @cssprop --wizard-tablist-width - Set's the width of the Wizard tablist step container
+ * @cssprop --wizard-toolbar-display - Set's the display of the wizard toolbar
+ * @cssprop --wizard-overflow-step-width - Sets the width of each wizard step in overflow mode.
+ * @cssprop --wizard-overflow-tablist-width - Sets the width of the wizard tablist in overflow mode.
+ * @cssprop --wizard-scrollbar-radius - Sets the border radius of the wizard overflow scrollbar.
+ * @cssprop --wizard-scrollbar-spacing - Sets the spacing around the wizard overflow scrollbar.
+ * @cssprop --wizard-scrollbar-thumb-color - Sets the color of the wizard overflow scrollbar thumb.
+ * @cssprop --wizard-scrollbar-track-color - Sets the color of the wizard overflow scrollbar track.
  *
- * @fires wizard-change - Fires when there is a change in the wizard, providing the current index and active ID.
- * @fires wizard-complete - Fires when all steps in the wizard are complete.
- *
- * @method show() - Shows the wizard component.
- * @method hide() - Hides the wizard component.
- * @method enableStep(index?: number) - Enables a specific step in the wizard.
- * @method disableStep(index?: number) - Disables a specific step in the wizard.
- * @method errorStep(index?: number) - Sets the state of a step to error.
- * @method completeStep(index?: number) - Sets the state of a step to complete.
- * @method incompleteStep(index?: number) - Sets the state of a step to incomplete.
- * @method getStepStatus() - Retrieves the status of each step in the wizard.
+ * @method next() - Moves to the next step.
+ * @method previous() - Moves to the previous step.
+ * @method show() - Shows the wizard.
+ * @method hide() - Hides the wizard.
+ * @method enableStep(index?: number) - Enables the specified step.
+ * @method disableStep(index?: number) - Disables the specified step.
+ * @method errorStep(index?: number) - Sets the specified step to an error state.
+ * @method completeStep(index?: number) - Completes the specified step.
+ * @method incompleteStep(index?: number) - Sets the specified step to an incomplete state.
+ * @method getStepStatus() - Gets the status of the steps.
  * @method reset() - Resets the wizard to its initial state.
- * @method next() - Moves to the next step in the wizard.
- * @method previous() - Moves to the previous step in the wizard.
- * @method setActiveStep(step: WizardStep) - Sets the active step of the wizard.
- * @method focusNextStep(setActive?: boolean) - Moves the focus to the next step in the wizard.
- * @method focusPreviousStep(setActive?: boolean) - Moves the focus to the previous step in the wizard.
- * @method moveToStepByIndex(index: number) - Moves to a specific step in the wizard by its index.
+ * @method setActiveStep(step: WizardStep) - Sets the active step.
+ * @method focusNextStep(setActive?: boolean) - Focuses the next step.
+ * @method focusPreviousStep(setActive?: boolean) - Focuses the previous step.
+ * @method moveToStepByIndex(index: number, moveFocus?: boolean) - Moves to the step by its index.
  *
- * @summary  A customizable wizard component for a step-by-step interface.
+ * @fires wizard-change - Fires when there is a change in the wizard, providing the current index and active ID.
+ * @fires wizard-complete - Fires when all steps in the wizard are complete.
  *
+ * @extends FASTElement
  * @tagname fabric-wizard
- */
-/**
- * Represents a wizard component.
  * @public
- * @extends {FASTElement}
  */
-export class Wizard extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates whether the steps should be ordered.
-         * @public
-         * @attr
-         * @type {boolean}
-         * @default false
-         */
-        this.ordered = false;
-        /**
-         * Indicates whether steps should be disabled on completion.
-         * @public
-         * @attr
-         * @type {boolean}
-         * @default false
-         */
-        this.disableOnComplete = false;
-        /**
-         * The current index of the active step.
-         * @public
-         * @attr
-         * @type {number}
-         * @default 0
-         */
-        this.currentIndex = 0;
-        /**
-         * The list of slotted wizard steps.
-         * @public
-         * @observable
-         * @type {WizardStep[]}
-         */
-        this.slottedsteps = [];
-        /**
-         * The list of slotted buttons.
-         * @public
-         * @observable
-         * @type {HTMLButtonElement[]}
-         */
-        this.slottedbuttons = [];
-        /**
-         * The list of slotted wizard panels.
-         * @public
-         * @observable
-         * @type {WizardPanel[]}
-         */
-        this.slottedpanels = [];
-        /**
-         * The list of step IDs.
-         * @private
-         * @type {string[]}
-         */
-        this.stepIds = [];
-        /**
-         * The list of panel IDs.
-         * @private
-         * @type {string[]}
-         */
-        this.panelIds = [];
-        /**
-         * Moves to the next step.
-         * @public
-         */
-        this.next = () => {
-            this.currentIndex = this.slottedsteps.indexOf(this.activestep);
-            this.focusNextStep(true);
-        };
-        /**
-         * Moves to the previous step.
-         * @public
-         */
-        this.previous = () => {
-            this.currentIndex = this.slottedsteps.indexOf(this.activestep);
-            this.focusPreviousStep(true);
-        };
-        /**
-         * Focuses the next step.
-         * @public
-         * @param {boolean} [setActive=false] - Indicates whether to set the next step as active.
-         */
-        this.focusNextStep = (setActive = false) => {
-            const group = this.slottedsteps;
-            let index = 0;
-            index = this.currentIndex + 1;
-            while (index < group.length && group.length > 1) {
-                if (group[index].disabled) {
-                    index += 1;
-                }
-                else {
-                    break;
-                }
-            }
-            if (index === group.length) {
-                index = 0;
-            }
-            while (index < group.length && group.length > 1) {
-                if (group[index] &&
-                    this.isFocusableElement(group[index]) &&
-                    !this.isDisabledElement(group[index])) {
-                    this.moveToStepByIndex(index);
-                    break;
-                }
-                else if (this.activestep && index === group.indexOf(this.activestep)) {
-                    break;
-                }
-                else if (index + 1 >= group.length) {
-                    index = 0;
-                }
-                else {
-                    index += 1;
-                }
-            }
-            if (setActive && group[index] && !this.isDisabledElement(group[index])) {
-                this.setActiveStep(this.slottedsteps[index]);
-            }
-        };
-        /**
-         * Focuses the previous step.
-         * @public
-         * @param {boolean} [setActive=false] - Indicates whether to set the previous step as active.
-         */
-        this.focusPreviousStep = (setActive = false) => {
-            const group = this.slottedsteps;
-            let index = 0;
-            index = this.currentIndex - 1;
-            index = index < 0 ? group.length - 1 : index;
-            while (index < group.length && group.length > 1) {
-                if (group[index].disabled) {
-                    index -= 1;
-                }
-                else {
-                    break;
-                }
-            }
-            while (index >= 0 && group.length > 1) {
-                if (this.isFocusableElement(group[index]) &&
-                    !this.isDisabledElement(group[index])) {
-                    this.moveToStepByIndex(index);
-                    break;
-                }
-                else if (index - 1 < 0) {
-                    index = group.length - 1;
-                }
-                else {
-                    index -= 1;
-                }
-            }
-            if (setActive && !this.isDisabledElement(group[index])) {
-                this.setActiveStep(this.slottedsteps[index]);
-            }
-        };
-        /**
-         * Moves to the step by its index.
-         * @public
-         * @param {number} index - The index of the step to move to.
-         */
-        this.moveToStepByIndex = (index) => {
-            const step = this.slottedsteps[index];
-            this.currentIndex = index;
-            step.focus();
-            this.setComponent();
-        };
-        /**
-         * Handles keydown events on the step container.
-         * @public
-         * @param {KeyboardEvent} event - The keyboard event.
-         */
-        this.handleStepContainerKeydown = (event) => {
-            var _a;
-            const activeIndex = (_a = this.slottedsteps.findIndex((step) => step.active)) !== null && _a !== void 0 ? _a : 0;
-            switch (event.key) {
-                case keyEnter:
-                    event.preventDefault();
-                    if (document.activeElement === this) {
-                        if (activeIndex !== -1) {
-                            this.currentIndex = activeIndex;
-                            this.slottedsteps[activeIndex].focus();
-                        }
-                    }
-                    break;
-                case keyTab:
-                    event.stopPropagation();
-                    event.preventDefault();
-                    this.slottedbuttons[0].focus();
-                    this.slottedsteps[activeIndex].tabIndex = -1;
-                    break;
-                default:
-                    break;
-            }
-        };
-        /**
-         * Handles keydown events on a step.
-         * @public
-         * @param {KeyboardEvent} event - The keyboard event.
-         */
-        this.handleStepKeyDown = (event) => {
-            switch (event.key) {
-                case keyTab:
-                    event.stopPropagation();
-                    event.preventDefault();
-                    if (event.shiftKey) {
-                        this.stepcontainer.focus();
-                    }
-                    else {
-                        const activeIndex = this.slottedsteps.findIndex((step) => step.active);
-                        this.slottedsteps[activeIndex].tabIndex = -1;
-                        this.slottedbuttons[0].focus();
-                    }
-                    break;
-                case keyEscape:
-                    event.preventDefault();
-                    this.stepcontainer.focus();
-                    break;
-                case keyEnter:
-                    event.preventDefault();
-                    this.handleStepSelect(event);
-                    break;
-                case keyArrowUp:
-                    event.preventDefault();
-                    this.focusPreviousStep();
-                    break;
-                case keyArrowDown:
-                    event.preventDefault();
-                    this.focusNextStep();
-                    break;
-                case keyHome:
-                    event.preventDefault();
-                    this.moveToStepByIndex(-this.currentIndex);
-                    break;
-                case keyEnd:
-                    event.preventDefault();
-                    this.moveToStepByIndex(this.slottedsteps.length - this.currentIndex - 1);
-                    break;
-                default:
-                    break;
-            }
-        };
-        /**
-         * Sets the steps and updates their attributes.
-         * @protected
-         */
-        this.setSteps = () => {
-            this.currentIndex === -1 ? this.getActiveIndex() : this.currentIndex;
-            this.slottedsteps.forEach((el, index) => {
-                if (el.slot === "step") {
-                    const step = el;
-                    const isActiveStep = this.currentIndex === index && this.isFocusableElement(step);
-                    const stepId = this.stepIds[index];
-                    step.setAttribute("id", stepId);
-                    step.setAttribute("tabindex", isActiveStep ? "0" : "-1");
-                    step.setAttribute("role", "tab");
-                    step.active = isActiveStep;
-                    step.index = index;
-                    if (this.ordered) {
-                        step.ordered = true;
-                    }
-                    if (isActiveStep) {
-                        this.activestep = step;
-                        this.activeid = stepId;
-                        this.currentIndex = index;
-                    }
-                    if (index === this.slottedsteps.length - 1) {
-                        step.hideConnector = true;
-                    }
-                    if (this.slottedsteps.length >= 7) {
-                        step.classList.add("overflow");
-                    }
-                }
-            });
-            if (this.slottedsteps.every((step) => step.state === "complete")) {
-                this.emitComplete();
-            }
-            if (this.slottedsteps.length >= 7) {
-                this.setAttribute("class", "overflow");
-            }
-            this.setPanels();
-        };
-        /**
-         * Sets the panels and updates their attributes.
-         * @protected
-         */
-        this.setPanels = () => {
-            this.slottedpanels.forEach((el, index) => {
-                if (el.slot === "panel") {
-                    const panel = el;
-                    const stepId = this.stepIds[index];
-                    const panelId = this.panelIds[index];
-                    panel.setAttribute("id", panelId);
-                    panel.setAttribute("aria-labelledby", stepId);
-                    panel.setAttribute("role", "tabpanel");
-                    panel.index = index;
-                    const isActivePanel = this.currentIndex === index && this.isFocusableElement(panel);
-                    panel.active = isActivePanel;
-                    this.currentIndex !== index ? panel.hide() : panel.show();
-                }
-            });
-            this.emitChange();
-        };
-        /**
-         * Determines if the element is disabled.
-         * @private
-         * @param {Element} el - The element to check.
-         * @returns {boolean}
-         */
-        this.isDisabledElement = (el) => {
-            return el.getAttribute("aria-disabled") === "true";
-        };
-        /**
-         * Determines if the element is hidden.
-         * @private
-         * @param {Element} el - The element to check.
-         * @returns {boolean}
-         */
-        this.isHiddenElement = (el) => {
-            return el.hasAttribute("hidden");
-        };
-        /**
-         * Determines if the element is focusable.
-         * @private
-         * @param {Element} el - The element to check.
-         * @returns {boolean}
-         */
-        this.isFocusableElement = (el) => {
-            return !this.isDisabledElement(el) && !this.isHiddenElement(el);
-        };
-        /**
-         * Handles the step select event.
-         * @private
-         * @param {Event} event - The event.
-         */
-        this.handleStepSelect = (event) => {
-            const selectedStep = event.currentTarget;
-            if (selectedStep.disabled) {
-                return;
-            }
-            else {
-                this.setActiveStep(selectedStep);
-            }
-        };
-        /**
-         * Emits a wizard change event.
-         * @private
-         */
-        this.emitChange = () => {
-            this.$emit("wizard-change", {
-                currentIndex: this.currentIndex,
-                activeid: this.activeid
-            });
-        };
-        /**
-         * Emits a wizard complete event.
-         * @private
-         */
-        this.emitComplete = () => {
-            this.dispatchEvent(new CustomEvent("wizard-complete", {
-                bubbles: true
-            }));
-        };
-    }
+class Wizard extends FASTElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Called when the element is connected to the DOM.
+     * Indicates whether the steps should be visually numbered at smaller viewports.
      * @public
+     * @attr
+     * @type {boolean}
+     * @default false
      */
-    connectedCallback() {
-        super.connectedCallback();
-        Updates.enqueue(() => {
-            this.stepIds = this.getStepIds();
-            this.panelIds = this.getPanelIds();
-            this.currentIndex = this.getActiveIndex();
-            this.addListeners();
-        });
-    }
+    this.numbered = false;
     /**
-     * Called when the element is disconnected from the DOM.
+     * Indicates whether steps should be disabled on completion.
      * @public
+     * @attr
+     * @type {boolean}
+     * @default false
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeListeners();
-    }
+    this.disableOnComplete = false;
     /**
-     * Handles changes to the activeid attribute.
+     * The current index of the active step.
      * @public
-     * @param {string} oldValue - The previous value of the active ID.
-     * @param {string} newValue - The new value of the active ID.
+     * @attr
+     * @type {number}
+     * @default 0
      */
-    activeidChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.prevActiveStepIndex = this.slottedsteps.findIndex((item) => item.id === oldValue);
-            this.setSteps();
-        }
-    }
+    this.currentIndex = 0;
     /**
-     * Handles changes to the slotted panels.
+     * The list of slotted wizard steps.
      * @public
+     * @observable
+     * @type {HTMLElement[]}
      */
-    slottedpanelsChanged() {
-        if (this.$fastController.isConnected) {
-            this.panelIds = this.getPanelIds();
-            this.setSteps();
-        }
-    }
+    this.slottedsteps = [];
     /**
-     * Handles changes to the slotted steps.
+     * The list of slotted buttons.
      * @public
+     * @observable
+     * @type {HTMLElement[]}
      */
-    slottedstepsChanged() {
-        if (this.$fastController.isConnected) {
-            this.stepIds = this.getStepIds();
-            this.setSteps();
-        }
-    }
+    this.slottedactions = [];
     /**
-     * Handles changes to the current index.
+     * The list of slotted wizard panels.
      * @public
-     * @param {number} oldValue - The previous value of the current index.
-     * @param {number} newValue - The new value of the current index.
+     * @observable
+     * @type {HTMLElement[]}
      */
-    currentIndexChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            Updates.enqueue(() => {
-                this.prevActiveStepIndex = oldValue;
-                this.stepIds = this.getStepIds();
-                this.panelIds = this.getPanelIds();
-                this.setComponent();
-            });
-        }
-    }
+    this.slottedpanels = [];
     /**
-     * Shows the wizard.
-     * @public
+     * The list of step IDs.
+     * @private
+     * @type {string[]}
      */
-    show() {
-        this.hidden = false;
-    }
+    this.stepIds = [];
     /**
-     * Hides the wizard.
-     * @public
+     * The list of panel IDs.
+     * @private
+     * @type {string[]}
      */
-    hide() {
-        this.hidden = true;
-    }
+    this.panelIds = [];
     /**
-     * Enables the specified step.
-     * @public
-     * @param {number} [index] - The index of the step to enable.
+     * Determines if the element is disabled.
+     * @private
+     * @param {Element} el - The element to check.
+     * @returns {boolean}
      */
-    enableStep(index) {
-        if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
-            this.slottedsteps[index !== null && index !== void 0 ? index : this.currentIndex].disabled = false;
-        }
-    }
+    this.isDisabledElement = el => {
+      return el.getAttribute("aria-disabled") === "true";
+    };
     /**
-     * Disables the specified step.
-     * @public
-     * @param {number} [index] - The index of the step to disable.
+     * Determines if the element is hidden.
+     * @private
+     * @param {Element} el - The element to check.
+     * @returns {boolean}
      */
-    disableStep(index) {
-        if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
-            this.slottedsteps[index !== null && index !== void 0 ? index : this.currentIndex].disabled = true;
-        }
-    }
+    this.isHiddenElement = el => {
+      return el.hasAttribute("hidden");
+    };
     /**
-     * Sets the specified step to an error state.
-     * @public
-     * @param {number} [index] - The index of the step to set to an error state.
+     * Determines if the element is focusable.
+     * @private
+     * @param {Element} el - The element to check.
+     * @returns {boolean}
      */
-    errorStep(index) {
-        if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
-            this.slottedsteps[index !== null && index !== void 0 ? index : this.currentIndex].state =
-                WizardStepState.error;
-        }
-    }
+    this.isFocusableElement = el => {
+      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+    };
     /**
-     * Completes the specified step.
-     * @public
-     * @param {number} [index] - The index of the step to complete.
+     * Handles the step select event.
+     * @private
+     * @param {Event} event - The event.
      */
-    completeStep(index) {
-        if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
-            this.slottedsteps[index !== null && index !== void 0 ? index : this.currentIndex].state =
-                WizardStepState.complete;
-            if (this.disableOnComplete) {
-                this.disableStep(index);
-            }
-        }
+    this.handleStepSelect = event => {
+      const selectedStep = event.currentTarget;
+      if (selectedStep.disabled) {
+        return;
+      } else {
+        this.setActiveStep(selectedStep);
+      }
+    };
+    this.handleStepContainerFocus = event => {
+      this.setAllStepTabIndex(-1);
+    };
+    this.handleStepContainerBlur = event => {
+      // If focus moves outside the step group, reset all step tabindex to -1
+      // (blur bubbles, so check relatedTarget)
+      const related = event.relatedTarget;
+      if (!related || !this.slottedsteps.some(step => step === related)) {
+        this.setAllStepTabIndex(-1);
+      }
+    };
+  }
+  /**
+   * Called when the element is connected to the DOM.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      this.stepIds = this.getStepIds();
+      this.panelIds = this.getPanelIds();
+      this.currentIndex = this.getActiveIndex();
+      this.addListeners();
+      // Add focus/blur listeners for roving tabindex
+      if (this.stepcontainer) {
+        this.stepcontainer.addEventListener("focus", this.handleStepContainerFocus);
+        this.stepcontainer.addEventListener("blur", this.handleStepContainerBlur, true);
+      }
+    });
+  }
+  /**
+   * Called when the element is disconnected from the DOM.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeListeners();
+    // Remove focus/blur listeners
+    if (this.stepcontainer) {
+      this.stepcontainer.removeEventListener("focus", this.handleStepContainerFocus);
+      this.stepcontainer.removeEventListener("blur", this.handleStepContainerBlur, true);
     }
-    /**
-     * Sets the specified step to an incomplete state.
-     * @public
-     * @param {number} [index] - The index of the step to set to an incomplete state.
-     */
-    incompleteStep(index) {
-        if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
-            this.slottedsteps[index !== null && index !== void 0 ? index : this.currentIndex].state =
-                WizardStepState.incomplete;
-        }
+  }
+  /**
+   * Handles changes to the activeid attribute.
+   * @public
+   * @param {string} oldValue - The previous value of the active ID.
+   * @param {string} newValue - The new value of the active ID.
+   */
+  activeidChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected) {
+      this.prevActiveStepIndex = this.slottedsteps.findIndex(item => item.id === oldValue);
+      this.setSteps();
     }
-    /**
-     * Gets the status of the steps.
-     * @public
-     * @returns {Array<{ id: string, state: string, index: number, active: boolean }>}
-     */
-    getStepStatus() {
-        const stepStatus = [];
-        if (this.slottedsteps.length > 0) {
-            this.slottedsteps.forEach((step, index) => {
-                stepStatus.push({
-                    id: step.id,
-                    state: step.state,
-                    index: index,
-                    active: step.active
-                });
-            });
-        }
-        return stepStatus;
+  }
+  /**
+   * Handles changes to the slotted panels.
+   * @public
+   */
+  slottedpanelsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && oldValue !== newValue) {
+      this.panelIds = this.getPanelIds();
+      this.setSteps();
     }
-    /**
-     * Resets the wizard to its initial state.
-     * @public
-     */
-    reset() {
-        if (this.slottedsteps.length > 0) {
-            this.slottedsteps.forEach((el, index) => {
-                const step = el;
-                step.state = WizardStepState.incomplete;
-            });
-            this.stepIds = this.getStepIds();
-            this.panelIds = this.getPanelIds();
-            this.currentIndex = 0;
-            this.activeid = undefined;
-            this.prevActiveStepIndex = -1;
-        }
+  }
+  /**
+   * Handles changes to the slotted steps.
+   * @public
+   */
+  slottedstepsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && oldValue !== newValue) {
+      this.stepIds = this.getStepIds();
+      this.setSteps();
     }
-    /**
-     * Sets the active step.
-     * @public
-     * @param {WizardStep} step - The step to set as active.
-     */
-    setActiveStep(step) {
-        var _a;
-        const index = step.index;
-        const disabled = (_a = step.disabled) !== null && _a !== void 0 ? _a : false;
-        if (disabled) {
-            return;
-        }
-        step.active = true;
-        this.activestep = step;
-        this.activeid = this.stepIds[index];
-        this.currentIndex = index;
+  }
+  /**
+   * Handles changes to the current index.
+   * @public
+   * @param {number} oldValue - The previous value of the current index.
+   * @param {number} newValue - The new value of the current index.
+   */
+  currentIndexChanged(oldValue, newValue) {
+    if (oldValue !== newValue) {
+      Updates.enqueue(() => {
+        this.prevActiveStepIndex = oldValue;
+        this.stepIds = this.getStepIds();
+        this.panelIds = this.getPanelIds();
         this.setComponent();
+      });
     }
-    /**
-     * Adds event listeners to steps and panels.
-     * @protected
-     */
-    addListeners() {
-        this.slottedsteps.forEach((step) => {
-            step.addEventListener("stepchange", (e) => this.handleWizardStepStateChange(e));
-        });
-        this.slottedsteps.forEach((step) => {
-            step.addEventListener("click", (e) => this.handleStepSelect(e));
-        });
-        this.slottedsteps.forEach((step) => {
-            step.addEventListener("keydown", (e) => this.handleStepKeyDown(e));
-        });
-        this.slottedpanels.forEach((panel) => {
-            panel.addEventListener("panelchange", (e) => this.handlePanelStateChange(e));
-        });
+  }
+  /**
+   * Moves to the next step.
+   * @public
+   */
+  next() {
+    this.currentIndex = this.slottedsteps.indexOf(this.activestep);
+    // Check if there's a next step
+    const nextIndex = this.currentIndex + 1;
+    if (nextIndex >= this.slottedsteps.length) {
+      // No next step available
+      return;
     }
-    /**
-     * Removes event listeners from steps and panels.
-     * @protected
-     */
-    removeListeners() {
-        this.slottedsteps.forEach((step) => {
-            step.removeEventListener("stepchange", (e) => this.handleWizardStepStateChange(e));
-        });
-        this.slottedsteps.forEach((step) => {
-            step.removeEventListener("click", (e) => this.handleStepSelect(e));
-        });
-        this.slottedsteps.forEach((step) => {
-            step.removeEventListener("keydown", (e) => this.handleStepKeyDown(e));
-        });
-        this.slottedpanels.forEach((panel) => {
-            panel.removeEventListener("panelchange", (e) => this.handlePanelStateChange(e));
+    const nextStep = this.slottedsteps[nextIndex];
+    // Only advance if the next step is not disabled
+    if (!nextStep.disabled) {
+      this.moveToStepByIndex(nextIndex, false); // Don't move focus for programmatic navigation
+      this.setActiveStep(nextStep);
+    }
+    // If the next step is disabled, do nothing (don't move)
+  }
+  /**
+   * Moves to the previous step.
+   * @public
+   */
+  previous() {
+    this.currentIndex = this.slottedsteps.indexOf(this.activestep);
+    // Check if there's a previous step
+    const prevIndex = this.currentIndex - 1;
+    if (prevIndex < 0) {
+      // No previous step available
+      return;
+    }
+    const prevStep = this.slottedsteps[prevIndex];
+    // Only go back if the previous step is not disabled
+    if (!prevStep.disabled) {
+      this.moveToStepByIndex(prevIndex, false); // Don't move focus for programmatic navigation
+      this.setActiveStep(prevStep);
+    }
+    // If the previous step is disabled, do nothing (don't move)
+  }
+  /**
+   * Shows the wizard.
+   * @public
+   */
+  show() {
+    this.hidden = false;
+  }
+  /**
+   * Hides the wizard.
+   * @public
+   */
+  hide() {
+    this.hidden = true;
+  }
+  /**
+   * Enables the specified step.
+   * @public
+   * @param {number} [index] - The index of the step to enable.
+   */
+  enableStep(index = this.currentIndex) {
+    if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
+      this.slottedsteps[index].disabled = false;
+    }
+  }
+  /**
+   * Disables the specified step.
+   * @public
+   * @param {number} [index] - The index of the step to disable.
+   */
+  disableStep(index = this.currentIndex) {
+    if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
+      this.slottedsteps[index].disabled = true;
+    }
+  }
+  /**
+   * Sets the specified step to an error state.
+   * @public
+   * @param {number} [index] - The index of the step to set to an error state.
+   */
+  errorStep(index = this.currentIndex) {
+    if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
+      this.slottedsteps[index].state = WizardStepStates.error;
+    }
+  }
+  /**
+   * Completes the specified step.
+   * @public
+   * @param {number} [index] - The index of the step to complete.
+   */
+  completeStep(index = this.currentIndex) {
+    if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
+      this.slottedsteps[index].state = WizardStepStates.complete;
+      if (this.disableOnComplete) {
+        this.disableStep(index);
+      }
+    }
+  }
+  /**
+   * Sets the specified step to an incomplete state.
+   * @public
+   * @param {number} [index] - The index of the step to set to an incomplete state.
+   */
+  incompleteStep(index = this.currentIndex) {
+    if (this.currentIndex >= 0 && this.slottedsteps.length > 0) {
+      this.slottedsteps[index].state = WizardStepStates.incomplete;
+    }
+  }
+  /**
+   * Gets the status of the steps.
+   * @public
+   * @returns {Array<{id: string, state: string, index: number, active: boolean}>}
+   */
+  /**
+   * Returns an array of objects representing the status of each wizard step.
+   *
+   * Each object in the returned array contains:
+   * - `id`: The HTML element ID of the step.
+   * - `state`: The current state of the step.
+   * - `index`: The zero-based index of the step.
+   * - `active`: Whether the step is currently active.
+   *
+   * @returns An array of step status objects for all slotted steps.
+   */
+  getStepStatus() {
+    const stepStatus = [];
+    if (this.slottedsteps.length > 0) {
+      this.slottedsteps.forEach((step, index) => {
+        stepStatus.push({
+          id: step.id,
+          state: step.state,
+          index: index,
+          active: step.active
         });
+      });
     }
-    /**
-     * Sets the component and updates its state.
-     * @private
-     */
-    setComponent() {
-        if (this.currentIndex && this.currentIndex !== this.prevActiveStepIndex) {
-            Updates.enqueue(() => {
-                this.stepIds = this.getStepIds();
-                this.panelIds = this.getPanelIds();
-            });
+    return stepStatus;
+  }
+  /**
+   * Resets the wizard to its initial state.
+   * @public
+   */
+  reset() {
+    if (this.slottedsteps.length > 0) {
+      this.slottedsteps.forEach((el, index) => {
+        const step = el;
+        step.state = WizardStepStates.incomplete;
+      });
+      this.stepIds = this.getStepIds();
+      this.panelIds = this.getPanelIds();
+      this.currentIndex = 0;
+      this.activeid = undefined;
+      this.prevActiveStepIndex = -1;
+    }
+  }
+  /**
+   * Sets the active step.
+   * @public
+   * @param {HTMLElement} step - The step to set as active.
+   */
+  setActiveStep(step) {
+    var _a;
+    const stepToActivate = step;
+    const index = stepToActivate.index;
+    const disabled = (_a = stepToActivate.disabled) !== null && _a !== void 0 ? _a : false;
+    if (disabled) {
+      return;
+    }
+    stepToActivate.active = true;
+    this.activestep = stepToActivate;
+    this.activeid = this.stepIds[index];
+    this.currentIndex = index;
+    this.setComponent();
+  }
+  /**
+   * Focuses the next step.
+   * @public
+   * @param {boolean} [setActive=false] - Indicates whether to set the next step as active.
+   */
+  focusNextStep(setActive = false) {
+    const group = this.slottedsteps;
+    let index = this.currentIndex + 1;
+    if (group.length <= 1) return;
+    // Wrap around if needed
+    if (index >= group.length) index = 0;
+    const startIndex = index;
+    while (true) {
+      if (group[index] && !group[index].disabled) {
+        break;
+      }
+      index = (index + 1) % group.length;
+      if (index === startIndex) {
+        // No enabled step found
+        return;
+      }
+    }
+    this.moveToStepByIndex(index, true);
+    if (setActive && group[index] && !this.isDisabledElement(group[index]) && !group[index].disabled) {
+      this.setActiveStep(group[index]);
+    }
+  }
+  /**
+   * Focuses the previous step.
+   * @public
+   * @param {boolean} [setActive=false] - Indicates whether to set the previous step as active.
+   */
+  focusPreviousStep(setActive = false) {
+    const group = this.slottedsteps;
+    let index = this.currentIndex - 1;
+    if (group.length <= 1) return;
+    // Wrap around if needed
+    if (index < 0) index = group.length - 1;
+    const startIndex = index;
+    while (true) {
+      if (group[index] && !group[index].disabled) {
+        break;
+      }
+      index = (index - 1 + group.length) % group.length;
+      if (index === startIndex) {
+        // No enabled step found
+        return;
+      }
+    }
+    this.moveToStepByIndex(index, true);
+    if (setActive && group[index] && !this.isDisabledElement(group[index]) && !group[index].disabled) {
+      this.setActiveStep(group[index]);
+    }
+  }
+  /**
+   * Moves to the step by its index.
+   * @public
+   * @param {number} index - The index of the step to move to.
+   * @param {boolean} [moveFocus=true] - Whether to move keyboard focus to the step.
+   */
+  moveToStepByIndex(index, moveFocus = true) {
+    const step = this.slottedsteps[index];
+    this.currentIndex = index;
+    if (moveFocus) {
+      step.focus();
+    }
+    this.setComponent();
+  }
+  /**
+   * Handles keydown events on the step container.
+   * @public
+   * @param {KeyboardEvent} event - The keyboard event.
+   */
+  handleStepContainerKeydown(event) {
+    if (event.defaultPrevented) return;
+    switch (event.key) {
+      case keyEnter:
+      case " ":
+        // Space key
+        event.preventDefault();
+        if (document.activeElement === this) {
+          this.focusFirstEnabledStep();
         }
+        break;
+      default:
+        return true;
     }
-    /**
-     * Gets the active step index.
-     * @private
-     * @returns {number}
-     */
-    getActiveIndex() {
-        var _a;
-        const id = (_a = this.activeid) !== null && _a !== void 0 ? _a : "";
-        if (id !== undefined) {
-            return this.stepIds.indexOf(id) === -1 ? 0 : this.stepIds.indexOf(id);
+  }
+  /**
+   * Handles keydown events on a step.
+   * @public
+   * @param {KeyboardEvent} event - The keyboard event.
+   */
+  handleStepKeyDown(event) {
+    switch (event.key) {
+      case keyEscape:
+        event.preventDefault();
+        this.stepcontainer.focus();
+        break;
+      case keyEnter:
+        event.preventDefault();
+        this.handleStepSelect(event);
+        break;
+      case keyArrowUp:
+        event.preventDefault();
+        this.focusPreviousStep();
+        break;
+      case keyArrowDown:
+        event.preventDefault();
+        this.focusNextStep();
+        break;
+      case keyHome:
+        event.preventDefault();
+        this.moveToStepByIndex(-this.currentIndex, true);
+        break;
+      case keyEnd:
+        event.preventDefault();
+        this.moveToStepByIndex(this.slottedsteps.length - this.currentIndex - 1, true);
+        break;
+    }
+  }
+  /**
+   * Sets the steps and updates their attributes.
+   * @protected
+   */
+  setSteps() {
+    this.currentIndex === -1 ? this.getActiveIndex() : this.currentIndex;
+    this.slottedsteps.forEach((el, index) => {
+      if (el.slot === "step") {
+        const step = el;
+        const isActiveStep = this.currentIndex === index && this.isFocusableElement(step);
+        const stepId = this.stepIds[index];
+        // Only set tabindex to 0 if step is focused, otherwise -1
+        if (document.activeElement === step) {
+          step.setAttribute("tabindex", "0");
+        } else {
+          step.setAttribute("tabindex", "-1");
+        }
+        step.setAttribute("id", stepId);
+        step.setAttribute("role", "tab");
+        step.active = isActiveStep;
+        step.index = index;
+        if (this.numbered) {
+          step.numbered = true;
         }
-        else {
-            return 0;
+        // Compose disable-on-complete and linear logic
+        if (this.disableOnComplete && step.state === WizardStepStates.complete) {
+          step.disabled = true;
+        } else if (this.linear) {
+          if (index === 0) {
+            step.disabled = false;
+          } else {
+            const prevStep = this.slottedsteps[index - 1];
+            step.disabled = prevStep.state !== WizardStepStates.complete;
+          }
         }
+        // Otherwise, respect the step's own disabled property
+        if (isActiveStep) {
+          this.activestep = step;
+          this.activeid = stepId;
+          this.currentIndex = index;
+        }
+        if (index === this.slottedsteps.length - 1) {
+          step.hideConnector = true;
+        }
+        if (this.slottedsteps.length >= 7) {
+          step.classList.add("overflow");
+        }
+      }
+    });
+    if (this.slottedsteps.every(step => step.state === "complete")) {
+      this.emitComplete();
     }
-    /**
-     * Gets the IDs of the steps.
-     * @private
-     * @returns {string[]}
-     */
-    getStepIds() {
-        return this.slottedsteps.map((step) => {
-            var _a;
-            return ((_a = step.getAttribute("id")) !== null && _a !== void 0 ? _a : `fabric-wizard-step-${parseInt(uniqueId())}`);
-        });
+    if (this.slottedsteps.length >= 7) {
+      this.setAttribute("class", "overflow");
     }
-    /**
-     * Gets the IDs of the panels.
-     * @private
-     * @returns {string[]}
-     */
-    getPanelIds() {
-        return this.slottedpanels.map((panel) => {
-            var _a;
-            return ((_a = panel.getAttribute("id")) !== null && _a !== void 0 ? _a : `fabric-wizard-panel-${parseInt(uniqueId())}`);
-        });
+    this.setPanels();
+  }
+  /**
+   * Sets the panels and updates their attributes.
+   * @protected
+   */
+  setPanels() {
+    this.slottedpanels.forEach((el, index) => {
+      if (el.slot === "panel") {
+        const panel = el;
+        const stepId = this.stepIds[index];
+        const panelId = this.panelIds[index];
+        panel.setAttribute("id", panelId);
+        panel.setAttribute("aria-labelledby", stepId);
+        panel.setAttribute("role", "tabpanel");
+        panel.index = index;
+        const isActivePanel = this.currentIndex === index && this.isFocusableElement(panel);
+        panel.active = isActivePanel;
+        this.currentIndex !== index ? panel.hide() : panel.show();
+      }
+    });
+    this.emitChange();
+  }
+  /**
+   * Adds event listeners to steps and panels.
+   * @protected
+   */
+  addListeners() {
+    this.slottedsteps.forEach(step => {
+      step.addEventListener("step-change", e => this.handleWizardStepStateChange(e));
+    });
+    this.slottedsteps.forEach(step => {
+      step.addEventListener("step-select", e => this.handleStepSelect(e));
+    });
+    this.slottedsteps.forEach(step => {
+      step.addEventListener("keydown", e => this.handleStepKeyDown(e));
+    });
+    this.slottedpanels.forEach(panel => {
+      panel.addEventListener("panel-change", e => this.handlePanelStateChange(e));
+    });
+  }
+  /**
+   * Removes event listeners from steps and panels.
+   * @protected
+   */
+  removeListeners() {
+    this.slottedsteps.forEach(step => {
+      step.removeEventListener("step-change", e => this.handleWizardStepStateChange(e));
+    });
+    this.slottedsteps.forEach(step => {
+      step.removeEventListener("step-select", e => this.handleStepSelect(e));
+    });
+    this.slottedsteps.forEach(step => {
+      step.removeEventListener("keydown", e => this.handleStepKeyDown(e));
+    });
+    this.slottedpanels.forEach(panel => {
+      panel.removeEventListener("panel-change", e => this.handlePanelStateChange(e));
+    });
+  }
+  /**
+   * Sets the component and updates its state.
+   * @private
+   */
+  setComponent() {
+    if (this.currentIndex && this.currentIndex !== this.prevActiveStepIndex) {
+      Updates.enqueue(() => {
+        this.stepIds = this.getStepIds();
+        this.panelIds = this.getPanelIds();
+      });
     }
-    /**
-     * Handles the step state change event.
-     * @private
-     * @param {CustomEvent} e - The custom event.
-     */
-    handleWizardStepStateChange(e) {
-        const index = e.detail.index;
-        const active = e.detail.active;
-        if (active) {
-            this.currentIndex = index;
-        }
-        this.slottedpanels[index].state = e.detail.state;
-        this.setSteps();
+  }
+  /**
+   * Gets the active step index.
+   * @private
+   * @returns {number}
+   */
+  getActiveIndex() {
+    var _a;
+    const id = (_a = this.activeid) !== null && _a !== void 0 ? _a : "";
+    if (id !== undefined) {
+      return this.stepIds.indexOf(id) === -1 ? 0 : this.stepIds.indexOf(id);
+    } else {
+      return 0;
     }
-    /**
-     * Handles the panel state change event.
-     * @private
-     * @param {CustomEvent} e - The custom event.
-     */
-    handlePanelStateChange(e) {
-        const index = e.detail.index;
-        const active = e.detail.active;
-        if (active) {
-            this.currentIndex = index;
-        }
-        this.slottedsteps[index].state = e.detail.state;
-        this.setSteps();
+  }
+  /**
+   * Gets the IDs of the steps.
+   * @private
+   * @returns {string[]}
+   */
+  getStepIds() {
+    return this.slottedsteps.map(step => {
+      var _a;
+      return (_a = step.getAttribute("id")) !== null && _a !== void 0 ? _a : `fabric-wizard-step-${parseInt(uniqueId())}`;
+    });
+  }
+  /**
+   * Gets the IDs of the panels.
+   * @private
+   * @returns {string[]}
+   */
+  getPanelIds() {
+    return this.slottedpanels.map(panel => {
+      var _a;
+      return (_a = panel.getAttribute("id")) !== null && _a !== void 0 ? _a : `fabric-wizard-panel-${parseInt(uniqueId())}`;
+    });
+  }
+  /**
+   * Handles the step state change event.
+   * @private
+   * @param {CustomEvent} e - The custom event.
+   */
+  handleWizardStepStateChange(e) {
+    const index = e.detail.index;
+    const active = e.detail.active;
+    if (active) {
+      this.currentIndex = index;
+    }
+    this.slottedpanels[index].state = e.detail.state;
+    this.setSteps();
+  }
+  /**
+   * Handles the panel state change event.
+   * @private
+   * @param {CustomEvent} e - The custom event.
+   */
+  handlePanelStateChange(e) {
+    const index = e.detail.index;
+    const active = e.detail.active;
+    if (active) {
+      this.currentIndex = index;
+    }
+    this.slottedsteps[index].state = e.detail.state;
+    this.setSteps();
+  }
+  /**
+   * Emits a wizard change event.
+   * @fires wizard-change
+   * @private
+   */
+  emitChange() {
+    this.$emit("wizard-change", {
+      currentIndex: this.currentIndex,
+      activeid: this.activeid
+    });
+  }
+  /**
+   * Emits a wizard complete event.
+   * @fires wizard-complete
+   * @private
+   */
+  emitComplete() {
+    this.dispatchEvent(new CustomEvent(WizardEvents.wizardComplete, {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  setAllStepTabIndex(tabIndex) {
+    this.slottedsteps.forEach(step => {
+      step.setAttribute("tabindex", String(tabIndex));
+    });
+  }
+  focusFirstEnabledStep() {
+    const firstEnabled = this.slottedsteps.find(step => !step.disabled);
+    if (firstEnabled) {
+      this.setAllStepTabIndex(-1);
+      firstEnabled.setAttribute("tabindex", "0");
+      firstEnabled.focus();
     }
+  }
 }
-__decorate([
-    attr({ mode: "boolean" })
-], Wizard.prototype, "ordered", void 0);
-__decorate([
-    attr({ mode: "boolean", attribute: "disable-on-complete" })
-], Wizard.prototype, "disableOnComplete", void 0);
-__decorate([
-    attr({ attribute: "current-index", converter: nullableNumberConverter })
-], Wizard.prototype, "currentIndex", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "stepcontainer", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "panelcontainer", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "slottedsteps", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "slottedbuttons", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "slottedpanels", void 0);
-__decorate([
-    observable
-], Wizard.prototype, "activeid", void 0);
-//# sourceMappingURL=wizard.js.map
+__decorate([attr({
+  mode: "boolean"
+})], Wizard.prototype, "numbered", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Wizard.prototype, "linear", void 0);
+__decorate([attr({
+  mode: "boolean",
+  attribute: "disable-on-complete"
+})], Wizard.prototype, "disableOnComplete", void 0);
+__decorate([attr({
+  attribute: "current-index",
+  converter: nullableNumberConverter
+})], Wizard.prototype, "currentIndex", void 0);
+__decorate([observable], Wizard.prototype, "stepcontainer", void 0);
+__decorate([observable], Wizard.prototype, "panelcontainer", void 0);
+__decorate([observable], Wizard.prototype, "slottedsteps", void 0);
+__decorate([observable], Wizard.prototype, "slottedactions", void 0);
+__decorate([observable], Wizard.prototype, "slottedpanels", void 0);
+__decorate([observable], Wizard.prototype, "activeid", void 0);
+
+export { Wizard };