@m3e/web 2.5.13 → 2.5.14

package/dist/all.js

@@ -1644,7 +1644,9 @@ class FocusController extends MonitorControllerBase {
     target.addEventListener("keydown", __classPrivateFieldGet(this, _FocusController_keyDownHandler, "f"));
     target.addEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
     target.addEventListener("focusout", __classPrivateFieldGet(this, _FocusController_focusOutHandler, "f"));
-    target.addEventListener("touchstart", __classPrivateFieldGet(this, _FocusController_touchStartHandler, "f"));
+    target.addEventListener("touchstart", __classPrivateFieldGet(this, _FocusController_touchStartHandler, "f"), {
+      passive: true
+    });
     target.addEventListener("touchend", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
     target.addEventListener("touchcancel", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
   }
@@ -2649,6 +2651,8 @@ function hasCustomState(element, state) {
  * @param {string} state The custom state to add.
  */
 function addCustomState(element, state) {
+  // Avoid style recalculation when element already has state.
+  if (hasCustomState(element, state)) return;
   // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
   // a copy of custom state is retained locally so components can correctly read after write.
   if (_customState in element) {
@@ -5213,7 +5217,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
   }
 };
 /** The styles of the element. */
-M3eFocusRingElement.styles = i$4`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
+M3eFocusRingElement.styles = i$4`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { contain: layout style; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
 __decorate([e$2(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
 __decorate([n({
   type: Boolean,
@@ -5275,7 +5279,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
   }
 };
 /** The styles of the element. */
-M3ePseudoCheckboxElement.styles = i$4`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } svg { pointer-events: none; } @media (forced-colors: active) { :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { border-color: Highlight; background-color: Highlight; color: HighlightText; } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: CanvasText; background: Canvas; } :host([disabled]:not([checked]):not([indeterminate])) { border-color: GrayText; background-color: Canvas; } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: GrayText; color: Canvas; } }`;
+M3ePseudoCheckboxElement.styles = i$4`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; contain: layout style paint; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } svg { pointer-events: none; } @media (forced-colors: active) { :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { border-color: Highlight; background-color: Highlight; color: HighlightText; } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: CanvasText; background: Canvas; } :host([disabled]:not([checked]):not([indeterminate])) { border-color: GrayText; background-color: Canvas; } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: GrayText; color: Canvas; } }`;
 M3ePseudoCheckboxElement = __decorate([customElement("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
@@ -5313,7 +5317,7 @@ let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled
   }
 };
 /** The styles of the element. */
-M3ePseudoRadioElement.styles = i$4`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } @media (forced-colors: active) { :host { border-radius: 50%; } :host(:not([checked])) { color: CanvasText; background-color: Canvas; } :host([checked]) { color: HighlightText; background-color: Highlight; } :host([disabled]) { color: GrayText; background-color: Canvas; } }`;
+M3ePseudoRadioElement.styles = i$4`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; contain: layout style paint; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } @media (forced-colors: active) { :host { border-radius: 50%; } :host(:not([checked])) { color: CanvasText; background-color: Canvas; } :host([checked]) { color: HighlightText; background-color: Highlight; } :host([disabled]) { color: GrayText; background-color: Canvas; } }`;
 M3ePseudoRadioElement = __decorate([customElement("m3e-pseudo-radio")], M3ePseudoRadioElement);
 
 /**
@@ -5508,7 +5512,7 @@ _M3eRippleElement_handlePressedChange = function _M3eRippleElement_handlePressed
   }
 };
 /** The styles of the element. */
-M3eRippleElement.styles = i$4`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } :host(:not([unbounded])) { overflow: hidden; } .ripple { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; transform: scale(0); border-radius: ${DesignToken.shape.corner.full}; background-color: color-mix(in srgb, ${RippleToken.color} ${RippleToken.opacity}, transparent); will-change: background-color, opacity; animation: ripple ${RippleToken.enterDuration} linear; } .ripple.persistent.pressed { transform: scale(${RippleToken.scaleFactor}); } .ripple.exit { transition: opacity ${RippleToken.exitDuration} cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; } @keyframes ripple { to { transform: scale(${RippleToken.scaleFactor}); } } @media (prefers-reduced-motion) { .ripple { transform: scale(${RippleToken.scaleFactor}); animation-duration: 90ms; } .ripple.exit { transition-duration: 10ms; } } @media (forced-colors: active) { .ripple { display: none; } }`;
+M3eRippleElement.styles = i$4`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } :host(:not([unbounded])) { overflow: hidden; } :host(:not([unbounded])) .ripple { contain: layout style paint; } :host([unbounded]) .ripple { contain: layout style; } .ripple { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; transform: scale(0); border-radius: ${DesignToken.shape.corner.full}; background-color: color-mix(in srgb, ${RippleToken.color} ${RippleToken.opacity}, transparent); will-change: background-color, opacity; animation: ripple ${RippleToken.enterDuration} linear; } .ripple.persistent.pressed { transform: scale(${RippleToken.scaleFactor}); } .ripple.exit { transition: opacity ${RippleToken.exitDuration} cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; } @keyframes ripple { to { transform: scale(${RippleToken.scaleFactor}); } } @media (prefers-reduced-motion) { .ripple { transform: scale(${RippleToken.scaleFactor}); animation-duration: 90ms; } .ripple.exit { transition-duration: 10ms; } } @media (forced-colors: active) { .ripple { display: none; } }`;
 __decorate([n({
   type: Boolean,
   reflect: true
@@ -5862,7 +5866,7 @@ _M3eStateLayerElement_handleFocusChange = function _M3eStateLayerElement_handleF
   }
 };
 /** The styles of the element. */
-M3eStateLayerElement.styles = i$4`:host { display: block; } :host, .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .layer { will-change: background-color; transition: ${r$4(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)}; } .layer.focused { background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent); } .layer.hover { background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent); } @media (prefers-reduced-motion) { .layer { transition: none; } } @media (forced-colors: active) { .layer { display: none; } }`;
+M3eStateLayerElement.styles = i$4`:host { display: block; } :host, .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .layer { contain: layout style paint; will-change: background-color; transition: ${r$4(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)}; } .layer.focused { background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent); } .layer.hover { background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent); } @media (prefers-reduced-motion) { .layer { transition: none; } } @media (forced-colors: active) { .layer { display: none; } }`;
 __decorate([e$2(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
 __decorate([n({
   type: Boolean,
@@ -9830,6 +9834,11 @@ function offsetParentPolyfill(element) {
  * @returns {Promise<() => void>} Promise that resolves to a function used to stop updating target when the position of the anchor element changes.
  */
 async function positionAnchor(target, anchor, options, update) {
+  const lastResult = {
+    x: Number.MIN_SAFE_INTEGER,
+    y: Number.MIN_SAFE_INTEGER,
+    placement: "bottom"
+  };
   async function computeAnchorPosition() {
     const middleware = new Array();
     if (options?.inline) {
@@ -9858,13 +9867,25 @@ async function positionAnchor(target, anchor, options, update) {
         getOffsetParent: x => platform.getOffsetParent(x, offsetParent)
       }
     });
-    update(result.x, result.y, result.placement);
+    const {
+      x,
+      y,
+      placement
+    } = result;
+    if (lastResult.x !== x || lastResult.y !== y || lastResult.placement !== placement) {
+      update(x, y, placement);
+    }
+    Object.assign(lastResult, {
+      x,
+      y,
+      placement
+    });
   }
   await computeAnchorPosition();
   return autoUpdate(anchor, target, async () => await computeAnchorPosition());
 }
 
-var _M3eFloatingPanelElement_trigger, _M3eFloatingPanelElement_anchor, _M3eFloatingPanelElement_anchorCleanup, _M3eFloatingPanelElement_clickOutsideController, _M3eFloatingPanelElement_toggleHandler, _M3eFloatingPanelElement_scrollController, _M3eFloatingPanelElement_anchorResizeController;
+var _M3eFloatingPanelElement_trigger, _M3eFloatingPanelElement_anchor, _M3eFloatingPanelElement_anchorCleanup, _M3eFloatingPanelElement_anchorLastPosition, _M3eFloatingPanelElement_clickOutsideController, _M3eFloatingPanelElement_toggleHandler, _M3eFloatingPanelElement_scrollController, _M3eFloatingPanelElement_anchorResizeController;
 /**
  * A lightweight, generic floating surface used to present content above the page.
  *
@@ -9898,6 +9919,8 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
     /** @private */
     _M3eFloatingPanelElement_anchorCleanup.set(this, void 0);
     /** @private */
+    _M3eFloatingPanelElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     _M3eFloatingPanelElement_clickOutsideController.set(this, new ClickOutsideController(this, {
       target: null,
       callback: () => this.hide()
@@ -9915,6 +9938,7 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
           __classPrivateFieldGet(this, _M3eFloatingPanelElement_clickOutsideController, "f").unobserveAll();
           __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorCleanup, "f")?.call(this);
           __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorCleanup, undefined, "f");
+          __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorLastPosition, undefined, "f");
           break;
       }
     });
@@ -9995,14 +10019,23 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
     }, (x, y, position) => {
       setCustomState(this, "--top", position.includes("top"));
       setCustomState(this, "--bottom", position.includes("bottom"));
-      if (M3eDirectionality.current === "rtl") {
-        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-        this.style.left = "";
-      } else {
-        this.style.left = `${x}px`;
-        this.style.right = "";
+      if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorLastPosition, "f")?.x !== x) {
+        if (M3eDirectionality.current === "rtl") {
+          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+          this.style.left = "";
+        } else {
+          this.style.left = `${x}px`;
+          this.style.right = "";
+        }
       }
-      this.style.top = `${y}px`;
+      if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorLastPosition, "f")?.y !== y) {
+        this.style.top = `${y}px`;
+      }
+      __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorLastPosition, {
+        x,
+        y,
+        dir: M3eDirectionality.current
+      }, "f");
     }), "f");
     this.showPopover();
   }
@@ -10048,12 +10081,13 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
 _M3eFloatingPanelElement_trigger = new WeakMap();
 _M3eFloatingPanelElement_anchor = new WeakMap();
 _M3eFloatingPanelElement_anchorCleanup = new WeakMap();
+_M3eFloatingPanelElement_anchorLastPosition = new WeakMap();
 _M3eFloatingPanelElement_clickOutsideController = new WeakMap();
 _M3eFloatingPanelElement_toggleHandler = new WeakMap();
 _M3eFloatingPanelElement_scrollController = new WeakMap();
 _M3eFloatingPanelElement_anchorResizeController = new WeakMap();
 /** The styles of the element. */
-M3eFloatingPanelElement.styles = i$4`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-floating-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-floating-panel-container-shape, ${DesignToken.shape.corner.large}); min-width: var(--m3e-floating-panel-container-min-width, 7rem); max-width: var(--m3e-floating-panel-container-max-width, 17.5rem); max-height: var(--m3e-floating-panel-container-max-height, 17.5rem); background-color: var(--m3e-floating-panel-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-floating-panel-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { box-sizing: border-box; display: flex; flex-direction: column; padding-block: var(--m3e-floating-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-floating-panel-container-padding-inline, 0.25rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+M3eFloatingPanelElement.styles = i$4`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-floating-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-floating-panel-container-shape, ${DesignToken.shape.corner.large}); min-width: var(--m3e-floating-panel-container-min-width, 7rem); max-width: var(--m3e-floating-panel-container-max-width, 17.5rem); max-height: var(--m3e-floating-panel-container-max-height, 17.5rem); background-color: var(--m3e-floating-panel-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-floating-panel-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { contain: layout style paint; box-sizing: border-box; display: flex; flex-direction: column; padding-block: var(--m3e-floating-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-floating-panel-container-padding-inline, 0.25rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
             transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
             overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
             display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
@@ -11063,10 +11097,10 @@ let M3eAvatarElement = class M3eAvatarElement extends i$1 {
   }
 };
 /** The styles of the element. */
-M3eAvatarElement.styles = i$4`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`;
+M3eAvatarElement.styles = i$4`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { contain: layout style paint; user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`;
 M3eAvatarElement = __decorate([customElement("m3e-avatar")], M3eAvatarElement);
 
-var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3eBadgeElement_anchorCleanup, _M3eBadgeElement_handleSlotChange, _M3eBadgeElement_detach, _M3eBadgeElement_attach;
+var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3eBadgeElement_anchorCleanup, _M3eBadgeElement_anchorLastPosition, _M3eBadgeElement_updatePadding, _M3eBadgeElement_detach, _M3eBadgeElement_attach;
 /**
  * A visual indicator used to label content.
  *
@@ -11107,12 +11141,14 @@ var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3
  */
 let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(i$1) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eBadgeElement_instances.add(this);
     /** @private */
     _M3eBadgeElement_directionalitySubscription.set(this, void 0);
     /** @private */
     _M3eBadgeElement_anchorCleanup.set(this, void 0);
+    /** @private */
+    _M3eBadgeElement_anchorLastPosition.set(this, void 0);
     /**
      * The size of the badge.
      * @default "medium"
@@ -11123,6 +11159,15 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(i$1) {
      * @default "above-after"
      */
     this.position = "above-after";
+    new MutationController(this, {
+      config: {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: false
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eBadgeElement_instances, "m", _M3eBadgeElement_updatePadding).call(this)
+    });
   }
   /** @inheritdoc */
   attach(control) {
@@ -11153,19 +11198,21 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(i$1) {
   }
   /** @inheritdoc */
   render() {
-    return b`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eBadgeElement_instances, "m", _M3eBadgeElement_handleSlotChange)}"><span aria-hidden="true">&nbsp;</span></slot></div>`;
+    return b`<div class="base"><slot><span aria-hidden="true">&nbsp;</span></slot></div>`;
   }
 };
 _M3eBadgeElement_directionalitySubscription = new WeakMap();
 _M3eBadgeElement_anchorCleanup = new WeakMap();
+_M3eBadgeElement_anchorLastPosition = new WeakMap();
 _M3eBadgeElement_instances = new WeakSet();
-_M3eBadgeElement_handleSlotChange = function _M3eBadgeElement_handleSlotChange() {
+_M3eBadgeElement_updatePadding = function _M3eBadgeElement_updatePadding() {
   if (!this.isConnected) return;
   this.style.setProperty("--_badge-padding", this.textContent && this.textContent.length > 2 ? `0 ${this.size === "medium" ? "0.25rem" : this.size === "large" ? "0.5rem" : "0"}` : "");
 };
 _M3eBadgeElement_detach = function _M3eBadgeElement_detach() {
   __classPrivateFieldGet(this, _M3eBadgeElement_anchorCleanup, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eBadgeElement_anchorCleanup, undefined, "f");
+  __classPrivateFieldSet(this, _M3eBadgeElement_anchorLastPosition, undefined, "f");
 };
 _M3eBadgeElement_attach = /** @private */
 async function _M3eBadgeElement_attach() {
@@ -11212,12 +11259,20 @@ async function _M3eBadgeElement_attach() {
         x += this.clientWidth;
       }
     }
-    this.style.left = `${x}px`;
-    this.style.top = `${y}px`;
+    if (__classPrivateFieldGet(this, _M3eBadgeElement_anchorLastPosition, "f")?.x !== x) {
+      this.style.left = `${x}px`;
+    }
+    if (__classPrivateFieldGet(this, _M3eBadgeElement_anchorLastPosition, "f")?.y !== y) {
+      this.style.top = `${y}px`;
+    }
+    __classPrivateFieldSet(this, _M3eBadgeElement_anchorLastPosition, {
+      x,
+      y
+    }, "f");
   }), "f");
 };
 /** The styles of the element. */
-M3eBadgeElement.styles = i$4`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full}); color: var(--m3e-badge-color, ${DesignToken.color.onError}); background-color: var(--m3e-badge-container-color, ${DesignToken.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`;
+M3eBadgeElement.styles = i$4`:host { display: inline-block; vertical-align: baseline; } .base { contain: layout style paint; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full}); color: var(--m3e-badge-color, ${DesignToken.color.onError}); background-color: var(--m3e-badge-container-color, ${DesignToken.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`;
 __decorate([n({
   reflect: true
 })], M3eBadgeElement.prototype, "size", void 0);
@@ -11904,7 +11959,7 @@ M3eBottomSheetElement.styles = i$4`:host { display: block; position: fixed; left
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${r$4(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
+        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { contain: layout style paint; display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         padding ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         height ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))), :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
@@ -15241,7 +15296,7 @@ __decorate([n({
   attribute: "touch-gestures"
 })], TooltipElementBase.prototype, "touchGestures", void 0);
 
-var _M3eRichTooltipElement_instances, _M3eRichTooltipElement_id, _M3eRichTooltipElement_subheadText, _M3eRichTooltipElement_contentText, _M3eRichTooltipElement_message, _M3eRichTooltipElement_messageRegistered, _M3eRichTooltipElement_clickOutsideController, _M3eRichTooltipElement_handleBeforeToggle, _M3eRichTooltipElement_handleToggle, _M3eRichTooltipElement_handleKeyDown, _M3eRichTooltipElement_handleSubheadSlotChange, _M3eRichTooltipElement_handleContentSlotChange, _M3eRichTooltipElement_handleActionsSlotChange, _M3eRichTooltipElement_updateMessage;
+var _M3eRichTooltipElement_instances, _M3eRichTooltipElement_id, _M3eRichTooltipElement_subheadText, _M3eRichTooltipElement_contentText, _M3eRichTooltipElement_message, _M3eRichTooltipElement_messageRegistered, _M3eRichTooltipElement_anchorLastPosition, _M3eRichTooltipElement_clickOutsideController, _M3eRichTooltipElement_handleBeforeToggle, _M3eRichTooltipElement_handleToggle, _M3eRichTooltipElement_handleKeyDown, _M3eRichTooltipElement_handleSubheadSlotChange, _M3eRichTooltipElement_handleContentSlotChange, _M3eRichTooltipElement_handleActionsSlotChange, _M3eRichTooltipElement_updateMessage;
 var M3eRichTooltipElement_1;
 /**
  * Provides contextual details for a control, such as explaining the value or purpose of a feature.
@@ -15321,6 +15376,8 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
     /** @private */
     _M3eRichTooltipElement_messageRegistered.set(this, false);
     /** @private */
+    _M3eRichTooltipElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     this._hasSubhead = false;
     /** @private */
     this._interactive = false;
@@ -15365,12 +15422,18 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
     const subheadId = this._interactive && this._hasSubhead ? `m3e-rich-tooltip-${__classPrivateFieldGet(this, _M3eRichTooltipElement_id, "f")}-subhead` : undefined;
     return b`<div class="base" popover="manual" role="${o(this._interactive ? "dialog" : undefined)}" aria-labelledby="${o(subheadId)}" @keydown="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleKeyDown)}" @beforetoggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleBeforeToggle)}" @toggle="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleToggle)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${o(subheadId)}"><slot name="subhead" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleSubheadSlotChange)}"></slot></div><div class="content"><slot @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleContentSlotChange)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleActionsSlotChange)}"></slot></div></div>`;
   }
