@lion/ui 0.24.0 → 0.26.0

package/components/core/src/ScopedElementsMixin.js

@@ -20,6 +20,21 @@ export function supportsScopedRegistry() {
   );
 }
 
+/**
+ * @open-wc/scoped-elements types its mixin against the lit-element it resolves itself: relative to
+ * its own directory. Whenever npm stores a second lit-element copy under
+ * 'node_modules/@open-wc/scoped-elements/node_modules' (which it does once the root copy no longer
+ * satisfies its lit-element range) that copy wins, our LitElementConstructor then refers to another
+ * class declaration, and TypeScript relates two classes that each carry Lit's private __childPart
+ * (TS2322/TS2345) - making a lockfile/hoisting detail decide whether the type gate passes.
+ * Restating the mixin in our own types keeps this file independent of how lit gets hoisted.
+ */
+const OpenWcScopedElementsMixinV3 =
+  /**
+   * @type {<T extends LitElementConstructor>(superclass: T) => T & ScopedElementsHostConstructor}
+   */
+  OpenWcLitScopedElementsMixin;
+
 /**
  * This file is a combination of '@open-wc/scoped-elements@v3/lit-element.js' and '@open-wc/scoped-elements@v3/html-element.js'.
  * To make the polyfill an opt-in, some code from '@open-wc/scoped-elements@v2' is added as well.
@@ -53,7 +68,7 @@ export function supportsScopedRegistry() {
  */
 const ScopedElementsMixinImplementation = (superclass) =>
   /** @type {ScopedElementsHost} */
