@m3e/core 1.1.2 → 1.1.3

package/dist/html-custom-data.json

@@ -176,7 +176,12 @@
       "attributes": [
         {
           "name": "disabled",
-          "description": "Whether hover and focus event will not trigger the state layer. State layers can still\r\nbe controlled manually using the `show` and `hide` methods.",
+          "description": "Whether hover and focus events will not trigger the state layer. State layers can still\r\nbe controlled manually using the `show` and `hide` methods.",
+          "values": []
+        },
+        {
+          "name": "disable-hover",
+          "description": "Whether hover events will not trigger the state layer. State layers can still\r\nbe controlled manually using the `show` and `hide` methods.",
           "values": []
         },
         {

package/dist/index.js

@@ -44,6 +44,51 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var _AnimationLoopController_frameId, _AnimationLoopController_lastTime, _AnimationLoopController_running, _AnimationLoopController_callback, _AnimationLoopController_loop;
+/** A `ReactiveController` used to execute a function in an animation loop. */
+class AnimationLoopController {
+  constructor(host, callback) {
+    /** @private */_AnimationLoopController_frameId.set(this, null);
+    /** @private */
+    _AnimationLoopController_lastTime.set(this, 0);
+    /** @private */
+    _AnimationLoopController_running.set(this, false);
+    /** @private */
+    _AnimationLoopController_callback.set(this, void 0);
+    /** @private */
+    _AnimationLoopController_loop.set(this, () => {
+      if (!__classPrivateFieldGet(this, _AnimationLoopController_running, "f")) return;
+      const now = performance.now();
+      __classPrivateFieldGet(this, _AnimationLoopController_callback, "f").call(this, (now - __classPrivateFieldGet(this, _AnimationLoopController_lastTime, "f")) / 1000, now / 1000);
+      __classPrivateFieldSet(this, _AnimationLoopController_lastTime, now, "f");
+      __classPrivateFieldSet(this, _AnimationLoopController_frameId, requestAnimationFrame(__classPrivateFieldGet(this, _AnimationLoopController_loop, "f")), "f");
+    });
+    __classPrivateFieldSet(this, _AnimationLoopController_callback, callback, "f");
+    host.addController(this);
+  }
+  /** @inheritdoc */
+  hostDisconnected() {
+    this.stop();
+  }
+  /** Starts the animation loop. */
+  start() {
+    if (__classPrivateFieldGet(this, _AnimationLoopController_running, "f")) return;
+    __classPrivateFieldSet(this, _AnimationLoopController_running, true, "f");
+    __classPrivateFieldSet(this, _AnimationLoopController_lastTime, performance.now(), "f");
+    __classPrivateFieldGet(this, _AnimationLoopController_loop, "f").call(this);
+  }
+  /** Stops the animation loop. */
+  stop() {
+    if (!__classPrivateFieldGet(this, _AnimationLoopController_running, "f")) return;
+    __classPrivateFieldSet(this, _AnimationLoopController_running, false, "f");
+    if (__classPrivateFieldGet(this, _AnimationLoopController_frameId, "f") !== null) {
+      cancelAnimationFrame(__classPrivateFieldGet(this, _AnimationLoopController_frameId, "f"));
+      __classPrivateFieldSet(this, _AnimationLoopController_frameId, null, "f");
+    }
+  }
+}
+_AnimationLoopController_frameId = new WeakMap(), _AnimationLoopController_lastTime = new WeakMap(), _AnimationLoopController_running = new WeakMap(), _AnimationLoopController_callback = new WeakMap(), _AnimationLoopController_loop = new WeakMap();
+
 var _MonitorControllerBase_host, _MonitorControllerBase_target, _MonitorControllerBase_targets;
 /**
  * A base implementation for a `ReactiveController` used to monitor the state of one
@@ -109,6 +154,25 @@ class MonitorControllerBase {
 }
 _MonitorControllerBase_host = new WeakMap(), _MonitorControllerBase_target = new WeakMap(), _MonitorControllerBase_targets = new WeakMap();
 
+/**
+ * Asynchronously attempts to focus an element once it becomes focusable.
+ * @param {HTMLElement} element The element to to focus.
+ * @param {number} [timeout=200] The maximum amount of time to attempt to focus `el`.
+ * @returns {Promise<boolean>} A `Promise` that resolves to whether `el` was focused.
+ */
+async function focusWhenReady(element, timeout = 200) {
+  element.focus();
+  const start = performance.now();
+  while (element.shadowRoot?.activeElement !== element) {
+    if (!element.isConnected || performance.now() - start > timeout) {
+      return false;
+    }
+    await new Promise(requestAnimationFrame);
+    element.focus();
+  }
+  return true;
+}
+
 /**
  * Determines whether forced colors are active.
  * @returns {boolean} Whether forced colors are active.
@@ -464,6 +528,42 @@ function hasAssignedNodes(slot) {
   }).length > 0;
 }
 
+/**
+ * Intercepts property access and mutations on a target object, allowing custom logic
+ * to run when the property is read or written to.
+ *
+ * @template T - The type of the target object.
+ * @template K - The key of the property being intercepted (must be a valid key of T).
+ * @param target - The object whose property should be intercepted.
+ * @param prop - The property key to intercept.
+ * @param options - Configuration object for interceptor callbacks.
+ * @returns A cleanup function that removes the interceptors and restores the original property descriptor.
+ * @throws {Error} If the property does not exist on the target object or its prototype chain.
+ */
+function interceptProperty(target, prop, options) {
+  const descriptor = Object.getOwnPropertyDescriptor(target, prop) ?? Object.getOwnPropertyDescriptor(Object.getPrototypeOf(target), prop);
+  if (!descriptor) {
+    throw new Error(`Property ${String(prop)} not found on target.`);
+  }
+  const getter = descriptor.get?.bind(target);
+  const setter = descriptor.set?.bind(target);
+  Object.defineProperty(target, prop, {
+    configurable: true,
+    enumerable: descriptor.enumerable,
+    get() {
+      return options.get ? options.get(() => getter?.()) : getter?.();
+    },
+    set(v) {
+      if (options.set) {
+        options.set(v, val => setter?.(val));
+      } else {
+        setter?.(v);
+      }
+    }
+  });
+  return () => Object.defineProperty(target, prop, descriptor);
+}
+
 /**
  * Determines whether reduced motion is preferred.
  * @returns {boolean} Whether reduced motion is preferred.
@@ -472,6 +572,55 @@ function prefersReducedMotion() {
   return isServer || matchMedia("(prefers-reduced-motion)").matches;
 }
 
+/**
+ * Resolves an element by ID, waiting for document readiness if needed.
+ * @param {string} id - The element ID to resolve.
+ * @param {ParentNode} root - Optional root node to query from (defaults to document).
+ * @returns {Promise<T | null>} A promise that resolves with the element or `null` if not found.
+ */
+function resolveElementById(id, root = document) {
+  return new Promise(resolve => {
+    const element = root.querySelector(`#${id}`);
+    if (element) {
+      resolve(element);
+      return;
+    }
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+      resolve(root.querySelector(`#${id}`));
+      return;
+    }
+    document.addEventListener("DOMContentLoaded", () => resolve(root.querySelector(`#${id}`)), {
+      once: true
+    });
+  });
+}
+
+/**
+ * Resolves a URL fragment reference (`url(path#id)`) based on the current document location.
+ *
+ * This helper is typically used when constructing fragment-based URLs for SVG
+ * references (e.g., masks, clipPaths, filters) where the browser requires a fully
+ * qualified `url(...)` value that includes the current path.
+ *
+ * How it works:
+ * - Safely reads `document.location` (guarded for SSR environments).
+ * - Extracts the current page's path + query string.
+ * - Removes any existing hash fragment from the URL.
+ * - Appends `#${id}` to produce a stable fragment reference.
+ *
+ * Example:
+ *   // If the current page is /viewer/page?mode=edit#section2
+ *   resolveFragmentUrl("clip") → "url(/viewer/page?mode=edit#clip)"
+ *
+ * @param id - The fragment identifier to append (e.g., an SVG element's ID).
+ * @returns A `url(...)` string pointing to the fragment within the current document.
+ */
+function resolveFragmentUrl(id) {
+  const location = document?.location ?? null;
+  const path = location ? (location.pathname + location.search).split("#")[0] : "";
+  return `url(${path}#${id})`;
+}
+
 /**
  * If needed, scrolls an element into view within a given scroll container.
  * @param {HTMLElement} element The element to scroll into view.
@@ -486,7 +635,7 @@ function scrollIntoViewIfNeeded(element, scrollContainer, options) {
   }
 }
 
-var _FocusController_instances, _FocusController_callback, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
+var _FocusController_instances, _FocusController_touch, _FocusController_callback, _FocusController_keyDownHandler, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_touchStartHandler, _FocusController_touchEndHandler, _FocusController_handleKeyDown, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
 /** A `ReactiveController` used to monitor the focused state of one or more elements. */
 class FocusController extends MonitorControllerBase {
   /**
@@ -498,11 +647,19 @@ class FocusController extends MonitorControllerBase {
     super(host, options);
     _FocusController_instances.add(this);
     /** @private */
+    _FocusController_touch.set(this, false);
+    /** @private */
     _FocusController_callback.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));
     /** @private */
     _FocusController_focusOutHandler.set(this, e => __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleFocusOut).call(this, e));
