@lion/ui 0.22.0 → 0.24.0

package/components/overlays/src/OverlayMixin.js

@@ -1,6 +1,5 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { OverlayController } from './OverlayController.js';
-import { isEqualConfig } from './utils/is-equal-config.js';
 
 /**
  * @typedef {<T>(ingOverlayHost:T) => void} PostProcessor
@@ -28,7 +27,8 @@ export function _addOverlayMixinPostProcessor(postProcessor) {
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-export const OverlayMixinImplementation = superclass => {
+// @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+export const OverlayMixinImplementation = (superclass) => {
   class OverlayMixin extends superclass {
     static get properties() {
       return {
@@ -38,9 +38,7 @@ export const OverlayMixinImplementation = superclass => {
         },
       };
     }
-
     #hasSetup = false;
-
     constructor() {
       super();
       /**
@@ -62,20 +60,19 @@ export const OverlayMixinImplementation = superclass => {
       /** @type {EventListener} */
       this.close = this.close.bind(this);
     }
-
     get config() {
-      return /** @type {OverlayConfig} */ (this.__config);
+      return /** @type {OverlayConfig} */ this.__config;
     }
 
     /** @param {OverlayConfig} value */
     set config(value) {
-      const shouldUpdate = !isEqualConfig(this.config, value);
-
-      if (this._overlayCtrl && shouldUpdate) {
+      // The OverlayController already guards against redundant updates
+      // (see OverlayController#updateConfig), so we delegate unconditionally here.
+      if (this._overlayCtrl) {
         this._overlayCtrl.updateConfig(value);
       }
       this.__config = value;
-      if (this._overlayCtrl && shouldUpdate) {
+      if (this._overlayCtrl) {
         this.__syncToOverlayController();
       }
     }
@@ -91,7 +88,9 @@ export const OverlayMixinImplementation = superclass => {
       if (name === 'opened' && this.opened !== oldValue) {
         this.dispatchEvent(
           new CustomEvent('opened-changed', {
-            detail: { opened: this.opened },
+            detail: {
+              opened: this.opened,
+            },
           }),
         );
       }
@@ -114,8 +113,10 @@ export const OverlayMixinImplementation = superclass => {
         referenceNode,
         backdropNode,
         contentWrapperNode,
-        ...overlayConfig, // wc provided in the class as defaults
-        ...this.config, // user provided (e.g. in template)
+        ...overlayConfig,
+        // wc provided in the class as defaults
+        ...this.config,
+        // user provided (e.g. in template)
         popperConfig: {
           ...(overlayConfig.popperConfig || {}),
           ...(this.config?.popperConfig || {}),
@@ -146,7 +147,6 @@ export const OverlayMixinImplementation = superclass => {
      */
     updated(changedProperties) {
       super.updated(changedProperties);
-
       if (changedProperties.has('opened') && this._overlayCtrl && !this.__blockSyncToOverlayCtrl) {
         this.__syncToOverlayController();
       }
@@ -160,12 +160,15 @@ export const OverlayMixinImplementation = superclass => {
      */
     // eslint-disable-next-line class-methods-use-this
     _setupOpenCloseListeners() {
+      // Keeps the close-overlay event private for the controller.
+      // (we already have )
       /**
        * @param {{ stopPropagation: () => void; }} ev
        */
-      this.__closeEventInContentNodeHandler = ev => {
+      this.__closeEventInContentNodeHandler = (ev) => {
         ev.stopPropagation();
-        /** @type {OverlayController} */ (this._overlayCtrl).hide();
+        /** @type {OverlayController} */
+        this._overlayCtrl.hide();
       };
       if (this._overlayContentNode) {
         this._overlayContentNode.addEventListener(
@@ -185,14 +188,12 @@ export const OverlayMixinImplementation = superclass => {
       if (this._overlayContentNode) {
         this._overlayContentNode.removeEventListener(
           'close-overlay',
-          /** @type {EventListener} */ (this.__closeEventInContentNodeHandler),
+          /** @type {EventListener} */ this.__closeEventInContentNodeHandler,
         );
       }
     }
-
     connectedCallback() {
       super.connectedCallback();
-
       this.updateComplete.then(() => {
         if (!this.isConnected) return;
         if (this.#hasSetup) return;
@@ -200,10 +201,8 @@ export const OverlayMixinImplementation = superclass => {
         this.#hasSetup = true;
       });
     }
-
     async disconnectedCallback() {
       super.disconnectedCallback();
-
       if (await this._isPermanentlyDisconnected()) {
         this._teardownOverlayCtrl();
         this.#hasSetup = false;
@@ -215,13 +214,7 @@ export const OverlayMixinImplementation = superclass => {
      * @configure ReactiveElement
      */
     // @ts-expect-error
-    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
-
-    get _overlayInvokerNode() {
-      return /** @type {HTMLElement | undefined} */ (
-        Array.from(this.children).find(child => child.slot === 'invoker')
-      );
-    }
+    static enabledWarnings = super.enabledWarnings?.filter((w) => w !== 'change-in-update') || [];
 
     /**
      * @overridable
@@ -230,38 +223,99 @@ export const OverlayMixinImplementation = superclass => {
     get _overlayReferenceNode() {
       return undefined;
     }
-
     get _overlayBackdropNode() {
       if (!this.__cachedOverlayBackdropNode) {
-        this.__cachedOverlayBackdropNode = /** @type {HTMLElement | undefined} */ (
-          Array.from(this.children).find(child => child.slot === 'backdrop')
-        );
+        this.__cachedOverlayBackdropNode =
+          /** @type {HTMLElement | undefined} */
+          Array.from(this.children).find((child) => child.slot === 'backdrop');
       }
       return this.__cachedOverlayBackdropNode;
     }
-
     get _overlayContentNode() {
       if (!this._cachedOverlayContentNode) {
         this._cachedOverlayContentNode =
-          Array.from(this.children).find(child => child.slot === 'content') ||
+          Array.from(this.children).find((child) => child.slot === 'content') ||
           this.config.contentNode;
       }
-      return /** @type {HTMLElement} */ (this._cachedOverlayContentNode);
+      return /** @type {HTMLElement} */ this._cachedOverlayContentNode;
     }
-
     get _overlayContentWrapperNode() {
-      return /** @type {HTMLElement | undefined} */ (
-        this.shadowRoot?.querySelector('#overlay-content-node-wrapper')
+      return /** @type {HTMLElement | undefined} */ this.shadowRoot?.querySelector(
+        '#overlay-content-node-wrapper',
       );
     }
 
+    /**
+     * Returns the element that can actually receive focus inside the passed
+     * invoker (wrapper) element: the element itself when it is focusable,
+     * otherwise the first focusable descendant.
+     * @param {Element|null|undefined} focusableElOrWrapper
+     * @returns {Element|null}
+     */
+    /**
+     * @param {Element | null | undefined} focusableElOrWrapper
+     * @returns {Element | null}
+     */
+    static _getFocusableInvokerEl(focusableElOrWrapper) {
+      if (!focusableElOrWrapper) return null;
+      const focusableSelector = '[tabindex], button, a[href], [role=button]';
+      return focusableElOrWrapper.matches(focusableSelector)
+        ? focusableElOrWrapper
+        : focusableElOrWrapper.querySelector(focusableSelector);
+    }
+
+    /**
+     * The node that opens/closes this overlay.
+     *
+     * Resolved in a stable, declarative way (independent of the exact DOM order)
+     * by looking, in order, for:
+     * 1. a child with `[slot="invoker"]`
+     * 2. any element in the same root that opts in via `[data-invoker]` and
+     *    references this host by id (`for="<id>"`)
+     * 3. a preceding sibling that opts in via `[data-invoker]`
+     * @protected
+     */
+    get _overlayInvokerNode() {
+      if (!this.__invokerNode) {
+        this.__invokerNode = this._getInvokerNode();
+      }
+      return this.__invokerNode;
+    }
+
+    /**
+     * @protected
+     * @returns {Element|null}
+     */
+    _getInvokerNode() {
+      const ctor = /** @type {typeof OverlayMixin} */ this.constructor;
+      const slottedNode = Array.from(this.children).find((child) => child.slot === 'invoker');
+      if (slottedNode) {
+        return ctor._getFocusableInvokerEl(slottedNode);
+      }
+      if (this.id) {
+        // Reference the invoker declaratively: `<button data-invoker for="my-menu">`
+        const root = /** @type {Document|ShadowRoot} */ this.getRootNode();
+        const explicitInvoker = root.querySelector?.(`[data-invoker][for="${this.id}"]`);
+        if (explicitInvoker) {
+          return ctor._getFocusableInvokerEl(explicitInvoker);
+        }
+      }
+
+      // Fall back to a preceding sibling that opted in via [data-invoker]
+      const { previousElementSibling } = this;
+      return previousElementSibling && previousElementSibling.hasAttribute('data-invoker')
+        ? ctor._getFocusableInvokerEl(previousElementSibling)
+        : null;
+    }
+
     /** @protected */
     _setupOverlayCtrl() {
       if (this.#hasSetup) return;
+      const invokerNode = this._overlayInvokerNode;
       const config = {
         contentNode: this._overlayContentNode,
         contentWrapperNode: this._overlayContentWrapperNode,
-        invokerNode: this._overlayInvokerNode,
+        invokerNode: invokerNode && invokerNode instanceof HTMLElement ? invokerNode : undefined,
         referenceNode: this._overlayReferenceNode,
         backdropNode: this._overlayBackdropNode,
       };
@@ -274,7 +328,6 @@ export const OverlayMixinImplementation = superclass => {
         /** @type {OverlayController} */
         this._overlayCtrl = this._defineOverlay(config);
       }
-
       this.__syncToOverlayController();
       this.__setupSyncFromOverlayController();
       this._setupOpenCloseListeners();
@@ -282,12 +335,14 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @protected */
     _teardownOverlayCtrl() {
+      // Make sure that dynamic behavior (e.g. responsive) is possible by allowing multiple setups and teardowns of the overlay controller.
+      this.#hasSetup = false;
       if (!this._overlayCtrl) return;
-
       this._teardownOpenCloseListeners();
       this.__teardownSyncFromOverlayController();
 
-      /** @type {OverlayController} */ (this._overlayCtrl).teardown();
+      /** @type {OverlayController} */
+      this._overlayCtrl.teardown();
     }
 
     /**
@@ -310,7 +365,6 @@ export const OverlayMixinImplementation = superclass => {
       this.__onOverlayCtrlShow = () => {
         this.opened = true;
       };
-
       this.__onOverlayCtrlHide = () => {
         this.opened = false;
       };
@@ -318,13 +372,15 @@ export const OverlayMixinImplementation = superclass => {
       /**
        * @param {{ preventDefault: () => void; }} beforeShowEvent
        */
-      this.__onBeforeShow = beforeShowEvent => {
-        const event = new CustomEvent('before-opened', { cancelable: true });
+      this.__onBeforeShow = (beforeShowEvent) => {
+        const event = new CustomEvent('before-opened', {
+          cancelable: true,
+        });
         this.dispatchEvent(event);
         if (event.defaultPrevented) {
           // Check whether our current `.opened` state is not out of sync with overlayCtrl
           this._setOpenedWithoutPropertyEffects(
-            /** @type {OverlayController} */ (this._overlayCtrl).isShown,
+            /** @type {OverlayController} */ this._overlayCtrl.isShown,
           );
           beforeShowEvent.preventDefault();
         }
@@ -333,47 +389,52 @@ export const OverlayMixinImplementation = superclass => {
       /**
        * @param {{ preventDefault: () => void; }} beforeHideEvent
        */
-      this.__onBeforeHide = beforeHideEvent => {
-        const event = new CustomEvent('before-closed', { cancelable: true });
+      this.__onBeforeHide = (beforeHideEvent) => {
+        const event = new CustomEvent('before-closed', {
+          cancelable: true,
+        });
         this.dispatchEvent(event);
         if (event.defaultPrevented) {
           // Check whether our current `.opened` state is not out of sync with overlayCtrl
           this._setOpenedWithoutPropertyEffects(
             /** @type {OverlayController} */
-            (this._overlayCtrl).isShown,
+            this._overlayCtrl.isShown,
           );
           beforeHideEvent.preventDefault();
         }
       };
 
       /** @type {OverlayController} */
-      (this._overlayCtrl).addEventListener('show', this.__onOverlayCtrlShow);
+      this._overlayCtrl.addEventListener('show', this.__onOverlayCtrlShow);
       /** @type {OverlayController} */
-      (this._overlayCtrl).addEventListener('hide', this.__onOverlayCtrlHide);
+      this._overlayCtrl.addEventListener('hide', this.__onOverlayCtrlHide);
       /** @type {OverlayController} */
-      (this._overlayCtrl).addEventListener('before-show', this.__onBeforeShow);
+      this._overlayCtrl.addEventListener('before-show', this.__onBeforeShow);
       /** @type {OverlayController} */
-      (this._overlayCtrl).addEventListener('before-hide', this.__onBeforeHide);
+      this._overlayCtrl.addEventListener('before-hide', this.__onBeforeHide);
     }
 
     /** @private */
     __teardownSyncFromOverlayController() {
       /** @type {OverlayController} */
-      (this._overlayCtrl).removeEventListener(
+      this._overlayCtrl.removeEventListener(
         'show',
-        /** @type {EventListener} */ (this.__onOverlayCtrlShow),
+        /** @type {EventListener} */ this.__onOverlayCtrlShow,
       );
-      /** @type {OverlayController} */ (this._overlayCtrl).removeEventListener(
+      /** @type {OverlayController} */
+      this._overlayCtrl.removeEventListener(
         'hide',
-        /** @type {EventListener} */ (this.__onOverlayCtrlHide),
+        /** @type {EventListener} */ this.__onOverlayCtrlHide,
       );
-      /** @type {OverlayController} */ (this._overlayCtrl).removeEventListener(
+      /** @type {OverlayController} */
+      this._overlayCtrl.removeEventListener(
         'before-show',
-        /** @type {EventListener} */ (this.__onBeforeShow),
+        /** @type {EventListener} */ this.__onBeforeShow,
       );
-      /** @type {OverlayController} */ (this._overlayCtrl).removeEventListener(
+      /** @type {OverlayController} */
+      this._overlayCtrl.removeEventListener(
         'before-hide',
-        /** @type {EventListener} */ (this.__onBeforeHide),
+        /** @type {EventListener} */ this.__onBeforeHide,
       );
     }
 
@@ -381,10 +442,10 @@ export const OverlayMixinImplementation = superclass => {
     __syncToOverlayController() {
       if (this.opened) {
         /** @type {OverlayController} */
-        (this._overlayCtrl).show();
+        this._overlayCtrl.show();
       } else {
         /** @type {OverlayController} */
-        (this._overlayCtrl).hide();
+        this._overlayCtrl.hide();
       }
     }
 
@@ -392,21 +453,21 @@ export const OverlayMixinImplementation = superclass => {
      * Toggles the overlay
      */
     async toggle() {
-      await /** @type {OverlayController} */ (this._overlayCtrl).toggle();
+      await /** @type {OverlayController} */ this._overlayCtrl.toggle();
     }
 
     /**
      * Shows the overlay
      */
     async open() {
-      await /** @type {OverlayController} */ (this._overlayCtrl).show();
+      await /** @type {OverlayController} */ this._overlayCtrl.show();
     }
 
     /**
      * Hides the overlay
      */
     async close() {
-      await /** @type {OverlayController} */ (this._overlayCtrl).hide();
+      await /** @type {OverlayController} */ this._overlayCtrl.hide();
     }
 
     /**
@@ -415,7 +476,7 @@ export const OverlayMixinImplementation = superclass => {
      * increases vertically)
      */
     repositionOverlay() {
-      const ctrl = /** @type {OverlayController} */ (this._overlayCtrl);
+      const ctrl = /** @type {OverlayController} */ this._overlayCtrl;
       if (ctrl.placementMode === 'local' && ctrl._popper) {
         ctrl._popper.update();
       }
@@ -434,6 +495,7 @@ export const OverlayMixinImplementation = superclass => {
   for (const postProcessor of overlayMixinPostProcessors) {
     postProcessor(OverlayMixin);
   }
-  return /** @type {* & OverlayMixin} */ (OverlayMixin);
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  return OverlayMixin;
 };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/OverlaysManager.js

@@ -14,11 +14,10 @@ import { overlayDocumentStyle } from './overlayDocumentStyle.js';
 export class OverlaysManager {
   /** @type {HTMLStyleElement | undefined} */
   static __globalStyleNode = undefined;
-
   static __createGlobalStyleNode() {
     const styleTag = document.createElement('style');
     styleTag.setAttribute('data-overlays', '');
-    styleTag.textContent = /** @type {CSSResult} */ (overlayDocumentStyle).cssText;
+    styleTag.textContent = /** @type {CSSResult} */ overlayDocumentStyle.cssText;
     document.head.appendChild(styleTag);
     return styleTag;
   }
@@ -73,7 +72,6 @@ export class OverlaysManager {
    * }}
    */
   __bodySizeVars;
-
   constructor() {
     this.__list = [];
     this.__shownList = [];
@@ -88,11 +86,9 @@ export class OverlaysManager {
       marginRight: undefined,
       marginBottom: undefined,
     };
-
     this.__forTesting = {
       bodySizeVars: this.__bodySizeVars,
     };
-
     if (!OverlaysManager.__globalStyleNode) {
       OverlaysManager.__globalStyleNode = OverlaysManager.__createGlobalStyleNode();
     }
@@ -104,7 +100,7 @@ export class OverlaysManager {
    * @returns {OverlayController} same controller after adding to the manager
    */
   add(ctrlToAdd) {
-    if (this.list.find(ctrl => ctrlToAdd === ctrl)) {
+    if (this.list.find((ctrl) => ctrlToAdd === ctrl)) {
       throw new Error('controller instance is already added');
     }
     this.list.push(ctrlToAdd);
@@ -115,18 +111,18 @@ export class OverlaysManager {
    * @param {OverlayController} ctrlToRemove
    */
   remove(ctrlToRemove) {
-    if (!this.list.find(ctrl => ctrlToRemove === ctrl)) {
+    if (!this.list.find((ctrl) => ctrlToRemove === ctrl)) {
       throw new Error('could not find controller to remove');
     }
-    this.__list = this.list.filter(ctrl => ctrl !== ctrlToRemove);
-    this.__shownList = this.shownList.filter(ctrl => ctrl !== ctrlToRemove);
+    this.__list = this.list.filter((ctrl) => ctrl !== ctrlToRemove);
+    this.__shownList = this.shownList.filter((ctrl) => ctrl !== ctrlToRemove);
   }
 
   /**
    * @param {OverlayController} ctrlToShow
    */
   show(ctrlToShow) {
-    if (this.list.find(ctrl => ctrlToShow === ctrl)) {
+    if (this.list.find((ctrl) => ctrlToShow === ctrl)) {
       this.hide(ctrlToShow);
     }
     this.__shownList.unshift(ctrlToShow);
@@ -144,17 +140,15 @@ export class OverlaysManager {
    * @param {any} ctrlToHide
    */
   hide(ctrlToHide) {
-    if (!this.list.find(ctrl => ctrlToHide === ctrl)) {
+    if (!this.list.find((ctrl) => ctrlToHide === ctrl)) {
       throw new Error('could not find controller to hide');
     }
-    this.__shownList = this.shownList.filter(ctrl => ctrl !== ctrlToHide);
+    this.__shownList = this.shownList.filter((ctrl) => ctrl !== ctrlToHide);
   }
-
   teardown() {
-    this.list.forEach(ctrl => {
+    this.list.forEach((ctrl) => {
       ctrl.teardown();
     });
-
     this.__list = [];
     this.__shownList = [];
     this._siblingsInert = false;
@@ -165,11 +159,8 @@ export class OverlaysManager {
     this.__bodySizeVars.marginBottomInline = undefined;
     this.__bodySizeVars.marginRight = undefined;
     this.__bodySizeVars.marginBottom = undefined;
-
     if (OverlaysManager.__globalStyleNode) {
-      document.head.removeChild(
-        /** @type {HTMLStyleElement} */ (OverlaysManager.__globalStyleNode),
-      );
+      document.head.removeChild(/** @type {HTMLStyleElement} */ OverlaysManager.__globalStyleNode);
       OverlaysManager.__globalStyleNode = undefined;
     }
   }
@@ -215,9 +206,9 @@ export class OverlaysManager {
             this.__bodySizeVars.marginBottom = 0;
           }
           const scrollbarWidth =
-            document.body.clientWidth - /** @type {number} */ (this.__bodySizeVars.clientWidth);
+            document.body.clientWidth - /** @type {number} */ this.__bodySizeVars.clientWidth;
           const scrollbarHeight =
-            document.body.clientHeight - /** @type {number} */ (this.__bodySizeVars.clientHeight);
+            document.body.clientHeight - /** @type {number} */ this.__bodySizeVars.clientHeight;
           const newMarginRight = this.__bodySizeVars.marginRight + scrollbarWidth;
           const newMarginBottom = this.__bodySizeVars.marginBottom + scrollbarHeight;
           // @ts-expect-error [external]: CSS not yet typed
@@ -254,7 +245,10 @@ export class OverlaysManager {
     document.body.classList.add('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
       // iOS and safar for mac have issues with overlays with input fields. This is fixed by applying
-      // position: fixed to the body. As a side effect, this will scroll the body to the top.
+      // position: fixed to the body. As a side effect, this will scroll the body to the top,
+      // so we compensate by applying negative top value via a CSS variable, and scroll back to
+      // the original position when enabling scroll again.
+      document.body.style.setProperty('--scroll-y-compensation', `-${window.scrollY}px`);
       document.body.classList.add('overlays-scroll-lock-ios-fix');
     }
     if (isIOS) {
@@ -267,20 +261,24 @@ export class OverlaysManager {
    */
   requestToEnableScroll(currentController) {
     const openedSiblings = currentController
-      ? this.shownList.filter(ctrl => ctrl !== currentController)
+      ? this.shownList.filter((ctrl) => ctrl !== currentController)
       : this.shownList;
-
     const hasOpenSiblingThatPreventsScroll = openedSiblings.some(
-      ctrl => ctrl.preventsScroll === true,
+      (ctrl) => ctrl.preventsScroll === true,
     );
     if (hasOpenSiblingThatPreventsScroll) {
       return;
     }
-
     const { isIOS, isMacSafari } = browserDetection;
     document.body.classList.remove('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
       document.body.classList.remove('overlays-scroll-lock-ios-fix');
+      window.scrollTo({
+        top:
+          parseInt(document.body.style.getPropertyValue('--scroll-y-compensation') || '0', 10) * -1,
+        behavior: 'instant',
+      });
+      document.body.style.removeProperty('--scroll-y-compensation');
     }
     if (isIOS) {
       document.documentElement.classList.remove('overlays-scroll-lock-ios-fix');
@@ -292,8 +290,8 @@ export class OverlaysManager {
    * @param {OverlayController} blockingCtrl
    */
   requestToShowOnly(blockingCtrl) {
-    const controllersToHide = this.shownList.filter(ctrl => ctrl !== blockingCtrl);
-    controllersToHide.forEach(ctrl => ctrl.hide());
+    const controllersToHide = this.shownList.filter((ctrl) => ctrl !== blockingCtrl);
+    controllersToHide.forEach((ctrl) => ctrl.hide());
     this.__blockingMap.set(blockingCtrl, controllersToHide);
   }
 
@@ -302,10 +300,10 @@ export class OverlaysManager {
    */
   retractRequestToShowOnly(blockingCtrl) {
     if (this.__blockingMap.has(blockingCtrl)) {
-      const controllersWhichGotHidden = /** @type {OverlayController[]} */ (
-        this.__blockingMap.get(blockingCtrl)
-      );
-      controllersWhichGotHidden.forEach(ctrl => ctrl.show());
+      const controllersWhichGotHidden =
+        /** @type {OverlayController[]} */
+        this.__blockingMap.get(blockingCtrl);
+      controllersWhichGotHidden.forEach((ctrl) => ctrl.show());
     }
   }
 }

package/components/overlays/src/configurations/visibility-trigger-partials/withClickInteraction.js

@@ -18,7 +18,6 @@ export function withClickInteraction() {
         }
         controller.toggle();
       }
-
       return {
         init: () => {
           controller.invokerNode?.addEventListener('click', handleOpenClosed);

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -49,7 +49,6 @@ export function withHoverInteraction({
       // completion to intercept it, as capture runs before bubble so we stop it regardless of registration order.
       /** @type {((e: Event) => void) | null} */
       let pendingClickSuppressor = null;
-
       function resetActive() {
         isFocused = false;
         isHovered = false;
@@ -89,7 +88,11 @@ export function withHoverInteraction({
           if (!controller.invokerNode?.matches(':focus-visible')) return;
         }
         const shouldOpen = isFocused || isHovered;
-        openClose({ shouldOpen, openTimeout: delayIn, closeTimeout: delayOut });
+        openClose({
+          shouldOpen,
+          openTimeout: delayIn,
+          closeTimeout: delayOut,
+        });
       }
 
       /** @param {Event} e */
@@ -102,7 +105,6 @@ export function withHoverInteraction({
         clearTimeout(pendingLongpressTimeout);
         if (event.pointerType !== 'touch') return;
         const { type } = event;
-
         if (type === 'pointerdown') {
           longpressCompleted = false;
           isLastPointerTouch = true;
@@ -110,12 +112,15 @@ export function withHoverInteraction({
             longpressCompleted = true;
             // Intercept the compatibility click the browser generates at the end of the touch sequence.
             // Capture phase ensures we run before any bubble-phase handler (e.g. a dialog opener).
-            pendingClickSuppressor = e => e.stopImmediatePropagation();
+            pendingClickSuppressor = (e) => e.stopImmediatePropagation();
             controller.invokerNode?.addEventListener('click', pendingClickSuppressor, {
-              once: true, // auto-removes after first click
+              once: true,
+              // auto-removes after first click
               capture: true,
             });
-            openClose({ shouldOpen: true });
+            openClose({
+              shouldOpen: true,
+            });
           }, longpressDuration);
         } else {
           openClose({
@@ -124,14 +129,11 @@ export function withHoverInteraction({
           });
         }
       }
-
       return {
         init: () => {
           controller.addEventListener('hide', resetActive);
-
           controller.invokerNode?.addEventListener('focusin', handleHoverAndFocus);
           controller.invokerNode?.addEventListener('focusout', handleHoverAndFocus);
-
           if (isHoverSupported) {
             controller.contentNode?.addEventListener('mouseenter', handleHoverAndFocus);
             controller.contentNode?.addEventListener('mouseleave', handleHoverAndFocus);
@@ -149,10 +151,8 @@ export function withHoverInteraction({
         },
         teardown: () => {
           controller.removeEventListener('hide', resetActive);
-
           controller.invokerNode?.removeEventListener('focusin', handleHoverAndFocus);
           controller.invokerNode?.removeEventListener('focusout', handleHoverAndFocus);
-
           if (isHoverSupported) {
             controller.contentNode?.removeEventListener('mouseenter', handleHoverAndFocus);
             controller.contentNode?.removeEventListener('mouseleave', handleHoverAndFocus);