@m3e/web 2.5.12 → 2.5.14

package/dist/core.js

@@ -79,6 +79,10 @@ class MonitorControllerBase {
   get targets() {
     return __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").values();
   }
+  /** Whether one or more targets are being monitored. */
+  get hasTargets() {
+    return __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").size > 0;
+  }
   /** @inheritdoc */
   hostConnected() {
     // Target defaults to host unless explicitly null.
@@ -88,8 +92,7 @@ class MonitorControllerBase {
   }
   /** @inheritdoc */
   hostDisconnected() {
-    __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").forEach(x => this.unobserve(x));
-    __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").clear();
+    this.unobserveAll();
   }
   /**
    * Starts observing the specified element.
@@ -116,9 +119,55 @@ class MonitorControllerBase {
     if (!__classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").delete(target)) return;
     this._unobserve(target);
   }
+  /** Stops observing all targets. */
+  unobserveAll() {
+    __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").forEach(x => this.unobserve(x));
+    __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").clear();
+  }
 }
 _MonitorControllerBase_host = new WeakMap(), _MonitorControllerBase_target = new WeakMap(), _MonitorControllerBase_targets = new WeakMap();
 
+var _ClickOutsideController_instances, _ClickOutsideController_callback, _ClickOutsideController_documentClickHandler, _ClickOutsideController_listening, _ClickOutsideController_handleDocumentClick;
+/** A `ReactiveController` used to monitor whether the user clicks outside all observed elements. */
+class ClickOutsideController extends MonitorControllerBase {
+  /**
+   * Initializes a new instance of this class.
+   * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+   * @param {FocusControllerOptions} options Options used to configure this controller.
+   */
+  constructor(host, options) {
+    super(host, options);
+    _ClickOutsideController_instances.add(this);
+    /** @private */
+    _ClickOutsideController_callback.set(this, void 0);
+    /** @private */
+    _ClickOutsideController_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _ClickOutsideController_instances, "m", _ClickOutsideController_handleDocumentClick).call(this, e));
+    /** @private */
+    _ClickOutsideController_listening.set(this, false);
+    __classPrivateFieldSet(this, _ClickOutsideController_callback, options.callback, "f");
+  }
+  /** @inheritdoc */
+  _observe() {
+    if (!__classPrivateFieldGet(this, _ClickOutsideController_listening, "f")) {
+      document.addEventListener("click", __classPrivateFieldGet(this, _ClickOutsideController_documentClickHandler, "f"));
+      __classPrivateFieldSet(this, _ClickOutsideController_listening, true, "f");
+    }
+  }
+  /** @inheritdoc */
+  _unobserve() {
+    if (!this.hasTargets && __classPrivateFieldGet(this, _ClickOutsideController_listening, "f")) {
+      document.removeEventListener("click", __classPrivateFieldGet(this, _ClickOutsideController_documentClickHandler, "f"));
+      __classPrivateFieldSet(this, _ClickOutsideController_listening, false, "f");
+    }
+  }
+}
+_ClickOutsideController_callback = new WeakMap(), _ClickOutsideController_documentClickHandler = new WeakMap(), _ClickOutsideController_listening = new WeakMap(), _ClickOutsideController_instances = new WeakSet(), _ClickOutsideController_handleDocumentClick = function _ClickOutsideController_handleDocumentClick(e) {
+  const composedPath = e.composedPath();
+  if (!composedPath.some(x => x instanceof HTMLElement && this.isObserving(x))) {
+    __classPrivateFieldGet(this, _ClickOutsideController_callback, "f").call(this, composedPath);
+  }
+};
+
 /**
  * Computes a CSS size expression (var(), %, rem, calc(), etc.) relative to the given host element.
  * @param {HTMLElement} host - The element whose coordinate system and CSS variables should be used to resolve the expression.
@@ -753,7 +802,7 @@ async function waitForUpgrade(el) {
   await Promise.resolve();
 }
 
-var _FocusController_instances, _FocusController_touch, _FocusController_callback, _FocusController_keyDownHandler, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_touchStartHandler, _FocusController_touchEndHandler, _FocusController_hadKeydown, _FocusController_windowKeyDownHandler, _FocusController_windowPointerDownHandler, _FocusController_handleKeyDown, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
+var _FocusController_instances, _a, _FocusController_touch, _FocusController_callback, _FocusController_filter, _FocusController_keyDownHandler, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_touchStartHandler, _FocusController_touchEndHandler, _FocusController_hadKeydown, _FocusController_handleKeyDown, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
 /** A `ReactiveController` used to monitor the focused state of one or more elements. */
 class FocusController extends MonitorControllerBase {
   /**
@@ -769,6 +818,8 @@ class FocusController extends MonitorControllerBase {
     /** @private */
     _FocusController_callback.set(this, void 0);
     /** @private */
+    _FocusController_filter.set(this, void 0);
+    /** @private */
     _FocusController_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleKeyDown).call(this, e));
     /** @private */
     _FocusController_focusInHandler.set(this, e => __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleFocusIn).call(this, e));
