@m3e/web 2.5.6 → 2.5.7

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 beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-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    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-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 beforeinput - Dispatched before the selected state of a tab changes.\r\n * @fires input - Dispatched when the selected state of a tab changes.\r\n * @fires change - Dispatched 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","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 beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-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    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-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  prefersReducedMotion,\r\n  ResizeController,\r\n  VelocityTracker,\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\nimport { M3eSlideGroupElement } from \"@m3e/web/slide-group\";\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 beforeinput - Dispatched before the selected state of a tab changes.\r\n * @fires input - Dispatched when the selected state of a tab changes.\r\n * @fires change - Dispatched 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    .tabs.sliding ::slotted([slot=\"panel\"]) {\r\n      transform: translateX(var(--_tabs-slide-offset-x));\r\n      visibility: var(--_tabs-slide-visibility, \"hidden\");\r\n    }\r\n    .tabs.snap ::slotted([slot=\"panel\"]) {\r\n      transition: ${unsafeCSS(\r\n        `inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        transform var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .tabs:not(.sliding) ::slotted([slot=\"panel\"]) {\r\n      transform: translateX(0);\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      .tabs.snap ::slotted([slot=\"panel\"]) {\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!: M3eSlideGroupElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n  /** @private */ #swipe?: { x: number; y: number; currentX?: number; dir?: \"horizontal\" | \"vertical\" };\r\n  /** @private */ readonly #velocityTracker = new VelocityTracker();\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .onActiveItemChange(() => this.#handleActiveItemChange())\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        const activeTab = this[selectionManager].activeItem ?? this.selectedTab;\r\n        if (activeTab) {\r\n          this.#scrollTabIntoView(activeTab, true);\r\n        } else {\r\n          this.#updateInkBar();\r\n        }\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: false }) get disablePagination(): boolean | \"auto\" {\r\n    switch (this.getAttribute(\"disable-pagination\")) {\r\n      case \"auto\":\r\n        return \"auto\";\r\n      case \"\":\r\n      case \"true\":\r\n        return true;\r\n      default:\r\n        return false;\r\n    }\r\n  }\r\n  set disablePagination(value: boolean | \"auto\") {\r\n    switch (value) {\r\n      case false:\r\n        this.removeAttribute(\"disable-pagination\");\r\n        break;\r\n      case true:\r\n        this.toggleAttribute(\"disable-pagination\", true);\r\n        break;\r\n      case \"auto\":\r\n        this.setAttribute(\"disable-pagination\", \"auto\");\r\n        break;\r\n    }\r\n  }\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\r\n        class=\"tabs\"\r\n        selected-index=\"${ifDefined(panelIndex)}\"\r\n        @pointerdown=\"${this.#handleTabsPointerDown}\"\r\n        @pointermove=\"${this.#handleTabsPointerMove}\"\r\n        @pointerup=\"${this.#handleTabsPointerUp}\"\r\n        @pointercancel=\"${this.#handleTabsPointerCancel}\"\r\n        @lostpointercapture=\"${this.#handleTabsLostPointerCapture}\"\r\n      >\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 === \"auto\"\r\n        ? matchMedia(\"(hover: none) and (pointer: coarse)\").matches\r\n        : this.disablePagination}\"\r\n      @pagination-changed=\"${this.#handleTabsPaginationChange}\"\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\r\n    if (selected) {\r\n      this.#scrollTabIntoView(selected, hasCustomState(this, \"--no-animate\"));\r\n    } else {\r\n      this.#updateInkBar();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActiveItemChange(): void {\r\n    if (this[selectionManager].activeItem) {\r\n      this.#scrollTabIntoView(this[selectionManager].activeItem, hasCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsPaginationChange(): void {\r\n    if (this.disablePagination) return;\r\n    const activeTab = this[selectionManager].activeItem ?? this.selectedTab;\r\n    if (activeTab) {\r\n      this.#scrollTabIntoView(activeTab, true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsPointerDown(e: PointerEvent): void {\r\n    if (e.pointerType !== \"touch\") {\r\n      return; // swipe only supported for touch\r\n    }\r\n\r\n    (<HTMLElement>e.currentTarget).setPointerCapture(e.pointerId);\r\n    this.#swipe = { x: e.clientX, y: e.clientY };\r\n    this.#velocityTracker.reset();\r\n    this.#velocityTracker.add(e.clientX);\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsPointerMove(e: PointerEvent): void {\r\n    if (!this.#swipe || !(<HTMLElement>e.currentTarget).hasPointerCapture(e.pointerId)) {\r\n      return;\r\n    }\r\n\r\n    let dx = e.clientX - this.#swipe.x;\r\n    const dy = e.clientY - this.#swipe.y;\r\n\r\n    if (this.selectedIndex === 0 && dx > 0) {\r\n      dx = 0;\r\n    }\r\n\r\n    if (this.selectedIndex === this.tabs.length - 1 && dx < 0) {\r\n      dx = 0;\r\n    }\r\n\r\n    if (!this.#swipe.dir) {\r\n      if (Math.abs(dx) > 10) {\r\n        this.#swipe.dir = \"horizontal\";\r\n      } else if (Math.abs(dy) > 10) {\r\n        this.#swipe.dir = \"vertical\";\r\n      } else {\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (this.#swipe.dir === \"vertical\") {\r\n      return;\r\n    }\r\n\r\n    this.#velocityTracker.add(e.clientX);\r\n    this.#swipe.currentX = dx;\r\n\r\n    this.shadowRoot?.querySelector(\"m3e-slide\")?.classList.add(\"sliding\");\r\n    this.selectedTab?.control?.style.setProperty(\"--_tabs-slide-offset-x\", `${dx}px`);\r\n\r\n    const nextTab = this.tabs[dx > 0 ? this.selectedIndex - 1 : this.selectedIndex + 1];\r\n    nextTab?.control?.style.setProperty(\"--_tabs-slide-offset-x\", `${dx}px`);\r\n    nextTab?.control?.style.setProperty(\"--_tabs-slide-visibility\", \"visible\");\r\n\r\n    const prevTab = this.tabs[dx > 0 ? this.selectedIndex + 1 : this.selectedIndex - 1];\r\n    prevTab?.control?.style.removeProperty(\"--_tabs-slide-offset-x\");\r\n    prevTab?.control?.style.removeProperty(\"--_tabs-slide-visibility\");\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsPointerUp(e: PointerEvent): void {\r\n    if (!(<HTMLElement>e.currentTarget).hasPointerCapture(e.pointerId)) {\r\n      return;\r\n    }\r\n    (<HTMLElement>e.currentTarget).releasePointerCapture(e.pointerId);\r\n    if (this.#swipe && this.#swipe.dir === \"horizontal\" && this.#swipe.currentX !== undefined) {\r\n      const dx = this.#swipe.currentX;\r\n      const threshold = this.clientWidth * 0.33;\r\n      const velocity = this.#velocityTracker.getVelocity();\r\n      const significantVelocityThreshold = e.pointerType === \"touch\" ? 1200 : 500;\r\n\r\n      this.#endSwipeGesture();\r\n\r\n      if (Math.abs(dx) > threshold || Math.abs(velocity) > significantVelocityThreshold) {\r\n        if (dx > threshold) {\r\n          // go to the previous tab only if its not disabled.\r\n          if (this.selectedIndex > 0 && this.tabs.length > 1 && !this.tabs[this.selectedIndex - 1].disabled) {\r\n            this.selectedIndex--;\r\n          }\r\n        } else if (dx < -threshold) {\r\n          // go to the next tab only if its not disabled.\r\n          if (this.selectedIndex < this.tabs.length - 1 && !this.tabs[this.selectedIndex + 1].disabled) {\r\n            this.selectedIndex++;\r\n          }\r\n        }\r\n      }\r\n    } else {\r\n      this.#endSwipeGesture();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsPointerCancel(e: PointerEvent): void {\r\n    if ((<HTMLElement>e.currentTarget).hasPointerCapture(e.pointerId)) {\r\n      (<HTMLElement>e.currentTarget).releasePointerCapture(e.pointerId);\r\n      this.#endSwipeGesture();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleTabsLostPointerCapture(): void {\r\n    this.#endSwipeGesture();\r\n  }\r\n\r\n  /** @private */\r\n  #endSwipeGesture(): void {\r\n    this.#swipe = undefined;\r\n    this.#velocityTracker.reset();\r\n\r\n    const slide = this.shadowRoot?.querySelector(\"m3e-slide\");\r\n    if (!slide || !slide.classList.contains(\"sliding\")) {\r\n      return;\r\n    }\r\n    slide.classList.add(\"snap\");\r\n\r\n    if (!prefersReducedMotion()) {\r\n      slide.addEventListener(\"transitionend\", () => slide.classList.remove(\"snap\"), { once: true });\r\n    }\r\n    slide.classList.remove(\"sliding\");\r\n    this.tabs.forEach((x) => {\r\n      x.control?.style.removeProperty(\"--_tabs-slide-offset-x\");\r\n      x.control?.style.removeProperty(\"--_tabs-slide-visibility\");\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  async #scrollTabIntoView(tab: M3eTabElement, instant: boolean): Promise<void> {\r\n    await this.updateComplete;\r\n    for (const tab of this.tabs) {\r\n      await tab.updateComplete;\r\n    }\r\n\r\n    await this._tablist?.updateComplete;\r\n\r\n    const scrollMargin = 48;\r\n    const scrollContainer = this._tablist?.scrollContainer;\r\n    if (!scrollContainer) return;\r\n\r\n    scrollContainer?.scrollTo({\r\n      behavior: instant ? \"instant\" : \"smooth\",\r\n      top: 0,\r\n      left: Math.min(\r\n        tab.offsetLeft - scrollContainer.offsetLeft - scrollMargin,\r\n        Math.max(\r\n          tab.offsetLeft + tab.offsetWidth - scrollContainer.offsetWidth - scrollContainer.offsetLeft + scrollMargin,\r\n          scrollContainer.scrollLeft,\r\n        ),\r\n      ),\r\n    });\r\n\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","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","_M3eTabsElement_swipe","_M3eTabsElement_velocityTracker","VelocityTracker","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","onActiveItemChange","_M3eTabsElement_handleActiveItemChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","activeTab","activeItem","selectedTab","_M3eTabsElement_updateInkBar","disablePagination","getAttribute","value","removeAttribute","toggleAttribute","setAttribute","tabs","items","selectedIndex","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_handleTabsPointerDown","_M3eTabsElement_handleTabsPointerMove","_M3eTabsElement_handleTabsPointerUp","_M3eTabsElement_handleTabsPointerCancel","_M3eTabsElement_handleTabsLostPointerCapture","_M3eTabsElement_renderHeader","matchMedia","matches","_M3eTabsElement_handleTabsPaginationChange","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_M3eTabsElement_scrollTabIntoView","hasCustomState","pointerType","currentTarget","setPointerCapture","pointerId","clientX","y","clientY","reset","add","hasPointerCapture","dx","dy","dir","Math","abs","currentX","shadowRoot","querySelector","classList","style","setProperty","nextTab","prevTab","removeProperty","releasePointerCapture","threshold","clientWidth","velocity","getVelocity","significantVelocityThreshold","_M3eTabsElement_endSwipeGesture","slide","contains","prefersReducedMotion","remove","once","async","tab","instant","updateComplete","_tablist","scrollContainer","scrollTo","behavior","top","left","min","offsetLeft","max","offsetWidth","scrollLeft","i","label","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","reflect","type","Boolean"],"mappings":"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"}