+  /** @inheritdoc */
+  show() {
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, undefined, "f");
+    return super.show();
+  }
   /**
    * Manually hides the tooltip.
    * @param [restoreFocus=true] Whether to restore focus to the element that triggered the interactive tooltip.
    */
   hide(restoreFocus = true) {
     super.hide();
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, undefined, "f");
     if (restoreFocus && this._interactive && this.control && M3eInteractivityChecker.isFocusable(this.control)) {
       this.control.focus();
     }
@@ -15410,14 +15473,23 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
         x += this.control?.clientWidth ?? 0;
       }
     }
-    if (M3eDirectionality.current === "rtl") {
-      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
-      base.style.left = "";
-    } else {
-      base.style.left = `${x}px`;
-      base.style.right = "";
+    if (__classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f").x !== x) {
+      if (M3eDirectionality.current === "rtl") {
+        base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
+        base.style.left = "";
+      } else {
+        base.style.left = `${x}px`;
+        base.style.right = "";
+      }
+    }
+    if (__classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f")?.y !== y) {
+      base.style.top = `${y}px`;
     }
-    base.style.top = `${y}px`;
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, {
+      x,
+      y,
+      dir: M3eDirectionality.current
+    }, "f");
   }
 };
 _M3eRichTooltipElement_id = new WeakMap();
@@ -15425,6 +15497,7 @@ _M3eRichTooltipElement_subheadText = new WeakMap();
 _M3eRichTooltipElement_contentText = new WeakMap();
 _M3eRichTooltipElement_message = new WeakMap();
 _M3eRichTooltipElement_messageRegistered = new WeakMap();
+_M3eRichTooltipElement_anchorLastPosition = new WeakMap();
 _M3eRichTooltipElement_clickOutsideController = new WeakMap();
 _M3eRichTooltipElement_instances = new WeakSet();
 _M3eRichTooltipElement_handleBeforeToggle = function _M3eRichTooltipElement_handleBeforeToggle(e) {
@@ -15497,7 +15570,7 @@ _M3eRichTooltipElement_updateMessage = function _M3eRichTooltipElement_updateMes
   }
 };
 /** The styles of the element. */
-M3eRichTooltipElement.styles = i$4`:host { display: contents; } .base { flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eRichTooltipElement.styles = i$4`:host { display: contents; } .base { contain: layout style; flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
             transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
             overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
             display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
@@ -15508,7 +15581,7 @@ __decorate([r()], M3eRichTooltipElement.prototype, "_interactive", void 0);
 __decorate([n()], M3eRichTooltipElement.prototype, "position", void 0);
 M3eRichTooltipElement = M3eRichTooltipElement_1 = __decorate([customElement("m3e-rich-tooltip")], M3eRichTooltipElement);
 
-var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
+var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_anchorLastPosition, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
 /**
  * Adds additional context to a button or other UI element.
  *
@@ -15556,6 +15629,8 @@ let M3eTooltipElement = class M3eTooltipElement extends TooltipElementBase {
     _M3eTooltipElement_instances.add(this);
     /** @private */
     _M3eTooltipElement_message.set(this, void 0);
+    /** @private */
+    _M3eTooltipElement_anchorLastPosition.set(this, void 0);
     /**
      * The position of the tooltip.
      * @default "below"
@@ -15586,22 +15661,42 @@ let M3eTooltipElement = class M3eTooltipElement extends TooltipElementBase {
     this.ariaHidden = "true";
   }
   /** @inheritdoc */
+  show() {
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, undefined, "f");
+    return super.show();
+  }
+  /** @inheritdoc */
+  hide() {
+    super.hide();
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, undefined, "f");
+  }
+  /** @inheritdoc */
   render() {
     return b`<div class="base" popover="manual" @toggle="${__classPrivateFieldGet(this, _M3eTooltipElement_instances, "m", _M3eTooltipElement_handleToggle)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTooltipElement_instances, "m", _M3eTooltipElement_handleSlotChange)}"></slot></div>`;
   }
   /** @inheritdoc */
   _updatePosition(base, x, y) {
-    if (M3eDirectionality.current === "rtl") {
-      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
-      base.style.left = "";
-    } else {
-      base.style.left = `${x}px`;
-      base.style.right = "";
+    if (__classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.x !== x) {
+      if (M3eDirectionality.current === "rtl") {
+        base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
+        base.style.left = "";
+      } else {
+        base.style.left = `${x}px`;
+        base.style.right = "";
+      }
+    }
+    if (__classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.y !== y) {
+      base.style.top = `${y}px`;
     }
-    base.style.top = `${y}px`;
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, {
+      x,
+      y,
+      dir: M3eDirectionality.current
+    }, "f");
   }
 };
 _M3eTooltipElement_message = new WeakMap();
+_M3eTooltipElement_anchorLastPosition = new WeakMap();
 _M3eTooltipElement_instances = new WeakSet();
 _M3eTooltipElement_handleSlotChange = function _M3eTooltipElement_handleSlotChange(e) {
   const message = getTextContent(e.target, true);
@@ -15624,7 +15719,7 @@ _M3eTooltipElement_handleToggle = function _M3eTooltipElement_handleToggle(e) {
   }
 };
 /** The styles of the element. */
-M3eTooltipElement.styles = i$4`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: break-word; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eTooltipElement.styles = i$4`:host { display: contents; } .base { contain: layout style paint; position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: break-word; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--multiline), :--multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
@@ -16689,7 +16784,7 @@ _M3eCalendarElement_getNextPeriod = function _M3eCalendarElement_getNextPeriod(v
   return activeDate;
 };
 /** The styles of the element. */
