@lion/ui 0.23.0 → 0.24.0

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

@@ -27,9 +27,8 @@ import sinon from 'sinon';
 function getGlobalOverlayCtrls() {
   return overlaysManager.list;
 }
-
 function resetOverlaysManager() {
-  overlaysManager.list.forEach(overlayCtrl => overlaysManager.remove(overlayCtrl));
+  overlaysManager.list.forEach((overlayCtrl) => overlaysManager.remove(overlayCtrl));
 }
 
 /**
@@ -49,7 +48,9 @@ async function mimicEscapePress(element) {
   }
 
   // Send the event
-  await sendKeys({ press: 'Escape' });
+  await sendKeys({
+    press: 'Escape',
+  });
   // Wait for at least a microtask, so that possible property effects are performed
   await aTimeout(0);
 }
@@ -60,53 +61,49 @@ async function mimicEscapePress(element) {
 export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
   describe(`OverlayMixin${suffix}`, () => {
     it('should not be opened by default', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       expect(el.opened).to.be.false;
       expect(el._overlayCtrl.isShown).to.be.false;
     });
-
     it('syncs opened to overlayController', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       el.opened = true;
       await el.updateComplete;
       await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
       expect(el._overlayCtrl.isShown).to.be.true;
-
       el.opened = false;
       await el.updateComplete;
       await el._overlayCtrl._hideComplete;
       expect(el.opened).to.be.false;
       expect(el._overlayCtrl.isShown).to.be.false;
     });
-
     it('syncs OverlayController to opened', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       expect(el.opened).to.be.false;
       await el._overlayCtrl.show();
       expect(el.opened).to.be.true;
-
       await el._overlayCtrl.hide();
       expect(el.opened).to.be.false;
     });
@@ -116,8 +113,11 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
      * make sure it does not conflict with the Escape handler in OverlayController.
      * */
     it('syncs opened between overlayController and OverlayMixin on Escape', async () => {
-      const config = { hidesOnEsc: true };
-      const el = /** @type {OverlayEl} */ (
+      const config = {
+        hidesOnEsc: true,
+      };
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} id="main-dialog" .config="${config}">
           <div slot="content" id="mainContent">
@@ -131,11 +131,10 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           </div>
           <button slot="invoker" id="mainInvoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       await el.updateComplete;
-      const subDialog = /** @type {OverlayEl} */ (el.querySelector('#sub-dialog'));
-      const nestedContentInput = /** @type {OverlayEl} */ (el.querySelector('#nestedContentInput'));
+      const subDialog = /** @type {OverlayEl} */ el.querySelector('#sub-dialog');
+      const nestedContentInput = /** @type {OverlayEl} */ el.querySelector('#nestedContentInput');
 
       // Note, OverlayController has Escape key listener added to "#nestedContent".
       // And the sub-dialog adds the Escape key listener to "#nestedContentInput" which is a child evelement of "#nestedContent"
@@ -148,19 +147,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           subDialog.opened = false;
         }
       });
-
       el.opened = true;
       await el.updateComplete;
       await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
       expect(el._overlayCtrl.isShown).to.be.true;
-
       subDialog.opened = true;
       await subDialog.updateComplete;
       await subDialog._overlayCtrl._showComplete;
       expect(subDialog.opened).to.be.true;
       expect(subDialog._overlayCtrl.isShown).to.be.true;
-
       await mimicEscapePress(nestedContentInput);
       expect(subDialog.opened).to.be.false;
       expect(subDialog._overlayCtrl.isShown).to.be.false;