@@ -778,51 +829,21 @@ class FocusController extends MonitorControllerBase {
     _FocusController_touchStartHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_touch, true, "f"));
     /** @private */
     _FocusController_touchEndHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_touch, false, "f"));
-    /** @private */
-    _FocusController_hadKeydown.set(this, false);
-    /** @private */
-    _FocusController_windowKeyDownHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_hadKeydown, true, "f"));
-    /** @private */
-    _FocusController_windowPointerDownHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_hadKeydown, false, "f"));
     __classPrivateFieldSet(this, _FocusController_callback, options.callback, "f");
+    __classPrivateFieldSet(this, _FocusController_filter, options.filter, "f");
   }
   /** @inheritdoc */
-  hostConnected() {
-    super.hostConnected();
-    window?.addEventListener("keydown", __classPrivateFieldGet(this, _FocusController_windowKeyDownHandler, "f"), {
-      capture: true,
-      passive: true
-    });
-    window?.addEventListener("pointerdown", __classPrivateFieldGet(this, _FocusController_windowPointerDownHandler, "f"), {
-      capture: true
-    });
-  }
-  /** @inheritdoc */
-  hostDisconnected() {
-    super.hostDisconnected();
-    window?.removeEventListener("keydown", __classPrivateFieldGet(this, _FocusController_windowKeyDownHandler, "f"), {
-      capture: true
-    });
-    window?.removeEventListener("pointerdown", __classPrivateFieldGet(this, _FocusController_windowPointerDownHandler, "f"), {
-      capture: true
-    });
-  }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
   _observe(target) {
     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"));
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     target.removeEventListener("keydown", __classPrivateFieldGet(this, _FocusController_keyDownHandler, "f"));
     target.removeEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
@@ -832,19 +853,37 @@ class FocusController extends MonitorControllerBase {
     target.removeEventListener("touchcancel", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
   }
 }
-_FocusController_touch = new WeakMap(), _FocusController_callback = new WeakMap(), _FocusController_keyDownHandler = new WeakMap(), _FocusController_focusInHandler = new WeakMap(), _FocusController_focusOutHandler = new WeakMap(), _FocusController_touchStartHandler = new WeakMap(), _FocusController_touchEndHandler = new WeakMap(), _FocusController_hadKeydown = new WeakMap(), _FocusController_windowKeyDownHandler = new WeakMap(), _FocusController_windowPointerDownHandler = new WeakMap(), _FocusController_instances = new WeakSet(), _FocusController_handleKeyDown = function _FocusController_handleKeyDown(e) {
+_a = FocusController, _FocusController_touch = new WeakMap(), _FocusController_callback = new WeakMap(), _FocusController_filter = new WeakMap(), _FocusController_keyDownHandler = new WeakMap(), _FocusController_focusInHandler = new WeakMap(), _FocusController_focusOutHandler = new WeakMap(), _FocusController_touchStartHandler = new WeakMap(), _FocusController_touchEndHandler = new WeakMap(), _FocusController_instances = new WeakSet(), _FocusController_handleKeyDown = function _FocusController_handleKeyDown(e) {
+  if (__classPrivateFieldGet(this, _FocusController_filter, "f")?.call(this, e)) return;
   const target = e.currentTarget;
   if (target.matches(":focus-within")) {
     __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleFocusIn).call(this, e);
   }
 }, _FocusController_handleFocusIn = function _FocusController_handleFocusIn(e) {
+  if (__classPrivateFieldGet(this, _FocusController_filter, "f")?.call(this, e)) return;
   if (__classPrivateFieldGet(this, _FocusController_touch, "f")) return;
   const target = e.currentTarget;
-  __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, true, target.matches(":focus-visible") || __classPrivateFieldGet(this, _FocusController_hadKeydown, "f") || forcedColorsActive(), target);
+  __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, true, target.matches(":focus-visible") || __classPrivateFieldGet(_a, _a, "f", _FocusController_hadKeydown) || forcedColorsActive(), target);
 }, _FocusController_handleFocusOut = function _FocusController_handleFocusOut(e) {
+  if (__classPrivateFieldGet(this, _FocusController_filter, "f")?.call(this, e)) return;
   if (__classPrivateFieldGet(this, _FocusController_touch, "f")) return;
   __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, false, false, e.currentTarget);
 };
