@lion/ui 0.24.0 → 0.26.0

package/components/input-tel/test/parsers.test.js

@@ -1,6 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { parsePhoneNumber } from '../src/parsers.js';
+import { formatPhoneNumber } from '../src/formatters.js';
+import {
+  mockPhoneUtilManager,
+  restorePhoneUtilManager,
+} from '../test-helpers/mockPhoneUtilManager.js';
 describe('parsePhoneNumber', () => {
   beforeEach(async () => {
     // Wait till PhoneUtilManager has been loaded
@@ -50,4 +55,86 @@ describe('parsePhoneNumber', () => {
       }),
     ).to.equal('+31707123456');
   });
+  it('keeps parsing enabled after restoring the lazy-loading mock', async () => {
+    const value = '+32 6 12345678';
+    const parsedBeforeMock = parsePhoneNumber(value, {
+      regionCode: 'BE',
+    });
+    const { resolveLoaded } = mockPhoneUtilManager();
+    try {
+      expect(PhoneUtilManager.isLoaded).to.be.false;
+      expect(
+        parsePhoneNumber(value, {
+          regionCode: 'BE',
+        }),
+      ).to.equal(value);
+      resolveLoaded(undefined);
+      await PhoneUtilManager.loadComplete;
+    } finally {
+      restorePhoneUtilManager();
+    }
+    expect(PhoneUtilManager.isLoaded).to.be.true;
+    expect(
+      parsePhoneNumber(value, {
+        regionCode: 'BE',
+      }),
+    ).to.equal(parsedBeforeMock);
+    expect(parsedBeforeMock).to.equal('+32612345678');
+  });
+  it('restores real loaded parsing and formatting without resolving the mock', () => {
+    const viewValue = '+32 6 12345678';
+    const modelValue = '+32612345678';
+    const realLoadComplete = PhoneUtilManager.loadComplete;
+    mockPhoneUtilManager();
+    try {
+      expect(PhoneUtilManager.isLoaded).to.be.false;
+      expect(
+        parsePhoneNumber(viewValue, {
+          regionCode: 'BE',
+        }),
+      ).to.equal(viewValue);
+    } finally {
+      restorePhoneUtilManager();
+    }
+    expect(PhoneUtilManager.loadComplete).to.equal(realLoadComplete);
+    expect(PhoneUtilManager.isLoaded).to.be.true;
+    expect(
+      parsePhoneNumber(viewValue, {
+        regionCode: 'BE',
+      }),
+    ).to.equal(modelValue);
+    expect(
+      formatPhoneNumber(modelValue, {
+        regionCode: 'BE',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('(+32)612345678');
+  });
+  it('restores a live getter that tracks the real utility before and after loading', () => {
+    const utility = Object.getOwnPropertyDescriptor(PhoneUtilManager, 'PhoneUtil');
+    if (!utility) {
+      throw new Error('The real phone utility must be loaded for this regression');
+    }
+    const realLoadComplete = PhoneUtilManager.loadComplete;
+    try {
+      Object.defineProperty(PhoneUtilManager, 'PhoneUtil', {
+        ...utility,
+        value: undefined,
+      });
+      mockPhoneUtilManager();
+      restorePhoneUtilManager();
+      expect(PhoneUtilManager.isLoaded).to.be.false;
+      expect(PhoneUtilManager.loadComplete).to.equal(realLoadComplete);
+      Object.defineProperty(PhoneUtilManager, 'PhoneUtil', utility);
+      expect(PhoneUtilManager.isLoaded).to.be.true;
+      expect(
+        parsePhoneNumber('+32 6 12345678', {
+          regionCode: 'BE',
+        }),
+      ).to.equal('+32612345678');
+    } finally {
+      Object.defineProperty(PhoneUtilManager, 'PhoneUtil', utility);
+      restorePhoneUtilManager();
+    }
+  });
 });

package/components/input-tel/test-helpers/mockPhoneUtilManager.js

@@ -1,6 +1,12 @@
 import { PhoneUtilManager } from '../src/PhoneUtilManager.js';
 const originalLoadComplete = PhoneUtilManager.loadComplete;
-const originalIsLoaded = Object.getOwnPropertyDescriptor(PhoneUtilManager, 'isLoaded')?.get;
+const originalIsLoadedGetter = (() => {
+  const getter = Object.getOwnPropertyDescriptor(PhoneUtilManager, 'isLoaded')?.get;
+  if (typeof getter !== 'function') {
+    throw new Error('PhoneUtilManager.isLoaded must be a getter');
+  }
+  return getter;
+})();
 export function mockPhoneUtilManager() {
   /** @type {(value: any) => void} */
   let resolveLoaded;
@@ -20,10 +26,15 @@ export function mockPhoneUtilManager() {
     resolveLoaded,
   };
 }
+
+/**
+ * Restore the mocked phone utility state.
+ * Restores the real loaded-state getter, not a snapshot taken when this module was imported.
+ * @returns {void}
+ */
 export function restorePhoneUtilManager() {
   PhoneUtilManager.loadComplete = originalLoadComplete;
   Object.defineProperty(PhoneUtilManager, 'isLoaded', {
-    // @ts-ignore
-    get: () => originalIsLoaded.call(PhoneUtilManager),
+    get: originalIsLoadedGetter,
   });
 }

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -3,7 +3,6 @@ import {
   fixture as _fixture,
   fixtureSync as _fixtureSync,
   html,
-  defineCE,
   unsafeStatic,
   aTimeout,
 } from '@open-wc/testing';
@@ -14,6 +13,7 @@ import { Unparseable } from '@lion/ui/form-core.js';
 import { LionInputTel, PhoneNumber, PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 import { nothing } from 'lit/html.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -158,12 +158,17 @@ function runActiveRegionTests({ tag, phoneUtilLoadedAfterInit }) {
 }
 
 /**
- * @param {{ klass: typeof LionInputTel, hasParentheses: boolean }} config
+ * @param {{ classes?: Record<string, CustomElementConstructor>, klass?: typeof LionInputTel, tagString?: string, hasParentheses?: boolean }} config
  */
 // @ts-ignore
-export function runInputTelSuite({ klass = LionInputTel, hasParentheses = false } = {}) {
+export function runInputTelSuite({
+  classes = {},
+  klass = LionInputTel,
+  tagString,
+  hasParentheses = false,
+} = {}) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
+  const tagName = resolveSuiteTag(classes.host, tagString, klass);
   const tag = unsafeStatic(tagName);
   describe('LionInputTel', () => {
     beforeEach(async () => {

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -61,17 +61,19 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
   };
 }
 runInputTelDropdownSuite();
-// @ts-ignore
 runInputTelDropdownSuite({
-  klass: LionInputTelDropdown,
+  classes: {
+    host: LionInputTelDropdown,
+  },
   hasParentheses: true,
 });
 runInputTelDropdownParenthesesSuite();
 describe('WithFormControlInputTelDropdown', () => {
-  // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({
-    klass: WithFormControlInputTelDropdown,
+    classes: {
+      host: WithFormControlInputTelDropdown,
+    },
   });
   it("it doesn't set the country as modelValue, only as viewValue", async () => {
     const el =

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js

@@ -5,14 +5,9 @@
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { sendKeys, selectOption } from '@web/test-runner-commands';
-import {
-  expect,
-  defineCE,
-  unsafeStatic,
-  fixture as _fixture,
-  html,
-  waitUntil,
-} from '@open-wc/testing';
+import { expect, unsafeStatic, fixture as _fixture, html, waitUntil } from '@open-wc/testing';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+import { isElementVisible } from '../../core/test-helpers/isElementVisible.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -37,18 +32,20 @@ const telDropdownConfig = {
 };
 
 /**
- * @param {{ klass:LionInputTelDropdown, config: TelDropdownConfig }} config
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {{ classes?: Record<string, CustomElementConstructor>, klass?:typeof LionInputTelDropdown, tagString?: string, config: TelDropdownConfig }} config
  */
 
 export function runInputTelDropdownParenthesesSuite(
   // @ts-ignore
-  { klass, config } = {
+  { classes = {}, klass, tagString, config } = {
     klass: LionInputTelDropdown,
     config: telDropdownConfig,
   },
 ) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
+  const tagName = resolveSuiteTag(classes.host, tagString, klass);
   const tag = unsafeStatic(tagName);
   describe('LionInputTelDropdown suite with `parentheses`', () => {
     /**
@@ -65,14 +62,14 @@ export function runInputTelDropdownParenthesesSuite(
       it('should set correct active region when selecting a country from dropdown ', async () => {
         const dropdownInvoker = config.getTelDropdownInvokerEl(el);
         // @ts-ignore
-        await waitUntil(() => dropdownInvoker?.checkVisibility());
+        await waitUntil(() => isElementVisible(dropdownInvoker));
         await config.selectNlOption(el);
         expect(el.activeRegion).to.equal('NL');
       });
       it('updates dropdown value', async () => {
         const dropdown = config.getTelDropdownInvokerEl(el);
         // @ts-ignore
-        await waitUntil(() => dropdown?.checkVisibility());
+        await waitUntil(() => isElementVisible(dropdown));
         const input = el.querySelector('input');
         expect(input).to.exist;
         // @ts-ignore

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -8,11 +8,11 @@ import {
   fixture as _fixture,
   unsafeStatic,
   aTimeout,
-  defineCE,
   expect,
   html,
 } from '@open-wc/testing';
 import { nothing } from 'lit/html.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -40,17 +40,18 @@ function getDropdownValue(dropdownEl) {
 }
 
 /**
- * @param {{ klass:LionInputTelDropdown, hasParentheses?: boolean }} config
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {{ classes?: Record<string, CustomElementConstructor>, klass?:typeof LionInputTelDropdown, tagString?: string, hasParentheses?: boolean }} config
  */
 export function runInputTelDropdownSuite(
-  // @ts-expect-error
-  { klass, hasParentheses } = {
+  { classes = {}, klass, tagString, hasParentheses } = {
     klass: LionInputTelDropdown,
     hasParentheses: false,
   },
 ) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
+  const tagName = resolveSuiteTag(classes.host, tagString, klass);
   const tag = unsafeStatic(tagName);
   describe('LionInputTelDropdown', () => {
     beforeEach(async () => {

package/components/listbox/src/LionListbox.js

@@ -24,8 +24,8 @@ export class LionListbox extends ListboxMixin(
   }
 
   /**
+   * Public to preserve the Lion 0.21.1 extension contract.
    * @configure FocusMixin
-   * @protected
    * @returns {HTMLElement}
    */
   get _focusableNode() {

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import { ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Required } from '@lion/ui/form-core.js';
-import { LionOptions } from '@lion/ui/listbox.js';
+import { LionListbox, LionOption, LionOptions } from '@lion/ui/listbox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
 import {
@@ -18,10 +18,9 @@ import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getListboxMembers } from '../../../exports/listbox-test-helpers.js';
 import { getCachedFixture } from '../../core/test-helpers/getCachedFixture.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
- * @typedef {import('../src/LionListbox.js').LionListbox} LionListbox
- * @typedef {import('../src/LionOption.js').LionOption} LionOption
  * @typedef {import('../../select-rich/src/LionSelectInvoker.js').LionSelectInvoker} LionSelectInvoker
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
@@ -49,16 +48,17 @@ function mimicKeyPress(el, key, code = '') {
 }
 
 /**
- * @param { {tagString?:string, optionTagString?:string} } [customConfig]
+ * @param { { classes?: Record<string, CustomElementConstructor>, tagString?:string, optionTagString?:string} } [customConfig]
  */
-export function runListboxMixinSuite(customConfig = {}) {
-  const cfg = {
-    tagString: 'lion-listbox',
-    optionTagString: 'lion-option',
-    ...customConfig,
-  };
-  const tag = unsafeStatic(cfg.tagString);
-  const optionTag = unsafeStatic(cfg.optionTagString);
+export function runListboxMixinSuite({
+  classes: { host = LionListbox, option: roleOption = LionOption } = {},
+  tagString: legacyTagString,
+  optionTagString: legacyOptionTagString,
+} = {}) {
+  const hostTagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(hostTagString);
+  const optionTagString = resolveSuiteTag(roleOption, legacyOptionTagString);
+  const optionTag = unsafeStatic(optionTagString);
   describe('ListboxMixin', () => {
     // TODO: See if it is possible to get functionality from ChoiceGroup and/or Field suite(s)
     describe('FormControl (Field / ChoiceGroup) functionality', () => {
@@ -141,7 +141,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         expect(() => {
           el.addFormElement(invalidChild);
         }).to.throw(
-          `The ${cfg.tagString} name="foo" does not allow to register lion-option with .modelValue="Lara" - The modelValue should represent an Object { value: "foo", checked: false }`,
+          `The ${hostTagString} name="foo" does not allow to register lion-option with .modelValue="Lara" - The modelValue should represent an Object { value: "foo", checked: false }`,
         );
       });
       it('can set initial modelValue on creation', async () => {
@@ -398,9 +398,9 @@ export function runListboxMixinSuite(customConfig = {}) {
             <${optionTag} .choiceValue=${30} id="predefined">Item 3</${optionTag}>
           </${tag}>
         `);
-        expect(el.querySelectorAll(cfg.optionTagString)[0].id).to.exist;
-        expect(el.querySelectorAll(cfg.optionTagString)[1].id).to.exist;
-        expect(el.querySelectorAll(cfg.optionTagString)[2].id).to.equal('predefined');
+        expect(el.querySelectorAll(optionTagString)[0].id).to.exist;
+        expect(el.querySelectorAll(optionTagString)[1].id).to.exist;
+        expect(el.querySelectorAll(optionTagString)[2].id).to.equal('predefined');
       });
       it('has a reference to the active option', async () => {
         const el = await fixture(html`
@@ -1442,10 +1442,10 @@ export function runListboxMixinSuite(customConfig = {}) {
       it('can be instantiated via "document.createElement"', async () => {
         let properlyInstantiated = false;
         try {
-          const el = document.createElement(cfg.tagString);
+          const el = document.createElement(hostTagString);
           const optionsEl = document.createElement('lion-options');
           optionsEl.slot = 'input';
-          const optionEl = document.createElement(cfg.optionTagString);
+          const optionEl = document.createElement(optionTagString);
           optionsEl.appendChild(optionEl);
           el.appendChild(optionsEl);
           properlyInstantiated = true;
@@ -1471,7 +1471,7 @@ export function runListboxMixinSuite(customConfig = {}) {
           (child) => child.nodeName !== 'STYLE',
         );
         expect(childrenOtherThanStyle.length).to.equal(2);
-        expect(childrenOtherThanStyle[0].tagName).to.equal(cfg.optionTagString.toUpperCase());
+        expect(childrenOtherThanStyle[0].tagName).to.equal(optionTagString.toUpperCase());
       });
     });
     describe('Href Options', () => {

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
-import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
 /**
@@ -23,20 +24,16 @@ const supportedRoles = [
  * @typedef {import('../src/LionMenu.js').LionMenu} LionMenu
  * @typedef {import('lit').TemplateResult} TemplateResult
  *
- * * @typedef {Object} TestConfig
- * @property {string} tagString
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
- * @param {TestConfig} [customConfig]
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
  */
-export function runInteractiveListMixinSuite(customConfig) {
-  const cfg = {
-    tagString: customConfig?.tagString || defineCE(InteractiveListClass),
-  };
-  const { tagString } = cfg;
+export function runInteractiveListMixinSuite({ classes = {}, tagString: legacyTagString } = {}) {
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, InteractiveListClass);
   const tag = unsafeStatic(tagString);
   describe('InteractiveListMixin', () => {
     it(`supports items with role="${supportedRoles.join('|')}"`, async () => {

package/components/menu/test-suites/LionMenu.suite.js

@@ -1,25 +1,21 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
-import { defineCE, expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
 import { LionMenu } from '../src/LionMenu.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  *
- * @typedef {Object} TestConfig
- * @property {string} tagString
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
- * @param {TestConfig} [customConfig]
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
  */
-export function runLionMenuSuite(customConfig) {
-  const cfg = {
-    tagString: customConfig?.tagString || defineCE(LionMenu),
-  };
-  const { tagString } = cfg;
-  const tag = unsafeStatic(tagString);
+export function runLionMenuSuite({ classes = {}, tagString: legacyTagString } = {}) {
+  const tag = unsafeStatic(resolveSuiteTag(classes?.host, legacyTagString, LionMenu));
   describe('LionMenu', () => {
     it('sets the correct role to the listNode', async () => {
       const el = await fixture(html`

package/components/menu/test-suites/LionMenuInteractions.suite.js

@@ -1,10 +1,11 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
-import { defineCE, expect, fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
+import { expect, fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { sendMouse, resetMouse, sendKeys } from '@web/test-runner-commands';
 import { useFakeTimers } from 'sinon';
 import { css } from 'lit';
 import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { LionMenu } from '../src/LionMenu.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 const l2Style = css`
   [level='2'] > [slot='list'] {
     position: absolute;
@@ -42,9 +43,17 @@ const config = {
     },
   },
 };
-export function runLionMenuInteractionsSuite({ klass = LionMenu } = {}) {
-  const tagString = defineCE(class extends klass {});
-  const tag = unsafeStatic(tagString);
+
+/** @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement */
+
+/**
+ * Runs the menu-interactions suite. The caller hands the menu to run against; leaving `host` out keeps
+ * `LionMenu`.
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export function runLionMenuInteractionsSuite({ classes = {}, tagString } = {}) {
+  const tagName = resolveSuiteTag(classes.host, tagString, LionMenu);
+  const tag = unsafeStatic(tagName);
   describe('LionMenu interactions', () => {
     /** @type {import('sinon').SinonFakeTimers | null} */
     let clock = null;

package/components/menu/test-suites/MoreButtonMenuMixin.suite.js

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
-import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
 import { sendMouse, resetMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getDeepActiveElement } from '@lion/ui/overlays.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
 /**
@@ -14,8 +15,6 @@ class InteractiveListClass extends InteractiveListMixin(LitElement) {}
  * @typedef {import('../src/LionMenu.js').LionMenu} LionMenu
  * @typedef {import('lit').TemplateResult} TemplateResult
  *
- * * @typedef {Object} TestConfig
- * @property {string} tagString
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
@@ -33,13 +32,11 @@ const l1Config = {
 };
 
 /**
- * @param {TestConfig} [customConfig]
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
  */
-export function runMoreButtonMenuMixinSuite(customConfig) {
-  const cfg = {
-    tagString: customConfig?.tagString || defineCE(InteractiveListClass),
-  };
-  const { tagString } = cfg;
+export function runMoreButtonMenuMixinSuite({ classes = {}, tagString: legacyTagString } = {}) {
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, InteractiveListClass);
   const tag = unsafeStatic(tagString);
   describe('MoreButtonMenuMixin', () => {
     describe('Overflow handling', () => {

package/components/menu/test-suites/MultiLevelListMixin.suite.js

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
-import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 import { MultiLevelListMixin } from '../src/MultiLevelListMixin.js';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 class MultiLevelListClass extends MultiLevelListMixin(LitElement) {}
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
@@ -11,22 +12,25 @@ class InteractiveListClass extends InteractiveListMixin(LitElement) {}
  * @typedef {import('../src/LionMenu.js').LionMenu} LionMenu
  * @typedef {import('lit').TemplateResult} TemplateResult
  *
- * @typedef {Object} TestConfig
- * @property {string} tagString
- * @property {string} tagChildString
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ _fixture;
 
 /**
- * @param {TestConfig} [customConfig]
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; 'interactive-list': SuiteElement}>} [customConfig]
  */
-export function runMultiLevelListMixinSuite(customConfig) {
-  const cfg = {
-    tagString: customConfig?.tagString || defineCE(MultiLevelListClass),
-    tagChildString: customConfig?.tagChildString || defineCE(InteractiveListClass),
-  };
-  const { tagString, tagChildString } = cfg;
+export function runMultiLevelListMixinSuite({
+  classes = {},
+  tagString: legacyTagString,
+  tagChildString: legacyChildTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, MultiLevelListClass);
+  const tagChildString = resolveSuiteTag(
+    classes?.['interactive-list'],
+    legacyChildTagString,
+    InteractiveListClass,
+  );
   const tag = unsafeStatic(tagString);
   const tagChild = unsafeStatic(tagChildString);
   describe('MultiLevelListMixin', () => {

package/components/overlays/src/OverlayController.js

@@ -299,11 +299,16 @@ export class OverlayController extends EventTarget {
   }
 
   /**
-   * The contentWrapperNode
+   * The outer wrapper while set up, or the original content after teardown.
+   * Keep the fallback for existing clients that remove content after teardown;
+   * changing or removing it is deferred to a future breaking release.
    * @type {HTMLDialogElement | HTMLDivElement}
    */
   get content() {
-    return /** @type {HTMLDialogElement | HTMLDivElement} */ this.__wrappingDialogNode;
+    return (
+      /** @type {HTMLDialogElement | HTMLDivElement} */ this.__wrappingDialogNode ||
+      this.contentNode
+    );
   }
 
   /**

package/components/overlays/src/OverlayMixin.js

@@ -248,20 +248,17 @@ export const OverlayMixinImplementation = (superclass) => {
     /**
      * 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.
+     * otherwise the first focusable descendant. Custom invokers without a
+     * focusable light DOM descendant remain click targets themselves.
      * @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);
+        : focusableElOrWrapper.querySelector(focusableSelector) || focusableElOrWrapper;
     }
 
     /**