@m3e/web 2.5.4 → 2.5.5

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

package/dist/tabs.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,T,B,E;let W=E=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),T.set(this,t=>e(this,L,"m",B).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+E.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,T,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,T,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};T=new WeakMap,L=new WeakSet,B=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${g.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=E=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"-no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"-no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"-no-animate")&&setTimeout(()=>w(this,"-no-animate"))},O.styles=s`: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, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n        width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.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, ${g.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, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.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: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.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; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,T,B,E;let W=E=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),T.set(this,t=>e(this,L,"m",B).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+E.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,T,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,T,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};T=new WeakMap,L=new WeakSet,B=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${g.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=E=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"--no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"--no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"--no-animate")&&setTimeout(()=>w(this,"--no-animate"))},O.styles=s`: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, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n        width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.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, ${g.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, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.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: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.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; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};
 //# sourceMappingURL=tabs.min.js.map

package/dist/tabs.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.min.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","this","e","__classPrivateFieldGet","call","attach","control","super","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","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.min.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","this","e","__classPrivateFieldGet","call","attach","control","super","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","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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"}

package/dist/toc.js

@@ -181,7 +181,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor(AttachInternals(Role(Lit
       if (this._activeIndicator) {
         const item = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").selectedItems[0];
         if (!item) {
-          setCustomState(this, "-no-animate", true);
+          setCustomState(this, "--no-animate", true);
           this._activeIndicator.style.top = `0px`;
           this._activeIndicator.style.height = `0px`;
           this._activeIndicator.style.visibility = "hidden";
@@ -193,8 +193,8 @@ let M3eTocElement = class M3eTocElement extends HtmlFor(AttachInternals(Role(Lit
           this._activeIndicator.style.top = `${item.offsetTop}px`;
           this._activeIndicator.style.height = `${item.clientHeight}px`;
           this._activeIndicator.style.visibility = item.clientHeight == 0 ? "hidden" : "";
-          if (hasCustomState(this, "-no-animate")) {
-            setTimeout(() => setCustomState(this, "-no-animate", false), 40);
+          if (hasCustomState(this, "--no-animate")) {
+            setTimeout(() => setCustomState(this, "--no-animate", false), 40);
           }
         }
       }
@@ -276,7 +276,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor(AttachInternals(Role(Lit
         removed
       } = __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").setItems([...(this.shadowRoot?.querySelectorAll("m3e-toc-item") ?? [])]);
       if (!__classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").activeItem) {
-        setCustomState(this, "-no-animate", true);
+        setCustomState(this, "--no-animate", true);
         __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").updateActiveItem(added.find(x => !x.disabled));
       }
       for (const item of added) {
@@ -310,10 +310,10 @@ _M3eTocElement_renderNode = function _M3eTocElement_renderNode(node) {
   return html`<li><m3e-toc-item tabindex="-1" .node="${node}" @click="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleClick)}">${node.label}</m3e-toc-item>${node.nodes.length == 0 ? nothing : html`<ul>${node.nodes.map(x => __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_renderNode).call(this, x))}</ul>`}</li>`;
 };
 _M3eTocElement_handleOverlineSlotChange = function _M3eTocElement_handleOverlineSlotChange(e) {
-  setCustomState(this, "-with-overline", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-overline", hasAssignedNodes(e.target));
 };
 _M3eTocElement_handleTitleSlotChange = function _M3eTocElement_handleTitleSlotChange(e) {
-  setCustomState(this, "-with-title", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-title", hasAssignedNodes(e.target));
 };
 _M3eTocElement_handleClick = function _M3eTocElement_handleClick(e) {
   if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {
@@ -335,7 +335,7 @@ M3eTocElement.styles = css`:host { display: inline-block; position: relative; ov
         height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
           ${DesignToken.motion.easing.standard},
         top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
-          ${DesignToken.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
+          ${DesignToken.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:is(:state(--with-overline), :--with-overline))) .overline, :host(:not(:is(:state(--with-title), :--with-title))) .title, :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface}); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
 __decorate([state()], M3eTocElement.prototype, "_toc", void 0);
 __decorate([query(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
 __decorate([property({