+(() => {
+  if (typeof window !== "undefined") {
+    window.addEventListener("keydown", () => __classPrivateFieldSet(_a, _a, true, "f", _FocusController_hadKeydown), {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("pointerdown", () => __classPrivateFieldSet(_a, _a, false, "f", _FocusController_hadKeydown), {
+      capture: true
+    });
+  }
+})();
+/** @private */
+_FocusController_hadKeydown = {
+  value: false
+};
 
 var _HoverController_instances, _HoverController_callback, _HoverController_startDelays, _HoverController_endDelays, _HoverController_pointerInHandler, _HoverController_pointerLeaveHandler, _HoverController_clearDelays, _HoverController_clearStartDelay, _HoverController_clearEndDelay, _HoverController_handlePointerEnter, _HoverController_handlePointerLeave;
 /** A `ReactiveController` used to monitor the hover state of one or more elements. */
@@ -877,23 +916,18 @@ class HoverController extends MonitorControllerBase {
       __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearDelays).call(this, target);
     }
   }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
+  /** @inheritdoc */
   _observe(target) {
     target.addEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.addEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
     target.addEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     target.removeEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.removeEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
     target.removeEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearDelays).call(this, target);
   }
 }
 _HoverController_callback = new WeakMap(), _HoverController_startDelays = new WeakMap(), _HoverController_endDelays = new WeakMap(), _HoverController_pointerInHandler = new WeakMap(), _HoverController_pointerLeaveHandler = new WeakMap(), _HoverController_instances = new WeakSet(), _HoverController_clearDelays = function _HoverController_clearDelays(target) {
@@ -1019,18 +1053,12 @@ class IntersectionController extends MonitorControllerBase {
     }
     __classPrivateFieldSet(this, _IntersectionController_unobservedUpdate, false, "f");
   }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
+  /** @inheritdoc */
   _observe(target) {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.observe(target);
     __classPrivateFieldSet(this, _IntersectionController_unobservedUpdate, true, "f");
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.unobserve(target);
   }
@@ -1063,10 +1091,7 @@ class LongPressController extends MonitorControllerBase {
     __classPrivateFieldSet(this, _LongPressController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _LongPressController_threshold, options.threshold ?? 500, "f");
   }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