-  class ScopedElementsHost extends OpenWcLitScopedElementsMixin(superclass) {
+  class ScopedElementsHost extends OpenWcScopedElementsMixinV3(superclass) {
     constructor() {
       super();
       if (isServer) {

package/components/core/test-helpers/isElementVisible.js

@@ -0,0 +1,21 @@
+/**
+ * Visibility check that works on every engine in our matrix.
+ *
+ * `Element.checkVisibility()` only exists in Chromium 105+, Firefox 125+ and Safari 17.4+ - the older
+ * end of the matrix (Firefox 113, WebKit 16.4, the Safari 16 generation) throws on it. Those engines
+ * answer the same question through layout: a node that is not rendered has no client rects.
+ *
+ * @param {Element | null | undefined} el
+ * @returns {boolean}
+ */
+export function isElementVisible(el) {
+  if (!el) {
+    return false;
+  }
+  // @ts-ignore [checkVisibility lives on the polyfilled dialog in some suites]
+  if (typeof el.checkVisibility === 'function') {
+    // @ts-ignore
+    return el.checkVisibility();
+  }
+  return el.getClientRects().length > 0;
+}

package/components/core/test-helpers/resolveSuiteTag.js

@@ -0,0 +1,97 @@
+import { defineCE } from '@open-wc/testing';
+
+/**
+ * The tag `klass` is registered under, or `null` when it is not registered at all.
+ *
+ * `customElements.getName` is not available under the scoped-custom-element-registry polyfill that
+ * Lion's test setup loads, so as a second attempt candidate names are derived from the class name
+ * (`LionCheckboxIndeterminate` -> `lion-checkbox-indeterminate`, `MyInputDatepicker` ->
+ * `my-input-datepicker`) and checked against the registry.
+ *
+ * @param {CustomElementConstructor} klass
+ * @returns {string|null}
+ */
+function registeredTagFor(klass) {
+  if (typeof customElements.getName === 'function') {
+    const name = customElements.getName(klass);
+    if (name) {
+      return name;
+    }
+  }
+  const kebab = klass.name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+  for (const candidate of [kebab, `lion-${kebab}`]) {
+    if (customElements.get(candidate) === klass) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+/**
+ * Defines a subclass element, retrying when the test framework's generated tag name is taken.
+ *
+ * A consumer repository can end up with two module instances of the test framework (its own and the
+ * one @lion/ui resolved), and both start their counter at `test-0`: the second one then throws
+ * "the name test-0 has already been used". Retrying takes the next name.
+ *
+ * @param {CustomElementConstructor} klass
+ * @returns {string}
+ */
+function defineUniqueTag(klass) {
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    try {
+      return defineCE(class extends klass {});
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '';
+      if (!/already been used/.test(message)) {
+        throw error;
+      }
+    }
+  }
+  throw new Error(`Could not define a unique tag for ${klass.name}`);
+}
+
+/**
+ * Resolves the element a test suite should render for one role.
+ *
+ * A caller passes `classes`: a map whose keys are Lion's tag names without the `lion-` prefix and
+ * whose values are constructors, e.g.
+ *
+ *     runComboboxSuite({ classes: { combobox: MyCombobox, option: MyOption } });
+ *
+ * The class's registered tag is used when it has one (so a subclasser's scoped children keep
+ * working), otherwise a subclass element is defined on the fly. Everything the caller omits keeps
+ * Lion's own element, which is the implicit default.
+ *
+ * `tagString` (and the older role-level keys such as `optionTagString`) stay supported as the
+ * deprecated fallback for callers that already registered a tag but have no class to hand.
+ *
+ * A role may also be given as a tag: native elements are a platform tag (`h2`, `div`) and have no
+ * class of their own, so a caller hands the tag it wants rendered for that role.
+ *
+ * A suite declares Lion's own element for a role as the default on the role itself
+ * (`classes: { host = LionAccordion, invoker = 'h2' } = {}`), so it can call this with the role and
+ * the deprecated key only; `lionDefault` stays for suites whose default is only known further down.
+ *
+ * @param {CustomElementConstructor|string|undefined} customKlassOrTag the class or tag for this role, if the caller gave one
+ * @param {string|null} [deprecatedTagString] a tag the caller registered itself (deprecated)
+ * @param {string|CustomElementConstructor} [lionDefault] Lion's own tag name or class
+ * @returns {string}
+ */
+export function resolveSuiteTag(customKlassOrTag, deprecatedTagString, lionDefault) {
+  if (typeof customKlassOrTag === 'string') {
+    return customKlassOrTag;
+  }
+  const customKlass = customKlassOrTag;
+  if (customKlass) {
+    // A class that maps to a registered tag wins; a class that does not still gives the caller's
+    // element a chance to be named by the deprecated tag key, and only then is a subclass defined.
+    return registeredTagFor(customKlass) || deprecatedTagString || defineUniqueTag(customKlass);
+  }
+  if (deprecatedTagString) {
+    return deprecatedTagString;
+  }
+  return typeof lionDefault === 'string'
+    ? lionDefault
+    : defineUniqueTag(/** @type {CustomElementConstructor} */ lionDefault);
+}

package/components/core/types/TestSuiteTypes.ts

@@ -0,0 +1,43 @@
+/**
+ * One value in a suite's `classes` map: the constructor to run the guarantees against, or the tag to
+ * render for that role. Native elements (`h2`, `div`) are a platform tag and have no class of their
+ * own, so those roles take a string.
+ */
+export type SuiteElement = CustomElementConstructor | string;
+
+/**
+ * The roles a suite understands, keyed by Lion's tag name without the `lion-` prefix
+ * (`{ host: MyAccordion, invoker: 'h3', content: 'section' }`).
+ */
+export type SuiteRoles = Record<string, SuiteElement>;
+
+/**
+ * Keys every suite still accepts from callers written before `classes` existed: they keep compiling
+ * and keep working, new code passes `classes`.
+ */
+export type SuiteLegacyKeys = {
+  /** @deprecated pass `classes` instead. */
+  tagString?: string;
+  /** @deprecated pass `classes` instead. */
+  klass?: CustomElementConstructor;
+} & {
+  /**
+   * @deprecated the role-level tag keys callers used before `classes` (`childTagString`,
+   * `optionTagString`, `tabsTagString`, …): pass that role through `classes` instead.
+   */
+  [legacyRoleTag: `${string}TagString` | `tag${string}String`]: string | undefined;
+};
+
+/**
+ * Configuration every suite runner accepts - one shared type for all of them. Both parameters are
+ * narrowed per suite: `Roles` lists the roles that suite resolves, `Options` carries the options that
+ * are unique to it, so a wrong key is a type error at the call site.
+ *
+ * Every key is optional at the call site, including the options: a suite prefills Lion's own element
+ * for every role, and derives or defaults what it can for the rest. An option a suite cannot default
+ * is documented as required in that suite and enforced by the suite itself.
+ */
+export type SuiteConfig<
+  Roles extends SuiteRoles = SuiteRoles,
+  Options extends object = object,
+> = SuiteLegacyKeys & { classes?: Partial<Roles> } & Partial<Options>;

package/components/dialog/test/lion-dialog.integration.test.js

@@ -9,6 +9,7 @@ import '@lion/ui/define/lion-dialog.js';
 import '@lion/ui/define/lion-tooltip.js';
 import { mimicUserTyping } from '@lion/ui/combobox-test-helpers.js';
 import sinon from 'sinon';
+import { isElementVisible } from '../../core/test-helpers/isElementVisible.js';
 
 /**
  * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
@@ -44,7 +45,7 @@ describe('lion-dialog', () => {
         /** @type { HTMLElement | undefined } */
         el.querySelectorAll('lion-option')?.[0];
       // @ts-ignore
-      const isComboboxFirstOptionInDropdownVisible = () => firstOption?.checkVisibility();
+      const isComboboxFirstOptionInDropdownVisible = () => isElementVisible(firstOption);
       await waitUntil(isComboboxFirstOptionInDropdownVisible);
       const comboboxDialog = combobox?.shadowRoot?.querySelector('dialog');
       // Note, do not remove `console.log` down below. There is a bug in test engine.
@@ -59,7 +60,7 @@ describe('lion-dialog', () => {
         press: 'Escape',
       });
       // @ts-ignore
-      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      const isDialogVisible = () => isElementVisible(el?.shadowRoot?.querySelector('dialog'));
       await waitUntil(() => dropdownDialogCloseSpy.called);
       expect(isDialogVisible()).to.equal(true);
     });
@@ -97,11 +98,9 @@ describe('lion-dialog', () => {
       // @ts-ignore
       const dropdownDialogCloseSpy = sinon.spy(dropdownDialog, 'close');
       const isDropdownVisible = () =>
-        el
-          ?.querySelector('lion-select-rich')
-          ?.shadowRoot?.querySelector('dialog')
-          // @ts-ignore
-          ?.checkVisibility();
+        isElementVisible(
+          el?.querySelector('lion-select-rich')?.shadowRoot?.querySelector('dialog'),
+        );
       await waitUntil(isDropdownVisible);
       const lionOptions = /** @type {HTMLElement} */ el.querySelector('lion-options');
       lionOptions?.focus();
@@ -109,7 +108,7 @@ describe('lion-dialog', () => {
         press: 'Escape',
       });
       // @ts-ignore
-      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      const isDialogVisible = () => isElementVisible(el?.shadowRoot?.querySelector('dialog'));
       await waitUntil(() => dropdownDialogCloseSpy.called);
       expect(isDialogVisible()).to.equal(true);
     });
@@ -141,13 +140,13 @@ describe('lion-dialog', () => {
           .querySelector('lion-tooltip')
           ?.shadowRoot?.querySelector('#overlay-content-node-wrapper');
       // @ts-ignore
-      const isTooltipContentVisible = () => getTooltipContent()?.checkVisibility();
+      const isTooltipContentVisible = () => isElementVisible(getTooltipContent());
       await waitUntil(isTooltipContentVisible);
       await sendKeys({
         press: 'Escape',
       });
       // @ts-ignore
-      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      const isDialogVisible = () => isElementVisible(el?.shadowRoot?.querySelector('dialog'));
       expect(isTooltipContentVisible()).to.equal(false);
       expect(isDialogVisible()).to.equal(true);
       await sendKeys({

package/components/dialog/test/lion-dialog.test.js

@@ -1,399 +1,2 @@
-/* eslint-disable lit-a11y/no-autofocus */
-import {
-  expect,
-  fixture as _fixture,
-  html,
-  unsafeStatic,
-  aTimeout,
-  defineCE,
-  waitUntil,
-} from '@open-wc/testing';
-import { cache } from 'lit/directives/cache.js';
-import { LitElement, nothing } from 'lit';
-import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
-import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
-import '../test-helpers/test-router.js';
-import '@lion/ui/define/lion-dialog.js';
-import '@lion/ui/define/lion-tabs.js';
-
-/**
- * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ _fixture;
-describe('lion-dialog', () => {
-  // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
-  // Not sure why this "bug" happens...
-  beforeEach(() => {
-    const globalRootNode = document.querySelector('.overlays');
-    if (globalRootNode) {
-      globalRootNode.innerHTML = '';
-    }
-  });
-  describe('Integration tests', () => {
-    const tagString = 'lion-dialog';
-    const tag = unsafeStatic(tagString);
-    runOverlayMixinSuite({
-      tagString,
-      tag,
-      suffix: ' for lion-dialog',
-    });
-  });
-  describe('Basic', () => {
-    it('should show content on invoker click', async () => {
-      const el = await fixture(html`
-        <lion-dialog>
-          <div slot="content" class="dialog">Hey there</div>
-          <button slot="invoker">Popup button</button>
-        </lion-dialog>
-      `);
-      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
-      invoker.click();
-      // @ts-expect-error [allow-protected-in-tests]
-      await el._overlayCtrl._showComplete;
-      expect(el.opened).to.be.true;
-    });
-    it('supports nested overlays', async () => {
-      const el = await fixture(html`
-        <lion-dialog>
-          <div slot="content">
-            open nested overlay:
-            <lion-dialog>
-              <div slot="content">Nested content</div>
-              <button slot="invoker">nested invoker button</button>
-            </lion-dialog>
-          </div>
-          <button slot="invoker">invoker button</button>
-        </lion-dialog>
-      `);
-
-      // @ts-expect-error [allow-protected-in-tests]
-      el._overlayInvokerNode.click();
-      // @ts-expect-error [allow-protected-in-tests]
-      await el._overlayCtrl._showComplete;
-      expect(el.opened).to.be.true;
-      const nestedDialogEl = /** @type {LionDialog} */ el.querySelector('lion-dialog');
-      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
-      nestedDialogEl?._overlayInvokerNode.click();
-      // @ts-expect-error [allow-protected-in-tests]
-      await nestedDialogEl._overlayCtrl._showComplete;
-      expect(nestedDialogEl.opened).to.be.true;
-    });
-  });
-  describe('focus', () => {
-    it('sets focus on contentSlot by default', async () => {
-      const el = await fixture(html`
-        <lion-dialog>
-          <button slot="invoker">invoker button</button>
-          <div slot="content">
-            <label for="myInput">Label</label>
-            <input id="myInput" />
-          </div>
-        </lion-dialog>
-      `);
-      // @ts-expect-error [allow-protected-in-tests]
-      const invokerNode = el._overlayInvokerNode;
-      invokerNode.focus();
-      invokerNode.click();
-      const contentNode = /** @type {Element} */ el.querySelector('[slot="content"]');
-      expect(isActiveElement(contentNode)).to.be.true;
-    });
-    it('sets focus on autofocused element', async () => {
-      const el = await fixture(html`
-        <lion-dialog>
-          <button slot="invoker">invoker button</button>
-          <div slot="content">
-            <label for="myInput">Label</label>
-            <input id="myInput" autofocus />
-          </div>
-        </lion-dialog>
-      `);
-      // @ts-expect-error [allow-protected-in-tests]
-      const invokerNode = el._overlayInvokerNode;
-      invokerNode.focus();
-      invokerNode.click();
-      const input = /** @type {Element} */ el.querySelector('input');
-      expect(isActiveElement(input)).to.be.true;
-    });
-    it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => {
-      const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog
-          .config=${{
-            trapsKeyboardFocus: false,
-          }}
-        >
-          <button slot="invoker">invoker button</button>
-          <div slot="content">
-            <label for="myInput">Label</label>
-            <input id="myInput" autofocus />
-          </div>
-        </lion-dialog>
-      `);
-      // @ts-expect-error [allow-protected-in-tests]
-      const invokerNode = el._overlayInvokerNode;
-      invokerNode.focus();
-      invokerNode.click();
-      expect(isActiveElement(invokerNode)).to.be.true;
-    });
-    it('opened-changed event should send detail object with opened state', async () => {
-      const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog
-          .config=${{
-            trapsKeyboardFocus: false,
-          }}
-        >
-          <button slot="invoker">invoker button</button>
-          <div slot="content">
-            <label for="myInput">Label</label>
-            <input id="myInput" autofocus />
-          </div>
-        </lion-dialog>
-      `);
-      el.setAttribute('opened', '');
-      expect(el.opened).to.be.true;
-      el.addEventListener('opened-changed', (e) => {
-        // @ts-expect-error [allow-detail-since-custom-event]
-        expect(e.detail.opened).to.be.false;
-      });
-      el.removeAttribute('opened');
-    });
-    it("opened-changed event's target should point to lion-dialog", async () => {
-      const el = /** @type {LionDialog} */ await fixture(html`
-        <lion-dialog
-          .config=${{
-            trapsKeyboardFocus: false,
-          }}
-        >
-          <button slot="invoker">invoker button</button>
-          <div slot="content">
-            <label for="myInput">Label</label>
-            <input id="myInput" autofocus />
-          </div>
-        </lion-dialog>
-      `);
-      el.addEventListener('opened-changed', (e) => {
-        expect(e.target).to.equal(el);
-      });
-      el.setAttribute('opened', '');
-    });
-  });
-  describe('Accessibility', () => {
-    it('passes a11y audit', async () => {
-      const el = await fixture(html`
-        <lion-dialog>
-          <button slot="invoker">Invoker</button>
-          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
-        </lion-dialog>
-      `);
-      await expect(el).to.be.accessible();
-    });
-    it('passes a11y audit when opened', async () => {
-      const el = await fixture(html`
-        <lion-dialog opened>
-          <button slot="invoker">Invoker</button>
-          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
-        </lion-dialog>
-      `);
-      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
-      await expect(el).to.be.accessible({
-        ignoredRules: ['aria-allowed-role'],
-      });
-    });
-    it('does not add [aria-expanded] to invoker button', async () => {
-      const el = await fixture(
-        html` <lion-dialog>
-          <div slot="content" class="dialog">Hey there</div>
-          <button slot="invoker">Popup button</button>
-        </lion-dialog>`,
-      );
-      const invokerButton = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
-      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
-      await invokerButton.click();
-      await aTimeout(0);
-      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
-      await invokerButton.click();
-      await aTimeout(0);
-      expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
-    });
-    it('has role="dialog" by default', async () => {
-      const el = await fixture(
-        html` <lion-dialog>
-          <div slot="content" class="dialog">Hey there</div>
-          <button slot="invoker">Popup button</button>
-        </lion-dialog>`,
-      );
-      const contentNode = /** @type {HTMLElement} */ el.querySelector('[slot="content"]');
-      expect(contentNode.getAttribute('role')).to.equal('dialog');
-    });
-    it('has role="alertdialog" by when "is-alert-dialog" is set', async () => {
-      const el = await fixture(
-        html` <lion-dialog is-alert-dialog>
-          <div slot="content" class="dialog">Hey there</div>
-          <button slot="invoker">Popup button</button>
-        </lion-dialog>`,
-      );
-      const contentNode = /** @type {HTMLElement} */ el.querySelector('[slot="content"]');
-      expect(contentNode.getAttribute('role')).to.equal('alertdialog');
-    });
-    it('passes a11y audit when opened and role="alertdialog"', async () => {
-      const el = await fixture(html`
-        <lion-dialog opened is-alert-dialog>
-          <button slot="invoker">Invoker</button>
-          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
-        </lion-dialog>
-      `);
-      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
-      await expect(el).to.be.accessible({
-        ignoredRules: ['aria-allowed-role'],
-      });
-    });
-  });
-  describe('Edge cases', () => {
-    it('does not lose click event handler when was detached and reattached', async () => {
-      const el = await fixture(html`
-        <test-router
-          .routingMap="${{
-            a: html`
-              <lion-dialog>
-                <div slot="content" class="dialog">Hey there</div>
-                <button slot="invoker">Popup button</button>
-              </lion-dialog>
-            `,
-            b: html` <div>B</div> `,
-          }}"
-          path="a"
-        ></test-router>
-      `);
-      const getDialog = () => /** @type {LionDialog} */ el.shadowRoot?.querySelector('lion-dialog');
-      const getInvoker = () =>
-        /** @type {HTMLElement} */ getDialog().querySelector('[slot="invoker"]');
-      getInvoker().click();
-      const dialog = getDialog();
-      // @ts-expect-error [allow-protected-in-tests]
-      await dialog._overlayCtrl._showComplete;
-      expect(dialog.opened).to.be.true;
-      dialog.close();
-      // @ts-expect-error [allow-protected-in-tests]
-      await dialog._overlayCtrl._hideComplete;
-      expect(dialog.opened).to.be.false;
-      const buttonA = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('#path-a');
-      const buttonB = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('#path-b');
-      buttonB.click();
-      await el.updateComplete;
-      buttonA.click();
-      await el.updateComplete;
-      await el.updateComplete;
-      getInvoker().click();
-      const dialogAfterRouteChange = getDialog();
-      // @ts-expect-error [allow-protected-in-tests]
-      expect(dialogAfterRouteChange._overlayCtrl).not.to.be.undefined;
-      // @ts-expect-error [allow-protected-in-tests]
-      await dialogAfterRouteChange._overlayCtrl._showComplete;
-      expect(dialogAfterRouteChange.opened).to.be.true;
-    });
-    it('should close the popup dialog after rendered from cache', async () => {
-      /**
-       *
-       * @param {Event} e
-       * @returns
-       */
-      const closeButtonHandler = (e) =>
-        e.target?.dispatchEvent(
-          new Event('close-overlay', {
-            bubbles: true,
-          }),
-        );
-      const dialog = html` <lion-dialog>
-        <button slot="invoker" class="invoker-button">Click me to open dialog</button>
-        <div slot="content" class="demo-dialog-content">
-          Hello! You can close this dialog here:
-          <button class="close-button" @click="${closeButtonHandler}">⨯</button>
-        </div>
-      </lion-dialog>`;
-
-      /**
-       * Note, inactive tab content is **destroyed** on every tab switch.
-       */
-      class Wrapper extends LitElement {
-        static properties = {
-          ...super.properties,
-          activeTabIndex: {
-            type: Number,
-          },
-        };
-        constructor() {
-          super();
-          this.activeTabIndex = 0;
-        }
-
-        /**
-         * @param {number} index
-         */
-        changeActiveTabIndex(index) {
-          this.activeTabIndex = index;
-        }
-        render() {
-          const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
-          return html`
-            <lion-tabs>
-              <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
-                First
-              </button>
-              <p slot="panel">${cache(this.activeTabIndex === 0 ? dialog : nothing)}</p>
-              <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
-                Second
-              </button>
-              <p slot="panel">Info page with lots of information about us.</p>
-            </lion-tabs>
-          `;
-        }
-      }
-      const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
-      const tagString = defineCE(Wrapper);
-      const wrapperTag = unsafeStatic(tagString);
-      const wrapperElement =
-        /** @type {Wrapper} */
-        await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
-      await wrapperElement.updateComplete;
-      const wrapperElementShadowRoot = wrapperElement.shadowRoot;
-      /**
-       * @returns { HTMLElement | null | undefined }
-       */
-      const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
-      /**
-       * @returns { HTMLElement | null | undefined }
-       */
-      const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
-      /**
-       * @returns { HTMLElement | null | undefined }
-       */
-      const getInvokerButton = () => wrapperElementShadowRoot?.querySelector('.invoker-button');
-      /**
-       * @returns { HTMLElement | null | undefined }
-       */
-      const getCloseButton = () => wrapperElementShadowRoot?.querySelector('.close-button');
-      /**
-       * @returns { Element | null | undefined }
-       */
-      const getDialog = () =>
-        wrapperElementShadowRoot?.querySelector('lion-dialog')?.shadowRoot?.querySelector('dialog');
-      // @ts-ignore
-      const isDialogVisible = () => getDialog()?.checkVisibility() === true;
-      const isDialogRendered = () =>
-        !!wrapperElement.shadowRoot?.querySelector('lion-dialog')?.shadowRoot?.childNodes.length;
-      getInvokerButton()?.click();
-      await waitUntil(isDialogVisible);
-      getCloseButton()?.click();
-      await waitUntil(() => !isDialogVisible());
-      getSecondButton()?.click();
-      await waitUntil(() => !isDialogRendered());
-      getFirstButton()?.click();
-      await waitUntil(isDialogRendered);
-      getInvokerButton()?.click();
-      await waitUntil(isDialogVisible);
-      getCloseButton()?.click();
-      await waitUntil(() => !isDialogVisible());
-      expect(isDialogVisible()).to.equal(false);
-    });
-  });
-});
+import { runDialogSuite } from '../test-suites/lion-dialog.suite.js';
+runDialogSuite();