@m3e/web 2.5.6 → 2.5.8

package/dist/tabs.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
-import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, customElement, ResizeController, addCustomState, hasCustomState, deleteCustomState } from '@m3e/web/core';
+import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, customElement, VelocityTracker, ResizeController, addCustomState, hasCustomState, prefersReducedMotion, deleteCustomState } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager } from '@m3e/web/core/a11y';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -193,7 +193,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role(LitElement, "tabp
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
 M3eTabPanelElement = __decorate([customElement("m3e-tab-panel")], M3eTabPanelElement);
 
-var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a;
+var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_swipe, _M3eTabsElement_velocityTracker, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_handleActiveItemChange, _M3eTabsElement_handleTabsPaginationChange, _M3eTabsElement_handleTabsPointerDown, _M3eTabsElement_handleTabsPointerMove, _M3eTabsElement_handleTabsPointerUp, _M3eTabsElement_handleTabsPointerCancel, _M3eTabsElement_handleTabsLostPointerCapture, _M3eTabsElement_endSwipeGesture, _M3eTabsElement_scrollTabIntoView, _M3eTabsElement_updateInkBar, _a;
 const MIN_PRIMARY_TAB_WIDTH = 24;
 /**
  * Organizes content into separate views where only one view can be visible at a time.
@@ -255,13 +255,12 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
     _M3eTabsElement_directionalitySubscription.set(this, void 0);
     /** @private */
     this._selectedIndex = null;
+    /** @private */
+    _M3eTabsElement_swipe.set(this, void 0);
+    /** @private */
+    _M3eTabsElement_velocityTracker.set(this, new VelocityTracker());
     /** @internal */
-    this[_a] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
-    /**
-     * Whether scroll buttons are disabled.
-     * @default false
-     */
-    this.disablePagination = false;
+    this[_a] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).onActiveItemChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleActiveItemChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
     /**
      * The position of the tab headers.
      * @default "before"
@@ -291,10 +290,43 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
       skipInitial: true,
       callback: () => {
         addCustomState(this, "--no-animate");
-        __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+        if (activeTab) {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+        } else {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        }
       }
     });
   }
+  /**
+   * Whether scroll buttons are disabled.
+   * @default false
+   */
+  get disablePagination() {
+    switch (this.getAttribute("disable-pagination")) {
+      case "auto":
+        return "auto";
+      case "":
+      case "true":
+        return true;
+      default:
+        return false;
+    }
+  }
+  set disablePagination(value) {
+    switch (value) {
+      case false:
+        this.removeAttribute("disable-pagination");
+        break;
+      case true:
+        this.toggleAttribute("disable-pagination", true);
+        break;
+      case "auto":
+        this.setAttribute("disable-pagination", "auto");
+        break;
+    }
+  }
   /** The tabs. */
   get tabs() {
     return this[selectionManager]?.items ?? [];
@@ -347,14 +379,16 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
         panelIndex = undefined;
       }
     }
-    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
+    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}" @pointerdown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerUp)}" @pointercancel="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerCancel)}" @lostpointercapture="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsLostPointerCapture)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
   }
 };
 _M3eTabsElement_directionalitySubscription = new WeakMap();
+_M3eTabsElement_swipe = new WeakMap();
+_M3eTabsElement_velocityTracker = new WeakMap();
 _M3eTabsElement_instances = new WeakSet();
 _a = selectionManager;
 _M3eTabsElement_renderHeader = function _M3eTabsElement_renderHeader() {
-  return html`<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">${M3eDirectionality.current === "ltr" ? html`<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>` : html`<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">${M3eDirectionality.current === "ltr" ? html`<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>` : html`<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="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
+  return html`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination === "auto" ? matchMedia("(hover: none) and (pointer: coarse)").matches : this.disablePagination}" @pagination-changed="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPaginationChange)}"><slot name="prev-icon" slot="prev-icon">${M3eDirectionality.current === "ltr" ? html`<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>` : html`<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">${M3eDirectionality.current === "ltr" ? html`<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>` : html`<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="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
 };
 _M3eTabsElement_handleSlotChange = function _M3eTabsElement_handleSlotChange() {
   this[selectionManager].setItems([...this.querySelectorAll("m3e-tab")]);
@@ -375,6 +409,142 @@ _M3eTabsElement_handleSelectedChange = function _M3eTabsElement_handleSelectedCh
     selectedIndex = null;
   }
   this._selectedIndex = selectedIndex;