-M3eCalendarElement.styles = i$4`:host { display: inline-block; vertical-align: top; width: fit-content; height: fit-content; } .base { display: flex; flex-direction: column; width: fit-content; overflow: hidden; padding: var(--m3e-calendar-padding, 0.5rem); background-color: var(--m3e-calendar-container-color); box-shadow: var(--m3e-calendar-container-elevation); border-radius: var(--m3e-calendar-container-shape); } .header { display: flex; align-items: center; --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; } .view:not(.no-animate) { transition: ${r$4(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+M3eCalendarElement.styles = i$4`:host { display: inline-block; vertical-align: top; width: fit-content; height: fit-content; } .base { contain: layout style paint; display: flex; flex-direction: column; width: fit-content; overflow: hidden; padding: var(--m3e-calendar-padding, 0.5rem); background-color: var(--m3e-calendar-container-color); box-shadow: var(--m3e-calendar-container-elevation); border-radius: var(--m3e-calendar-container-shape); } .header { display: flex; align-items: center; --m3e-text-button-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-hover-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-focus-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-text-button-pressed-label-text-color: var( --m3e-calendar-period-button-text-color, ${DesignToken.color.onSurfaceVariant} ); } .spacer { flex: 1 1 auto; } svg { transition: transform ${DesignToken.motion.spring.fastEffects}; } svg.rotate { transform: rotate(-180deg); } .body { position: relative; } .view:not(.no-animate) { transition: ${r$4(`margin var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         visibility var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .view.before, .view.after { visibility: hidden; position: absolute; } .view.before { margin-inline-start: -100%; } .view.after { margin-inline-start: 100%; } .view:not(.before):not(.after) { visibility: visible; position: relative; left: 0; margin-inline-start: 0; } .row { opacity: 1; transform: translateY(0); } .row.multi-year { transition: ${r$4(`transform var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete,
         opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .row:not(.multi-year) { transition: ${r$4(`opacity var(--m3e-calendar-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .body.month > .row:not(.month), .body.year > .row:not(.year), .body.multi-year > .row:not(.multi-year) { visibility: hidden; position: absolute; transform: translateY(-10%); opacity: 0; } .body.month > .row:not(.month) .view:not(.before):not(.after), .body.year > .row:not(.year) .view:not(.before):not(.after), .body.multi-year > .row:not(.multi-year) .view:not(.before):not(.after) { visibility: hidden; transition: none; } @media (prefers-reduced-motion) { .row:not(.multi-year), .row.multi-year, .view:not(.no-animate), svg { transition: none; } }`;
 __decorate([r()], M3eCalendarElement.prototype, "_today", void 0);
@@ -17309,7 +17404,7 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eCheckboxElement.styles = i$4`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error}); } :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate] ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError}); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper, :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: Highlight; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base, :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is( :state(--invalid), :--invalid )[indeterminate] ) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
+M3eCheckboxElement.styles = i$4`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken.color.primary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken.color.error}); } :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[indeterminate] ) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken.color.onError}); } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host( :not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not([indeterminate]):not([checked]) ) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[checked]) .base, :host(:not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):not(:hover) ) .wrapper, :host( :not([aria-disabled="true"]):not(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)):not( [checked] ):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[checked] ) .wrapper, :host( :not([aria-disabled="true"]):not( :is(:state(--touched), :--touched):is(:state(--invalid), :--invalid) )[indeterminate] ) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .wrapper { border-color: Highlight; } :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid):not( [checked] ):not([indeterminate]) ) .base, :host(:not([aria-disabled="true"]):is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)[checked]) .base, :host( :not([aria-disabled="true"]):is(:state(--touched), :--touched):is( :state(--invalid), :--invalid )[indeterminate] ) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
 __decorate([e$2(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
 __decorate([e$2(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
 __decorate([e$2(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
@@ -18469,7 +18564,7 @@ class M3eBreakpointObserver {
 }
 globalThis.M3eBreakpointObserver = M3eBreakpointObserver;
 
-var _M3eDatepickerElement_instances, _M3eDatepickerElement_closeTimeout, _M3eDatepickerElement_breakpointUnobserve, _M3eDatepickerElement_trigger, _M3eDatepickerElement_anchor, _M3eDatepickerElement_anchorCleanup, _M3eDatepickerElement_scrollLockController, _M3eDatepickerElement_inertController, _M3eDatepickerElement_documentClickHandler, _M3eDatepickerElement_documentKeyDownHandler, _M3eDatepickerElement_toggleHandler, _M3eDatepickerElement_renderHeader, _M3eDatepickerElement_renderCalendar, _M3eDatepickerElement_renderActions, _M3eDatepickerElement_handleDocumentClick, _M3eDatepickerElement_handleCalendarChange, _M3eDatepickerElement_handleClearClick, _M3eDatepickerElement_handleDismissClick, _M3eDatepickerElement_handleConfirmClick, _M3eDatepickerElement_handleDocumentKeyDown, _M3eDatepickerElement_initBreakpointMonitoring, _M3eDatepickerElement_updateVariant, _M3eDatepickerElement_updatePosition, _M3eDatepickerElement_clearAnchoring, _M3eDatepickerElement_clearSelectionState;
+var _M3eDatepickerElement_instances, _M3eDatepickerElement_closeTimeout, _M3eDatepickerElement_breakpointUnobserve, _M3eDatepickerElement_trigger, _M3eDatepickerElement_anchor, _M3eDatepickerElement_anchorCleanup, _M3eDatepickerElement_anchorLastPosition, _M3eDatepickerElement_scrollLockController, _M3eDatepickerElement_inertController, _M3eDatepickerElement_documentClickHandler, _M3eDatepickerElement_documentKeyDownHandler, _M3eDatepickerElement_toggleHandler, _M3eDatepickerElement_renderHeader, _M3eDatepickerElement_renderCalendar, _M3eDatepickerElement_renderActions, _M3eDatepickerElement_handleDocumentClick, _M3eDatepickerElement_handleCalendarChange, _M3eDatepickerElement_handleClearClick, _M3eDatepickerElement_handleDismissClick, _M3eDatepickerElement_handleConfirmClick, _M3eDatepickerElement_handleDocumentKeyDown, _M3eDatepickerElement_initBreakpointMonitoring, _M3eDatepickerElement_updateVariant, _M3eDatepickerElement_updatePosition, _M3eDatepickerElement_clearAnchoring, _M3eDatepickerElement_clearSelectionState;
 /**
  * Presents a date picker on a temporary surface.
  *
@@ -18555,6 +18650,8 @@ let M3eDatepickerElement = class M3eDatepickerElement extends SuppressInitialAni
     /** @private */
     _M3eDatepickerElement_anchorCleanup.set(this, void 0);
     /** @private */
+    _M3eDatepickerElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     _M3eDatepickerElement_scrollLockController.set(this, new ScrollLockController(this));
     /** @private */
     _M3eDatepickerElement_inertController.set(this, new InertController(this));
@@ -18568,6 +18665,7 @@ let M3eDatepickerElement = class M3eDatepickerElement extends SuppressInitialAni
         __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
         __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
         __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
+        __classPrivateFieldSet(this, _M3eDatepickerElement_anchorLastPosition, undefined, "f");
         clearTimeout(__classPrivateFieldGet(this, _M3eDatepickerElement_closeTimeout, "f"));
         if (!prefersReducedMotion()) {
           __classPrivateFieldSet(this, _M3eDatepickerElement_closeTimeout, setTimeout(() => this._open = false, 100), "f");
@@ -18834,6 +18932,7 @@ _M3eDatepickerElement_breakpointUnobserve = new WeakMap();
 _M3eDatepickerElement_trigger = new WeakMap();
 _M3eDatepickerElement_anchor = new WeakMap();
 _M3eDatepickerElement_anchorCleanup = new WeakMap();
+_M3eDatepickerElement_anchorLastPosition = new WeakMap();
 _M3eDatepickerElement_scrollLockController = new WeakMap();
 _M3eDatepickerElement_inertController = new WeakMap();
 _M3eDatepickerElement_documentClickHandler = new WeakMap();
@@ -18939,6 +19038,7 @@ _M3eDatepickerElement_updatePosition = /** @private */
 async function _M3eDatepickerElement_updatePosition() {
   if (this.currentVariant === "docked" && __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f")) {
     __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
+    __classPrivateFieldSet(this, _M3eDatepickerElement_anchorLastPosition, undefined, "f");
     __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, await positionAnchor(this, __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f") ?? __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f"), {
       position: "bottom-start",
       inline: true,
@@ -18947,14 +19047,23 @@ async function _M3eDatepickerElement_updatePosition() {
     }, (x, y, position) => {
       setCustomState(this, "--top", position.includes("top"));
       setCustomState(this, "--bottom", position.includes("bottom"));
-      if (M3eDirectionality.current === "rtl") {
-        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-        this.style.left = "";
-      } else {
-        this.style.left = `${x}px`;
-        this.style.right = "";
+      if (__classPrivateFieldGet(this, _M3eDatepickerElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eDatepickerElement_anchorLastPosition, "f")?.x !== x) {
+        if (M3eDirectionality.current === "rtl") {
+          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+          this.style.left = "";
+        } else {
+          this.style.left = `${x}px`;
+          this.style.right = "";
+        }
       }
-      this.style.top = `${y}px`;
+      if (__classPrivateFieldGet(this, _M3eDatepickerElement_anchorLastPosition, "f")?.y !== y) {
+        this.style.top = `${y}px`;
+      }
+      __classPrivateFieldSet(this, _M3eDatepickerElement_anchorLastPosition, {
+        x,
+        y,
+        dir: M3eDirectionality.current
+      }, "f");
     }), "f");
   } else {
     __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearAnchoring).call(this);
@@ -18963,6 +19072,7 @@ async function _M3eDatepickerElement_updatePosition() {
 _M3eDatepickerElement_clearAnchoring = function _M3eDatepickerElement_clearAnchoring() {
   __classPrivateFieldGet(this, _M3eDatepickerElement_anchorCleanup, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eDatepickerElement_anchorCleanup, undefined, "f");
+  __classPrivateFieldSet(this, _M3eDatepickerElement_anchorLastPosition, undefined, "f");
   this.style.left = "";
   this.style.right = "";
   this.style.top = "";
@@ -19337,7 +19447,7 @@ _M3eDialogElement_handleActionsSlotChange = function _M3eDialogElement_handleAct
   setCustomState(this, "--with-actions", this._withActions);
 };
 /** The styles of the element. */
-M3eDialogElement.styles = i$4`:host { display: contents; } .base { font: inherit; border: unset; outline: unset; padding: unset; display: flex; flex-direction: column; position: fixed; overflow: visible; border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge}); min-width: var(--m3e-dialog-min-width, 17.5rem); max-width: var(--m3e-dialog-max-width, 35rem); color: var(--m3e-dialog-color, ${DesignToken.color.onSurface}); background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh}); visibility: hidden; opacity: 0; transform-origin: top; transform: translateY(-3.125rem) scaleY(0.8); } .base::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent); margin-inline-end: -20px; } .base:not([open]) { visibility: hidden; opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, 
+M3eDialogElement.styles = i$4`:host { display: contents; } .base { contain: layout style; font: inherit; border: unset; outline: unset; padding: unset; display: flex; flex-direction: column; position: fixed; overflow: visible; border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge}); min-width: var(--m3e-dialog-min-width, 17.5rem); max-width: var(--m3e-dialog-max-width, 35rem); color: var(--m3e-dialog-color, ${DesignToken.color.onSurface}); background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh}); visibility: hidden; opacity: 0; transform-origin: top; transform: translateY(-3.125rem) scaleY(0.8); } .base::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent); margin-inline-end: -20px; } .base:not([open]) { visibility: hidden; opacity: 0; transform: translateY(-3.125rem) scaleY(0.8); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`)}; } .base[open] { visibility: visible; opacity: 1; transform: translateY(0) scaleY(1); transition: ${r$4(`opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, 
@@ -19462,7 +19572,7 @@ let M3eDividerElement = class M3eDividerElement extends Role(i$1, "separator") {
   }
 };
 /** The styles of the element. */
-M3eDividerElement.styles = i$4`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`;
+M3eDividerElement.styles = i$4`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { contain: layout style paint; box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`;
 __decorate([n({
   type: Boolean,
   reflect: true
@@ -19503,10 +19613,10 @@ const DrawerContainerToken = {
  * Styles for `M3eDrawerContainerElement`.
  * @internal
  */
-const DrawerContainerStyle = i$4`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; box-sizing: border-box; background-color: ${DrawerContainerToken.containerColor}; box-shadow: ${DrawerContainerToken.containerElevation}; transition: ${r$4(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
+const DrawerContainerStyle = i$4`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { contain: layout style; position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; box-sizing: border-box; background-color: ${DrawerContainerToken.containerColor}; box-shadow: ${DrawerContainerToken.containerElevation}; transition: ${r$4(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
       visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,
       background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
-      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${r$4(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content, :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content, :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content, :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content, :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken.color.scrim}; opacity: 0; visibility: hidden; transition: ${r$4(`opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, 
+      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { contain: layout style; position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${r$4(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content, :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content, :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content, :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content, :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken.color.scrim}; opacity: 0; visibility: hidden; transition: ${r$4(`opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, 
         visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:is(:state(--start-push), :--start-push)[start]) .scrim, :host(:is(:state(--end-push), :--end-push)[end]) .scrim, :host(:is(:state(--start-over), :--start-over)[start]) .scrim, :host(:is(:state(--end-over), :--end-over)[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--start-over), :--start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--end-over), :--end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; border-inline-end-style: solid; box-sizing: border-box; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not(:is(:state(--end-push), :--end-push)[end]):not( :is(:state(--end-over), :--end-over)[end] ) ) .start { border-inline-end-color: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; border-inline-start-style: solid; box-sizing: border-box; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(:is(:state(--no-animate), :--no-animate)) .start, :host(:is(:state(--no-animate), :--no-animate)) .end, :host(:is(:state(--no-animate), :--no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${r$4(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
       visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not( :is(:state(--end-push), :--end-push)[end] ):not(:is(:state(--end-over), :--end-over)[end]) ) .start { border-inline-end-color: GrayText; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;
 
@@ -20032,7 +20142,7 @@ const ExpansionHeaderToken = {
  * @internal
  */
 const ExpansionHeaderStyle = i$4`:host { display: block; border-radius: inherit; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: ${r$4(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } .base { box-sizing: border-box; width: 100%; height: 100%; display: flex; border-radius: inherit; outline: none; position: relative; padding-inline-start: ${ExpansionHeaderToken.paddingLeft}; padding-inline-end: ${ExpansionHeaderToken.paddingRight}; font-size: ${ExpansionHeaderToken.fontSize}; font-weight: ${ExpansionHeaderToken.fontWeight}; line-height: ${ExpansionHeaderToken.lineHeight}; letter-spacing: ${ExpansionHeaderToken.tracking}; column-gap: ${ExpansionHeaderToken.spacing}; } :host(:not(:disabled)) { cursor: pointer; } :host(:not([aria-expanded="true"])) { height: ${ExpansionHeaderToken.collapsedHeight}; } :host([aria-expanded="true"]) { height: ${ExpansionHeaderToken.expandedHeight}; } :host(:not(:focus-visible)) .state-layer { --m3e-state-layer-focus-color: transparent; } :host([aria-expanded="true"]) .state-layer { --m3e-state-layer-hover-color: transparent; } :host([aria-expanded="true"]) [part="background"], .content { flex: 1 1 auto; display: flex; align-items: center; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: ${ExpansionHeaderToken.toggleIconSize}; transition: ${r$4(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+        ${DesignToken.motion.easing.standard}`)}; } .base { contain: layout style; box-sizing: border-box; width: 100%; height: 100%; display: flex; border-radius: inherit; outline: none; position: relative; padding-inline-start: ${ExpansionHeaderToken.paddingLeft}; padding-inline-end: ${ExpansionHeaderToken.paddingRight}; font-size: ${ExpansionHeaderToken.fontSize}; font-weight: ${ExpansionHeaderToken.fontWeight}; line-height: ${ExpansionHeaderToken.lineHeight}; letter-spacing: ${ExpansionHeaderToken.tracking}; column-gap: ${ExpansionHeaderToken.spacing}; } :host(:not(:disabled)) { cursor: pointer; } :host(:not([aria-expanded="true"])) { height: ${ExpansionHeaderToken.collapsedHeight}; } :host([aria-expanded="true"]) { height: ${ExpansionHeaderToken.expandedHeight}; } :host(:not(:focus-visible)) .state-layer { --m3e-state-layer-focus-color: transparent; } :host([aria-expanded="true"]) .state-layer { --m3e-state-layer-hover-color: transparent; } :host([aria-expanded="true"]) [part="background"], .content { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .toggle { contain: layout style paint; display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: ${ExpansionHeaderToken.toggleIconSize}; transition: ${r$4(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
         ${DesignToken.motion.easing.standard}`)}; } :host([toggle-direction="vertical"][aria-expanded="true"]) .toggle { transform: rotate(180deg); } :host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle { transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg)); } :host([toggle-position="before"]) .toggle { margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing}); } :host([toggle-position="after"]) .toggle { margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing}); } :host([hide-toggle]) .toggle { display: none; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } @media (prefers-reduced-motion) { :host, .toggle { transition: none; } }`;
 
 /**
@@ -20061,7 +20171,7 @@ const ExpansionPanelToken = {
  * @internal
  */
 const ExpansionPanelStyle = i$4`:host { display: block; } .base { background-color: ${ExpansionPanelToken.containerColor}; transition: ${r$4(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:is(:state(--with-actions), :--with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;
+        ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { contain: layout style; padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:is(:state(--with-actions), :--with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;
 
 var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggle;
 /**
@@ -20116,7 +20226,7 @@ let M3eExpansionHeaderElement = class M3eExpansionHeaderElement extends Keyboard
   }
   /** @inheritdoc */
   render() {
-    return b`<div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>${this.togglePosition === "before" ? __classPrivateFieldGet(this, _M3eExpansionHeaderElement_instances, "m", _M3eExpansionHeaderElement_renderToggle).call(this) : A}<div class="content"><slot></slot></div>${this.togglePosition === "after" ? __classPrivateFieldGet(this, _M3eExpansionHeaderElement_instances, "m", _M3eExpansionHeaderElement_renderToggle).call(this) : A}</div>`;
+    return b`<div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>${this.togglePosition === "before" ? __classPrivateFieldGet(this, _M3eExpansionHeaderElement_instances, "m", _M3eExpansionHeaderElement_renderToggle).call(this) : A}<div class="content"><m3e-text-overflow><slot></slot></m3e-text-overflow></div>${this.togglePosition === "after" ? __classPrivateFieldGet(this, _M3eExpansionHeaderElement_instances, "m", _M3eExpansionHeaderElement_renderToggle).call(this) : A}</div>`;
   }
 };
 _M3eExpansionHeaderElement_instances = new WeakSet();
@@ -20324,6 +20434,9 @@ _M3eExpansionPanelElement_handleKeyDown = function _M3eExpansionPanelElement_han
         }
       }
       break;
+    case " ":
+      e.preventDefault();
+      break;
   }
 };
 _M3eExpansionPanelElement_handleCollapsibleEvent = function _M3eExpansionPanelElement_handleCollapsibleEvent(e) {
@@ -21667,7 +21780,7 @@ _M3eFabMenuElement_detachFab = function _M3eFabMenuElement_detachFab() {
   }
 };
 /** The styles of the element. */
-M3eFabMenuElement.styles = i$4`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.spring.fastEffects}, 
+M3eFabMenuElement.styles = i$4`:host { contain: layout style; position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.spring.fastEffects}, 
         transform ${DesignToken.motion.spring.fastSpatial},
         overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,
         display ${DesignToken.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:is(:state(--left), :--left)) { align-items: flex-start; transform-origin: left; } :host(:is(:state(--right), :--right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${DesignToken.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
@@ -22518,14 +22631,13 @@ class IconRegistry {
     }
     __classPrivateFieldGet(this, _a$8, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.outlined, trustOutlinedViewBox);
     __classPrivateFieldGet(this, _a$8, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.filled, trustFilledViewBox);
-    if (window !== undefined) {
-      const key = __classPrivateFieldGet(this, _a$8, "m", _IconRegistry_createKey).call(this, name, variant);
-      __classPrivateFieldGet(this, _a$8, "f", _IconRegistry_icons).set(key, {
-        outlined: w`<svg viewBox="${fillSet.outlined.viewBox}"><path d="${fillSet.outlined.path}"/></svg>`,
-        filled: w`<svg viewBox="${fillSet.filled.viewBox}"><path d="${fillSet.filled.path}"/></svg>`
-      });
-      __classPrivateFieldGet(this, _a$8, "f", _IconRegistry_observers).get(key)?.forEach(x => x());
-    }
+    if (typeof window === "undefined") return;
+    const key = __classPrivateFieldGet(this, _a$8, "m", _IconRegistry_createKey).call(this, name, variant);
+    __classPrivateFieldGet(this, _a$8, "f", _IconRegistry_icons).set(key, {
+      outlined: w`<svg viewBox="${fillSet.outlined.viewBox}"><path d="${fillSet.outlined.path}"/></svg>`,
+      filled: w`<svg viewBox="${fillSet.filled.viewBox}"><path d="${fillSet.filled.path}"/></svg>`
+    });
+    __classPrivateFieldGet(this, _a$8, "f", _IconRegistry_observers).get(key)?.forEach(x => x());
   }
   /**
    * Determines whether an icon is registered for the given variant.
@@ -24315,7 +24427,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
 __decorate([r()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([customElement("m3e-menu-item")], M3eMenuItemElement);
 
-var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_scrollController, _M3eMenuElement_clickOutsideController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
+var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_anchorLastPosition, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_scrollController, _M3eMenuElement_clickOutsideController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
 /**
  * Presents a list of choices on a temporary surface.
@@ -24403,6 +24515,8 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
     /** @private */
     _M3eMenuElement_anchorCleanup.set(this, void 0);
     /** @private */
+    _M3eMenuElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     _M3eMenuElement_listManager.set(this, new RovingTabIndexManager().withWrap().withHomeAndEnd().withVerticalOrientation());
     /** @private */
     _M3eMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleKeyDown).call(this, e));
@@ -24437,6 +24551,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
           __classPrivateFieldGet(this, _M3eMenuElement_clickOutsideController, "f").unobserveAll();
           __classPrivateFieldGet(this, _M3eMenuElement_anchorCleanup, "f")?.call(this);
           __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, undefined, "f");
+          __classPrivateFieldSet(this, _M3eMenuElement_anchorLastPosition, undefined, "f");
           break;
       }
     });
@@ -24512,12 +24627,21 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
         setCustomState(this, "--shift-up", false);
         setCustomState(this, Math.round(y) === Math.round(top) ? "--shift-down" : "--shift-up", true);
       }
-      if (M3eDirectionality.current === "rtl") {
-        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-      } else {
-        this.style.left = `${x}px`;
+      if (__classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.x !== x) {
+        if (M3eDirectionality.current === "rtl") {
+          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+        } else {
+          this.style.left = `${x}px`;
+        }
       }
-      this.style.top = `${y}px`;
+      if (__classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.y !== y) {
+        this.style.top = `${y}px`;
+      }
+      __classPrivateFieldSet(this, _M3eMenuElement_anchorLastPosition, {
+        x,
+        y,
+        dir: M3eDirectionality.current
+      }, "f");
     }), "f");
     const parent = trigger.closest("m3e-menu");
     if (parent) {
@@ -24597,6 +24721,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
 };
 _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
+_M3eMenuElement_anchorLastPosition = new WeakMap();
 _M3eMenuElement_listManager = new WeakMap();
 _M3eMenuElement_keyDownHandler = new WeakMap();
 _M3eMenuElement_mouseEnterHandler = new WeakMap();
@@ -24674,7 +24799,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   registerStyleSheet(i$4`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = i$4`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+M3eMenuElement.styles = i$4`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { contain: layout style paint; display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
         display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
@@ -25157,7 +25282,7 @@ _M3eNavBarElement_handleChange = function _M3eNavBarElement_handleChange(e) {
   }));
 };
 /** The styles of the element. */
-M3eNavBarElement.styles = i$4`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`;
+M3eNavBarElement.styles = i$4`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { contain: layout style; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`;
 __decorate([r()], M3eNavBarElement.prototype, "_mode", void 0);
 __decorate([n({
   reflect: true
@@ -25345,7 +25470,7 @@ _M3eNavItemElement_initResizeObserver = function _M3eNavItemElement_initResizeOb
   }
 };
 /** The styles of the element. */
-M3eNavItemElement.styles = i$4`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: ${r$4(`margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } .icon { position: absolute; } .label { vertical-align: middle; } :host([orientation="horizontal"]) .label { white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple { transition: ${r$4(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name="selected-icon"], :host([selected]:is(:state(--with-selected-icon), :--with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizongal"]) .base { margin-top: 0; } :host([orientation="vertical"]) .base { margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); margin-bottom: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple { animation: collapse ${DesignToken.motion.duration.medium1}; } @keyframes collapse { from { width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)); } to { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .state-layer, :host([orientation="horizontal"]) .ripple, :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); } :host([orientation="horizontal"]) .inner { width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } @keyframes slide-down { from { transform: translateY(-4px); } to { transform: translateY(0); } } @keyframes slide-up { from { transform: translateY(4px); } to { transform: translateY(0); } } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label { animation: horizontal-fade-in ${DesignToken.motion.duration.medium1}; } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: vertical-fade-in ${DesignToken.motion.duration.medium1}; } @keyframes horizontal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vertical-fade-in { from { opacity: 0; } to { opacity: 1; } } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host( :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"] ) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: none; } } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = i$4`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { contain: layout style; justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: ${r$4(`margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } .icon { position: absolute; } .label { vertical-align: middle; } :host([orientation="horizontal"]) .label { white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple { transition: ${r$4(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name="selected-icon"], :host([selected]:is(:state(--with-selected-icon), :--with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizongal"]) .base { margin-top: 0; } :host([orientation="vertical"]) .base { margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); margin-bottom: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple { animation: collapse ${DesignToken.motion.duration.medium1}; } @keyframes collapse { from { width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)); } to { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .state-layer, :host([orientation="horizontal"]) .ripple, :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); } :host([orientation="horizontal"]) .inner { width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } @keyframes slide-down { from { transform: translateY(-4px); } to { transform: translateY(0); } } @keyframes slide-up { from { transform: translateY(4px); } to { transform: translateY(0); } } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label { animation: horizontal-fade-in ${DesignToken.motion.duration.medium1}; } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: vertical-fade-in ${DesignToken.motion.duration.medium1}; } @keyframes horizontal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vertical-fade-in { from { opacity: 0; } to { opacity: 1; } } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host( :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"] ) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: none; } } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([e$2(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([e$2(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([e$2(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
@@ -25664,7 +25789,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
   registerStyleSheet(i$4`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`);
 })();
 /** The styles of the element. */
-M3eNavMenuItemElement.styles = i$4`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${r$4(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+M3eNavMenuItemElement.styles = i$4`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${r$4(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .toggle { transition: ${r$4(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
         ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle, :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: LinkText; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base, :host([selected]:is(:state(--with-items), :--with-items):not(:disabled)) .base { forced-color-adjust: none; background-color: unset; color: Highlight; } :host([selected]:not(:is(:state(--with-items), :--with-items)):not(:disabled)) .base::after { content: ""; position: absolute; inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2)); inset-block-start: 50%; width: 0.375rem; height: 0.375rem; border-radius: 50%; transform: translateY(-50%); background-color: currentColor; } }`;
 __decorate([e$2(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
@@ -25982,7 +26107,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
   registerStyleSheet(i$4`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`);
 })();
 /** The styles of the element. */
-M3eNavMenuElement.styles = i$4`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
+M3eNavMenuElement.styles = i$4`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { contain: layout style; width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
 /** @private */
 M3eNavMenuElement.__nextId = 0;
 M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([customElement("m3e-nav-menu")], M3eNavMenuElement);
@@ -26190,7 +26315,7 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   registerStyleSheet(i$4`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eNavRailElement.styles = i$4`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .base { display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`;
+M3eNavRailElement.styles = i$4`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .base { contain: layout style; display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`;
 M3eNavRailElement = __decorate([customElement("m3e-nav-rail")], M3eNavRailElement);
 
 var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
@@ -27904,7 +28029,7 @@ _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelecti
   }
 };
 /** The styles of the element. */
-M3eRadioElement.styles = i$4`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
+M3eRadioElement.styles = i$4`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface}); color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) .base { --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary}); --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary}); --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary}); color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .base { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error}); --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error}); --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error}); color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error}); } @media (forced-colors: active) { :host(:not([checked])) .base, :host([checked]) .base { --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText); --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText); --m3e-ripple-color: var(--_radio-forced-color, CanvasText); color: var(--_radio-forced-color, CanvasText); } :host([aria-disabled="true"]) .base { color: GrayText; } :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base { --_radio-forced-color: Highlight; color: Highlight; } }`;
 __decorate([e$2(".focus-ring")], M3eRadioElement.prototype, "_focusRing", void 0);
 __decorate([e$2(".state-layer")], M3eRadioElement.prototype, "_stateLayer", void 0);
 __decorate([e$2(".ripple")], M3eRadioElement.prototype, "_ripple", void 0);
@@ -28094,7 +28219,7 @@ const SearchBarLightDomStyle = i$4`m3e-search-bar input[slot="input"]::placehold
  * Styles for `M3eSearchBarElement`.
  * @internal
  */
-const SearchBarStyle = i$4`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:is(:state(--clearable), :--clearable))) .clear { display: none; } :host(:is(:state(--with-leading), :--with-leading)) slot[name="leading"], :host(:is(:state(--with-trailing), :--with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:is(:state(--with-leading), :--with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:is(:state(--with-leading), :--with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
+const SearchBarStyle = i$4`:host { display: block; height: ${SearchBarToken.containerHeight}; } .base { contain: layout style paint; cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${SearchBarToken.containerShape}; background-color: ${SearchBarToken.containerColor}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:is(:state(--clearable), :--clearable))) .clear { display: none; } :host(:is(:state(--with-leading), :--with-leading)) slot[name="leading"], :host(:is(:state(--with-trailing), :--with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${SearchBarToken.actionsGap}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${SearchBarToken.inputColor}; font-size: ${SearchBarToken.inputTextFontSize}; font-weight: ${SearchBarToken.inputTextFontWeight}; line-height: ${SearchBarToken.inputTextLineHeight}; letter-spacing: ${SearchBarToken.inputTextTracking}; } :host(:is(:state(--with-leading), :--with-leading)) .base { padding-inline-start: ${SearchBarToken.leadingSpace}; } :host(:not(:is(:state(--with-leading), :--with-leading))) .base { padding-inline-start: ${SearchBarToken.noActionsLeadingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base { padding-inline-end: ${SearchBarToken.trailingSpace}; } :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base { padding-inline-end: ${SearchBarToken.noActionsTrailingSpace}; } :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) ::slotted([slot="input"]) { margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace}; } slot[name="leading"] { color: ${SearchBarToken.leadingIconColor}; --m3e-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } slot[name="trailing"], .clear { color: ${SearchBarToken.trailingIconColor}; --m3e-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor}; --m3e-icon-size: ${SearchBarToken.iconSize}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${SearchBarToken.iconSize}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`;
 
 /** @internal */
 const SearchViewToken = {
@@ -28131,7 +28256,7 @@ const SearchViewLightDomStyle = i$4`m3e-search-view input[slot="input"]::placeho
  * Styles for `M3eSearchViewElement`.
  * @internal
  */
-const SearchViewStyle = i$4`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:is(:state(--fullscreen), :--fullscreen)) .bar { transition: ${r$4(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar, :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:is(:state(--clearable), :--clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:is(:state(--fullscreen), :--fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header, :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[open]) .header, :host(:is(:state(--docked), :--docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked):not([contained])) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:is(:state(--docked), :--docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:is(:state(--docked), :--docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:is(:state(--docked), :--docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:is(:state(--docked), :--docked)) .results { transform-origin: top; transition: ${r$4(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
+const SearchViewStyle = i$4`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { contain: layout style; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:is(:state(--fullscreen), :--fullscreen)) .bar { transition: ${r$4(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar, :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:is(:state(--clearable), :--clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:is(:state(--fullscreen), :--fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header, :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[open]) .header, :host(:is(:state(--docked), :--docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:is(:state(--docked), :--docked):not([contained])) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:is(:state(--docked), :--docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:is(:state(--docked), :--docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:is(:state(--docked), :--docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:is(:state(--docked), :--docked)) .results { transform-origin: top; transition: ${r$4(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
       overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
       display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--docked), :--docked):not([open])) .results { transform: scaleY(0.8); } :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(0.8); } } :host(:is(:state(--docked), :--docked)) .view { background-color: transparent; } :host(:is(:state(--docked), :--docked):not([open])) .view { transition: ${r$4(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
       background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop { transition: ${r$4(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
@@ -28283,7 +28408,7 @@ __decorate([n({
 })], M3eSearchBarElement.prototype, "clearLabel", void 0);
 M3eSearchBarElement = __decorate([customElement("m3e-search-bar")], M3eSearchBarElement);
 
-var _M3eSearchViewElement_instances, _M3eSearchViewElement_input, _M3eSearchViewElement_closeOnInputFocus, _M3eSearchViewElement_inputInputHandler, _M3eSearchViewElement_inputFocusHandler, _M3eSearchViewElement_inputKeyDownHandler, _M3eSearchViewElement_inputPointerHandler, _M3eSearchViewElement_scrollLockController, _M3eSearchViewElement_inertController, _M3eSearchViewElement_openMode, _M3eSearchViewElement_anchorCleanup, _M3eSearchViewElement_breakpointUnobserve, _M3eSearchViewElement_renderIconOrBackButton, _M3eSearchViewElement_renderIcon, _M3eSearchViewElement_renderBackButton, _M3eSearchViewElement_renderClearButton, _M3eSearchViewElement_initBreakpointMonitoring, _M3eSearchViewElement_handleInputSlotChange, _M3eSearchViewElement_handleInputInput, _M3eSearchViewElement_updateMode, _M3eSearchViewElement_updateClearableState, _M3eSearchViewElement_handleInputFocus, _M3eSearchViewElement_handleCloseClick, _M3eSearchViewElement_handleClearClick, _M3eSearchViewElement_handleInputPointerDown, _M3eSearchViewElement_handleInputKeyDown, _M3eSearchViewElement_handleKeyDown, _M3eSearchViewElement_openDocked, _M3eSearchViewElement_closeDocked, _M3eSearchViewElement_hideDocked, _M3eSearchViewElement_openFullscreen, _M3eSearchViewElement_closeFullscreen;
+var _M3eSearchViewElement_instances, _M3eSearchViewElement_input, _M3eSearchViewElement_closeOnInputFocus, _M3eSearchViewElement_inputInputHandler, _M3eSearchViewElement_inputFocusHandler, _M3eSearchViewElement_inputKeyDownHandler, _M3eSearchViewElement_inputPointerHandler, _M3eSearchViewElement_scrollLockController, _M3eSearchViewElement_inertController, _M3eSearchViewElement_openMode, _M3eSearchViewElement_anchorCleanup, _M3eSearchViewElement_anchorLastPosition, _M3eSearchViewElement_breakpointUnobserve, _M3eSearchViewElement_renderIconOrBackButton, _M3eSearchViewElement_renderIcon, _M3eSearchViewElement_renderBackButton, _M3eSearchViewElement_renderClearButton, _M3eSearchViewElement_initBreakpointMonitoring, _M3eSearchViewElement_handleInputSlotChange, _M3eSearchViewElement_handleInputInput, _M3eSearchViewElement_updateMode, _M3eSearchViewElement_updateClearableState, _M3eSearchViewElement_handleInputFocus, _M3eSearchViewElement_handleCloseClick, _M3eSearchViewElement_handleClearClick, _M3eSearchViewElement_handleInputPointerDown, _M3eSearchViewElement_handleInputKeyDown, _M3eSearchViewElement_handleKeyDown, _M3eSearchViewElement_openDocked, _M3eSearchViewElement_closeDocked, _M3eSearchViewElement_hideDocked, _M3eSearchViewElement_openFullscreen, _M3eSearchViewElement_closeFullscreen;
 /**
  * A surface that presents suggestions and results for a search.
  *
@@ -28379,6 +28504,8 @@ let M3eSearchViewElement = class M3eSearchViewElement extends ReconnectedCallbac
     /** @private */
     _M3eSearchViewElement_anchorCleanup.set(this, void 0);
     /** @private */
+    _M3eSearchViewElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     _M3eSearchViewElement_breakpointUnobserve.set(this, void 0);
     /**
      * Whether the view features a persistent, filled search container.
@@ -28512,6 +28639,7 @@ _M3eSearchViewElement_scrollLockController = new WeakMap();
 _M3eSearchViewElement_inertController = new WeakMap();
 _M3eSearchViewElement_openMode = new WeakMap();
 _M3eSearchViewElement_anchorCleanup = new WeakMap();
+_M3eSearchViewElement_anchorLastPosition = new WeakMap();
 _M3eSearchViewElement_breakpointUnobserve = new WeakMap();
 _M3eSearchViewElement_instances = new WeakSet();
 _M3eSearchViewElement_renderIconOrBackButton = function _M3eSearchViewElement_renderIconOrBackButton() {
@@ -28639,19 +28767,34 @@ async function _M3eSearchViewElement_openDocked() {
   __classPrivateFieldSet(this, _M3eSearchViewElement_openMode, this.currentMode, "f");
   const view = this._view;
   __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eSearchViewElement_anchorLastPosition, undefined, "f");
   __classPrivateFieldSet(this, _M3eSearchViewElement_anchorCleanup, await positionAnchor(view, this._anchor, {
     position: "bottom"
   }, (x, y) => {
     const view = this._view;
-    view.style.top = `${y - this._anchor.clientHeight}px`;
-    view.style.width = `${this._anchor.clientWidth}px`;
-    if (M3eDirectionality.current === "rtl") {
-      view.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-      view.style.left = "";
-    } else {
-      view.style.left = `${x}px`;
-      view.style.right = "";
+    y -= this._anchor.clientHeight;
+    if (__classPrivateFieldGet(this, _M3eSearchViewElement_anchorLastPosition, "f")?.y !== y) {
+      view.style.top = `${y}px`;
+    }
+    const width = this._anchor.clientWidth;
+    if (__classPrivateFieldGet(this, _M3eSearchViewElement_anchorLastPosition, "f")?.width !== width) {
+      view.style.width = `${width}px`;
+    }
+    if (__classPrivateFieldGet(this, _M3eSearchViewElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eSearchViewElement_anchorLastPosition, "f")?.x !== x) {
+      if (M3eDirectionality.current === "rtl") {
+        view.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+        view.style.left = "";
+      } else {
+        view.style.left = `${x}px`;
+        view.style.right = "";
+      }
     }
+    __classPrivateFieldSet(this, _M3eSearchViewElement_anchorLastPosition, {
+      x,
+      y,
+      width,
+      dir: M3eDirectionality.current
+    }, "f");
   }), "f");
   this._anchor.style.position = "relative";
   view.popover = "manual";
@@ -28701,6 +28844,7 @@ _M3eSearchViewElement_closeDocked = function _M3eSearchViewElement_closeDocked()
 _M3eSearchViewElement_hideDocked = function _M3eSearchViewElement_hideDocked() {
   __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eSearchViewElement_anchorCleanup, undefined, "f");
+  __classPrivateFieldSet(this, _M3eSearchViewElement_anchorLastPosition, undefined, "f");
   const view = this._view;
   view.classList.remove("closing");
   view.style.position = "";
@@ -28735,6 +28879,7 @@ async function _M3eSearchViewElement_openFullscreen() {
   __classPrivateFieldGet(this, _M3eSearchViewElement_inertController, "f").lock();
   const view = this._view;
   __classPrivateFieldGet(this, _M3eSearchViewElement_anchorCleanup, "f")?.call(this);
+  __classPrivateFieldSet(this, _M3eSearchViewElement_anchorLastPosition, undefined, "f");
   if (!prefersReducedMotion()) {
     const rect = view.getBoundingClientRect();
     const startInline = M3eDirectionality.current === "rtl" ? window.innerWidth - rect.right : rect.left;
@@ -29331,7 +29476,8 @@ __decorate([n({
 })], M3eShapeElement.prototype, "name", void 0);
 M3eShapeElement = __decorate([customElement("m3e-shape")], M3eShapeElement);
 
-var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape;
+var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading, _M3eSkeletonElement_registerLoading, _M3eSkeletonElement_unregisterLoading;
+var M3eSkeletonElement_1;
 /**
  * A visual placeholder that mimics the layout of content while it's still loading.
  * @description
@@ -29368,7 +29514,7 @@ var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3e
  * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.
  * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.
  */
-let M3eSkeletonElement = class M3eSkeletonElement extends ReconnectedCallback(i$1) {
+let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends ReconnectedCallback(i$1) {
   constructor() {
     super(...arguments);
     _M3eSkeletonElement_instances.add(this);
@@ -29394,16 +29540,39 @@ let M3eSkeletonElement = class M3eSkeletonElement extends ReconnectedCallback(i$
   disconnectedCallback() {
     super.disconnectedCallback();
     __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
   }
   /** @inheritdoc */
   reconnectedCallback() {
     super.reconnectedCallback();
     __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_updateLoading).call(this);
+  }
+  /** @inheritdoc */
+  willUpdate(_changedProperties) {
+    super.willUpdate(_changedProperties);
+    if (_changedProperties.has("loaded") || _changedProperties.has("animation")) {
+      __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_updateLoading).call(this);
+    }
   }
   /** @inheritdoc */
   render() {
     return b`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
   }
+  /** @private */
+  static __updateAnimations() {
+    const pause = M3eSkeletonElement_1.__forcedColorsMediaQuery.matches || M3eSkeletonElement_1.__reducedMediaQuery.matches;
+    if (M3eSkeletonElement_1.__pulseLoading.size === 0 || pause) {
+      M3eSkeletonElement_1.__pulseAnimation.pause();
+    } else if (M3eSkeletonElement_1.__pulseLoading.size > 0 && M3eSkeletonElement_1.__pulseAnimation.playState === "paused") {
+      M3eSkeletonElement_1.__pulseAnimation.play();
+    }
+    if (M3eSkeletonElement_1.__waveLoading.size === 0 || pause) {
+      M3eSkeletonElement_1.__waveAnimation.pause();
+    } else if (M3eSkeletonElement_1.__waveLoading.size > 0 && M3eSkeletonElement_1.__waveAnimation.playState === "paused") {
+      M3eSkeletonElement_1.__waveAnimation.play();
+    }
+  }
 };
 _M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
 _M3eSkeletonElement_instances = new WeakSet();
@@ -29457,52 +29626,73 @@ async function _M3eSkeletonElement_createShape(element) {
   __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").set(shape, anchoringCleanup);
   this.shadowRoot?.appendChild(shape);
 };
+_M3eSkeletonElement_updateLoading = function _M3eSkeletonElement_updateLoading() {
+  if (!this.loaded && this.animation !== "none") {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_registerLoading).call(this);
+  } else {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
+  }
+};
+_M3eSkeletonElement_registerLoading = function _M3eSkeletonElement_registerLoading() {
+  switch (this.animation) {
+    case "pulse":
+      M3eSkeletonElement_1.__waveLoading.delete(this);
+      if (!M3eSkeletonElement_1.__pulseLoading.has(this)) {
+        M3eSkeletonElement_1.__pulseLoading.add(this);
+        M3eSkeletonElement_1.__updateAnimations();
+      }
+      break;
+    case "wave":
+      M3eSkeletonElement_1.__pulseLoading.delete(this);
+      if (!M3eSkeletonElement_1.__waveLoading.has(this)) {
+        M3eSkeletonElement_1.__waveLoading.add(this);
+        M3eSkeletonElement_1.__updateAnimations();
+      }
+      break;
+  }
+};
+_M3eSkeletonElement_unregisterLoading = function _M3eSkeletonElement_unregisterLoading() {
+  if (M3eSkeletonElement_1.__pulseLoading.delete(this) || M3eSkeletonElement_1.__waveLoading.delete(this)) {
+    M3eSkeletonElement_1.__updateAnimations();
+  }
+};
+/** @private */
+M3eSkeletonElement.__pulseLoading = new Set();
+/** @private */
+M3eSkeletonElement.__waveLoading = new Set();
 (() => {
-  if (window !== undefined) {
+  if (typeof window !== "undefined") {
     registerStyleSheet(i$4`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);
-    const reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
-    let waveAnimation = null;
-    let pulseAnimation = null;
-    function startAnimations() {
-      waveAnimation = document.documentElement.animate([{
-        ["--_m3e-skeleton-wave-pct"]: 0
-      }, {
-        ["--_m3e-skeleton-wave-pct"]: 1
-      }], {
-        duration: 2100,
-        iterations: Infinity,
-        easing: "linear"
-      });
-      pulseAnimation = document.documentElement.animate([{
-        ["--_m3e-skeleton-pulse-norm"]: 0
-      }, {
-        ["--_m3e-skeleton-pulse-norm"]: 1
-      }, {
-        ["--_m3e-skeleton-pulse-norm"]: 0
-      }], {
-        duration: 1200,
-        iterations: Infinity,
-        easing: "ease-in-out"
-      });
-    }
-    function applyMotionState() {
-      if (reducedMediaQuery.matches || forcedColorsMediaQuery.matches) {
-        waveAnimation?.pause();
-        pulseAnimation?.pause();
-      } else {
-        waveAnimation?.play();
-        pulseAnimation?.play();
-      }
-    }
-    startAnimations();
-    applyMotionState();
-    reducedMediaQuery.addEventListener("change", applyMotionState);
-    forcedColorsMediaQuery.addEventListener("change", applyMotionState);
+    M3eSkeletonElement_1.__waveAnimation = document.documentElement.animate([{
+      ["--_m3e-skeleton-wave-pct"]: 0
+    }, {
+      ["--_m3e-skeleton-wave-pct"]: 1
+    }], {
+      duration: 2100,
+      iterations: Infinity,
+      easing: "linear"
+    });
+    M3eSkeletonElement_1.__pulseAnimation = document.documentElement.animate([{
+      ["--_m3e-skeleton-pulse-norm"]: 0
+    }, {
+      ["--_m3e-skeleton-pulse-norm"]: 1
+    }, {
+      ["--_m3e-skeleton-pulse-norm"]: 0
+    }], {
+      duration: 1200,
+      iterations: Infinity,
+      easing: "ease-in-out"
+    });
+    M3eSkeletonElement_1.__waveAnimation.pause();
+    M3eSkeletonElement_1.__pulseAnimation.pause();
+    M3eSkeletonElement_1.__reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    M3eSkeletonElement_1.__forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
+    M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
+    M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
   }
 })();
 /** The styles of the element. */
-M3eSkeletonElement.styles = i$4`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
+M3eSkeletonElement.styles = i$4`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) { contain: layout style paint; } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
 __decorate([n({
   reflect: true
 })], M3eSkeletonElement.prototype, "shape", void 0);
@@ -29513,7 +29703,7 @@ __decorate([n({
   type: Boolean,
   reflect: true
 })], M3eSkeletonElement.prototype, "loaded", void 0);
-M3eSkeletonElement = __decorate([customElement("m3e-skeleton")], M3eSkeletonElement);
+M3eSkeletonElement = M3eSkeletonElement_1 = __decorate([customElement("m3e-skeleton")], M3eSkeletonElement);
 
 var _M3eSlideGroupElement_instances, _M3eSlideGroupElement_directionalitySubscription, _M3eSlideGroupElement_resizeController, _M3eSlideGroupElement_pageStart, _M3eSlideGroupElement_pageEnd;
 /**
@@ -29697,7 +29887,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
   }
 };
 /** The styles of the element. */
-M3eSlideGroupElement.styles = i$4`: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; }`;
+M3eSlideGroupElement.styles = i$4`: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 { contain: layout style; 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([e$2(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([r()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([r()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
@@ -29820,7 +30010,7 @@ _M3eSliderThumbElement_labelText_get = function _M3eSliderThumbElement_labelText
   return this.closest("m3e-slider")?.displayWith?.(this.value) ?? this.value?.toString() ?? "";
 };
 /** The styles of the element. */
-M3eSliderThumbElement.styles = i$4`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full}); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eSliderThumbElement.styles = i$4`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full}); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
           transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
           visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${r$4(`width ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
 __decorate([e$2(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
@@ -30300,7 +30490,7 @@ _M3eSliderElement_commitThumb = function _M3eSliderElement_commitThumb(thumb) {
 };
 /** The styles of the element. */
 M3eSliderElement.styles = i$4`:host { display: inline-block; vertical-align: middle; min-inline-size: var(--m3e-slider-min-width, 12.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([disabled])) { cursor: pointer; } :host([size="extra-small"]), :host([size="small"]) { height: var(--m3e-slider-small-height, 2.75rem); } :host(:not(:dir(rtl))[size="extra-small"]) .base, :host(:not(:dir(rtl))[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken.shape.corner.smallStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken.shape.corner.smallEnd} ); } :host(:dir(rtl)[size="extra-small"]) .base, :host(:dir(rtl)[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${DesignToken.shape.corner.smallEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${DesignToken.shape.corner.smallStart} ); } :host([size="extra-small"]) .track { height: calc(var(--m3e-slider-extra-small-track-height, 1rem)); } :host([size="small"]) .track { height: calc(var(--m3e-slider-small-track-height, 1.5rem)); } :host([size="medium"]) { height: var(--m3e-slider-medium-height, 3.25rem); } :host(:not(:dir(rtl))[size="medium"]) .base { --_slider-active-track-shape: var( --m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken.shape.corner.mediumStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken.shape.corner.mediumEnd} ); } :host(:dir(rtl)[size="medium"]) .base { --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${DesignToken.shape.corner.mediumEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${DesignToken.shape.corner.mediumStart} ); } :host([size="medium"]) .track { height: var(--m3e-slider-medium-track-height, 2.5rem); } :host([size="large"]) { height: var(--m3e-slider-large-height, 4.25rem); } :host(:not(:dir(rtl))[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken.shape.corner.largeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken.shape.corner.largeEnd} ); } :host(:dir(rtl)[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${DesignToken.shape.corner.largeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${DesignToken.shape.corner.largeStart} ); } :host([size="large"]) .track { height: var(--m3e-slider-large-track-height, 3.5rem); } :host([size="extra-large"]) { height: var(--m3e-slider-extra-large-height, 6.75rem); } :host(:not(:dir(rtl))[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken.shape.corner.extraLargeStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken.shape.corner.extraLargeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken.shape.corner.extraLargeEnd} ); } :host(:dir(rtl)[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${DesignToken.shape.corner.extraLargeEnd} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${DesignToken.shape.corner.extraLargeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${DesignToken.shape.corner.extraLargeStart} ); } :host([size="extra-large"]) .track { height: var(--m3e-slider-extra-large-track-height, 6rem); } :host(:is(:state(--animating), :--animating)) .track-active, :host(:is(:state(--animating), :--animating)) .track-inactive.start, :host(:is(:state(--animating), :--animating)) .track-inactive.end { transition: ${r$4(`margin-inline-start ${DesignToken.motion.spring.fastEffects},
-        width ${DesignToken.motion.spring.fastEffects}`)}; } .base { display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; touch-action: none; } .track { position: relative; flex: 1 1 auto; touch-action: none; } .track-inactive, .track-active { position: absolute; height: 100%; touch-action: none; } .track-active { margin-inline-start: var(--_slider-active-track-offset, 0px); width: var(--_slider-active-track-size, 0px); border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape)); } .track-inactive.start { width: var(--_slider-inactive-track-before-size, 0px); border-radius: var(--_slider-inactive-track-start-shape); } .track-inactive.end { margin-inline-start: var(--_slider-inactive-track-after-offset, 0px); width: var(--_slider-inactive-track-after-size, 0px); border-radius: var(--_slider-inactive-track-end-shape); } .ticks { position: absolute; width: 100%; height: var(--m3e-slider-tick-size, 0.25rem); overflow: visible; touch-action: none; } .tick { position: absolute; top: 0; touch-action: none; inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2)); width: var(--m3e-slider-tick-size, 0.25rem); height: var(--m3e-slider-tick-size, 0.25rem); border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full}); } :host(:not([disabled])) .track-inactive { background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer}); } :host([disabled]) .track-inactive { background-color: color-mix( in srgb, var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface}) var(--m3e-slider-disabled-inactive-track-opacity, 12%), transparent ); } :host(:not([disabled])) .track-active { background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary}); } :host([disabled]) .track-active { background-color: color-mix( in srgb, var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface}) var(--m3e-slider-disabled-active-track-opacity, 38%), transparent ); } :host(:not([disabled])) .tick.active { background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary}); } :host([disabled]) .tick.active { background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([disabled])) .tick.inactive { background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer}); } :host([disabled]) .tick.inactive { background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface}); } :host(:not([discrete])) .tick.active { display: none; } :host(:hover[labelled]) .base, :host(:focus-within[labelled]) .base { --_slider-label-visibility: visible; --_slider-label-opacity: 1; --_slider-label-transform: scale(1); } @media (forced-colors: active) { :host(:not([disabled])) .track-inactive { background-color: unset; } :host(:not([disabled])) .base.range .track-inactive.start, :host(:not([disabled])) .track-inactive.end { border: 1px solid CanvasText; box-sizing: border-box; } :host(:not([disabled])) .tick.inactive { background-color: CanvasText; } :host(:not([disabled])) .tick.active { background-color: Canvas; } :host(:not([disabled])) .track-active { background-color: CanvasText; } :host([disabled]) .base.range .track-inactive.start, :host([disabled]) .track-inactive.end { border: 1px solid GrayText; box-sizing: border-box; } :host([disabled]) .track-active { background-color: GrayText; } :host([disabled]) .tick.inactive { background-color: GrayText; } :host([disabled]) .tick.active { background-color: Canvas; } }`;
+        width ${DesignToken.motion.spring.fastEffects}`)}; } .base { contain: layout style; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; touch-action: none; } .track { contain: layout style paint; position: relative; flex: 1 1 auto; touch-action: none; } .track-inactive, .track-active { contain: layout style paint; position: absolute; height: 100%; touch-action: none; } .track-active { margin-inline-start: var(--_slider-active-track-offset, 0px); width: var(--_slider-active-track-size, 0px); border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape)); } .track-inactive.start { width: var(--_slider-inactive-track-before-size, 0px); border-radius: var(--_slider-inactive-track-start-shape); } .track-inactive.end { margin-inline-start: var(--_slider-inactive-track-after-offset, 0px); width: var(--_slider-inactive-track-after-size, 0px); border-radius: var(--_slider-inactive-track-end-shape); } .ticks { position: absolute; width: 100%; height: var(--m3e-slider-tick-size, 0.25rem); overflow: visible; touch-action: none; } .tick { position: absolute; top: 0; touch-action: none; inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2)); width: var(--m3e-slider-tick-size, 0.25rem); height: var(--m3e-slider-tick-size, 0.25rem); border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full}); } :host(:not([disabled])) .track-inactive { background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer}); } :host([disabled]) .track-inactive { background-color: color-mix( in srgb, var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface}) var(--m3e-slider-disabled-inactive-track-opacity, 12%), transparent ); } :host(:not([disabled])) .track-active { background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary}); } :host([disabled]) .track-active { background-color: color-mix( in srgb, var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface}) var(--m3e-slider-disabled-active-track-opacity, 38%), transparent ); } :host(:not([disabled])) .tick.active { background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary}); } :host([disabled]) .tick.active { background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([disabled])) .tick.inactive { background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer}); } :host([disabled]) .tick.inactive { background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface}); } :host(:not([discrete])) .tick.active { display: none; } :host(:hover[labelled]) .base, :host(:focus-within[labelled]) .base { --_slider-label-visibility: visible; --_slider-label-opacity: 1; --_slider-label-transform: scale(1); } @media (forced-colors: active) { :host(:not([disabled])) .track-inactive { background-color: unset; } :host(:not([disabled])) .base.range .track-inactive.start, :host(:not([disabled])) .track-inactive.end { border: 1px solid CanvasText; box-sizing: border-box; } :host(:not([disabled])) .tick.inactive { background-color: CanvasText; } :host(:not([disabled])) .tick.active { background-color: Canvas; } :host(:not([disabled])) .track-active { background-color: CanvasText; } :host([disabled]) .base.range .track-inactive.start, :host([disabled]) .track-inactive.end { border: 1px solid GrayText; box-sizing: border-box; } :host([disabled]) .track-active { background-color: GrayText; } :host([disabled]) .tick.inactive { background-color: GrayText; } :host([disabled]) .tick.active { background-color: Canvas; } }`;
 __decorate([e$2(".base")], M3eSliderElement.prototype, "_base", void 0);
 __decorate([r()], M3eSliderElement.prototype, "_ticks", void 0);
 __decorate([n({
@@ -30452,7 +30642,7 @@ _M3eSnackbarElement_handleBeforeToggle = function _M3eSnackbarElement_handleBefo
   registerStyleSheet(i$4`m3e-snackbar { margin-inline: auto; }`);
 })();
 /** The styles of the element. */
-M3eSnackbarElement.styles = i$4`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eSnackbarElement.styles = i$4`:host { contain: layout style paint; position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${r$4(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scaleY(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scaleY(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${DesignToken.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`;
@@ -31370,7 +31560,7 @@ _M3eSplitPaneElement_cycleDetent = function _M3eSplitPaneElement_cycleDetent() {
   registerStyleSheet(i$4`@property --_split-pane-value { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }</length-percentage>`);
 })();
 /** The styles of the element. */
-M3eSplitPaneElement.styles = i$4`:host { display: block; } .base { display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:is(:state(--vertical), :--vertical))) .base { flex-direction: row; } :host(:is(:state(--vertical), :--vertical)) .base { flex-direction: column; } :host(:is(:state(--with-start), :--with-start):is(:state(--with-end), :--with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:is(:state(--with-end), :--with-end))) .start { flex: 1 1 auto; } :host(:is(:state(--with-end), :--with-end)) .end { flex: 1 1 auto; } :host(:not(:is(:state(--with-end), :--with-end))) .end { display: none; } :host(:not(:is(:state(--animating), :--animating))) .start[inert], :host(:not(:is(:state(--animating), :--animating))) .end[inert] { visibility: hidden; } .drag-handle { flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:is(:state(--with-start), :--with-start)), :not(:is(:state(--with-end), :--with-end)))) .drag-handle { display: none; } :host(:not(:is(:state(--pressed), :--pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:is(:state(--pressed), :--pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { position: relative; transition: ${r$4(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+M3eSplitPaneElement.styles = i$4`:host { display: block; } .base { contain: layout style; display: flex; width: 100%; height: 100%; overflow: hidden; } :host(:not(:is(:state(--vertical), :--vertical))) .base { flex-direction: row; } :host(:is(:state(--vertical), :--vertical)) .base { flex-direction: column; } :host(:is(:state(--with-start), :--with-start):is(:state(--with-end), :--with-end)) .start { flex: 0 1 calc(var(--_split-pane-value) - calc(var(--m3e-split-pane-drag-handle-container-width, 1.5rem) / 2)); } :host(:not(:is(:state(--with-end), :--with-end))) .start { flex: 1 1 auto; } :host(:is(:state(--with-end), :--with-end)) .end { flex: 1 1 auto; } :host(:not(:is(:state(--with-end), :--with-end))) .end { display: none; } :host(:not(:is(:state(--animating), :--animating))) .start[inert], :host(:not(:is(:state(--animating), :--animating))) .end[inert] { visibility: hidden; } .drag-handle { contain: layout style; flex: none; display: flex; align-items: center; justify-content: center; outline: none; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --m3e-state-layer-hover-color: var(--m3e-split-pane-drag-handle-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var(--m3e-split-pane-drag-handle-hover-opacity, 8%); --m3e-state-layer-focus-color: var(--m3e-split-pane-drag-handle-focus-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var(--m3e-split-pane-drag-handle-focus-opacity, 10%); } :host(:is(:not(:is(:state(--with-start), :--with-start)), :not(:is(:state(--with-end), :--with-end)))) .drag-handle { display: none; } :host(:not(:is(:state(--pressed), :--pressed))) .drag-handle:not([aria-disabled]) { cursor: grab; } :host(:is(:state(--pressed), :--pressed)) .drag-handle:not([aria-disabled]) { cursor: grabbing; } .handle { contain: layout style; position: relative; transition: ${r$4(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         width ${DesignToken.motion.spring.fastEffects}, height ${DesignToken.motion.spring.fastEffects}`)}; } .touch { z-index: 1; position: absolute; height: 3rem; width: 3rem; margin: auto; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: var(--m3e-split-pane-drag-handle-color, ${DesignToken.color.outline}); border-radius: var(--m3e-split-pane-drag-handle-shape, ${DesignToken.shape.corner.full}); } :host(:is(:state(--pressed), :--pressed)) .handle { background-color: var(--m3e-split-pane-drag-handle-pressed-color, ${DesignToken.color.onSurface}); border-radius: var(--m3e-split-pane-drag-handle-pressed-shape, ${DesignToken.shape.corner.medium}); } :host(:not(:is(:state(--vertical), :--vertical))) .drag-handle { flex-direction: column; width: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:not(:is(:state(--vertical), :--vertical)):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-width, 0.25rem); height: var(--m3e-split-pane-drag-handle-height, 3rem); } :host(:not(:is(:state(--vertical), :--vertical)):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); height: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); } :host(:is(:state(--vertical), :--vertical)) .drag-handle { height: var(--m3e-split-pane-drag-handle-container-width, 1.5rem); } :host(:is(:state(--vertical), :--vertical):not(:is(:state(--pressed), :--pressed))) .handle { width: var(--m3e-split-pane-drag-handle-height, 3rem); height: var(--m3e-split-pane-drag-handle-width, 0.25rem); } :host(:is(:state(--vertical), :--vertical):is(:state(--pressed), :--pressed)) .handle { width: var(--m3e-split-pane-drag-handle-pressed-height, 3.25rem); height: var(--m3e-split-pane-drag-handle-pressed-width, 0.75rem); } @media (prefers-reduced-motion) { .handle { transition: none; } } @media (forced-colors: active) { :host(:is(:state(--pressed), :--pressed)) .handle, :host(:not(:is(:state(--pressed), :--pressed))) .handle { background-color: ButtonText; } }`;
 __decorate([r()], M3eSplitPaneElement.prototype, "_orientation", void 0);
 __decorate([e$2(".base")], M3eSplitPaneElement.prototype, "_base", void 0);
@@ -31478,7 +31668,7 @@ let M3eStepPanelElement = class M3eStepPanelElement extends Role(i$1, "tabpanel"
   }
 };
 /** The styles of the element. */
-M3eStepPanelElement.styles = i$4`:host { display: block; } .content { display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`;
+M3eStepPanelElement.styles = i$4`:host { display: block; } .content { contain: layout style paint; display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`;
 __decorate([r()], M3eStepPanelElement.prototype, "active", void 0);
 M3eStepPanelElement = __decorate([customElement("m3e-step-panel")], M3eStepPanelElement);
 
@@ -31712,7 +31902,7 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eStepElement.styles = i$4`:host { display: block; outline: none; min-width: 0px; position: relative; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { min-width: inherit; position: relative; border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
+M3eStepElement.styles = i$4`:host { display: flex; flex-direction: column; outline: none; min-width: 0px; position: relative; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; flex: 1 1 auto; min-width: inherit; position: relative; border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
 /** @private */
 M3eStepElement.__nextId = 0;
 __decorate([e$2(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
@@ -32100,7 +32290,7 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
   registerStyleSheet(i$4`m3e-stepper:not(:is(:state(--vertical), :--vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper:not(:is(:state(--vertical), :--vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:is(:state(--vertical), :--vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:is(:state(--vertical), :--vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper:is(:state(--vertical), :--vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:is(:state(--vertical), :--vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); }`);
 })();
 /** The styles of the element. */
-M3eStepperElement.styles = i$4`:host { display: flex; flex-direction: column; position: relative; } :host(:not(:is(:state(--vertical), :--vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:is(:state(--vertical), :--vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:is(:state(--vertical), :--vertical)) .header { display: contents; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:is(:state(--vertical), :--vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:is(:state(--no-animate), :--no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`;
+M3eStepperElement.styles = i$4`:host { display: flex; flex-direction: column; position: relative; } .header { contain: layout style; } :host(:not(:is(:state(--vertical), :--vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:is(:state(--vertical), :--vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:is(:state(--vertical), :--vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:is(:state(--vertical), :--vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:is(:state(--vertical), :--vertical)) .header { display: contents; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:is(:state(--vertical), :--vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:is(:state(--vertical), :--vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:is(:state(--no-animate), :--no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`;
 __decorate([r()], M3eStepperElement.prototype, "_orientation", void 0);
 __decorate([r()], M3eStepperElement.prototype, "_selectedIndex", void 0);
 __decorate([n({
@@ -32264,13 +32454,13 @@ const SwitchStateLayerStyle = i$4`.state-layer { width: ${SwitchToken.stateLayer
  * Baseline styles for `M3eSwitchElement`.
  * @internal
  */
-const SwitchStyle = i$4`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${SwitchToken.trackShape}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { display: flex; align-items: center; justify-content: center; }`;
+const SwitchStyle = i$4`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${SwitchToken.trackShape}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { contain: layout style paint; display: flex; align-items: center; justify-content: center; }`;
 
 /**
  * Track styles for `M3eSwitchElement`.
  * @internal
  */
-const SwitchTrackStyle = i$4`.track { display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${SwitchToken.trackShape}; width: ${SwitchToken.trackWidth}; height: ${SwitchToken.trackHeight}; transition: ${r$4(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${SwitchToken.trackOutlineWidth}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${SwitchToken.trackOutlineColor}; background-color: ${SwitchToken.unselectedTrackColor}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${SwitchToken.unselectedHoverTrackOutlineColor}; background-color: ${SwitchToken.unselectedHoverTrackColor}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${SwitchToken.unselectedFocusTrackOutlineColor}; background-color: ${SwitchToken.unselectedFocusTrackColor}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${SwitchToken.unselectedPressedTrackOutlineColor}; background-color: ${SwitchToken.unselectedPressedTrackColor}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity}, transparent ); background-color: color-mix( in srgb, ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${SwitchToken.selectedTrackColor}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${SwitchToken.selectedHoverTrackColor}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${SwitchToken.selectedFocusTrackColor}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${SwitchToken.selectedPressedTrackColor}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;
+const SwitchTrackStyle = i$4`.track { contain: layout style; display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${SwitchToken.trackShape}; width: ${SwitchToken.trackWidth}; height: ${SwitchToken.trackHeight}; transition: ${r$4(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${SwitchToken.trackOutlineWidth}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${SwitchToken.trackOutlineColor}; background-color: ${SwitchToken.unselectedTrackColor}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${SwitchToken.unselectedHoverTrackOutlineColor}; background-color: ${SwitchToken.unselectedHoverTrackColor}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${SwitchToken.unselectedFocusTrackOutlineColor}; background-color: ${SwitchToken.unselectedFocusTrackColor}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${SwitchToken.unselectedPressedTrackOutlineColor}; background-color: ${SwitchToken.unselectedPressedTrackColor}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity}, transparent ); background-color: color-mix( in srgb, ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${SwitchToken.selectedTrackColor}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${SwitchToken.selectedHoverTrackColor}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${SwitchToken.selectedFocusTrackColor}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${SwitchToken.selectedPressedTrackColor}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;
 
 var _M3eSwitchElement_instances, _M3eSwitchElement_clickHandler, _M3eSwitchElement_hoverController, _M3eSwitchElement_pressedController, _M3eSwitchElement_renderIcon, _M3eSwitchElement_handleClick;
 /**
@@ -32618,7 +32808,7 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eTabElement.styles = i$4`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
+M3eTabElement.styles = i$4`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
 /** @private */
 M3eTabElement.__nextId = 0;
 __decorate([e$2(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
@@ -32667,7 +32857,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role(i$1, "tabpanel")
   }
 };
 /** The styles of the element. */
-M3eTabPanelElement.styles = i$4`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
+M3eTabPanelElement.styles = i$4`:host { contain: layout style paint; 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_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$1;
@@ -33050,7 +33240,7 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
   }
 };
 /** The styles of the element. */
-M3eTabsElement.styles = i$4`: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: ${r$4(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+M3eTabsElement.styles = i$4`:host { display: flex; flex-direction: column; position: relative; } .tablist { contain: layout style; 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 { contain: layout style paint; 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: ${r$4(`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; } .tabs.sliding ::slotted([slot="panel"]) { transform: translateX(var(--_tabs-slide-offset-x)); visibility: var(--_tabs-slide-visibility, "hidden"); } .tabs.snap ::slotted([slot="panel"]) { transition: ${r$4(`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; } }`;
@@ -40635,7 +40825,7 @@ let M3eTocItemElement = class M3eTocItemElement extends Selected(Disabled(Attach
   }
 };
 /** The styles of the element. */
-M3eTocItemElement.styles = i$4`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${r$4(`color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eTocItemElement.styles = i$4`:host { contain: layout style paint; display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${r$4(`color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 __decorate([e$2(".base")], M3eTocItemElement.prototype, "_base", void 0);
 __decorate([e$2(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
 __decorate([r()], M3eTocItemElement.prototype, "node", void 0);
@@ -40936,7 +41126,7 @@ _M3eTocElement_generateToc = function _M3eTocElement_generateToc() {
   this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];
 };
 /** The styles of the element. */
-M3eTocElement.styles = i$4`:host { display: inline-block; width: calc(var(--m3e-toc-width, 9.75rem)); } .base { border-radius: var(--m3e-toc-container-shape, ${DesignToken.shape.corner.none}); box-sizing: border-box; overflow: hidden; height: 100%; width: 100%; } .scroll-container { height: inherit; width: inherit; box-sizing: inherit; background-color: var(--m3e-toc-container-color, transparent); border-radius: inherit; padding-inline: var(--m3e-toc-container-padding-inline, 0px); padding-block: var(--m3e-toc-container-padding-block, 0px); position: relative; overflow-y: auto; overflow-x: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ul { list-style: none; padding-inline-start: unset; margin-block-start: unset; margin-block-end: unset; } ul, li { display: flex; flex-direction: column; align-items: stretch; } m3e-toc-item { flex: none; } .active-indicator { position: absolute; pointer-events: none; box-sizing: border-box; left: var(--m3e-toc-container-padding-inline, 0px); right: var(--m3e-toc-container-padding-inline, 0px); border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline}); transition: ${r$4(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
+M3eTocElement.styles = i$4`:host { display: inline-block; width: calc(var(--m3e-toc-width, 9.75rem)); } .base { contain: layout style paint; border-radius: var(--m3e-toc-container-shape, ${DesignToken.shape.corner.none}); box-sizing: border-box; overflow: hidden; height: 100%; width: 100%; } .scroll-container { height: inherit; width: inherit; box-sizing: inherit; background-color: var(--m3e-toc-container-color, transparent); border-radius: inherit; padding-inline: var(--m3e-toc-container-padding-inline, 0px); padding-block: var(--m3e-toc-container-padding-block, 0px); position: relative; overflow-y: auto; overflow-x: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ul { list-style: none; padding-inline-start: unset; margin-block-start: unset; margin-block-end: unset; } ul, li { display: flex; flex-direction: column; align-items: stretch; } m3e-toc-item { flex: none; } .active-indicator { contain: layout style paint; position: absolute; pointer-events: none; box-sizing: border-box; left: var(--m3e-toc-container-padding-inline, 0px); right: var(--m3e-toc-container-padding-inline, 0px); border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline}); transition: ${r$4(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
           ${DesignToken.motion.easing.standard},
         height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
           ${DesignToken.motion.easing.standard},
@@ -41386,7 +41576,7 @@ _M3eTreeItemElement_handleCollapsibleEvent = function _M3eTreeItemElement_handle
   }));
 };
 /** The styles of the element. */
-M3eTreeItemElement.styles = i$4`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; height: calc(var(--m3e-tree-item-height, 3rem) + ${DesignToken.density.calc(-3)}); padding-inline: var(--m3e-tree-item-padding, 1rem); font-size: var(--m3e-tree-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-tree-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-tree-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-tree-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${r$4(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+M3eTreeItemElement.styles = i$4`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; display: flex; align-items: center; position: relative; height: calc(var(--m3e-tree-item-height, 3rem) + ${DesignToken.density.calc(-3)}); padding-inline: var(--m3e-tree-item-padding, 1rem); font-size: var(--m3e-tree-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-tree-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-tree-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-tree-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${r$4(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle { visibility: hidden; } :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${r$4(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
         ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
 __decorate([e$2(".state-layer")], M3eTreeItemElement.prototype, "stateLayer", void 0);
@@ -41796,7 +41986,7 @@ _M3eTreeElement_cascadeAncestorSelected = function _M3eTreeElement_cascadeAncest
       }`)}`);
 })();
 /** The styles of the element. */
-M3eTreeElement.styles = i$4`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; }`;
+M3eTreeElement.styles = i$4`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { contain: layout style; width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; }`;
 /** @private */
 M3eTreeElement.__nextId = 0;
 __decorate([n({