@lion/ui 0.25.0 → 0.26.0

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/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/test/OverlayController.test.js

@@ -761,7 +761,12 @@ describe('OverlayController', () => {
         await ctrl.show();
         expect(isActiveElement(ctrl.contentNode)).to.be.true;
       });
-      it('keeps focus within the overlay e.g. you can not tab out by accident', async () => {
+      it('keeps focus within the overlay e.g. you can not tab out by accident', async function keepsFocusWithinOverlay() {
+        // Safari (WebKit 16.4 in the Safari 16 gate) does not move the focus the way this test expects
+        // while tabbing - measured on WebKit 16.4. Chromium and Firefox run it.
+        if (browserDetection.isMacSafari) {
+          this.skip();
+        }
         const contentNode =
           /** @type {HTMLElement} */
           await fixture(html` <div><input id="input1" /><input id="input2" /></div> `);

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

@@ -15,6 +15,7 @@ import { cache } from 'lit/directives/cache.js';
 import '@lion/ui/define/lion-dialog.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import { isElementVisible } from '../../core/test-helpers/isElementVisible.js';
 
 /**
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
@@ -459,13 +460,10 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         </${tag}>
       `);
       const dialogEl = /** @type {HTMLDialogElement} */ el._overlayCtrl.__wrappingDialogNode;
-
-      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
-      expect(dialogEl.checkVisibility()).to.be.true;
+      expect(isElementVisible(dialogEl)).to.be.true;
       // @ts-expect-error [allow-protected-in-tests]
       await mimicEscapePress(el._overlayContentNode);
-      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
-      expect(dialogEl.checkVisibility()).to.be.true;
+      expect(isElementVisible(dialogEl)).to.be.true;
     });
     describe('Teardown', () => {
       it('does not teardown when moving dom nodes', async () => {

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

@@ -1,176 +1,2 @@
-import { fixture as _fixture, expect } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-import sinon from 'sinon';
-import '@lion/ui/define/lion-pagination.js';
-
-/**
- * @typedef {import('../src/LionPagination.js').LionPagination} LionPagination
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionPagination>} */ _fixture;
-describe('Pagination', () => {
-  it('has states for count and current', async () => {
-    const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
-    expect(el.getAttribute('count')).to.equal('4');
-    expect(el.getAttribute('current')).to.equal('1');
-    el.count = 8;
-    el.current = 2;
-    await el.updateComplete;
-    expect(el.getAttribute('count')).to.equal('8');
-    expect(el.getAttribute('current')).to.equal('2');
-  });
-  it('disables the previous button if on first page', async () => {
-    const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
-    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
-    expect(buttons[0]).to.has.attribute('disabled');
-  });
-  it('disables the next button if on last page', async () => {
-    const el = await fixture(html` <lion-pagination count="4" current="4"></lion-pagination> `);
-    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
-    expect(buttons[buttons.length - 1]).to.has.attribute('disabled');
-  });
-  describe('User interaction', () => {
-    it('can go to previous page with previous button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[0].click();
-      expect(el.current).to.equal(1);
-    });
-    it('can go to next page with next button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[buttons.length - 1].click();
-      expect(el.current).to.equal(3);
-    });
-    it('goes to the page when clicking on its button', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      buttons[5].click();
-      expect(el.current).to.equal(5);
-    });
-    it('fires current-changed event when interacting with the pagination', async () => {
-      const changeSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
-      `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      const previous = buttons[0];
-      const next = buttons[buttons.length - 1];
-      const page5 = buttons[5];
-      previous.click();
-      expect(changeSpy).to.have.callCount(1);
-      next.click();
-      expect(changeSpy).to.have.callCount(2);
-      page5.click();
-      expect(changeSpy).to.have.callCount(3);
-      el.current = 3;
-      expect(changeSpy).to.have.callCount(4);
-    });
-    it('does NOT fire current-changed event when clicking on a current page number', async () => {
-      const changeSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
-      `);
-      const page2 =
-        /** @type {HTMLElement} */
-        el.shadowRoot?.querySelector("button[aria-current='true']");
-      page2.click();
-      expect(changeSpy).to.not.be.called;
-      expect(el.current).to.equal(2);
-    });
-    it('should announce next and previous page using `next()` and `previous()`', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
-      el.next();
-      await el.updateComplete;
-      expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
-      expect(buttons[2].getAttribute('aria-live')).to.equal('off');
-      el.previous();
-      await el.updateComplete;
-      expect(buttons[3].getAttribute('aria-live')).to.equal('off');
-      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
-    });
-    it('should goto next and previous page using `next()` and `previous()`', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
-      el.next();
-      expect(el.current).to.equal(3);
-      el.previous();
-      expect(el.current).to.equal(2);
-    });
-    it('should goto first and last page using `first()` and `last()`', async () => {
-      const el = await fixture(html` <lion-pagination count="5" current="2"></lion-pagination> `);
-      expect(el.current).to.equal(2);
-      el.first();
-      expect(el.current).to.equal(1);
-      el.last();
-      expect(el.current).to.equal(5);
-    });
-    it('should goto 7 page using `goto()`', async () => {
-      const el = await fixture(html` <lion-pagination count="10" current="2"></lion-pagination> `);
-      expect(el.current).to.equal(2);
-      el.goto(7);
-      expect(el.current).to.equal(7);
-    });
-  });
-  describe('Accessibility', () => {
-    it('sets aria-current to the current page', async () => {
-      const el = await fixture(html` <lion-pagination count="3"></lion-pagination> `);
-      const buttons = Array.from(
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
-      );
-      // button[0] is the previous button
-      expect(buttons[1].getAttribute('aria-current')).to.equal('true');
-      expect(buttons[2].getAttribute('aria-current')).to.equal('false');
-      expect(buttons[3].getAttribute('aria-current')).to.equal('false');
-      el.current = 2;
-      await el.updateComplete;
-      expect(buttons[1].getAttribute('aria-current')).to.equal('false');
-      expect(buttons[2].getAttribute('aria-current')).to.equal('true');
-      expect(buttons[3].getAttribute('aria-current')).to.equal('false');
-    });
-  });
-  describe('Ellipsis display', () => {
-    it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="6" current="1"></lion-pagination> `);
-      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
-      // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.equal(0);
-
-      // There should be 8 nav items: previous button + 6 page buttons + next button
-      expect(navItems.length).to.equal(8);
-    });
-    it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="7" current="1"></lion-pagination> `);
-      // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.equal(0);
-
-      // There should be 9 nav items: previous button + 7 page buttons + next button
-      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
-      expect(navItems.length).to.equal(9);
-    });
-    it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
-      const el = await fixture(html` <lion-pagination count="8" current="1"></lion-pagination> `);
-      // Check that ellipsis is rendered (should have <span> elements with '...')
-      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
-      expect(spans.length).to.be.greaterThan(0);
-
-      // Verify the ellipsis contains '...'
-      const ellipsisText = Array.from(spans).map((span) => span.textContent);
-      expect(ellipsisText).to.include('...');
-    });
-  });
-});
+import { runPaginationSuite } from '../test-suites/LionPagination.suite.js';
+runPaginationSuite();