@@ -172,7 +168,8 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
     it('does not change the body size when opened', async () => {
       const parentNode = document.createElement('div');
       parentNode.setAttribute('style', 'height: 10000px; width: 10000px;');
-      const elWithBigParent = /** @type {OverlayEl} */ (
+      const elWithBigParent =
+        /** @type {OverlayEl} */
         await fixture(
           html`
         <${tag}>
@@ -180,9 +177,10 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           <button slot="invoker">invoker button</button>
         </${tag}>
       `,
-          { parentNode },
-        )
-      );
+          {
+            parentNode,
+          },
+        );
 
       // For now, we skip this test for MacSafari, since the body.overlays-scroll-lock-ios-fix
       // class results in a scrollbar when preventsScroll is true.
@@ -190,15 +188,9 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       if (browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
         return;
       }
-
-      const elWithBigParentOffsetParent = /** @type {HTMLElement} */ (
-        elWithBigParent?.offsetParent
-      );
-
+      const elWithBigParentOffsetParent = /** @type {HTMLElement} */ elWithBigParent?.offsetParent;
       const { offsetWidth, offsetHeight } = elWithBigParentOffsetParent;
-
       await elWithBigParent._overlayCtrl.show();
-
       expect(elWithBigParent.opened).to.be.true;
       expect(elWithBigParentOffsetParent.offsetWidth).to.equal(offsetWidth);
       expect(elWithBigParentOffsetParent.offsetHeight).to.equal(offsetHeight);
@@ -206,35 +198,41 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(elWithBigParentOffsetParent.offsetWidth).to.equal(offsetWidth);
       expect(elWithBigParentOffsetParent.offsetHeight).to.equal(offsetHeight);
     });
-
     it('should respond to initially and dynamically setting the config', async () => {
-      const itEl = /** @type {OverlayEl} */ (
+      const itEl =
+        /** @type {OverlayEl} */
         await fixture(html`
-          <${tag} .config=${{ trapsKeyboardFocus: false, viewportConfig: { placement: 'top' } }}>
+          <${tag} .config=${{
+            trapsKeyboardFocus: false,
+            viewportConfig: {
+              placement: 'top',
+            },
+          }}>
             <div slot="content">content of the overlay</div>
             <button slot="invoker">invoker button</button>
           </${tag}>
-        `)
-      );
+        `);
       itEl.opened = true;
       await itEl.updateComplete;
       expect(itEl._overlayCtrl.trapsKeyboardFocus).to.be.false;
-
       await nextFrame();
-      itEl.config = { viewportConfig: { placement: 'left' } };
+      itEl.config = {
+        viewportConfig: {
+          placement: 'left',
+        },
+      };
       expect(itEl._overlayCtrl.viewportConfig.placement).to.equal('left');
     });
-
     it('fires "opened-changed" event on hide', async () => {
       const spy = sinon.spy();
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} @opened-changed="${spy}">
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       expect(spy).not.to.have.been.called;
       await el._overlayCtrl.show();
       await el.updateComplete;
@@ -248,17 +246,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(spy.callCount).to.equal(2);
       expect(el.opened).to.be.false;
     });
-
     it('fires "before-closed" event on hide', async () => {
       const beforeSpy = sinon.spy();
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} @before-closed="${beforeSpy}" opened>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       // Wait until it's done opening (handling features is async)
       await nextFrame();
       expect(beforeSpy).not.to.have.been.called;
@@ -266,36 +263,35 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(beforeSpy).to.have.been.called;
       expect(el.opened).to.be.false;
     });
-
     it('fires before-opened" event on show', async () => {
       const beforeSpy = sinon.spy();
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} @before-opened="${beforeSpy}">
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       expect(beforeSpy).not.to.have.been.called;
       await el._overlayCtrl.show();
       expect(beforeSpy).to.have.been.called;
       expect(el.opened).to.be.true;
     });
-
     it('allows to call "preventDefault()" on "before-opened"/"before-closed" events', async () => {
       function preventer(/** @type Event */ ev) {
         ev.preventDefault();
       }
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} @before-opened="${preventer}" @before-closed="${preventer}">
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
-      /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]')).click();
+      `);
+      /** @type {HTMLElement} */
+      el.querySelector('[slot="invoker"]').click();
       await nextFrame();
       expect(el.opened).to.be.false;
 
@@ -305,13 +301,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       await nextFrame();
       expect(el.opened).to.be.false;
     });
