@lion/ui 0.16.1 → 0.17.0-menu-system.1

package/components/overlays/src/OverlayMixin.js

@@ -2,6 +2,18 @@ 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
+ */
+
+/** @type {PostProcessor[]} */
+const overlayMixinPostProcessors = [];
+
+/** @param {PostProcessor} postProcessor */
+export function _addOverlayMixinPostProcessor(postProcessor) {
+  overlayMixinPostProcessors.push(postProcessor);
+}
+
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
@@ -16,15 +28,12 @@ import { isEqualConfig } from './utils/is-equal-config.js';
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-export const OverlayMixinImplementation = superclass =>
+export const OverlayMixinImplementation = superclass => {
   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: {
-          type: Boolean,
-          reflect: true,
-        },
+        opened: { type: Boolean, reflect: true },
       };
     }
 
@@ -50,6 +59,17 @@ export const OverlayMixinImplementation = superclass =>
       this.open = this.open.bind(this);
       /** @type {EventListener} */
       this.close = this.close.bind(this);
+
+      // // By default, we go for disclosure behavior
+      // // TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
+      // // Take inspiration from VisibilityToggleCtrl of portal elements
+      // /**
+      //  * Terminology aligned with https://open-ui.org/components/openable.explainer/
+      //  * @type {'disclosure'|'overlay'}
+      //  */
+      // this.openableMode = 'disclosure';
+
+      // allow hybrid disclosure/overlay components
     }
 
     get config() {
@@ -58,6 +78,7 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @param {OverlayConfig} value */
     set config(value) {
+      // TODO: built-in in overlayCtrl now... delete here
       const shouldUpdate = !isEqualConfig(this.config, value);
 
       if (this._overlayCtrl && shouldUpdate) {
@@ -149,6 +170,8 @@ 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
        */
@@ -206,11 +229,11 @@ export const OverlayMixinImplementation = superclass =>
     // @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')
-      );
-    }
+    // get _overlayInvokerNode() {
+    //   return /** @type {HTMLElement | undefined} */ (
+    //     Array.from(this.children).find(child => child.slot === 'invoker')
+    //   );
+    // }
 
     /**
      * @overridable
@@ -244,13 +267,46 @@ export const OverlayMixinImplementation = superclass =>
       );
     }
 
+    /**
+     * @param {Element} focusableElOrWrapper
+     * @returns {Element|null}
+     */
+    static _getFocusableInvokerEl(focusableElOrWrapper) {
+      // return focusableElOrWrapper;
+      return (
+        focusableElOrWrapper &&
+        (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+          ? focusableElOrWrapper
+          : focusableElOrWrapper.querySelector('[role=button], button'))
+      );
+    }
+
+    get _overlayInvokerNode() {
+      const ctor = /** @type {typeof OverlayMixin} */ (this.constructor);
+      if (!this.__invokerNode) {
+        const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+        if (slottedNode) {
+          this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+        } else {
+          // Look for preceeding sibling with [data-invoker] attribute, and try to find a focusable element in it (either itself or a child)
+          this.__invokerNode =
+            this.previousElementSibling?.hasAttribute('data-invoker') &&
+            ctor._getFocusableInvokerEl(this.previousElementSibling);
+        }
+      }
+      return this.__invokerNode;
+    }
+
     /** @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,
       };
@@ -270,6 +326,8 @@ 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();
@@ -418,5 +476,11 @@ export const OverlayMixinImplementation = superclass =>
       await this.updateComplete;
       return !this.isConnected;
     }
-  };
+  }
+  for (const postProcessor of overlayMixinPostProcessors) {
+    postProcessor(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

@@ -3,6 +3,7 @@ import { browserDetection } from '@lion/ui/core.js';
 /**
  * @typedef {import('lit').CSSResult} CSSResult
  * @typedef {import('./OverlayController.js').OverlayController} OverlayController
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayPhase} OverlayPhase
  */
 
 import { overlayDocumentStyle } from './overlayDocumentStyle.js';
@@ -53,6 +54,31 @@ export class OverlaysManager {
      * @private
      */
     this.__blockingMap = new WeakMap();
+    /**
+     * @private
+     * @type {{
+     *   preventScrollCount: number;
+     *   clientWidth: number | undefined;
+     *   clientHeight: number | undefined;
+     *   marginRightInline: string | undefined;
+     *   marginBottomInline: string | undefined;
+     *   marginRight: number | undefined;
+     *   marginBottom: number | undefined;
+     * }}
+     */
+    this.__bodySizeVars = {
+      preventScrollCount: 0,
+      clientWidth: undefined,
+      clientHeight: undefined,
+      marginRightInline: undefined,
+      marginBottomInline: undefined,
+      marginRight: undefined,
+      marginBottom: undefined,
+    };
+
+    this.__forTesting = {
+      bodySizeVars: this.__bodySizeVars,
+    };
 
     if (!OverlaysManager.__globalStyleNode) {
       OverlaysManager.__globalStyleNode = OverlaysManager.__createGlobalStyleNode();
@@ -119,6 +145,13 @@ export class OverlaysManager {
     this.__list = [];
     this.__shownList = [];
     this._siblingsInert = false;
+    this.__bodySizeVars.preventScrollCount = 0;
+    this.__bodySizeVars.clientWidth = undefined;
+    this.__bodySizeVars.clientHeight = undefined;
+    this.__bodySizeVars.marginRightInline = undefined;
+    this.__bodySizeVars.marginBottomInline = undefined;
+    this.__bodySizeVars.marginRight = undefined;
+    this.__bodySizeVars.marginBottom = undefined;
 
     if (OverlaysManager.__globalStyleNode) {
       document.head.removeChild(
@@ -136,6 +169,71 @@ export class OverlaysManager {
 
   /** PreventsScroll */
 
+  /**
+   * @param {{ phase: OverlayPhase }} config
+   */
+  requestToKeepBodySize({ phase }) {
+    switch (phase) {
+      case 'before-show':
+        // Tracks the amount of active preventsScroll overlays.
+        // Only the first overlay captures body metrics and only the last one restores them.
+        if (this.__bodySizeVars.preventScrollCount === 0) {
+          this.__bodySizeVars.clientWidth = document.body.clientWidth;
+          this.__bodySizeVars.clientHeight = document.body.clientHeight;
+          this.__bodySizeVars.marginRightInline = document.body.style.marginRight;
+          this.__bodySizeVars.marginBottomInline = document.body.style.marginBottom;
+        }
+        this.__bodySizeVars.preventScrollCount += 1;
+        break;
+      case 'show': {
+        if (this.__bodySizeVars.preventScrollCount === 1) {
+          if (window.getComputedStyle) {
+            const bodyStyle = window.getComputedStyle(document.body);
+            this.__bodySizeVars.marginRight = parseInt(
+              bodyStyle.getPropertyValue('margin-right'),
+              10,
+            );
+            this.__bodySizeVars.marginBottom = parseInt(
+              bodyStyle.getPropertyValue('margin-bottom'),
+              10,
+            );
+          } else {
+            this.__bodySizeVars.marginRight = 0;
+            this.__bodySizeVars.marginBottom = 0;
+          }
+          const scrollbarWidth =
+            document.body.clientWidth - /** @type {number} */ (this.__bodySizeVars.clientWidth);
+          const scrollbarHeight =
+            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
+          if (window.CSS?.number && document.body.attributeStyleMap?.set) {
+            // @ts-ignore - CSS Typed OM not fully typed
+            document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
+            // @ts-ignore - CSS Typed OM not fully typed
+            document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
+          } else {
+            document.body.style.marginRight = `${newMarginRight}px`;
+            document.body.style.marginBottom = `${newMarginBottom}px`;
+          }
+        }
+        break;
+      }
+      case 'hide':
+      case 'teardown':
+        if (this.__bodySizeVars.preventScrollCount > 0) {
+          this.__bodySizeVars.preventScrollCount -= 1;
+          if (this.__bodySizeVars.preventScrollCount === 0) {
+            document.body.style.marginRight = this.__bodySizeVars.marginRightInline || '';
+            document.body.style.marginBottom = this.__bodySizeVars.marginBottomInline || '';
+          }
+        }
+        break;
+      /* no default */
+    }
+  }
+
   // eslint-disable-next-line class-methods-use-this
   requestToPreventScroll() {
     const { isIOS, isMacSafari } = browserDetection;

package/components/overlays/src/overlayShadowDomStyle.js

@@ -113,11 +113,11 @@ export const overlayShadowDomStyle = css`
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
-    .overlays .overlays__backdrop--animation-in {
+    .overlays__backdrop--animation-in {
       animation: overlays-backdrop-fade-in 1ms;
     }
 
-    .overlays .overlays__backdrop--animation-out {
+    .overlays__backdrop--animation-out {
       animation: overlays-backdrop-fade-out 1ms;
     }
   }

package/components/overlays/src/utils/adopt-styles.js

@@ -56,7 +56,8 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    const nonce = window['litNonce'];
+    // @ts-ignore - litNonce is a custom property
+    const nonce = window.litNonce;
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }

package/components/overlays/src/utils/get-focusable-elements.js

@@ -8,6 +8,7 @@ import { isVisible } from './is-visible.js';
 import { sortByTabIndex } from './sort-by-tabindex.js';
 
 // IE11 supports matches as 'msMatchesSelector'
+/** @type {'matches' | 'msMatchesSelector'} */
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
 /**
@@ -16,11 +17,14 @@ const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelec
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
+  // @ts-ignore - msMatchesSelector is legacy
   if (element[matchesFunc]('input, select, textarea, button, object')) {
+    // @ts-ignore
     return element[matchesFunc](':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
+  // @ts-ignore
   return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 

package/components/overlays/src/utils/is-equal-config.js

@@ -12,13 +12,17 @@
  */
 export function isEqualConfig(a, b) {
   if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    if (typeof a === 'function' && typeof b === 'function') {
+      return /** @type {Function} */ (a).toString() === /** @type {Function} */ (b).toString();
+    }
     return a === b;
   }
-  const aProps = Object.keys(a);
-  const bProps = Object.keys(b);
-  if (aProps.length !== bProps.length) {
-    return false;
+  if (a instanceof Node && b instanceof Node) {
+    return a === b;
   }
-  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
-  return aProps.every(isEqual);
+
+  return Array.from(new Set([...Object.keys(a), ...Object.keys(b)])).every(prop =>
+    // @ts-ignore - dynamic property access
+    isEqualConfig(a[prop], b[prop], prop),
+  );
 }

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

@@ -283,8 +283,9 @@ describe('OverlayController', () => {
             contentNode,
           });
         };
+
         expect(createOverlayController).to.throw(
-          '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
+          '[OverlayController] Could not find a render target, makes sure contentNode has a parent element (or contentWrapperNode is connected)',
         );
       });
 
@@ -403,7 +404,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
           });
         });
 
@@ -425,7 +426,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div id="content">non projected</div>
+                  <div data-content="" id="content">non projected</div>
                 </div>
               </dialog>
           `,
@@ -1384,6 +1385,109 @@ describe('OverlayController', () => {
         await ctrl1.hide();
         expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock');
       });
+
+      it('does not accumulate body margins when nested overlays have preventsScroll', async () => {
+        const ctrl0 = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+        const ctrl1 = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+
+        const originalMarginRight = document.body.style.marginRight;
+
+        await ctrl0.show();
+        const marginAfterFirst = document.body.style.marginRight;
+
+        await ctrl1.show();
+        const marginAfterSecond = document.body.style.marginRight;
+
+        // The margin should NOT increase further when second overlay opens
+        expect(marginAfterSecond).to.equal(marginAfterFirst);
+
+        await ctrl1.hide();
+        // After hiding second, first still prevents scroll — margin stays
+        expect(document.body.style.marginRight).to.equal(marginAfterFirst);
+
+        await ctrl0.hide();
+        // After hiding all, original margin is restored
+        expect(document.body.style.marginRight).to.equal(originalMarginRight);
+      });
+
+      it('restores body margin when overlay with preventsScroll is torn down while shown', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+
+        const originalMarginRight = document.body.style.marginRight;
+
+        await ctrl.show();
+        const marginAfterShow = document.body.style.marginRight;
+        // Margin should be set after show
+        expect(marginAfterShow).to.not.equal(originalMarginRight);
+
+        ctrl.teardown();
+        // Margin should be restored after teardown
+        expect(document.body.style.marginRight).to.equal(originalMarginRight);
+      });
+
+      it('does not break body margin when teardown() is called on a hidden overlay', async () => {
+        const ctrl0 = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+        const ctrl1 = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+
+        const originalMarginRight = document.body.style.marginRight;
+
+        // Show first overlay
+        await ctrl0.show();
+        const marginAfterFirst = document.body.style.marginRight;
+        expect(marginAfterFirst).to.not.equal(originalMarginRight);
+
+        // Teardown second overlay that was never shown
+        ctrl1.teardown();
+        // Margin should still be set by first overlay
+        expect(document.body.style.marginRight).to.equal(marginAfterFirst);
+
+        // Hide first overlay
+        await ctrl0.hide();
+        // Now margin should be restored
+        expect(document.body.style.marginRight).to.equal(originalMarginRight);
+      });
+
+      it('does not break body margin when updateConfig() is called on a hidden overlay', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+
+        const originalMarginRight = document.body.style.marginRight;
+
+        // updateConfig calls teardown internally
+        ctrl.updateConfig({
+          ...withGlobalTestConfig(),
+          preventsScroll: true,
+        });
+
+        // Margin should not be affected
+        expect(document.body.style.marginRight).to.equal(originalMarginRight);
+
+        // Show after updateConfig
+        await ctrl.show();
+        const marginAfterShow = document.body.style.marginRight;
+        expect(marginAfterShow).to.not.equal(originalMarginRight);
+
+        // Hide should restore
+        await ctrl.hide();
+        expect(document.body.style.marginRight).to.equal(originalMarginRight);
+      });
     });
 
     describe('hasBackdrop', () => {
@@ -2180,15 +2284,24 @@ describe('OverlayController', () => {
     it('should not run with scroll prevention', async () => {
       await overlayControllerNoPrevent.show();
 
-      expect(overlayControllerNoPrevent.__bodyMarginRightInline).to.equal(undefined);
-      expect(overlayControllerNoPrevent.__bodyMarginRight).to.equal(undefined);
+      expect(
+        overlayControllerNoPrevent.manager.__forTesting.bodySizeVars.marginRightInline,
+      ).to.equal(undefined);
+      expect(overlayControllerNoPrevent.manager.__forTesting.bodySizeVars.marginRight).to.equal(
+        undefined,
+      );
     });
 
     it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.hide();
       await overlayControllerPreventsScroll.show();
 
-      expect(overlayControllerPreventsScroll.__bodyMarginRightInline).to.not.equal(undefined);
-      expect(overlayControllerPreventsScroll.__bodyMarginRight).to.not.equal(undefined);
+      expect(
+        overlayControllerPreventsScroll.manager.__forTesting.bodySizeVars.marginRightInline,
+      ).to.not.equal(undefined);
+      expect(
+        overlayControllerPreventsScroll.manager.__forTesting.bodySizeVars.marginRight,
+      ).to.not.equal(undefined);
     });
   });
 });

package/components/overlays/test/utils-tests/is-equal-config.test.js

@@ -48,7 +48,7 @@ describe('isEqualConfig()', () => {
     expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
   });
 
-  it('regards missing props different from ones with undefined value', () => {
+  it.skip('regards missing props different from ones with undefined value', () => {
     const config = TestConfig();
     expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
   });

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

@@ -537,13 +537,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       it('works with cache directive when reconnected', async () => {
         class CachingContext extends LitElement {
           static properties = {
-            switched: { type: Boolean },
+            showOverlay: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.switched = false;
+            this.showOverlay = true;
           }
 
           get overlayEl() {
@@ -552,12 +552,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.switched
-                ? html`something else`
-                : html`<${tag} id="myOverlay">
+              this.showOverlay
+                ? html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`,
+            </${tag}>`
+                : html`something else`,
             )}`;
           }
         }
@@ -578,7 +578,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
 
-        el.switched = true;
+        el.showOverlay = false;
         // render the new content
         await el.updateComplete;
         // wait for the teardown to complete
@@ -588,7 +588,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(teardownSpy.callCount).to.equal(1);
         expect(setupSpy.callCount).to.equal(0);
 
-        el.switched = false;
+        el.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
 

package/components/overlays/types/OverlayConfig.ts

@@ -11,6 +11,15 @@ export type ViewportPlacement =
   | 'bottom-left'
   | 'left';
 
+export type OverlayPhase =
+  | 'setup'
+  | 'init'
+  | 'teardown'
+  | 'before-show'
+  | 'show'
+  | 'hide'
+  | 'add'
+  | 'remove';
 
 export interface ViewportConfig {
   placement: ViewportPlacement;
@@ -87,14 +96,26 @@ export interface OverlayConfig {
   /** 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';
 
-  /** render a div instead of dialog */
-  _noDialogEl?: Boolean;
-
   /**
    * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
    * functions with Overlay phases as keys
    */
   visibilityTriggerFunction?: Function;
-}
 
+  /**
+   * Whether the overlay content should receive focus when shown.
+   */
+  focusContentOnOpen?: boolean;
 
+  /*
+   * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
+   * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
+   */
+  isOpenable?: boolean;
+
+  /**
+   * By default, an error is thrown when contentNode is not connected to the DOM.
+   * This allows to prepare nodes and later connect them to dom.
+   */
+  requireConnectedNodes?: boolean;
+}

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

@@ -832,6 +832,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -955,6 +956,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1082,6 +1084,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];