@m3e/web 2.5.6 → 2.5.7

package/dist/all.js

@@ -24376,6 +24376,7 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
   }
   /** @private */
   _updatePaging() {
+    const canPage = this._canPage;
     if (this.disabled) {
       this._canPage = false;
     } else if (!this.vertical) {
@@ -24394,6 +24395,10 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
     if (!this._canPage) {
       this._canPageStart = this._canPageEnd = false;
     }
+    if (canPage != this._canPage) {
+      // Emit internal (undocumented) event for use with tabs.
+      this.dispatchEvent(new CustomEvent("pagination-changed"));
+    }
   }
 };
 _M3eSlideGroupElement_directionalitySubscription = new WeakMap();
@@ -24442,7 +24447,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
   }
 };
 /** The styles of the element. */
-M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`;
+M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`;
 __decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
@@ -27411,7 +27416,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role$1(LitElement, "ta
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; }`;
 M3eTabPanelElement = __decorate([customElement$1("m3e-tab-panel")], M3eTabPanelElement);
 
-var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a$2;
+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$2;
 const MIN_PRIMARY_TAB_WIDTH = 24;
 /**
  * Organizes content into separate views where only one view can be visible at a time.
@@ -27473,13 +27478,12 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(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$1());
     /** @internal */
-    this[_a$2] = 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$2] = 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"
@@ -27509,10 +27513,43 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
       skipInitial: true,
       callback: () => {
         addCustomState$1(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 ?? [];
@@ -27565,14 +27602,16 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(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$2 = 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")]);
@@ -27593,6 +27632,142 @@ _M3eTabsElement_handleSelectedChange = function _M3eTabsElement_handleSelectedCh
     selectedIndex = null;
   }
   this._selectedIndex = selectedIndex;
+  if (selected) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, selected, hasCustomState$1(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$1(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$1()) {
+    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() {
@@ -27622,13 +27797,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$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.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$1.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$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.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$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.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$1.motion.duration.long2}) ${DesignToken$1.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$1.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$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.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$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.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$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
+        transform var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
+        visibility var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.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
@@ -32081,8 +32257,20 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
-      this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f")];
+    if (this.parentElement instanceof HTMLBodyElement) {
+      if (this.shadowRoot?.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (!document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...document.adoptedStyleSheets];
+      }
+    } else {
+      if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...this.shadowRoot.adoptedStyleSheets];
+      }
     }
     __classPrivateFieldSet(this, _M3eThemeElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
     __classPrivateFieldSet(this, _M3eThemeElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
@@ -32094,6 +32282,9 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
     super.disconnectedCallback();
     [__classPrivateFieldGet(this, _M3eThemeElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeElement_dark, "f"), __classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeElement_colorSchemeChangeHandler, "f")));
     __classPrivateFieldSet(this, _M3eThemeElement_light, __classPrivateFieldSet(this, _M3eThemeElement_dark, __classPrivateFieldSet(this, _M3eThemeElement_forcedColor, undefined, "f"), "f"), "f");
+    if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+    }
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -32151,9 +32342,20 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
   css += `--md-sys-density-scale: ${this.density};`;
   css += `--m3e-scrollbar-thumb-color: ${hexFromArgb(scheme.neutralPalette.tone(60))};`;
   css += `--m3e-focus-ring-visibility: ${this.strongFocus ? "visible" : "hidden"};`;
-  __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
+  css += `font-size: ${DesignToken$1.typescale.standard.body.large.fontSize};`;
+  css += `font-weight: ${DesignToken$1.typescale.standard.body.large.fontWeight};`;
+  css += `line-height: ${DesignToken$1.typescale.standard.body.large.lineHeight};`;
+  css += `letter-spacing: ${DesignToken$1.typescale.standard.body.large.tracking};`;
   if (this.parentElement instanceof HTMLBodyElement) {
-    const computedStyle = getComputedStyle(this);
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`
+        html { ${css} }
+        @media not (forced-colors: active) {
+          body { 
+            background-color: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            scrollbar-color: ${DesignToken$1.scrollbar.color};
+          }
+        }`);
     switch (this.scheme) {
       case "light":
         document.documentElement.style.colorScheme = "light";
@@ -32169,13 +32371,8 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
             break;
         }
     }
-    if (__classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")?.matches) {
-      this.parentElement.style.backgroundColor = this.parentElement.style.color = this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = "";
-    } else {
-      this.parentElement.style.backgroundColor = computedStyle.getPropertyValue("--md-sys-color-background");
-      this.parentElement.style.color = computedStyle.getPropertyValue("--md-sys-color-on-background");
-      this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = `${computedStyle.getPropertyValue("--m3e-scrollbar-thumb-color")} ${computedStyle.getPropertyValue("--m3e-scrollbar-track-color")}`;
-    }
+  } else {
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
   }
   if (__classPrivateFieldGet(this, _M3eThemeElement_firstUpdated, "f")) {
     this.dispatchEvent(new Event("change", {
@@ -32198,7 +32395,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
   }
 };
 /** The styles of the element. */
-M3eThemeElement.styles = css`:host { display: contents; font-size: ${DesignToken$1.typescale.standard.body.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.body.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.body.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.body.large.tracking}; }`;
+M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
 __decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
 __decorate([property()], M3eThemeElement.prototype, "contrast", void 0);