+    /** @private */
+    _FocusController_touchStartHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_touch, true, "f"));
+    /** @private */
+    _FocusController_touchEndHandler.set(this, () => __classPrivateFieldSet(this, _FocusController_touch, false, "f"));
     __classPrivateFieldSet(this, _FocusController_callback, options.callback, "f");
   }
   /**
@@ -510,25 +667,38 @@ class FocusController extends MonitorControllerBase {
    * @param {HTMLElement} target The element to start observing.
    */
   _observe(target) {
-    target.addEventListener("keydown", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+    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("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.
    */
   _unobserve(target) {
-    target.removeEventListener("keydown", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+    target.removeEventListener("keydown", __classPrivateFieldGet(this, _FocusController_keyDownHandler, "f"));
     target.removeEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
     target.removeEventListener("focusout", __classPrivateFieldGet(this, _FocusController_focusOutHandler, "f"));
+    target.removeEventListener("touchstart", __classPrivateFieldGet(this, _FocusController_touchStartHandler, "f"));
+    target.removeEventListener("touchend", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
+    target.removeEventListener("touchcancel", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
   }
 }
-_FocusController_callback = new WeakMap(), _FocusController_focusInHandler = new WeakMap(), _FocusController_focusOutHandler = new WeakMap(), _FocusController_instances = new WeakSet(), _FocusController_handleFocusIn = function _FocusController_handleFocusIn(e) {
-  const target = e.target;
+_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_instances = new WeakSet(), _FocusController_handleKeyDown = function _FocusController_handleKeyDown(e) {
+  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_touch, "f")) return;
+  const target = e.currentTarget;
   __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, true, target.matches(":focus-visible") || forcedColorsActive(), target);
 }, _FocusController_handleFocusOut = function _FocusController_handleFocusOut(e) {
-  __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, false, false, e.target);
+  if (__classPrivateFieldGet(this, _FocusController_touch, "f")) return;
+  __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, false, false, e.currentTarget);
 };
 
 var _HoverController_instances, _HoverController_callback, _HoverController_startDelays, _HoverController_endDelays, _HoverController_pointerInHandler, _HoverController_pointerLeaveHandler, _HoverController_clearDelays, _HoverController_clearStartDelay, _HoverController_clearEndDelay, _HoverController_handlePointerEnter, _HoverController_handlePointerLeave;
@@ -716,7 +886,9 @@ class LongPressController extends MonitorControllerBase {
    * @param {HTMLElement} target The element to start observing.
    */
   _observe(target) {
-    target.addEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"));
+    target.addEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"), {
+      passive: true
+    });
     target.addEventListener("touchend", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
     target.addEventListener("touchcancel", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
   }
@@ -3217,14 +3389,18 @@ function HtmlFor(base) {
       super.update(changedProperties);
       if (changedProperties.has("htmlFor")) {
         if (this.htmlFor) {
-          const control = this.getRootNode()?.querySelector(`#${this.htmlFor}`);
-          if (control !== this.control) {
-            if (this.control) {
-              this.detach();
-            }
-            if (control instanceof HTMLElement) {
-              this.attach(control);
-            }
+          const root = this.getRootNode();
+          if (root) {
+            resolveElementById(this.htmlFor, root).then(control => {
+              if (control !== this.control) {
+                if (this.control) {
+                  this.detach();
+                }
+                if (control instanceof HTMLElement) {
+                  this.attach(control);
+                }
+              }
+            });
           }
         } else if (this.control && this[_firstUpdated]) {
           this.detach();
@@ -3258,37 +3434,50 @@ function HtmlFor(base) {
  * @returns {T} A class that extends `base` with keyboard click behavior.
  */
 function KeyboardClick(base, allowEnter = true) {
-  var __KeyboardClickMixin_instances, __KeyboardClickMixin_keyUpHandler, __KeyboardClickMixin_handleKeyUp;
+  var __KeyboardClickMixin_instances, __KeyboardClickMixin_keyPressed, __KeyboardClickMixin_keyDownHandler, __KeyboardClickMixin_keyUpHandler, __KeyboardClickMixin_focusOutHandler, __KeyboardClickMixin_handleKeyDown, __KeyboardClickMixin_handleKeyUp;
   class _KeyboardClickMixin extends base {
     constructor() {
       super(...arguments);
       __KeyboardClickMixin_instances.add(this);
       /** @private */
+      __KeyboardClickMixin_keyPressed.set(this, false);
+      /** @private */
+      __KeyboardClickMixin_keyDownHandler.set(this, e => __classPrivateFieldGet(this, __KeyboardClickMixin_instances, "m", __KeyboardClickMixin_handleKeyDown).call(this, e));
       __KeyboardClickMixin_keyUpHandler.set(this, e => __classPrivateFieldGet(this, __KeyboardClickMixin_instances, "m", __KeyboardClickMixin_handleKeyUp).call(this, e));
+      __KeyboardClickMixin_focusOutHandler.set(this, () => __classPrivateFieldSet(this, __KeyboardClickMixin_keyPressed, false, "f"));
     }
     /** @inheritdoc */
     connectedCallback() {
       super.connectedCallback();
+      this.addEventListener("keydown", __classPrivateFieldGet(this, __KeyboardClickMixin_keyDownHandler, "f"));
       this.addEventListener("keyup", __classPrivateFieldGet(this, __KeyboardClickMixin_keyUpHandler, "f"));
+      this.addEventListener("focusout", __classPrivateFieldGet(this, __KeyboardClickMixin_focusOutHandler, "f"));
     }
     /** @inheritdoc */
     disconnectedCallback() {
       super.disconnectedCallback();
+      this.removeEventListener("keydown", __classPrivateFieldGet(this, __KeyboardClickMixin_keyDownHandler, "f"));
       this.removeEventListener("keyup", __classPrivateFieldGet(this, __KeyboardClickMixin_keyUpHandler, "f"));
+      this.removeEventListener("focusout", __classPrivateFieldGet(this, __KeyboardClickMixin_focusOutHandler, "f"));
     }
   }
-  __KeyboardClickMixin_keyUpHandler = new WeakMap(), __KeyboardClickMixin_instances = new WeakSet(), __KeyboardClickMixin_handleKeyUp = function __KeyboardClickMixin_handleKeyUp(e) {
+  __KeyboardClickMixin_keyPressed = new WeakMap(), __KeyboardClickMixin_keyDownHandler = new WeakMap(), __KeyboardClickMixin_keyUpHandler = new WeakMap(), __KeyboardClickMixin_focusOutHandler = new WeakMap(), __KeyboardClickMixin_instances = new WeakSet(), __KeyboardClickMixin_handleKeyDown = function __KeyboardClickMixin_handleKeyDown(e) {
     if (e.defaultPrevented || e.target !== e.currentTarget || isDisabledMixin(this) && this.disabled || isDisabledInteractiveMixin(this) && this.disabledInteractive) {
       return;
     }
     if (e.key === " " || allowEnter && e.key === "Enter") {
-      // NOTE: the dispatched click event will not be trusted since it is synthetic.
-      this.dispatchEvent(new MouseEvent("click", {
-        cancelable: true,
-        bubbles: true,
-        composed: true
-      }));
+      __classPrivateFieldSet(this, __KeyboardClickMixin_keyPressed, true, "f");
+    }
+  }, __KeyboardClickMixin_handleKeyUp = function __KeyboardClickMixin_handleKeyUp(e) {
+    if (e.defaultPrevented || e.target !== e.currentTarget || isDisabledMixin(this) && this.disabled || isDisabledInteractiveMixin(this) && this.disabledInteractive || !__classPrivateFieldGet(this, __KeyboardClickMixin_keyPressed, "f")) {
+      return;
     }
+    // NOTE: the dispatched click event will not be trusted since it is synthetic.
+    this.dispatchEvent(new MouseEvent("click", {
+      cancelable: true,
+      bubbles: true,
+      composed: true
+    }));
   };
   return _KeyboardClickMixin;
 }
@@ -3903,6 +4092,40 @@ function Vertical(base) {
   return _VerticalMixin;
 }
 
+var _ActionElementBase_clickHandler;
+/**
+ * A base implementation for an element, nested within a clickable element, used to
+ * perform an action. This class must be inherited.
+ */
+class ActionElementBase extends LitElement {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    _ActionElementBase_clickHandler.set(this, e => {
+      if (!e.defaultPrevented) {
+        this._onClick(e);
+      }
+    });
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _ActionElementBase_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _ActionElementBase_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+_ActionElementBase_clickHandler = new WeakMap();
+/** The styles of the element. */
+ActionElementBase.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
+
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCollapsibleElement_hasOpened, _M3eCollapsibleElement_handleSlotChange, _M3eCollapsibleElement_autoSize, _M3eCollapsibleElement_clearSize, _M3eCollapsibleElement_actualSize;
 /**
@@ -3957,6 +4180,11 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
     this.toggleAttribute("inert", !this.open);
     if (this.open) {
       __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
+      if (!prefersReducedMotion()) {
+        __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
+        this.classList.toggle("-overflows", this.clientHeight < this.scrollHeight);
+        __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
+      }
       this.classList.toggle("-closing", false);
       this.classList.toggle("-opening", true);
       this.dispatchEvent(new Event("opening"));
@@ -3964,6 +4192,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
       this.classList.toggle("-no-animate", false);
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
       if (prefersReducedMotion()) {
+        __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
         this.classList.toggle("-opening", false);
         this.dispatchEvent(new Event("opened"));
       } else {
@@ -4032,7 +4261,7 @@ M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow
         padding-top var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         padding-bottom var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-          ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-closing):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(.-no-animate) { transition-duration: 0ms; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
+          ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-closing):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(.-no-animate) { transition-duration: 0ms; } :host(.-opening), :host(.-closing) { overflow-y: hidden !important; } :host(.-overflows) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -4710,7 +4939,9 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends LitEleme
     if (changedProperties.has("dividers")) {
       this.removeEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"));
       if (this.dividers !== "none") {
-        this.addEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"));
+        this.addEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"), {
+          passive: true
+        });
       }
     }
   }
@@ -4870,7 +5101,8 @@ var _M3eStateLayerElement_instances, _M3eStateLayerElement_hoverController, _M3e
  *
  * @tag m3e-state-layer
  *
- * @attr disabled - Whether hover and focus event will not trigger the state layer.Whether hover and focus event will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
+ * @attr disabled - Whether hover and focus events will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
+ * @attr disable-hover - Whether hover events will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
  *
  * @cssprop --m3e-state-layer-duration - Duration of state layer changes.
  * @cssprop --m3e-state-layer-easing - Easing curve of state layer changes.
@@ -4894,11 +5126,17 @@ let M3eStateLayerElement = class M3eStateLayerElement extends HtmlFor(Role(LitEl
       callback: (focused, focusVisible) => __classPrivateFieldGet(this, _M3eStateLayerElement_instances, "m", _M3eStateLayerElement_handleFocusChange).call(this, focused && focusVisible)
     }));
     /**
-     * Whether hover and focus event will not trigger the state layer. State layers can still
+     * Whether hover and focus events will not trigger the state layer. State layers can still
      * be controlled manually using the `show` and `hide` methods.
      * @default false
      */
     this.disabled = false;
+    /**
+     * Whether hover events will not trigger the state layer. State layers can still
+     * be controlled manually using the `show` and `hide` methods.
+     * @default false
+     */
+    this.disableHover = false;
   }
   /**
    * Launches a manual state layer.
@@ -4946,6 +5184,9 @@ let M3eStateLayerElement = class M3eStateLayerElement extends HtmlFor(Role(LitEl
       this.hide("hover");
       this.hide("focused");
     }
+    if (_changedProperties.has("disableHover") && this.disableHover) {
+      this.hide("hover");
+    }
   }
   /** @inheritdoc */
   render() {
@@ -4956,7 +5197,7 @@ _M3eStateLayerElement_hoverController = new WeakMap();
 _M3eStateLayerElement_focusController = new WeakMap();
 _M3eStateLayerElement_instances = new WeakSet();
 _M3eStateLayerElement_handleHoverChange = function _M3eStateLayerElement_handleHoverChange(hovering) {
-  if (!this.disabled) {
+  if (!this.disabled && !this.disableHover) {
     if (hovering) {
       this.show("hover");
     } else {
@@ -4980,6 +5221,11 @@ __decorate([n$1({
   type: Boolean,
   reflect: true
 })], M3eStateLayerElement.prototype, "disabled", void 0);
+__decorate([n$1({
+  attribute: "disable-hover",
+  type: Boolean,
+  reflect: true
+})], M3eStateLayerElement.prototype, "disableHover", void 0);
 M3eStateLayerElement = __decorate([t$2("m3e-state-layer")], M3eStateLayerElement);
 
 /**
@@ -5210,5 +5456,5 @@ __decorate([n$1({
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
 M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([t$2("m3e-text-highlight")], M3eTextHighlightElement);
 
-export { AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, updateLabels, validate };
+export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, updateLabels, validate };
 //# sourceMappingURL=index.js.map