+  if (selected) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, selected, hasCustomState(this, "--no-animate"));
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+  }
+};
+_M3eTabsElement_handleActiveItemChange = function _M3eTabsElement_handleActiveItemChange() {
+  if (this[selectionManager].activeItem) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, this[selectionManager].activeItem, hasCustomState(this, "--no-animate"));
+  }
+};
+_M3eTabsElement_handleTabsPaginationChange = function _M3eTabsElement_handleTabsPaginationChange() {
+  if (this.disablePagination) return;
+  const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+  if (activeTab) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+  }
+};
+_M3eTabsElement_handleTabsPointerDown = function _M3eTabsElement_handleTabsPointerDown(e) {
+  if (e.pointerType !== "touch") {
+    return; // swipe only supported for touch
+  }
+  e.currentTarget.setPointerCapture(e.pointerId);
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, {
+    x: e.clientX,
+    y: e.clientY
+  }, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+};
+_M3eTabsElement_handleTabsPointerMove = function _M3eTabsElement_handleTabsPointerMove(e) {
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") || !e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  let dx = e.clientX - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").x;
+  const dy = e.clientY - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").y;
+  if (this.selectedIndex === 0 && dx > 0) {
+    dx = 0;
+  }
+  if (this.selectedIndex === this.tabs.length - 1 && dx < 0) {
+    dx = 0;
+  }
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir) {
+    if (Math.abs(dx) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "horizontal";
+    } else if (Math.abs(dy) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "vertical";
+    } else {
+      return;
+    }
+  }
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "vertical") {
+    return;
+  }
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+  __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX = dx;
+  this.shadowRoot?.querySelector("m3e-slide")?.classList.add("sliding");
+  this.selectedTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  const nextTab = this.tabs[dx > 0 ? this.selectedIndex - 1 : this.selectedIndex + 1];
+  nextTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  nextTab?.control?.style.setProperty("--_tabs-slide-visibility", "visible");
+  const prevTab = this.tabs[dx > 0 ? this.selectedIndex + 1 : this.selectedIndex - 1];
+  prevTab?.control?.style.removeProperty("--_tabs-slide-offset-x");
+  prevTab?.control?.style.removeProperty("--_tabs-slide-visibility");
+};
+_M3eTabsElement_handleTabsPointerUp = function _M3eTabsElement_handleTabsPointerUp(e) {
+  if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  e.currentTarget.releasePointerCapture(e.pointerId);
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "horizontal" && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX !== undefined) {
+    const dx = __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX;
+    const threshold = this.clientWidth * 0.33;
+    const velocity = __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").getVelocity();
+    const significantVelocityThreshold = e.pointerType === "touch" ? 1200 : 500;
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+    if (Math.abs(dx) > threshold || Math.abs(velocity) > significantVelocityThreshold) {
+      if (dx > threshold) {
+        // go to the previous tab only if its not disabled.
+        if (this.selectedIndex > 0 && this.tabs.length > 1 && !this.tabs[this.selectedIndex - 1].disabled) {
+          this.selectedIndex--;
+        }
+      } else if (dx < -threshold) {
+        // go to the next tab only if its not disabled.
+        if (this.selectedIndex < this.tabs.length - 1 && !this.tabs[this.selectedIndex + 1].disabled) {
+          this.selectedIndex++;
+        }
+      }
+    }
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsPointerCancel = function _M3eTabsElement_handleTabsPointerCancel(e) {
+  if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsLostPointerCapture = function _M3eTabsElement_handleTabsLostPointerCapture() {
+  __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+};
+_M3eTabsElement_endSwipeGesture = function _M3eTabsElement_endSwipeGesture() {
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, undefined, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  const slide = this.shadowRoot?.querySelector("m3e-slide");
+  if (!slide || !slide.classList.contains("sliding")) {
+    return;
+  }
+  slide.classList.add("snap");
+  if (!prefersReducedMotion()) {
+    slide.addEventListener("transitionend", () => slide.classList.remove("snap"), {
+      once: true
+    });
+  }
+  slide.classList.remove("sliding");
+  this.tabs.forEach(x => {
+    x.control?.style.removeProperty("--_tabs-slide-offset-x");
+    x.control?.style.removeProperty("--_tabs-slide-visibility");
+  });
+};
+_M3eTabsElement_scrollTabIntoView = /** @private */
+async function _M3eTabsElement_scrollTabIntoView(tab, instant) {
+  await this.updateComplete;
+  for (const tab of this.tabs) {
+    await tab.updateComplete;
+  }
+  await this._tablist?.updateComplete;
+  const scrollMargin = 48;
+  const scrollContainer = this._tablist?.scrollContainer;
+  if (!scrollContainer) return;
+  scrollContainer?.scrollTo({
+    behavior: instant ? "instant" : "smooth",
+    top: 0,
+    left: Math.min(tab.offsetLeft - scrollContainer.offsetLeft - scrollMargin, Math.max(tab.offsetLeft + tab.offsetWidth - scrollContainer.offsetWidth - scrollContainer.offsetLeft + scrollMargin, scrollContainer.scrollLeft))
+  });
   __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
 };
 _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
@@ -404,13 +574,14 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(: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; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } .tabs.sliding ::slotted([slot="panel"]) { transform: translateX(var(--_tabs-slide-offset-x)); visibility: var(--_tabs-slide-visibility, "hidden"); } .tabs.snap ::slotted([slot="panel"]) { transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+        transform var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .tabs:not(.sliding) ::slotted([slot="panel"]) { transform: translateX(0); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } .tabs.snap ::slotted([slot="panel"]) { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({
-  attribute: "disable-pagination",
-  type: Boolean
-})], M3eTabsElement.prototype, "disablePagination", void 0);
+  attribute: false
+})], M3eTabsElement.prototype, "disablePagination", null);
 __decorate([property({
   attribute: "header-position",
   reflect: true

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 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","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","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 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","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","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","_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","tab","instant","updateComplete","_tablist","scrollMargin","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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"}