@m3e/web 2.5.4 → 2.5.6

package/dist/stepper.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.min.js","sources":["../../src/stepper/StepPanelElement.ts","../../src/stepper/StepElement.ts","../../src/stepper/StepperButtonElementBase.ts","../../src/stepper/StepperElement.ts","../../src/stepper/StepperNextElement.ts","../../src/stepper/StepperPreviousElement.ts","../../src/stepper/StepperResetElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a step in a wizard-like workflow.\r\n *\r\n * @description\r\n * The `m3e-step-panel` is a container for presenting contextual content and actions\r\n * associated with a single step in a structured workflow.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-step-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n * @slot actions- Renders the actions bar of the panel.\r\n *\r\n * @cssprop --m3e-step-panel-padding - Padding inside the step panel container, defining internal spacing around content.\r\n * @cssprop --m3e-step-panel-spacing - Vertical gap between stacked elements within the step panel.\r\n * @cssprop --m3e-step-panel-actions-height - Minimum height of the slotted actions container.\r\n */\r\n@customElement(\"m3e-step-panel\")\r\nexport class M3eStepPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem);\r\n      row-gap: var(--m3e-step-panel-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: var(--m3e-step-panel-actions-height, 3rem);\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n  `;\r\n\r\n  /** @internal */\r\n  @state() active = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.slot = \"panel\";\r\n\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-collapsible ?open=${this.active}>\r\n      <div class=\"content\">\r\n        <div><slot></slot></div>\r\n        <slot name=\"actions\"></slot>\r\n      </div>\r\n    </m3e-collapsible>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-step-panel\": M3eStepPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eStepperElement } from \"./StepperElement\";\r\nimport { M3eStepPanelElement } from \"./StepPanelElement\";\r\n\r\n/**\r\n * A step in a wizard-like workflow.\r\n *\r\n * @description\r\n * The `m3e-step` component represents a single step in a structured, wizard-like workflow.\r\n * It supports semantic labeling, stateful styling, and optional interaction for completed,\r\n * selected, invalid, or disabled states. It aligns with Material Design guidance for progressive\r\n * disclosure, accessible navigation, and visual continuity across horizontal and vertical layouts.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-step\r\n *\r\n * @slot - Renders the label of the step.\r\n * @slot icon - Renders the icon of the step.\r\n * @slot done-icon - Renders the icon of a completed step.\r\n * @slot edit-icon - Renders the icon of a completed editable step.\r\n * @slot error-icon - Renders icon of an invalid step.\r\n * @slot hint - Renders the hint text of the step.\r\n * @slot error - Renders the error message for an invalid step.\r\n *\r\n * @attr completed - Whether the step has been completed.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr editable - Whether the step is editable and users can return to it after completion.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr optional - Whether the step is optional.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-step-shape - Border radius of the step container, defining its visual shape.\r\n * @cssprop --m3e-step-padding - Internal padding of the step container, used for layout spacing.\r\n * @cssprop --m3e-step-icon-shape - Border radius of the icon container, controlling its geometric form.\r\n * @cssprop --m3e-step-icon-size - Width and height of the icon container and icon glyph.\r\n * @cssprop --m3e-step-selected-icon-container-color - Background color of the icon when the step is selected.\r\n * @cssprop --m3e-step-selected-icon-color - Foreground color of the icon when the step is selected.\r\n * @cssprop --m3e-step-completed-icon-container-color - Background color of the icon when the step is completed.\r\n * @cssprop --m3e-step-completed-icon-color - Foreground color of the icon when the step is completed.\r\n * @cssprop --m3e-step-unselected-icon-container-color - Background color of the icon when the step is inactive.\r\n * @cssprop --m3e-step-unselected-icon-color - Foreground color of the icon when the step is inactive.\r\n * @cssprop --m3e-step-icon-error-color - Foreground color of the icon when the step is invalid.\r\n * @cssprop --m3e-step-disabled-icon-container-color - Base color used to mix the disabled icon background.\r\n * @cssprop --m3e-step-disabled-icon-color - Base color used to mix the disabled icon foreground.\r\n * @cssprop --m3e-step-label-color - Text color of the step label in its default state.\r\n * @cssprop --m3e-step-label-error-color - Text color of the step label when the step is invalid.\r\n * @cssprop --m3e-step-disabled-label-color - Base color used to mix the disabled label foreground.\r\n * @cssprop --m3e-step-font-size - Font size of the step label.\r\n * @cssprop --m3e-step-font-weight - Font weight of the step label.\r\n * @cssprop --m3e-step-line-height - Line height of the step label.\r\n * @cssprop --m3e-step-tracking - Letter spacing of the step label.\r\n * @cssprop --m3e-step-icon-label-space - Gap between icon and label.\r\n * @cssprop --m3e-step-hint-font-size - Font size of hint and error messages.\r\n * @cssprop --m3e-step-hint-font-weight - Font weight of hint and error messages.\r\n * @cssprop --m3e-step-hint-line-height - Line height of hint and error messages.\r\n * @cssprop --m3e-step-hint-tracking - Letter spacing of hint and error messages.\r\n * @cssprop --m3e-step-hint-color - Text color of hint messages in valid state.\r\n * @cssprop --m3e-step-disabled-hint-color - Base color used to mix the disabled hint foreground.\r\n */\r\n@customElement(\"m3e-step\")\r\nexport class M3eStepElement extends Selected(\r\n  KeyboardClick(Focusable(HtmlFor(Disabled(AttachInternals(Role(LitElement, \"tab\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      min-width: 0px;\r\n      position: relative;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      min-width: inherit;\r\n      position: relative;\r\n      border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium});\r\n      padding: var(--m3e-step-padding, 1.5rem);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border-radius: var(--m3e-step-icon-shape, 50%);\r\n      width: var(--m3e-step-icon-size, 1.5rem);\r\n      height: var(--m3e-step-icon-size, 1.5rem);\r\n    }\r\n    .icon svg,\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"edit-icon\"]),\r\n    ::slotted([slot=\"done-icon\"]),\r\n    ::slotted([slot=\"error-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-step-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[selected]) .icon {\r\n      background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[completed]:not([invalid])) .icon {\r\n      background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected]):not([completed]):not([invalid])) .icon {\r\n      background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected])[invalid]) .icon {\r\n      color: var(--m3e-step-icon-error-color, ${DesignToken.color.error});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .icon {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%,\r\n        transparent\r\n      );\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n\r\n    :host(:not([aria-disabled=\"true\"])) .label {\r\n      color: var(--m3e-step-label-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected])[invalid]) .label {\r\n      color: var(--m3e-step-label-error-color, ${DesignToken.color.error});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .label {\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    .wrapper {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-direction: var(--_step-direction, row);\r\n      gap: var(--m3e-step-icon-label-space, 0.5rem);\r\n      justify-content: flex-start;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: var(--_step-label-align-items, flex-start);\r\n    }\r\n    ::slotted([slot=\"hint\"]),\r\n    .hint,\r\n    ::slotted([slot=\"error\"]) {\r\n      font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([invalid])) ::slotted([slot=\"hint\"]),\r\n    :host(:not([aria-disabled=\"true\"]):not([invalid])) .hint {\r\n      color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([aria-disabled=\"true\"]) ::slotted([slot=\"hint\"]),\r\n    :host([aria-disabled=\"true\"]) .hint {\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Whether the step is optional.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) optional = false;\r\n\r\n  /**\r\n   * Whether the step is editable and users can return to it after completion.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) editable = false;\r\n\r\n  /**\r\n   * Whether the step has been completed.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) completed = false;\r\n\r\n  /**\r\n   * Whether the step has an error.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) invalid = false;\r\n\r\n  /** @internal */\r\n  @state() index = -1;\r\n\r\n  /** A reference to the panel controlled by the step. */\r\n  get panel(): M3eStepPanelElement | null {\r\n    return this.control instanceof M3eStepPanelElement ? this.control : null;\r\n  }\r\n\r\n  /** The stepper to which this step belongs. */\r\n  get stepper(): M3eStepperElement | null {\r\n    return this.closest(\"m3e-stepper\");\r\n  }\r\n\r\n  /** Resets the step to its initial state, clearing any form data. */\r\n  reset(): void {\r\n    this.invalid = false;\r\n    this.completed = false;\r\n    this.panel?.querySelector(\"form\")?.reset();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    if (control instanceof M3eStepPanelElement) {\r\n      control.id = control.id || `m3e-step-panel-${M3eStepElement.__nextId++}`;\r\n      addAriaReferencedId(this, \"aria-controls\", control.id);\r\n      control.style.order = this.style.order;\r\n    }\r\n    super.attach(control);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.control.style.order = \"\";\r\n      if (this.control.id) {\r\n        removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.slot = \"step\";\r\n\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-stepper\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const hint = html`<slot name=\"hint\">${this.optional ? html`<span class=\"hint\">(Optional)</span>` : nothing}</slot>`;\r\n    const error = html`<slot name=\"error\">${hint}</slot>`;\r\n\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n          ${this.invalid ? error : hint}\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    if (!this.selected) {\r\n      if (this.invalid) {\r\n        return html`<slot name=\"error-icon\">\r\n          <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path\r\n              d=\"m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z\"\r\n            />\r\n          </svg>\r\n        </slot>`;\r\n      }\r\n      if (this.completed) {\r\n        if (this.editable) {\r\n          return html`<slot name=\"edit-icon\">\r\n            <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z\"\r\n              />\r\n            </svg>\r\n          </slot>`;\r\n        }\r\n        return html`<slot name=\"done-icon\">\r\n          <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </slot>`;\r\n      }\r\n    }\r\n\r\n    return html`<slot name=\"icon\">${this.index + 1}</slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    this.selected = true;\r\n    if (\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true })) &&\r\n      this.closest(\"m3e-stepper\")?.moveTo(this.index)\r\n    ) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-step\": M3eStepElement;\r\n  }\r\n}\r\n","import { ActionElementBase } from \"@m3e/web/core\";\r\n\r\n/** A base implementation for a button used to move to a step in a stepper. This class must be inherited. */\r\nexport abstract class StepperButtonElementBase extends ActionElementBase {\r\n  /** @private */ readonly #action: \"next\" | \"previous\" | \"reset\";\r\n\r\n  constructor(action: \"next\" | \"previous\" | \"reset\") {\r\n    super();\r\n    this.#action = action;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    switch (this.#action) {\r\n      case \"next\":\r\n        this.closest(\"m3e-stepper\")?.moveNext();\r\n        break;\r\n      case \"previous\":\r\n        this.closest(\"m3e-stepper\")?.movePrevious();\r\n        break;\r\n\r\n      case \"reset\":\r\n        this.closest(\"m3e-stepper\")?.reset();\r\n        break;\r\n    }\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eStepElement } from \"./StepElement\";\r\nimport { StepLabelPosition } from \"./StepLabelPosition\";\r\nimport { StepHeaderPosition } from \"./StepHeaderPosition\";\r\nimport { StepperOrientation } from \"./StepperOrientation\";\r\n\r\n/**\r\n * Provides a wizard-like workflow by dividing content into logical steps.\r\n *\r\n * @description\r\n * The `m3e-stepper` component orchestrates a structured, wizard-like workflow by dividing\r\n * content into discrete, navigable steps. It supports horizontal and vertical orientations,\r\n * linear progression, and configurable label and header positioning.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-stepper\r\n *\r\n * @attr header-position - The position of the step header, when oriented horizontally.\r\n * @attr label-position - The position of the step labels, when oriented horizontally.\r\n * @attr linear - Whether the validity of previous steps should be checked or not.\r\n * @attr orientation - The orientation of the stepper.\r\n *\r\n * @slot step - Renders a step.\r\n * @slot panel - Renders a panel.\r\n *\r\n * @fires change - Emitted when the selected step changes.\r\n *\r\n * @cssprop --m3e-step-divider-thickness - Thickness of the divider line between steps.\r\n * @cssprop --m3e-step-divider-color - Color of the divider line between steps.\r\n * @cssprop --m3e-step-divider-inset - Inset offset for divider alignment within step layout.\r\n */\r\n@customElement(\"m3e-stepper\")\r\nexport class M3eStepperElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-stepper:not(:state(-vertical)) > .-m3e-step-divider::before {\r\n        border-bottom-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-bottom-style: solid;\r\n        border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:not(:state(-vertical)) > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:not(:state(-vertical)) > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        border-bottom-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-bottom-style: solid;\r\n        border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:not(:state(-vertical))[label-position=\"end\"] > .-m3e-step-divider {\r\n        margin-block: auto;\r\n      }\r\n      m3e-stepper:not(:state(-vertical))[label-position=\"below\"] > .-m3e-step-divider::before,\r\n      m3e-stepper:not(:state(-vertical))[label-position=\"below\"]\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:not(:state(-vertical))[label-position=\"below\"]\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n      }\r\n      m3e-stepper:state(-vertical) > [slot=\"panel\"] {\r\n        margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n      }\r\n      m3e-stepper:state(-vertical) > [slot=\"panel\"]:not(:last-of-type) {\r\n        border-inline-start-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-inline-start-style: solid;\r\n        border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:state(-vertical) > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:state(-vertical) > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n        border-inline-start-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-inline-start-style: solid;\r\n        border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    :host(:not(:state(-vertical))) .header {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      flex-wrap: nowrap;\r\n    }\r\n    :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider) {\r\n      flex: 1 1 auto;\r\n      position: relative;\r\n      min-width: 2rem;\r\n    }\r\n    :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider)::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    :host(:not(:state(-vertical)):not([label-position=\"below\"])) ::slotted(.-m3e-step-divider)::before {\r\n      top: 50%;\r\n    }\r\n    :host(:not(:state(-vertical))) ::slotted([slot=\"step\"]) {\r\n      align-self: stretch;\r\n    }\r\n    :host(:not(:state(-vertical))) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:not(:state(-vertical))) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      content: \"\";\r\n      display: block;\r\n      position: absolute;\r\n      top: 0;\r\n    }\r\n    :host(:not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      top: 50%;\r\n    }\r\n    :host(:not(:dir(rtl)):not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      left: 0;\r\n      right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:dir(rtl):not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      right: 0;\r\n      left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:not(:dir(rtl)):not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      right: 0;\r\n    }\r\n    :host(:dir(rtl):not(:state(-vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      left: 0;\r\n    }\r\n    :host(:not(:dir(rtl)):not(:state(-vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      left: 0;\r\n      right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:dir(rtl):not(:state(-vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      right: 0;\r\n      left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:not(:dir(rtl)):not(:state(-vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n      right: 0;\r\n    }\r\n    :host(:dir(rtl):not(:state(-vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n      left: 0;\r\n    }\r\n    :host(:not(:state(-vertical))[label-position=\"below\"]) {\r\n      --_step-direction: column;\r\n      --_step-label-align-items: center;\r\n    }\r\n    :host(:state(-vertical)) .header {\r\n      display: contents;\r\n    }\r\n    :host(:state(-vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider)) {\r\n      flex: none;\r\n    }\r\n    :host(:state(-vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:state(-vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      content: \"\";\r\n      display: block;\r\n      position: absolute;\r\n      left: 0;\r\n    }\r\n    :host(:state(-vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      top: 0;\r\n      bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:state(-vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      bottom: 0;\r\n    }\r\n    :host(:not(:state(-vertical))) {\r\n      --m3e-collapsible-animation-duration: 0ms;\r\n    }\r\n    :host(:state(-no-animate)) {\r\n      --m3e-collapsible-animation-duration: 0ms;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _orientation?: Exclude<StepperOrientation, \"auto\">;\r\n  /** @private */ @state() private _selectedIndex: number | null = null;\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eStepElement>()\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange());\r\n\r\n  /**\r\n   * The position of the step header, when oriented horizontally.\r\n   * @default \"above\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: StepHeaderPosition = \"above\";\r\n\r\n  /**\r\n   * The position of the step labels, when oriented horizontally.\r\n   * @default \"end\"\r\n   */\r\n  @property({ attribute: \"label-position\", reflect: true }) labelPosition: StepLabelPosition = \"end\";\r\n\r\n  /**\r\n   * Whether the validity of previous steps should be checked or not.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) linear = false;\r\n\r\n  /**\r\n   * The orientation of the stepper.\r\n   * @default \"horizontal\"\r\n   */\r\n  @property({ reflect: true }) orientation: StepperOrientation = \"horizontal\";\r\n\r\n  /** The steps. */\r\n  get steps(): readonly M3eStepElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected step. */\r\n  get selectedStep(): M3eStepElement | null {\r\n    return this._selectedIndex !== null ? (this.steps[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected step. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the previous step.\r\n   * @returns {boolean} Whether the stepper moved to the previous step.\r\n   */\r\n  movePrevious(): boolean {\r\n    return this.moveTo((this._selectedIndex ?? 1) - 1);\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the next step.\r\n   * @returns {boolean} Whether the stepper moved to the next step.\r\n   */\r\n  moveNext(): boolean {\r\n    return this.moveTo((this._selectedIndex ?? -1) + 1);\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the step with the specified index.\r\n   * @param index The zero-based index of the step to which to move.\r\n   * @returns {boolean} Whether the stepper moved to the specified `index`.\r\n   */\r\n  moveTo(index: number): boolean {\r\n    const selectedStep = this.selectedStep;\r\n    if (selectedStep && selectedStep.index === index) {\r\n      return true;\r\n    }\r\n\r\n    if (this.steps[index]?.disabled) {\r\n      return false;\r\n    }\r\n\r\n    if (index >= 0 && index < this.steps.length) {\r\n      if (selectedStep) {\r\n        const valid = this.#checkValidity();\r\n        if (this.linear) {\r\n          if (index < selectedStep.index) {\r\n            const previousStep = this[selectionManager].items[index];\r\n            if (!previousStep || (previousStep.completed && !previousStep.editable)) {\r\n              return false;\r\n            }\r\n          } else if (index > selectedStep.index + 1) {\r\n            const nextStep = this[selectionManager].items[index];\r\n            if (!nextStep || !nextStep.completed) {\r\n              return false;\r\n            }\r\n          } else if (!valid && !selectedStep.optional) {\r\n            return false;\r\n          }\r\n        }\r\n\r\n        selectedStep.completed = true;\r\n      }\r\n\r\n      this._selectedIndex = index;\r\n      this[selectionManager].select(this.selectedStep);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      return true;\r\n    } else {\r\n      if (selectedStep) {\r\n        this[selectionManager].deselect(selectedStep);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n      return false;\r\n    }\r\n  }\r\n\r\n  /** Resets the stepper to its initial state, clearing any form data. */\r\n  reset(): void {\r\n    this.steps.forEach((x) => x.reset());\r\n    const index = this.steps.findIndex((x) => !x.disabled);\r\n    if (index !== this._selectedIndex) {\r\n      this._selectedIndex = index;\r\n      this[selectionManager].select(this.selectedStep);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"-no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._orientation = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.orientation === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"orientation\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.orientation === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._orientation = undefined;\r\n        this.#updateDisplayOrder();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_orientation\")) {\r\n      this.#updateDisplayOrder();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedStep?.panel) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedStep.panel);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    if (!this[selectionManager].vertical) {\r\n      return html`${this.headerPosition === \"above\" ? this.#renderHeader() : nothing}\r\n        <m3e-slide class=\"steps\" selected-index=\"${ifDefined(panelIndex)}\">\r\n          <slot name=\"panel\"></slot>\r\n        </m3e-slide>\r\n        ${this.headerPosition === \"below\" ? this.#renderHeader() : nothing}`;\r\n    }\r\n\r\n    return html`${this.#renderHeader()} <slot name=\"panel\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<div\r\n      class=\"header\"\r\n      role=\"tablist\"\r\n      aria-orientation=\"${ifDefined(this[selectionManager].vertical ? \"vertical\" : undefined)}\"\r\n      @change=\"${this.#handleChange}\"\r\n    >\r\n      <slot name=\"step\" @slotchange=\"${this.#handleSlotChange}\" @keydown=\"${this.#handleKeyDown}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    // Note: change event emitted from moveTo.\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added, removed } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-step\")]);\r\n    if (added.length > 0 || removed.length > 0) {\r\n      this.querySelectorAll(\".-m3e-step-divider\").forEach((x) => x.remove());\r\n      for (let i = 0; i < this[selectionManager].items.length; i++) {\r\n        const step = this[selectionManager].items[i];\r\n        step.index = i;\r\n        if (i > 0) {\r\n          const divider = document.createElement(\"div\");\r\n          divider.ariaHidden = \"true\";\r\n          divider.classList.add(\"-m3e-step-divider\");\r\n          divider.slot = \"step\";\r\n          step.insertAdjacentElement(\"beforebegin\", divider);\r\n        }\r\n      }\r\n\r\n      this.#updateDisplayOrder();\r\n\r\n      if (this[selectionManager].selectedItems.length == 0) {\r\n        this[selectionManager].select(this[selectionManager].items.find((x) => !x.disabled));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.steps.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n\r\n    for (const step of this[selectionManager].items) {\r\n      if (step.panel) {\r\n        step.panel.active = step.index === selectedIndex;\r\n      }\r\n    }\r\n\r\n    if (selected && this.matches(\":focus-within\") && !selected.matches(\":focus\")) {\r\n      selected.focus();\r\n    }\r\n\r\n    if (hasCustomState(this, \"-no-animate\")) {\r\n      requestAnimationFrame(() => deleteCustomState(this, \"-no-animate\"));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #checkValidity(): boolean {\r\n    let valid = false;\r\n    if (this.selectedStep) {\r\n      valid = this.selectedStep.panel?.querySelector(\"form\")?.checkValidity() ?? true;\r\n      if (this.selectedStep.optional) {\r\n        valid = true;\r\n      }\r\n      this.selectedStep.invalid = !valid;\r\n    }\r\n    return valid;\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n      this._orientation = matches.get(Breakpoint.XSmall) ? \"vertical\" : \"horizontal\";\r\n      this.#updateDisplayOrder();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateDisplayOrder(): void {\r\n    this[selectionManager].vertical = (this._orientation ?? this.orientation) === \"vertical\";\r\n    setCustomState(this, \"-vertical\", this[selectionManager].vertical);\r\n\r\n    if (!this[selectionManager].vertical) {\r\n      this.steps.forEach((x) => {\r\n        x.style.order = \"\";\r\n        if (x.panel) {\r\n          x.panel.style.order = \"\";\r\n        }\r\n      });\r\n    } else {\r\n      this.steps.forEach((x, i) => {\r\n        x.style.order = `${i}`;\r\n        if (x.panel) {\r\n          x.panel.style.order = `${i}`;\r\n        }\r\n      });\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper\": M3eStepperElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to move a stepper to the next step.\r\n * @tag m3e-stepper-previous\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-next\")\r\nexport class M3eStepperNextElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"next\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-next\": M3eStepperNextElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to move a stepper to the previous step.\r\n * @tag m3e-stepper-previous\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-previous\")\r\nexport class M3eStepperPreviousElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"previous\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-previous\": M3eStepperPreviousElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to reset a stepper to its initial state.\r\n * @tag m3e-stepper-reset\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-reset\")\r\nexport class M3eStepperResetElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"reset\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-reset\": M3eStepperResetElement;\r\n  }\r\n}\r\n"],"names":["M3eStepPanelElement","Role","LitElement","constructor","this","active","connectedCallback","slot","super","render","html","styles","css","__decorate","state","prototype","customElement","M3eStepElement","M3eStepElement_1","Selected","KeyboardClick","Focusable","HtmlFor","Disabled","AttachInternals","_M3eStepElement_clickHandler","set","e","__classPrivateFieldGet","call","optional","editable","completed","invalid","index","panel","control","stepper","closest","reset","querySelector","attach","id","__nextId","addAriaReferencedId","style","order","detach","removeAriaReferencedId","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","selectionManager","notifySelectionChange","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","hint","nothing","error","disabled","_M3eStepElement_instances","_M3eStepElement_renderIcon","selected","preventDefault","stopImmediatePropagation","defaultPrevented","dispatchEvent","Event","bubbles","composed","cancelable","moveTo","DesignToken","shape","corner","medium","color","primary","onPrimary","inverseSurface","inverseOnSurface","onSurface","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","body","onSurfaceVariant","query","property","type","Boolean","reflect","StepperButtonElementBase","ActionElementBase","action","_StepperButtonElementBase_action","__classPrivateFieldSet","_onClick","moveNext","movePrevious","M3eStepperElement","ReconnectedCallback","_M3eStepperElement_breakpointUnobserve","_selectedIndex","_a","SelectionManager","withHomeAndEnd","withWrap","onSelectedItemsChange","_M3eStepperElement_instances","_M3eStepperElement_handleSelectedChange","headerPosition","labelPosition","linear","orientation","steps","items","selectedStep","selectedIndex","length","valid","previousStep","nextStep","select","deselect","findIndex","addCustomState","_orientation","undefined","reconnectedCallback","_M3eStepperElement_initBreakpointMonitoring","willUpdate","_M3eStepperElement_updateDisplayOrder","panelIndex","querySelectorAll","indexOf","vertical","ifDefined","_M3eStepperElement_renderHeader","_M3eStepperElement_handleChange","_M3eStepperElement_handleSlotChange","_M3eStepperElement_handleKeyDown","stopPropagation","added","removed","setItems","remove","i","step","divider","document","createElement","ariaHidden","classList","add","insertAdjacentElement","selectedItems","find","onKeyDown","matches","focus","hasCustomState","requestAnimationFrame","deleteCustomState","checkValidity","M3eBreakpointObserver","observe","Breakpoint","XSmall","get","setCustomState","registerStyleSheet","outline","attribute","M3eStepperNextElement","M3eStepperPreviousElement","M3eStepperResetElement"],"mappings":"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"}
+{"version":3,"file":"stepper.min.js","sources":["../../src/stepper/StepPanelElement.ts","../../src/stepper/StepElement.ts","../../src/stepper/StepperButtonElementBase.ts","../../src/stepper/StepperElement.ts","../../src/stepper/StepperNextElement.ts","../../src/stepper/StepperPreviousElement.ts","../../src/stepper/StepperResetElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a step in a wizard-like workflow.\r\n *\r\n * @description\r\n * The `m3e-step-panel` is a container for presenting contextual content and actions\r\n * associated with a single step in a structured workflow.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-step-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n * @slot actions- Renders the actions bar of the panel.\r\n *\r\n * @cssprop --m3e-step-panel-padding - Padding inside the step panel container, defining internal spacing around content.\r\n * @cssprop --m3e-step-panel-spacing - Vertical gap between stacked elements within the step panel.\r\n * @cssprop --m3e-step-panel-actions-height - Minimum height of the slotted actions container.\r\n */\r\n@customElement(\"m3e-step-panel\")\r\nexport class M3eStepPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem);\r\n      row-gap: var(--m3e-step-panel-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: var(--m3e-step-panel-actions-height, 3rem);\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n  `;\r\n\r\n  /** @internal */\r\n  @state() active = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.slot = \"panel\";\r\n\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-collapsible ?open=${this.active}>\r\n      <div class=\"content\">\r\n        <div><slot></slot></div>\r\n        <slot name=\"actions\"></slot>\r\n      </div>\r\n    </m3e-collapsible>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-step-panel\": M3eStepPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eStepperElement } from \"./StepperElement\";\r\nimport { M3eStepPanelElement } from \"./StepPanelElement\";\r\n\r\n/**\r\n * A step in a wizard-like workflow.\r\n *\r\n * @description\r\n * The `m3e-step` component represents a single step in a structured, wizard-like workflow.\r\n * It supports semantic labeling, stateful styling, and optional interaction for completed,\r\n * selected, invalid, or disabled states. It aligns with Material Design guidance for progressive\r\n * disclosure, accessible navigation, and visual continuity across horizontal and vertical layouts.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-step\r\n *\r\n * @slot - Renders the label of the step.\r\n * @slot icon - Renders the icon of the step.\r\n * @slot done-icon - Renders the icon of a completed step.\r\n * @slot edit-icon - Renders the icon of a completed editable step.\r\n * @slot error-icon - Renders icon of an invalid step.\r\n * @slot hint - Renders the hint text of the step.\r\n * @slot error - Renders the error message for an invalid step.\r\n *\r\n * @attr completed - Whether the step has been completed.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr editable - Whether the step is editable and users can return to it after completion.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr optional - Whether the step is optional.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-step-shape - Border radius of the step container, defining its visual shape.\r\n * @cssprop --m3e-step-padding - Internal padding of the step container, used for layout spacing.\r\n * @cssprop --m3e-step-icon-shape - Border radius of the icon container, controlling its geometric form.\r\n * @cssprop --m3e-step-icon-size - Width and height of the icon container and icon glyph.\r\n * @cssprop --m3e-step-selected-icon-container-color - Background color of the icon when the step is selected.\r\n * @cssprop --m3e-step-selected-icon-color - Foreground color of the icon when the step is selected.\r\n * @cssprop --m3e-step-completed-icon-container-color - Background color of the icon when the step is completed.\r\n * @cssprop --m3e-step-completed-icon-color - Foreground color of the icon when the step is completed.\r\n * @cssprop --m3e-step-unselected-icon-container-color - Background color of the icon when the step is inactive.\r\n * @cssprop --m3e-step-unselected-icon-color - Foreground color of the icon when the step is inactive.\r\n * @cssprop --m3e-step-icon-error-color - Foreground color of the icon when the step is invalid.\r\n * @cssprop --m3e-step-disabled-icon-container-color - Base color used to mix the disabled icon background.\r\n * @cssprop --m3e-step-disabled-icon-color - Base color used to mix the disabled icon foreground.\r\n * @cssprop --m3e-step-label-color - Text color of the step label in its default state.\r\n * @cssprop --m3e-step-label-error-color - Text color of the step label when the step is invalid.\r\n * @cssprop --m3e-step-disabled-label-color - Base color used to mix the disabled label foreground.\r\n * @cssprop --m3e-step-font-size - Font size of the step label.\r\n * @cssprop --m3e-step-font-weight - Font weight of the step label.\r\n * @cssprop --m3e-step-line-height - Line height of the step label.\r\n * @cssprop --m3e-step-tracking - Letter spacing of the step label.\r\n * @cssprop --m3e-step-icon-label-space - Gap between icon and label.\r\n * @cssprop --m3e-step-hint-font-size - Font size of hint and error messages.\r\n * @cssprop --m3e-step-hint-font-weight - Font weight of hint and error messages.\r\n * @cssprop --m3e-step-hint-line-height - Line height of hint and error messages.\r\n * @cssprop --m3e-step-hint-tracking - Letter spacing of hint and error messages.\r\n * @cssprop --m3e-step-hint-color - Text color of hint messages in valid state.\r\n * @cssprop --m3e-step-disabled-hint-color - Base color used to mix the disabled hint foreground.\r\n */\r\n@customElement(\"m3e-step\")\r\nexport class M3eStepElement extends Selected(\r\n  KeyboardClick(Focusable(HtmlFor(Disabled(AttachInternals(Role(LitElement, \"tab\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      min-width: 0px;\r\n      position: relative;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      min-width: inherit;\r\n      position: relative;\r\n      border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium});\r\n      padding: var(--m3e-step-padding, 1.5rem);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border-radius: var(--m3e-step-icon-shape, 50%);\r\n      width: var(--m3e-step-icon-size, 1.5rem);\r\n      height: var(--m3e-step-icon-size, 1.5rem);\r\n    }\r\n    .icon svg,\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"edit-icon\"]),\r\n    ::slotted([slot=\"done-icon\"]),\r\n    ::slotted([slot=\"error-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-step-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[selected]) .icon {\r\n      background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[completed]:not([invalid])) .icon {\r\n      background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected]):not([completed]):not([invalid])) .icon {\r\n      background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected])[invalid]) .icon {\r\n      color: var(--m3e-step-icon-error-color, ${DesignToken.color.error});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .icon {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%,\r\n        transparent\r\n      );\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n\r\n    :host(:not([aria-disabled=\"true\"])) .label {\r\n      color: var(--m3e-step-label-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([selected])[invalid]) .label {\r\n      color: var(--m3e-step-label-error-color, ${DesignToken.color.error});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .label {\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    .wrapper {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-direction: var(--_step-direction, row);\r\n      gap: var(--m3e-step-icon-label-space, 0.5rem);\r\n      justify-content: flex-start;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: var(--_step-label-align-items, flex-start);\r\n    }\r\n    ::slotted([slot=\"hint\"]),\r\n    .hint,\r\n    ::slotted([slot=\"error\"]) {\r\n      font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([invalid])) ::slotted([slot=\"hint\"]),\r\n    :host(:not([aria-disabled=\"true\"]):not([invalid])) .hint {\r\n      color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([aria-disabled=\"true\"]) ::slotted([slot=\"hint\"]),\r\n    :host([aria-disabled=\"true\"]) .hint {\r\n      color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Whether the step is optional.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) optional = false;\r\n\r\n  /**\r\n   * Whether the step is editable and users can return to it after completion.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) editable = false;\r\n\r\n  /**\r\n   * Whether the step has been completed.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) completed = false;\r\n\r\n  /**\r\n   * Whether the step has an error.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) invalid = false;\r\n\r\n  /** @internal */\r\n  @state() index = -1;\r\n\r\n  /** A reference to the panel controlled by the step. */\r\n  get panel(): M3eStepPanelElement | null {\r\n    return this.control instanceof M3eStepPanelElement ? this.control : null;\r\n  }\r\n\r\n  /** The stepper to which this step belongs. */\r\n  get stepper(): M3eStepperElement | null {\r\n    return this.closest(\"m3e-stepper\");\r\n  }\r\n\r\n  /** Resets the step to its initial state, clearing any form data. */\r\n  reset(): void {\r\n    this.invalid = false;\r\n    this.completed = false;\r\n    this.panel?.querySelector(\"form\")?.reset();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    if (control instanceof M3eStepPanelElement) {\r\n      control.id = control.id || `m3e-step-panel-${M3eStepElement.__nextId++}`;\r\n      addAriaReferencedId(this, \"aria-controls\", control.id);\r\n      control.style.order = this.style.order;\r\n    }\r\n    super.attach(control);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.control.style.order = \"\";\r\n      if (this.control.id) {\r\n        removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.slot = \"step\";\r\n\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-stepper\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const hint = html`<slot name=\"hint\">${this.optional ? html`<span class=\"hint\">(Optional)</span>` : nothing}</slot>`;\r\n    const error = html`<slot name=\"error\">${hint}</slot>`;\r\n\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n          ${this.invalid ? error : hint}\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    if (!this.selected) {\r\n      if (this.invalid) {\r\n        return html`<slot name=\"error-icon\">\r\n          <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path\r\n              d=\"m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z\"\r\n            />\r\n          </svg>\r\n        </slot>`;\r\n      }\r\n      if (this.completed) {\r\n        if (this.editable) {\r\n          return html`<slot name=\"edit-icon\">\r\n            <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z\"\r\n              />\r\n            </svg>\r\n          </slot>`;\r\n        }\r\n        return html`<slot name=\"done-icon\">\r\n          <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </slot>`;\r\n      }\r\n    }\r\n\r\n    return html`<slot name=\"icon\">${this.index + 1}</slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    if (\r\n      this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true })) &&\r\n      this.closest(\"m3e-stepper\")?._moveTo(this.index)\r\n    ) {\r\n      this.selected = true;\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-step\": M3eStepElement;\r\n  }\r\n}\r\n","import { ActionElementBase } from \"@m3e/web/core\";\r\n\r\n/** A base implementation for a button used to move to a step in a stepper. This class must be inherited. */\r\nexport abstract class StepperButtonElementBase extends ActionElementBase {\r\n  /** @private */ readonly #action: \"next\" | \"previous\" | \"reset\";\r\n\r\n  constructor(action: \"next\" | \"previous\" | \"reset\") {\r\n    super();\r\n    this.#action = action;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    switch (this.#action) {\r\n      case \"next\":\r\n        this.closest(\"m3e-stepper\")?.moveNext();\r\n        break;\r\n      case \"previous\":\r\n        this.closest(\"m3e-stepper\")?.movePrevious();\r\n        break;\r\n\r\n      case \"reset\":\r\n        this.closest(\"m3e-stepper\")?.reset();\r\n        break;\r\n    }\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eStepElement } from \"./StepElement\";\r\nimport { StepLabelPosition } from \"./StepLabelPosition\";\r\nimport { StepHeaderPosition } from \"./StepHeaderPosition\";\r\nimport { StepperOrientation } from \"./StepperOrientation\";\r\n\r\n/**\r\n * Provides a wizard-like workflow by dividing content into logical steps.\r\n *\r\n * @description\r\n * The `m3e-stepper` component orchestrates a structured, wizard-like workflow by dividing\r\n * content into discrete, navigable steps. It supports horizontal and vertical orientations,\r\n * linear progression, and configurable label and header positioning.\r\n *\r\n * @example\r\n * The following example demonstrates a linear multi-step form flow using the `m3e-stepper`\r\n * component. Each `m3e-step` defines a navigable step label, linked to its corresponding\r\n * `m3e-step-panel` via the `for` attribute. Navigation is orchestrated using the\r\n * `m3e-stepper-next`, `m3e-stepper-previous`, and `m3e-stepper-reset` components.\r\n *\r\n * <m3e-stepper>\r\n *  <m3e-step for=\"step1\">Fill out your name</m3e-step>\r\n *  <m3e-step for=\"step2\">Fill out your address</m3e-step>\r\n *  <m3e-step for=\"step3\">Done</m3e-step>\r\n *  <m3e-step-panel id=\"step1\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"name\">Name</label>\r\n *        <input name=\"name\" id=\"name\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step2\">\r\n *    <form>\r\n *      <m3e-form-field>\r\n *        <label slot=\"label\" for=\"address\">Address</label>\r\n *        <input name=\"address\" id=\"address\" required />\r\n *      </m3e-form-field>\r\n *    </form>\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n *  <m3e-step-panel id=\"step3\">Done\r\n *    <div slot=\"actions\">\r\n *      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>\r\n *      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>\r\n *    </div>\r\n *  </m3e-step-panel>\r\n * </m3e-stepper>\r\n *\r\n * @tag m3e-stepper\r\n *\r\n * @attr header-position - The position of the step header, when oriented horizontally.\r\n * @attr label-position - The position of the step labels, when oriented horizontally.\r\n * @attr linear - Whether the validity of previous steps should be checked or not.\r\n * @attr orientation - The orientation of the stepper.\r\n *\r\n * @slot step - Renders a step.\r\n * @slot panel - Renders a panel.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of a step changes.\r\n * @fires input - Dispatched when the selected state of a step changes.\r\n * @fires change - Dispatched when the selected step changes.\r\n *\r\n * @cssprop --m3e-step-divider-thickness - Thickness of the divider line between steps.\r\n * @cssprop --m3e-step-divider-color - Color of the divider line between steps.\r\n * @cssprop --m3e-step-divider-inset - Inset offset for divider alignment within step layout.\r\n */\r\n@customElement(\"m3e-stepper\")\r\nexport class M3eStepperElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical)) > .-m3e-step-divider::before {\r\n        border-bottom-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-bottom-style: solid;\r\n        border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        border-bottom-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-bottom-style: solid;\r\n        border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position=\"end\"] > .-m3e-step-divider {\r\n        margin-block: auto;\r\n      }\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position=\"below\"] > .-m3e-step-divider::before,\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position=\"below\"]\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position=\"below\"]\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n      }\r\n      m3e-stepper:is(:state(--vertical), :--vertical) > [slot=\"panel\"] {\r\n        margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n      }\r\n      m3e-stepper:is(:state(--vertical), :--vertical) > [slot=\"panel\"]:not(:last-of-type) {\r\n        border-inline-start-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-inline-start-style: solid;\r\n        border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n      m3e-stepper:is(:state(--vertical), :--vertical)\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type)::before,\r\n      m3e-stepper:is(:state(--vertical), :--vertical)\r\n        > [slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type)::after {\r\n        margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));\r\n        border-inline-start-width: var(--m3e-step-divider-thickness, 1px);\r\n        border-inline-start-style: solid;\r\n        border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))) .header {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      flex-wrap: nowrap;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider) {\r\n      flex: 1 1 auto;\r\n      position: relative;\r\n      min-width: 2rem;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider)::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical)):not([label-position=\"below\"]))\r\n      ::slotted(.-m3e-step-divider)::before {\r\n      top: 50%;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot=\"step\"]) {\r\n      align-self: stretch;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical)))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:not(:is(:state(--vertical), :--vertical)))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      content: \"\";\r\n      display: block;\r\n      position: absolute;\r\n      top: 0;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      top: 50%;\r\n    }\r\n    :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      left: 0;\r\n      right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      right: 0;\r\n      left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      right: 0;\r\n    }\r\n    :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position=\"end\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      left: 0;\r\n    }\r\n    :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      left: 0;\r\n      right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      right: 0;\r\n      left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n      right: 0;\r\n    }\r\n    :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position=\"below\"])\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));\r\n      left: 0;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))[label-position=\"below\"]) {\r\n      --_step-direction: column;\r\n      --_step-label-align-items: center;\r\n    }\r\n    :host(:is(:state(--vertical), :--vertical)) .header {\r\n      display: contents;\r\n    }\r\n    :host(:is(:state(--vertical), :--vertical)) ::slotted([slot=\"step\"]:not(.-m3e-step-divider)) {\r\n      flex: none;\r\n    }\r\n    :host(:is(:state(--vertical), :--vertical))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before,\r\n    :host(:is(:state(--vertical), :--vertical))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      content: \"\";\r\n      display: block;\r\n      position: absolute;\r\n      left: 0;\r\n    }\r\n    :host(:is(:state(--vertical), :--vertical))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:first-of-type))::before {\r\n      top: 0;\r\n      bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n    }\r\n    :host(:is(:state(--vertical), :--vertical))\r\n      ::slotted([slot=\"step\"]:not(.-m3e-step-divider):not(:last-of-type))::after {\r\n      top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));\r\n      bottom: 0;\r\n    }\r\n    :host(:not(:is(:state(--vertical), :--vertical))) {\r\n      --m3e-collapsible-animation-duration: 0ms;\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) {\r\n      --m3e-collapsible-animation-duration: 0ms;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _orientation?: Exclude<StepperOrientation, \"auto\">;\r\n  /** @private */ @state() private _selectedIndex: number | null = null;\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eStepElement>()\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange());\r\n\r\n  /**\r\n   * The position of the step header, when oriented horizontally.\r\n   * @default \"above\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: StepHeaderPosition = \"above\";\r\n\r\n  /**\r\n   * The position of the step labels, when oriented horizontally.\r\n   * @default \"end\"\r\n   */\r\n  @property({ attribute: \"label-position\", reflect: true }) labelPosition: StepLabelPosition = \"end\";\r\n\r\n  /**\r\n   * Whether the validity of previous steps should be checked or not.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) linear = false;\r\n\r\n  /**\r\n   * The orientation of the stepper.\r\n   * @default \"horizontal\"\r\n   */\r\n  @property({ reflect: true }) orientation: StepperOrientation = \"horizontal\";\r\n\r\n  /** The steps. */\r\n  get steps(): readonly M3eStepElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected step. */\r\n  get selectedStep(): M3eStepElement | null {\r\n    return this._selectedIndex !== null ? (this.steps[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected step. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the previous step.\r\n   * @returns {boolean} Whether the stepper moved to the previous step.\r\n   */\r\n  movePrevious(): boolean {\r\n    return this.moveTo((this._selectedIndex ?? 1) - 1);\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the next step.\r\n   * @returns {boolean} Whether the stepper moved to the next step.\r\n   */\r\n  moveNext(): boolean {\r\n    return this.moveTo((this._selectedIndex ?? -1) + 1);\r\n  }\r\n\r\n  /**\r\n   * Moves the stepper to the step with the specified index.\r\n   * @param index The zero-based index of the step to which to move.\r\n   * @returns {boolean} Whether the stepper moved to the specified `index`.\r\n   */\r\n\r\n  moveTo(index: number): boolean {\r\n    if (this._moveTo(index)) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /** @internal */\r\n  _moveTo(index: number): boolean {\r\n    const selectedStep = this.selectedStep;\r\n    if (selectedStep && selectedStep.index === index) {\r\n      return true;\r\n    }\r\n\r\n    if (this.steps[index]?.disabled) {\r\n      return false;\r\n    }\r\n\r\n    if (index >= 0 && index < this.steps.length) {\r\n      if (selectedStep) {\r\n        const valid = this.#checkValidity();\r\n        if (this.linear) {\r\n          if (index < selectedStep.index) {\r\n            const previousStep = this[selectionManager].items[index];\r\n            if (!previousStep || (previousStep.completed && !previousStep.editable)) {\r\n              return false;\r\n            }\r\n          } else if (index > selectedStep.index + 1) {\r\n            const nextStep = this[selectionManager].items[index];\r\n            if (!nextStep || !nextStep.completed) {\r\n              return false;\r\n            }\r\n          } else if (!valid && !selectedStep.optional) {\r\n            return false;\r\n          }\r\n        }\r\n\r\n        selectedStep.completed = true;\r\n      }\r\n\r\n      this._selectedIndex = index;\r\n      this[selectionManager].select(this.selectedStep);\r\n      return true;\r\n    } else {\r\n      if (selectedStep) {\r\n        this[selectionManager].deselect(selectedStep);\r\n      }\r\n      return false;\r\n    }\r\n  }\r\n\r\n  /** Resets the stepper to its initial state, clearing any form data. */\r\n  reset(): void {\r\n    this.steps.forEach((x) => x.reset());\r\n    const index = this.steps.findIndex((x) => !x.disabled);\r\n    if (index !== this._selectedIndex) {\r\n      this._selectedIndex = index;\r\n      this[selectionManager].select(this.selectedStep);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"--no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._orientation = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.orientation === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"orientation\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.orientation === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._orientation = undefined;\r\n        this.#updateDisplayOrder();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_orientation\")) {\r\n      this.#updateDisplayOrder();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedStep?.panel) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedStep.panel);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    if (!this[selectionManager].vertical) {\r\n      return html`${this.headerPosition === \"above\" ? this.#renderHeader() : nothing}\r\n        <m3e-slide class=\"steps\" selected-index=\"${ifDefined(panelIndex)}\">\r\n          <slot name=\"panel\"></slot>\r\n        </m3e-slide>\r\n        ${this.headerPosition === \"below\" ? this.#renderHeader() : nothing}`;\r\n    }\r\n\r\n    return html`${this.#renderHeader()} <slot name=\"panel\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<div\r\n      class=\"header\"\r\n      role=\"tablist\"\r\n      aria-orientation=\"${ifDefined(this[selectionManager].vertical ? \"vertical\" : undefined)}\"\r\n      @change=\"${this.#handleChange}\"\r\n    >\r\n      <slot name=\"step\" @slotchange=\"${this.#handleSlotChange}\" @keydown=\"${this.#handleKeyDown}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added, removed } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-step\")]);\r\n    if (added.length > 0 || removed.length > 0) {\r\n      this.querySelectorAll(\".-m3e-step-divider\").forEach((x) => x.remove());\r\n      for (let i = 0; i < this[selectionManager].items.length; i++) {\r\n        const step = this[selectionManager].items[i];\r\n        step.index = i;\r\n        if (i > 0) {\r\n          const divider = document.createElement(\"div\");\r\n          divider.ariaHidden = \"true\";\r\n          divider.classList.add(\"-m3e-step-divider\");\r\n          divider.slot = \"step\";\r\n          step.insertAdjacentElement(\"beforebegin\", divider);\r\n        }\r\n      }\r\n\r\n      this.#updateDisplayOrder();\r\n\r\n      if (this[selectionManager].selectedItems.length == 0) {\r\n        this[selectionManager].select(this[selectionManager].items.find((x) => !x.disabled));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.steps.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n\r\n    for (const step of this[selectionManager].items) {\r\n      if (step.panel) {\r\n        step.panel.active = step.index === selectedIndex;\r\n      }\r\n    }\r\n\r\n    if (selected && this.matches(\":focus-within\") && !selected.matches(\":focus\")) {\r\n      selected.focus();\r\n    }\r\n\r\n    if (hasCustomState(this, \"--no-animate\")) {\r\n      requestAnimationFrame(() => deleteCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #checkValidity(): boolean {\r\n    let valid = false;\r\n    if (this.selectedStep) {\r\n      valid = this.selectedStep.panel?.querySelector(\"form\")?.checkValidity() ?? true;\r\n      if (this.selectedStep.optional) {\r\n        valid = true;\r\n      }\r\n      this.selectedStep.invalid = !valid;\r\n    }\r\n    return valid;\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n      this._orientation = matches.get(Breakpoint.XSmall) ? \"vertical\" : \"horizontal\";\r\n      this.#updateDisplayOrder();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateDisplayOrder(): void {\r\n    this[selectionManager].vertical = (this._orientation ?? this.orientation) === \"vertical\";\r\n    setCustomState(this, \"--vertical\", this[selectionManager].vertical);\r\n\r\n    if (!this[selectionManager].vertical) {\r\n      this.steps.forEach((x) => {\r\n        x.style.order = \"\";\r\n        if (x.panel) {\r\n          x.panel.style.order = \"\";\r\n        }\r\n      });\r\n    } else {\r\n      this.steps.forEach((x, i) => {\r\n        x.style.order = `${i}`;\r\n        if (x.panel) {\r\n          x.panel.style.order = `${i}`;\r\n        }\r\n      });\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper\": M3eStepperElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to move a stepper to the next step.\r\n * @tag m3e-stepper-previous\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-next\")\r\nexport class M3eStepperNextElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"next\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-next\": M3eStepperNextElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to move a stepper to the previous step.\r\n * @tag m3e-stepper-previous\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-previous\")\r\nexport class M3eStepperPreviousElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"previous\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-previous\": M3eStepperPreviousElement;\r\n  }\r\n}\r\n","import { customElement } from \"@m3e/web/core\";\r\n\r\nimport { StepperButtonElementBase } from \"./StepperButtonElementBase\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to reset a stepper to its initial state.\r\n * @tag m3e-stepper-reset\r\n *\r\n * @slot - Renders the content of the action.\r\n */\r\n@customElement(\"m3e-stepper-reset\")\r\nexport class M3eStepperResetElement extends StepperButtonElementBase {\r\n  constructor() {\r\n    super(\"reset\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-stepper-reset\": M3eStepperResetElement;\r\n  }\r\n}\r\n"],"names":["M3eStepPanelElement","Role","LitElement","constructor","this","active","connectedCallback","slot","super","render","html","styles","css","__decorate","state","prototype","customElement","M3eStepElement","M3eStepElement_1","Selected","KeyboardClick","Focusable","HtmlFor","Disabled","AttachInternals","_M3eStepElement_clickHandler","set","e","__classPrivateFieldGet","call","optional","editable","completed","invalid","index","panel","control","stepper","closest","reset","querySelector","attach","id","__nextId","addAriaReferencedId","style","order","detach","removeAriaReferencedId","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","selectionManager","notifySelectionChange","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","hint","nothing","error","disabled","_M3eStepElement_instances","_M3eStepElement_renderIcon","selected","preventDefault","stopImmediatePropagation","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","_moveTo","DesignToken","shape","corner","medium","color","primary","onPrimary","inverseSurface","inverseOnSurface","onSurface","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","body","onSurfaceVariant","query","property","type","Boolean","reflect","StepperButtonElementBase","ActionElementBase","action","_StepperButtonElementBase_action","__classPrivateFieldSet","_onClick","moveNext","movePrevious","M3eStepperElement","ReconnectedCallback","_M3eStepperElement_breakpointUnobserve","_selectedIndex","_a","SelectionManager","withHomeAndEnd","withWrap","onSelectedItemsChange","_M3eStepperElement_instances","_M3eStepperElement_handleSelectedChange","headerPosition","labelPosition","linear","orientation","steps","items","selectedStep","selectedIndex","moveTo","length","valid","previousStep","nextStep","select","deselect","findIndex","addCustomState","_orientation","undefined","reconnectedCallback","_M3eStepperElement_initBreakpointMonitoring","willUpdate","_M3eStepperElement_updateDisplayOrder","panelIndex","querySelectorAll","indexOf","vertical","ifDefined","_M3eStepperElement_renderHeader","_M3eStepperElement_handleChange","_M3eStepperElement_handleSlotChange","_M3eStepperElement_handleKeyDown","stopPropagation","added","removed","setItems","remove","i","step","divider","document","createElement","ariaHidden","classList","add","insertAdjacentElement","selectedItems","find","onKeyDown","matches","focus","hasCustomState","requestAnimationFrame","deleteCustomState","checkValidity","M3eBreakpointObserver","observe","Breakpoint","XSmall","get","setCustomState","registerStyleSheet","outline","attribute","M3eStepperNextElement","M3eStepperPreviousElement","M3eStepperResetElement"],"mappings":"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"}

package/dist/switch.js

@@ -155,9 +155,10 @@ var _M3eSwitchElement_instances, _M3eSwitchElement_clickHandler, _M3eSwitchEleme
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr value - A string representing the value of the switch.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.
  * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.
@@ -304,17 +305,17 @@ _M3eSwitchElement_renderIcon = function _M3eSwitchElement_renderIcon() {
 };
 _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {