@lion/ui 0.9.1 → 0.10.1

package/components/overlays/src/OverlayController.js

@@ -151,6 +151,7 @@ export class OverlayController extends EventTarget {
       hidesOnOutsideEsc: false,
       hidesOnOutsideClick: false,
       isTooltip: false,
+      isAlertDialog: false,
       invokerRelation: 'description',
       visibilityTriggerFunction: undefined,
       handlesAccessibility: false,
@@ -381,6 +382,14 @@ export class OverlayController extends EventTarget {
     return /** @type {boolean} */ (this.config?.isTooltip);
   }
 
+  /**
+   * The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow
+   * to communicate an important message and require a response.
+   */
+  get isAlertDialog() {
+    return /** @type {boolean} */ (this.config?.isAlertDialog);
+  }
+
   /**
    * By default, the tooltip content is a 'description' for the invoker (uses aria-describedby).
    * Setting this property to 'label' makes the content function as a label (via aria-labelledby)
@@ -611,6 +620,10 @@ export class OverlayController extends EventTarget {
     });
     // @ts-ignore
     wrappingDialogElement.open = true;
+    if (this.isTooltip) {
+      // needed to prevent tooltip getting focus in Safari and Firefox
+      wrappingDialogElement.setAttribute('tabindex', '-1');
+    }
 
     this.__wrappingDialogNode.style.display = 'none';
     this.contentWrapperNode.style.zIndex = '1';
@@ -672,7 +685,10 @@ export class OverlayController extends EventTarget {
         if (this.invokerNode && !isModal) {
           this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
         }
-        if (!this.contentNode.getAttribute('role')) {
+        if (this.isAlertDialog) {
+          this.contentNode.setAttribute('role', 'alertdialog');
+        } else if (!this.contentNode.getAttribute('role')) {
+          // N.B. if we did not explicitly set `isTooltip` or `isAlertDialog`, a role potentially already provided by a user (like 'listbox') takes precedence
           this.contentNode.setAttribute('role', 'dialog');
         }
       }
@@ -1191,9 +1207,8 @@ export class OverlayController extends EventTarget {
     const hasPressedInside =
       event.composedPath().includes(this.contentNode) ||
       deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
-    if (!hasPressedInside) {
-      this.hide();
-    }
+    if (hasPressedInside) return;
+    this.hide();
   };
 
   /**
@@ -1206,7 +1221,7 @@ export class OverlayController extends EventTarget {
       if (this.invokerNode) {
         this.invokerNode.addEventListener('keyup', this.__escKeyHandler);
       }
-    } else if (phase === 'hide') {
+    } else if (phase === 'hide' || phase === 'teardown') {
       this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.removeEventListener('keyup', this.__escKeyHandler);
@@ -1221,7 +1236,7 @@ export class OverlayController extends EventTarget {
   _handleHidesOnOutsideEsc({ phase }) {
     if (phase === 'show') {
       document.addEventListener('keyup', this.#outsideEscKeyHandler);
-    } else if (phase === 'hide') {
+    } else if (phase === 'hide' || phase === 'teardown') {
       document.removeEventListener('keyup', this.#outsideEscKeyHandler);
     }
   }

package/components/overlays/src/OverlayMixin.js

@@ -24,6 +24,8 @@ export const OverlayMixinImplementation = superclass =>
       };
     }
 
+    #hasSetup = false;
+
     constructor() {
       super();
       /**
@@ -173,22 +175,23 @@ export const OverlayMixinImplementation = superclass =>
       }
     }
 
-    /**
-     * @param {import('lit-element').PropertyValues } changedProperties
-     */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
+    connectedCallback() {
+      super.connectedCallback();
 
-      this._setupOverlayCtrl();
+      this.updateComplete.then(() => {
+        if (this.#hasSetup) return;
+        this._setupOverlayCtrl();
+        this.#hasSetup = true;
+      });
     }
 
     async disconnectedCallback() {
       super.disconnectedCallback();
 
-      if (!this._overlayCtrl) return;
-      if (await this.#isMovingInDom()) return;
-
-      this._teardownOverlayCtrl();
+      if (await this._isPermanentlyDisconnected()) {
+        this._teardownOverlayCtrl();
+        this.#hasSetup = false;
+      }
     }
 
     /**
@@ -238,6 +241,8 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @protected */
     _setupOverlayCtrl() {
+      if (this._overlayCtrl) return;
+
       /** @type {OverlayController} */
       this._overlayCtrl = this._defineOverlay({
         contentNode: this._overlayContentNode,
@@ -253,11 +258,12 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @protected */
     _teardownOverlayCtrl() {
+      if (!this._overlayCtrl) return;
+
       this._teardownOpenCloseListeners();
       this.__teardownSyncFromOverlayController();
 
-      /** @type {OverlayController} */
-      (this._overlayCtrl).teardown();
+      /** @type {OverlayController} */ (this._overlayCtrl).teardown();
     }
 
     /**
@@ -396,9 +402,9 @@ export const OverlayMixinImplementation = superclass =>
      * Before we decide to teardown, let's wait to see if we were not just moving nodes around.
      * @return {Promise<boolean>}
      */
-    async #isMovingInDom() {
+    async _isPermanentlyDisconnected() {
       await this.updateComplete;
-      return this.isConnected;
+      return !this.isConnected;
     }
   };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/test/OverlayController.test.js

@@ -103,12 +103,12 @@ const withLocalTestConfig = () =>
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
   // Assert valid fixure
-  const isValid =
-    (parentContent.id === 'parent-overlay--hidesOnEsc' ||
-      parentContent.id === 'parent-overlay--hidesOnOutsideEsc') &&
-    (childContent.id === 'child-overlay--hidesOnEsc' ||
-      childContent.id === 'child-overlay--hidesOnOutsideEsc');
-  if (!isValid) {
+  const isValidFixture =
+    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
+      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
+    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
+      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
+  if (!isValidFixture) {
     throw new Error('Provide a valid fixture');
   }
 
@@ -117,8 +117,8 @@ async function createNestedEscControllers(parentContent) {
     shadowRootParent.appendChild(childContent);
   }
 
-  const parentHasOutsideOnEsc = parentContent.id === 'parent-overlay--hidesOnOutsideEsc';
-  const childHasOutsideOnEsc = childContent.id === 'child-overlay--hidesOnOutsideEsc';
+  const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
+  const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
   const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
   const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
@@ -787,6 +787,9 @@ describe('OverlayController', () => {
 
           expect(parentOverlay.isShown).to.be.false;
           expect(childOverlay.isShown).to.be.true;
+
+          await childOverlay.teardown();
+          await parentOverlay.teardown();
         });
 
         it('on [Escape] press outside overlays: parent stays shown, child hides', async () => {
@@ -1873,6 +1876,22 @@ describe('OverlayController', () => {
     it.skip('adds attributes inert and aria-hidden="true" on all siblings of rootNode if an overlay is shown', async () => {});
     it.skip('disables pointer events and selection on inert elements', async () => {});
 
+    describe('Alert dialog', () => {
+      it('sets role="alertdialog" when isAlertDialog is set', async () => {
+        const invokerNode = /** @type {HTMLElement} */ (
+          await fixture('<div role="button">invoker</div>')
+        );
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          handlesAccessibility: true,
+          isAlertDialog: true,
+          invokerNode,
+        });
+
+        expect(ctrl.contentNode?.getAttribute('role')).to.equal('alertdialog');
+      });
+    });
+
     describe('Tooltip', () => {
       it('adds [aria-describedby] on invoker', async () => {
         const invokerNode = /** @type {HTMLElement} */ (
@@ -1919,6 +1938,19 @@ describe('OverlayController', () => {
         expect(ctrl.contentNode.getAttribute('role')).to.equal('tooltip');
       });
 
+      it('adds tabindex="-1" to the wrappingDialog element', async () => {
+        const invokerNode = /** @type {HTMLElement} */ (
+          await fixture('<div role="button">invoker</div>')
+        );
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          handlesAccessibility: true,
+          isTooltip: true,
+          invokerNode,
+        });
+        expect(ctrl.__wrappingDialogNode?.getAttribute('tabindex')).to.equal('-1');
+      });
+
       describe('Teardown', () => {
         it('restores [role] on dialog content', async () => {
           const invokerNode = /** @type {HTMLElement} */ (

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -1,18 +1,25 @@
-import { expect, fixture, html, nextFrame, aTimeout } from '@open-wc/testing';
-
-import sinon from 'sinon';
+import {
+  unsafeStatic,
+  nextFrame,
+  aTimeout,
+  defineCE,
+  fixture,
+  expect,
+  html,
+} from '@open-wc/testing';
 import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
-
-import '@lion/ui/define/lion-dialog.js';
 import { browserDetection } from '@lion/ui/core.js';
+import { cache } from 'lit/directives/cache.js';
+import '@lion/ui/define/lion-dialog.js';
+import { LitElement } from 'lit';
+import sinon from 'sinon';
 
 /**
- * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
- * @typedef {import('../types/OverlayMixinTypes.js').OverlayHost} OverlayHost
- * @typedef {import('../types/OverlayMixinTypes.js').OverlayMixin} OverlayMixin
- * @typedef {import('lit').LitElement} LitElement
  * @typedef {LitElement & OverlayHost & {_overlayCtrl:OverlayController}} OverlayEl
+ * @typedef {import('../types/OverlayMixinTypes.js').OverlayMixin} OverlayMixin
+ * @typedef {import('../types/OverlayMixinTypes.js').OverlayHost} OverlayHost
+ * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
 
 function getGlobalOverlayCtrls() {
@@ -331,6 +338,173 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       }).to.not.throw;
       stub.restore();
     });
+
+    describe('Teardown', () => {
+      it('does not teardown when moving dom nodes', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+        );
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el, '_isPermanentlyDisconnected');
+
+        // move around in dom
+        const newParent = document.createElement('div');
+        document.body.appendChild(newParent);
+        newParent.appendChild(el);
+        expect(spyDisconnected.callCount).to.equal(1);
+
+        const otherParent = document.createElement('div');
+        document.body.appendChild(otherParent);
+        otherParent.appendChild(el);
+        await aTimeout(0);
+
+        expect(spyDisconnected.callCount).to.equal(2);
+        expect(teardownSpy.callCount).to.equal(0);
+
+        // simulate a permanent disconnect
+        otherParent.removeChild(el);
+        await aTimeout(0);
+
+        expect(teardownSpy.callCount).to.equal(1);
+      });
+
+      it('allows to disconnect and reconnect later', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+        );
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el, '_isPermanentlyDisconnected');
+        // @ts-expect-error [allow-protected] in tests
+        const setupSpy = sinon.spy(el, '_setupOverlayCtrl');
+
+        // 'permanently' disconnect (although we will reconnect later)
+        const offlineParent = document.createElement('div');
+        offlineParent.appendChild(el);
+        await aTimeout(0);
+
+        expect(spyDisconnected.callCount).to.equal(1);
+        expect(teardownSpy.callCount).to.equal(1);
+
+        // reconnect
+        document.body.appendChild(offlineParent);
+        await aTimeout(0);
+
+        expect(setupSpy.callCount).to.equal(1);
+      });
+
+      it('works with cache directive when reconnected', async () => {
+        class CachingContext extends LitElement {
+          static properties = {
+            switched: { type: Boolean },
+          };
+
+          constructor() {
+            super();
+
+            this.switched = false;
+          }
+
+          get overlayEl() {
+            return this.shadowRoot?.querySelector('#myOverlay');
+          }
+
+          render() {
+            return html`${cache(
+              this.switched
+                ? html`something else`
+                : html`<${tag} id="myOverlay">
+              <div slot="content">content b</div>
+              <button slot="invoker">invoker button b</button>
+            </${tag}>`,
+            )}`;
+          }
+        }
+
+        const cachingTagName = defineCE(CachingContext);
+        const cachingTag = unsafeStatic(cachingTagName);
+
+        const el = /** @type {CachingContext} */ (
+          await fixture(html`
+        <${cachingTag}></${cachingTag}>
+      `)
+        );
+
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el.overlayEl, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el.overlayEl, '_isPermanentlyDisconnected');
+        // @ts-expect-error [allow-protected] in tests
+        const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
+
+        el.switched = true;
+        // render the new content
+        await el.updateComplete;
+        // wait for the teardown to complete
+        await el.updateComplete;
+
+        expect(spyDisconnected.callCount).to.equal(1);
+        expect(teardownSpy.callCount).to.equal(1);
+        expect(setupSpy.callCount).to.equal(0);
+
+        el.switched = false;
+        await el.updateComplete;
+
+        expect(setupSpy.callCount).to.equal(1);
+      });
+
+      it('correctly removes event listeners when disconnected from dom', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+          <${tag}>
+            <div slot="content">content</div>
+            <button slot="invoker">invoker button</button>
+          </${tag}>
+        `)
+        );
+
+        const eventRemoveSpy = sinon.spy(el._overlayCtrl, 'removeEventListener');
+        el.parentNode?.removeChild(el);
+        await el.updateComplete;
+
+        expect(eventRemoveSpy.callCount).to.equal(0);
+
+        await el.updateComplete;
+        const hasOneInstanceFor = (
+          /** @type {string} */ eventName,
+          /** @type {any[][]} */ eventsToSearch,
+          /** @type {string} */ methodToRemove,
+        ) =>
+          Boolean(
+            eventsToSearch.filter(
+              ([eventToSearch, methodToSearch]) =>
+                eventToSearch === eventName && methodToSearch === methodToRemove,
+            ).length,
+          );
+
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__onOverlayCtrlShow)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__onOverlayCtrlHide)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__onBeforeShow)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('before-hide', eventRemoveSpy.args, el.__onBeforeHide)).to.be.true;
+      });
+    });
   });
 
   describe(`OverlayMixin${suffix} nested`, () => {
@@ -388,6 +562,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         const moveTarget = /** @type {OverlayEl} */ (await fixture('<div id="target"></div>'));
         moveTarget.appendChild(el);
         await el.updateComplete;
+
         expect(getGlobalOverlayCtrls().length).to.equal(1);
       }
     });

package/components/overlays/types/ArrowMixinTypes.ts

@@ -4,25 +4,34 @@ import { Options as PopperOptions, State } from '@popperjs/core/lib/popper.js';
 import { OverlayConfig } from './OverlayConfig.js';
 
 export declare class ArrowHost {
-  static get properties(): {
+  static properties: {
     hasArrow: {
       type: BooleanConstructor;
       reflect: boolean;
       attribute: string;
     };
   };
+
   hasArrow: boolean;
+
   repositionComplete: Promise<void>;
 
-  static get styles(): CSSResultArray;
+  static styles: CSSResultArray;
 
   render(): TemplateResult;
+
   protected _arrowTemplate(): TemplateResult;
+
   protected _arrowNodeTemplate(): TemplateResult;
+
   protected _defineOverlayConfig(): OverlayConfig;
+
   protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+
   private __setupRepositionCompletePromise(): void;
+
   get _arrowNode(): Element | null;
+
   private __syncFromPopperState(data: Partial<State>): void;
 }
 

package/components/overlays/types/OverlayConfig.ts

@@ -1,5 +1,20 @@
 import { Options } from '@popperjs/core';
 
+export type ViewportPlacement =
+  | 'center'
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'right'
+  | 'bottom-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'left';
+
+
+export interface ViewportConfig {
+  placement: ViewportPlacement;
+}
 export interface OverlayConfig {
   // Positioning
 
@@ -26,7 +41,7 @@ export interface OverlayConfig {
   contentNode?: HTMLElement;
   /** The wrapper element of contentNode, used to supply inline positioning styles. When a Popper arrow is needed, it acts as parent of the arrow node. Will be automatically created for global and non projected contentNodes. Required when used in shadow dom mode or when Popper arrow is supplied. Essential for allowing webcomponents to style their projected contentNodes */
   contentWrapperNode?: HTMLElement;
-  /** The element that is placed behin the contentNode. When not provided and `hasBackdrop` is true, a backdropNode will be automatically created */
+  /** The element that is placed behind the contentNode. When not provided and `hasBackdrop` is true, a backdropNode will be automatically created */
   backdropNode?: HTMLElement;
   /** The element that should be called `.focus()` on after dialog closes */
   elementToFocusAfterHide?: HTMLElement;
@@ -44,7 +59,7 @@ export interface OverlayConfig {
   trapsKeyboardFocus?: boolean;
   /** Hides the overlay when pressing [ esc ] */
   hidesOnEsc?: boolean;
-  /** Hides the overlay when clicking next to it, exluding invoker */
+  /** Hides the overlay when clicking next to it, excluding invoker */
   hidesOnOutsideClick?: boolean;
   /** Hides the overlay when pressing esc, even when contentNode has no focus */
   hidesOnOutsideEsc?: boolean;
@@ -67,6 +82,8 @@ export interface OverlayConfig {
 
   /** Has a totally different interaction- and accessibility pattern from all other overlays. Will behave as role="tooltip" element instead of a role="dialog" element */
   isTooltip?: boolean;
+  /** The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response. */
+  isAlertDialog?: boolean;
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';
 
@@ -80,17 +97,4 @@ export interface OverlayConfig {
   visibilityTriggerFunction?: Function;
 }
 
-export type ViewportPlacement =
-  | 'center'
-  | 'top-left'
-  | 'top'
-  | 'top-right'
-  | 'right'
-  | 'bottom-right'
-  | 'bottom'
-  | 'bottom-left'
-  | 'left';
 
-export interface ViewportConfig {
-  placement: ViewportPlacement;
-}

package/components/select-rich/src/LionSelectRich.js

@@ -423,6 +423,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
+
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -434,11 +435,12 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    */
   async _alignInvokerWidth() {
+    await this.updateComplete;
+
     if (!this._overlayCtrl?.content) {
       return;
     }
 
-    await this.updateComplete;
     const initContentDisplay = this._overlayCtrl.content.style.display;
     const initContentMinWidth = this._overlayCtrl.contentWrapperNode.style.minWidth;
     const initContentWidth = this._overlayCtrl.contentWrapperNode.style.width;

package/components/select-rich/test/lion-select-rich.test.js

@@ -7,6 +7,7 @@ import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
 import { LitElement } from 'lit';
+import sinon from 'sinon';
 import {
   fixture as _fixture,
   unsafeStatic,
@@ -711,6 +712,49 @@ describe('lion-select-rich', () => {
     });
   });
 
+  describe('Teardown', () => {
+    it('correctly removes event listeners when disconnected from dom', async () => {
+      const el = await fixture(html`
+        <lion-select-rich label="age">
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20}>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+
+      const { _overlayCtrl } = getSelectRichMembers(el);
+      const eventRemoveSpy = sinon.spy(_overlayCtrl, 'removeEventListener');
+
+      el.parentNode?.removeChild(el);
+
+      expect(eventRemoveSpy.callCount).to.equal(0);
+
+      await el.updateComplete;
+      expect(eventRemoveSpy.callCount).to.equal(0);
+
+      await el.updateComplete;
+
+      const hasOneInstanceFor = (
+        /** @type {string} */ eventName,
+        /** @type {any[][]} */ eventsToSearch,
+        /** @type {string} */ methodToRemove,
+      ) =>
+        Boolean(
+          eventsToSearch.filter(
+            ([eventToSearch, methodToSearch]) =>
+              eventToSearch === eventName && methodToSearch === methodToRemove,
+          ).length,
+        );
+
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__overlayOnShow)).to.be.true;
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__overlayBeforeShow)).to.be
+        .true;
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__overlayOnHide)).to.be.true;
+    });
+  });
+
   describe('Subclassers', () => {
     it('allows to override the type of overlay', async () => {
       const mySelectTagString = defineCE(