-
     it('hides content on "close-overlay" event within the content ', async () => {
       function sendCloseEvent(/** @type {Event} */ e) {
-        e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true }));
+        e.target?.dispatchEvent(
+          new Event('close-overlay', {
+            bubbles: true,
+          }),
+        );
       }
-
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} opened>
           <div slot="content">
@@ -320,8 +319,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           </div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       // @ts-ignore
       el.querySelector('[slot=content] button').click();
       await el._overlayCtrl._hideComplete;
@@ -330,50 +328,50 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
     // See https://github.com/ing-bank/lion/discussions/1095
     it('exposes "open()", "close()" and "toggle()" methods', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       expect(el.opened).to.be.false;
       el.open();
       await nextFrame();
       expect(el.opened).to.be.true;
-
       el.close();
       await nextFrame();
       expect(el.opened).to.be.false;
-
       el.toggle();
       await nextFrame();
       expect(el.opened).to.be.true;
-
       el.toggle();
       await nextFrame();
       expect(el.opened).to.be.false;
     });
-
     it('exposes "repositionOverlay()" method', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
-        <${tag} opened .config="${{ placementMode: 'local' }}">
+        <${tag} opened .config="${{
+          placementMode: 'local',
+        }}">
           <div slot="content">content</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       await OverlayController.popperModule;
       // @ts-ignore [popper-instance-access-in-test]
       sinon.spy(el._overlayCtrl._popper, 'update');
       el.repositionOverlay();
       // @ts-ignore [popper-instance-access-in-test]
       expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
-
       if (!el._overlayCtrl.isTooltip) {
-        el.config = { ...el.config, placementMode: 'global' };
+        el.config = {
+          ...el.config,
+          placementMode: 'global',
+        };
         el.repositionOverlay();
         // @ts-ignore [popper-instance-access-in-test]
         expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
@@ -382,34 +380,34 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
     /** See: https://github.com/ing-bank/lion/issues/1075 */
     it('stays open after config update', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       el.open();
       await el._overlayCtrl._showComplete;
-
-      el.config = { ...el.config, hidesOnOutsideClick: !el.config.hidesOnOutsideClick };
+      el.config = {
+        ...el.config,
+        hidesOnOutsideClick: !el.config.hidesOnOutsideClick,
+      };
       await nextFrame();
       expect(el.opened).to.be.true;
       expect(getComputedStyle(el._overlayCtrl.contentWrapperNode).display).not.to.equal('none');
     });
-
     it('does not run setup when disconnected', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         fixtureSync(html`
         <${tag}>
           <div slot="content">content</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
-
-      const parentOfEl = /** @type {HTMLDivElement} */ (el.parentElement);
+      `);
+      const parentOfEl = /** @type {HTMLDivElement} */ el.parentElement;
 
       // @ts-expect-error [allow-protected-in-tests]
       const setupSpy = sinon.spy(el, '_setupOverlayCtrl');
@@ -422,45 +420,45 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       parentOfEl.appendChild(el);
       await el.updateComplete;
       expect(setupSpy.callCount).to.equal(1);
-
       setupSpy.restore();
     });
 
     /** Prevent unnecessary reset side effects, such as show animation. See: https://github.com/ing-bank/lion/issues/1075 */
     it('does not call updateConfig on equivalent config change', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">content</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
+      `);
       el.open();
       await nextFrame();
-
       const stub = sinon.stub(el._overlayCtrl, 'updateConfig');
       stub.callsFake(() => {
         throw new Error('Unexpected config update');
       });
-
       expect(() => {
-        el.config = { ...el.config };
+        el.config = {
+          ...el.config,
+        };
       }).to.not.throw;
       stub.restore();
     });
-
     it('should not visually hide when hidesOnEsc / hidesOnOutsideEsc is not configured', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
-        <${tag} .config="${{ hidesOnEsc: false, hidesOnOutsideEsc: false }}" opened>
+        <${tag} .config="${{
+          hidesOnEsc: false,
+          hidesOnOutsideEsc: false,
+        }}" opened>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
-
-      const dialogEl = /** @type {HTMLDialogElement} */ (el._overlayCtrl.__wrappingDialogNode);
+      `);
+      const dialogEl = /** @type {HTMLDialogElement} */ el._overlayCtrl.__wrappingDialogNode;
 
       // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