package/dist/theme.js

@@ -6,7 +6,7 @@
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { css, LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { DesignToken, customElement } from '@m3e/web/core';
+import { customElement, DesignToken } from '@m3e/web/core';
 
 /**
  * @license
@@ -4174,8 +4174,20 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
-      this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f")];
+    if (this.parentElement instanceof HTMLBodyElement) {
+      if (this.shadowRoot?.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (!document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...document.adoptedStyleSheets];
+      }
+    } else {
+      if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...this.shadowRoot.adoptedStyleSheets];
+      }
     }
     __classPrivateFieldSet(this, _M3eThemeElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
     __classPrivateFieldSet(this, _M3eThemeElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
@@ -4187,6 +4199,9 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
     super.disconnectedCallback();
     [__classPrivateFieldGet(this, _M3eThemeElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeElement_dark, "f"), __classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeElement_colorSchemeChangeHandler, "f")));
     __classPrivateFieldSet(this, _M3eThemeElement_light, __classPrivateFieldSet(this, _M3eThemeElement_dark, __classPrivateFieldSet(this, _M3eThemeElement_forcedColor, undefined, "f"), "f"), "f");
+    if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+    }
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -4244,9 +4259,20 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
   css += `--md-sys-density-scale: ${this.density};`;
   css += `--m3e-scrollbar-thumb-color: ${hexFromArgb(scheme.neutralPalette.tone(60))};`;
   css += `--m3e-focus-ring-visibility: ${this.strongFocus ? "visible" : "hidden"};`;
-  __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
+  css += `font-size: ${DesignToken.typescale.standard.body.large.fontSize};`;
+  css += `font-weight: ${DesignToken.typescale.standard.body.large.fontWeight};`;
+  css += `line-height: ${DesignToken.typescale.standard.body.large.lineHeight};`;
+  css += `letter-spacing: ${DesignToken.typescale.standard.body.large.tracking};`;
   if (this.parentElement instanceof HTMLBodyElement) {
-    const computedStyle = getComputedStyle(this);
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`
+        html { ${css} }
+        @media not (forced-colors: active) {
+          body { 
+            background-color: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            scrollbar-color: ${DesignToken.scrollbar.color};
+          }
+        }`);
     switch (this.scheme) {
       case "light":
         document.documentElement.style.colorScheme = "light";
@@ -4262,13 +4288,8 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
             break;
         }
     }
-    if (__classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")?.matches) {
-      this.parentElement.style.backgroundColor = this.parentElement.style.color = this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = "";
-    } else {
-      this.parentElement.style.backgroundColor = computedStyle.getPropertyValue("--md-sys-color-background");
-      this.parentElement.style.color = computedStyle.getPropertyValue("--md-sys-color-on-background");
-      this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = `${computedStyle.getPropertyValue("--m3e-scrollbar-thumb-color")} ${computedStyle.getPropertyValue("--m3e-scrollbar-track-color")}`;
-    }
+  } else {
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
   }
   if (__classPrivateFieldGet(this, _M3eThemeElement_firstUpdated, "f")) {
     this.dispatchEvent(new Event("change", {
@@ -4291,7 +4312,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
   }
 };
 /** The styles of the element. */
-M3eThemeElement.styles = css`:host { display: contents; font-size: ${DesignToken.typescale.standard.body.large.fontSize}; font-weight: ${DesignToken.typescale.standard.body.large.fontWeight}; line-height: ${DesignToken.typescale.standard.body.large.lineHeight}; letter-spacing: ${DesignToken.typescale.standard.body.large.tracking}; }`;
+M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
 __decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
 __decorate([property()], M3eThemeElement.prototype, "contrast", void 0);