@m3e/web 2.5.3 → 2.5.5

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 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(: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  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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"}

package/dist/tabs.js

@@ -287,7 +287,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
     new ResizeController(this, {
       skipInitial: true,
       callback: () => {
-        addCustomState(this, "-no-animate");
+        addCustomState(this, "--no-animate");
         __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
       }
     });
@@ -317,7 +317,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState(this, "-no-animate");
+    addCustomState(this, "--no-animate");
     __classPrivateFieldSet(this, _M3eTabsElement_directionalitySubscription, M3eDirectionality.observe(() => {
       this.requestUpdate();
       this[selectionManager].directionality = M3eDirectionality.current;
@@ -395,13 +395,13 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
   }
   this._tablist.style.setProperty("--_tabs-active-tab-position", `${left}px`);
   this._tablist.style.setProperty("--_tabs-active-tab-size", `${width}px`);
-  if (width > 0 && hasCustomState(this, "-no-animate")) {
-    setTimeout(() => deleteCustomState(this, "-no-animate"));
+  if (width > 0 && hasCustomState(this, "--no-animate")) {
+    setTimeout(() => deleteCustomState(this, "--no-animate"));
   }
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } 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\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\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-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\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  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\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 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 update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\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\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\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 (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\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-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement 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      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, 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  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires change - Emitted when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\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    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:state(-no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"-no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"-no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\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.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\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  #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  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"-no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"-no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","e","__classPrivateFieldGet","call","attach","control","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","MIN_PRIMARY_TAB_WIDTH","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } 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\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\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-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\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  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\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 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 update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\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\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\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 (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\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-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement 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      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, 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  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires change - Emitted when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\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    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"--no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"--no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\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.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\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  #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  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"--no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","e","__classPrivateFieldGet","call","attach","control","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","MIN_PRIMARY_TAB_WIDTH","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":"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"}