@@ -469,17 +467,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
     });
-
     describe('Teardown', () => {
       it('does not teardown when moving dom nodes', async () => {
-        const el = /** @type {OverlayEl} */ (
+        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
@@ -490,31 +487,27 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         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} */ (
+        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
@@ -526,33 +519,28 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         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 = {
-            showOverlay: { type: Boolean },
+            showOverlay: {
+              type: Boolean,
+            },
           };
-
           constructor() {
             super();
-
             this.showOverlay = true;
           }
-
           get overlayEl() {
             return this.shadowRoot?.querySelector('#myOverlay');
           }
-
           render() {
             return html`${cache(
               this.showOverlay
@@ -564,15 +552,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
             )}`;
           }
         }
-
         const cachingTagName = defineCE(CachingContext);
         const cachingTag = unsafeStatic(cachingTagName);
-
-        const el = /** @type {CachingContext} */ (
+        const el =
+          /** @type {CachingContext} */
           await fixture(html`
         <${cachingTag}></${cachingTag}>
-      `)
-        );
+      `);
 
         // @ts-expect-error [allow-protected] in tests
         const teardownSpy = sinon.spy(el.overlayEl, '_teardownOverlayCtrl');
@@ -580,35 +566,32 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         const spyDisconnected = sinon.spy(el.overlayEl, '_isPermanentlyDisconnected');
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
-
         el.showOverlay = false;
         // 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.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
-
-        const elCtrl = /** @type {OverlayEl} */ (el.overlayEl)?._overlayCtrl;
-        const isCtrlRegisteredAtOverlaysManager = elCtrl.manager.list.some(ctrl => elCtrl === ctrl);
+        const elCtrl = /** @type {OverlayEl} */ el.overlayEl?._overlayCtrl;
+        const isCtrlRegisteredAtOverlaysManager = elCtrl.manager.list.some(
+          (ctrl) => elCtrl === ctrl,
+        );
         expect(isCtrlRegisteredAtOverlaysManager).to.equal(true);
       });
-
       it('teardown completes successfully when open overlay is removed from DOM', async () => {
-        const el = /** @type {OverlayEl} */ (
+        const el =
+          /** @type {OverlayEl} */
           await fixture(html`
           <${tag}>
             <div slot="content">content of the overlay</div>
             <button slot="invoker">invoker button</button>
           </${tag}>
-        `)
-        );
+        `);
 
         // 1. Open the overlay
         el.opened = true;
@@ -617,25 +600,26 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(el._overlayCtrl.isShown).to.be.true;
 
         // 2. Remove element from DOM without closing
-        /** @type {HTMLElement} */ (el.parentNode).removeChild(el);
+        /** @type {HTMLElement} */
+        el.parentNode.removeChild(el);
 
         // 3. Wait for _isPermanentlyDisconnected to resolve and teardown to complete
         await aTimeout(0);
 
         // 4. Teardown should complete without errors
         // The controller should no longer be registered
-        expect(el._overlayCtrl.manager.list.find(ctrl => ctrl === el._overlayCtrl)).to.be.undefined;
+        expect(el._overlayCtrl.manager.list.find((ctrl) => ctrl === el._overlayCtrl)).to.be
+          .undefined;
       });
-
       it('does not throw when element is removed from DOM while overlay is open', async () => {
-        const el = /** @type {OverlayEl} */ (
+        const el =
+          /** @type {OverlayEl} */
           await fixture(html`
           <${tag}>
             <div slot="content">content of the overlay</div>
             <button slot="invoker">invoker button</button>
           </${tag}>
-        `)
-        );
+        `);
 
         // 1. Open the overlay
         el.opened = true;
@@ -647,7 +631,8 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         const ctrl = el._overlayCtrl;
 
         // 3. Remove element from DOM without closing the overlay
-        /** @type {HTMLElement} */ (el.parentNode).removeChild(el);
+        /** @type {HTMLElement} */
+        el.parentNode.removeChild(el);
 
         // 4. Wait for _isPermanentlyDisconnected to resolve and teardown to complete
         await aTimeout(0);
@@ -657,23 +642,19 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         await ctrl.hide();
         expect(ctrl.isShown).to.be.false;
       });
-
       it('correctly removes event listeners when disconnected from dom', async () => {
-        const el = /** @type {OverlayEl} */ (
+        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,
@@ -698,16 +679,15 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       });
     });
   });
-
   describe(`OverlayMixin${suffix} nested`, () => {
     // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
     // Not sure why this "bug" happens...
     beforeEach(() => {
       resetOverlaysManager();
     });
-
     it('supports nested overlays', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} id="main-dialog">
           <div slot="content" id="mainContent">
@@ -721,55 +701,48 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           </div>
           <button slot="invoker" id="mainInvoker">invoker button</button>
         </${tag}>
-      `)
-      );
-
+      `);
       if (el._overlayCtrl.placementMode === 'global') {
         expect(getGlobalOverlayCtrls().length).to.equal(2);
       }
-
       el.opened = true;
       await aTimeout(0);
       expect(el._overlayCtrl.contentNode).to.be.displayed;
-      const nestedOverlayEl = /** @type {OverlayEl} */ (
-        el._overlayCtrl.contentNode.querySelector(tagString)
-      );
+      const nestedOverlayEl =
+        /** @type {OverlayEl} */
+        el._overlayCtrl.contentNode.querySelector(tagString);
       nestedOverlayEl.opened = true;
       await aTimeout(0);
       expect(nestedOverlayEl._overlayCtrl.contentNode).to.be.displayed;
     });
-
     it('[global] allows for moving of the element', async () => {
-      const el = /** @type {OverlayEl} */ (
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag}>
           <div slot="content" id="nestedContent">content of the nested overlay</div>
           <button slot="invoker">invoker nested</button>
         </${tag}>
-      `)
-      );
+      `);
       if (el._overlayCtrl.placementMode === 'global') {
         expect(getGlobalOverlayCtrls().length).to.equal(1);
-
-        const moveTarget = /** @type {OverlayEl} */ (await fixture('<div id="target"></div>'));
+        const moveTarget = /** @type {OverlayEl} */ await fixture('<div id="target"></div>');
         moveTarget.appendChild(el);
         await el.updateComplete;
-
         expect(getGlobalOverlayCtrls().length).to.equal(1);
       }
     });
-
     it('reconstructs the overlay when disconnected and reconnected to DOM (support for nested overlay nodes)', async () => {
-      const nestedEl = /** @type {OverlayEl} */ (
+      const nestedEl =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} id="nest">
           <div slot="content" id="nestedContent">content of the nested overlay</div>
           <button slot="invoker">invoker nested</button>
         </${tag}>
-      `)
-      );
-
-      const el = /** @type {OverlayEl} */ (
+      `);
+      const el =
+        /** @type {OverlayEl} */
         await fixture(html`
         <${tag} id="main">
           <div slot="content" id="mainContent">
@@ -778,19 +751,17 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           </div>
           <button slot="invoker">invoker button</button>
         </${tag}>
-      `)
-      );
-
+      `);
       if (el._overlayCtrl.placementMode === 'global') {
         // Find the outlets that are not backdrop outlets
         expect(getGlobalOverlayCtrls().length).to.equal(2);
         // Check that the last container is the nested one with the intended content
         expect(el.contains(nestedEl)).to.be.true;
       } else {
-        const contentNode = /** @type {HTMLElement} */ (
+        const contentNode =
+          /** @type {HTMLElement} */
           // @ts-ignore [allow-protected] in tests
-          el._overlayContentNode.querySelector('#nestedContent')
-        );
+          el._overlayContentNode.querySelector('#nestedContent');
         expect(contentNode).to.not.be.null;
         expect(contentNode.innerText).to.equal('content of the nested overlay');
       }