+  /** @inheritdoc */
   _observe(target) {
     target.addEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"), {
       passive: true
@@ -1074,10 +1099,7 @@ class LongPressController extends MonitorControllerBase {
     target.addEventListener("touchend", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
     target.addEventListener("touchcancel", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     target.removeEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"));
     target.removeEventListener("touchend", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
@@ -1170,7 +1192,7 @@ class MutationController extends MonitorControllerBase {
 }
 _MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
 
-var _PressedController_instances, _PressedController_capture, _PressedController_callback, _PressedController_isPressedKey, _PressedController_pressedTargets, _PressedController_minPressedDuration, _PressedController_pointerDownHandler, _PressedController_pointerUpHandler, _PressedController_touchEndHandler, _PressedController_keyDownHandler, _PressedController_keyUpHandler, _PressedController_handlePointerDown, _PressedController_handlePointerUp, _PressedController_handleTouchEnd, _PressedController_handleKeyDown, _PressedController_handleKeyUp, _PressedController_clearPressedTargets;
+var _PressedController_instances, _PressedController_capture, _PressedController_callback, _PressedController_filter, _PressedController_isPressedKey, _PressedController_pressedTargets, _PressedController_minPressedDuration, _PressedController_pointerDownHandler, _PressedController_pointerUpHandler, _PressedController_touchEndHandler, _PressedController_keyDownHandler, _PressedController_keyUpHandler, _PressedController_handlePointerDown, _PressedController_handlePointerUp, _PressedController_handleTouchEnd, _PressedController_handleKeyDown, _PressedController_handleKeyUp, _PressedController_clearPressedTargets;
 /** A `ReactiveController` used to monitor the pressed state of one or more elements. */
 class PressedController extends MonitorControllerBase {
   /**
@@ -1186,6 +1208,8 @@ class PressedController extends MonitorControllerBase {
     /** @private */
     _PressedController_callback.set(this, void 0);
     /** @private */
+    _PressedController_filter.set(this, void 0);
+    /** @private */
     _PressedController_isPressedKey.set(this, void 0);
     /** @private */
     _PressedController_pressedTargets.set(this, new Map());
@@ -1203,6 +1227,7 @@ class PressedController extends MonitorControllerBase {
     _PressedController_keyUpHandler.set(this, e => __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_handleKeyUp).call(this, e));
     __classPrivateFieldSet(this, _PressedController_capture, options.capture, "f");
     __classPrivateFieldSet(this, _PressedController_callback, options.callback, "f");
+    __classPrivateFieldSet(this, _PressedController_filter, options.filter, "f");
     __classPrivateFieldSet(this, _PressedController_isPressedKey, options.isPressedKey, "f");
     __classPrivateFieldSet(this, _PressedController_minPressedDuration, options.minPressedDuration ?? 0, "f");
   }
@@ -1233,10 +1258,7 @@ class PressedController extends MonitorControllerBase {
     super.hostDisconnected();
     __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").clear();
   }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
+  /** @inheritdoc */
   _observe(target) {
     target.addEventListener("pointerdown", __classPrivateFieldGet(this, _PressedController_pointerDownHandler, "f"), {
       capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
@@ -1250,10 +1272,7 @@ class PressedController extends MonitorControllerBase {
       });
     }
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     target.removeEventListener("pointerdown", __classPrivateFieldGet(this, _PressedController_pointerDownHandler, "f"), {
       capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
@@ -1268,7 +1287,8 @@ class PressedController extends MonitorControllerBase {
     }
   }
 }
-_PressedController_capture = new WeakMap(), _PressedController_callback = new WeakMap(), _PressedController_isPressedKey = new WeakMap(), _PressedController_pressedTargets = new WeakMap(), _PressedController_minPressedDuration = new WeakMap(), _PressedController_pointerDownHandler = new WeakMap(), _PressedController_pointerUpHandler = new WeakMap(), _PressedController_touchEndHandler = new WeakMap(), _PressedController_keyDownHandler = new WeakMap(), _PressedController_keyUpHandler = new WeakMap(), _PressedController_instances = new WeakSet(), _PressedController_handlePointerDown = function _PressedController_handlePointerDown(e) {
+_PressedController_capture = new WeakMap(), _PressedController_callback = new WeakMap(), _PressedController_filter = new WeakMap(), _PressedController_isPressedKey = new WeakMap(), _PressedController_pressedTargets = new WeakMap(), _PressedController_minPressedDuration = new WeakMap(), _PressedController_pointerDownHandler = new WeakMap(), _PressedController_pointerUpHandler = new WeakMap(), _PressedController_touchEndHandler = new WeakMap(), _PressedController_keyDownHandler = new WeakMap(), _PressedController_keyUpHandler = new WeakMap(), _PressedController_instances = new WeakSet(), _PressedController_handlePointerDown = function _PressedController_handlePointerDown(e) {
+  if (__classPrivateFieldGet(this, _PressedController_filter, "f")?.call(this, e)) return;
   if (e.pointerType === "mouse" && e.button > 1) return;
   for (const target of e.composedPath()) {
     if (target instanceof HTMLElement && this.isObserving(target)) {
@@ -1288,6 +1308,7 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
 }, _PressedController_handleTouchEnd = function _PressedController_handleTouchEnd(e) {
   __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_clearPressedTargets).call(this, e.changedTouches[0]?.clientX ?? 0, e.changedTouches[0]?.clientY ?? 0);
 }, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
+  if (__classPrivateFieldGet(this, _PressedController_filter, "f")?.call(this, e)) return;
   if (e.target !== e.currentTarget) return;
   const target = e.currentTarget;
   if (__classPrivateFieldGet(this, _PressedController_isPressedKey, "f")?.call(this, e.key)) {
@@ -1382,18 +1403,12 @@ class ResizeController extends MonitorControllerBase {
     }
     __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, false, "f");
   }
-  /**
-   * Starts observing the specified element.
-   * @param {HTMLElement} target The element to start observing.
-   */
+  /** @inheritdoc */
   _observe(target) {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _ResizeController_config, "f"));
     __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, true, "f");
   }
-  /**
-   * Stops observing the specified element.
-   * @param {HTMLElement} target The element to stop observing.
-   */
+  /** @inheritdoc */
   _unobserve(target) {
     __classPrivateFieldGet(this, _ResizeController_observer, "f")?.unobserve(target);
   }
@@ -1805,6 +1820,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) {
@@ -4362,7 +4379,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
   }
 };
 /** The styles of the element. */
-M3eFocusRingElement.styles = css`: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 = css`: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([query(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
 __decorate([property({
   type: Boolean,
@@ -4424,7 +4441,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
   }
 };
 /** The styles of the element. */
-M3ePseudoCheckboxElement.styles = css`: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 = css`: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);
 
 /**
@@ -4462,7 +4479,7 @@ let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled
   }
 };
 /** The styles of the element. */
-M3ePseudoRadioElement.styles = css`: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 = css`: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);
 
 /**
@@ -4657,7 +4674,7 @@ _M3eRippleElement_handlePressedChange = function _M3eRippleElement_handlePressed
   }
 };
 /** The styles of the element. */
-M3eRippleElement.styles = css`: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 = css`: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([property({
   type: Boolean,
   reflect: true
@@ -5011,7 +5028,7 @@ _M3eStateLayerElement_handleFocusChange = function _M3eStateLayerElement_handleF
   }
 };
 /** The styles of the element. */
-M3eStateLayerElement.styles = css`: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: ${unsafeCSS(`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 = css`: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: ${unsafeCSS(`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([query(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
 __decorate([property({
   type: Boolean,
@@ -5291,5 +5308,5 @@ let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
 M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
 M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, SuppressInitialAnimation, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
+export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ClickOutsideController, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, SuppressInitialAnimation, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
 //# sourceMappingURL=core.js.map