@lion/ui 0.24.0 → 0.26.0

package/components/checkbox-group/test/lion-checkbox-group-integrations.test.js

@@ -1,7 +1,10 @@
+import { LionCheckbox, LionCheckboxGroup } from '@lion/ui/checkbox-group.js';
 import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-checkbox-group.js';
 runChoiceGroupMixinSuite({
-  parentTagString: 'lion-checkbox-group',
-  childTagString: 'lion-checkbox',
+  classes: {
+    host: LionCheckboxGroup,
+    child: LionCheckbox,
+  },
   choiceType: 'multiple',
 });

package/components/checkbox-group/test/lion-checkbox-indeterminate-integrations.test.js

@@ -1,13 +1,22 @@
 import '@lion/ui/define/lion-checkbox-indeterminate.js';
 import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
+import {
+  LionCheckbox,
+  LionCheckboxGroup,
+  LionCheckboxIndeterminate,
+} from '@lion/ui/checkbox-group.js';
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';
 runChoiceInputMixinSuite({
-  tagString: 'lion-checkbox-indeterminate',
+  classes: {
+    host: LionCheckboxIndeterminate,
+  },
 });
 runCheckboxIndeterminateSuite({
-  tagString: 'lion-checkbox-indeterminate',
-  groupTagString: 'lion-checkbox-group',
-  childTagString: 'lion-checkbox',
+  classes: {
+    host: LionCheckboxIndeterminate,
+    'checkbox-group': LionCheckboxGroup,
+    checkbox: LionCheckbox,
+  },
 });

package/components/checkbox-group/test/lion-checkbox-integrations.test.js

@@ -1,5 +1,8 @@
+import { LionCheckbox } from '@lion/ui/checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
 runChoiceInputMixinSuite({
-  tagString: 'lion-checkbox',
+  classes: {
+    host: LionCheckbox,
+  },
 });

package/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js

@@ -1,10 +1,14 @@
 import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import {
+  LionCheckbox,
+  LionCheckboxGroup,
+  LionCheckboxIndeterminate,
+} from '@lion/ui/checkbox-group.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
- * @typedef {import('../src/LionCheckbox.js').LionCheckbox} LionCheckbox
- * @typedef {import('../src/LionCheckboxIndeterminate.js').LionCheckboxIndeterminate} LionCheckboxIndeterminate
- * @typedef {import('../src/LionCheckboxGroup.js').LionCheckboxGroup} LionCheckboxGroup
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
  */
 
 /**
@@ -22,30 +26,26 @@ function getCheckboxIndeterminateMembers(el) {
 }
 
 /**
- * @param {{tagString?: string, groupTagString?: string, childTagString?: string}} [customConfig]
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{'checkbox-group': SuiteElement; checkbox: SuiteElement; host: SuiteElement}, {childTagString?: any; groupTagString?: any}>} [customConfig]
  */
-export function runCheckboxIndeterminateSuite(customConfig) {
-  const cfg = {
-    tagString: null,
-    groupTagString: null,
-    childTagString: null,
-    ...customConfig,
-  };
-
-  /** @type {{_$litStatic$: any}} */
-  let tag;
-  /** @type {{_$litStatic$: any}} */
-  let groupTag;
-  /** @type {{_$litStatic$: any}} */
-  let childTag;
-  before(async () => {
-    // @ts-expect-error
-    tag = unsafeStatic(cfg.tagString);
-    // @ts-expect-error
-    groupTag = unsafeStatic(cfg.groupTagString);
-    // @ts-expect-error
-    childTag = unsafeStatic(cfg.childTagString);
-  });
+export function runCheckboxIndeterminateSuite({
+  classes: {
+    host: hostEl = LionCheckboxIndeterminate,
+    'checkbox-group': groupEl = LionCheckboxGroup,
+    checkbox: childEl = LionCheckbox,
+  } = {},
+  tagString: legacyTagString,
+  groupTagString: legacyGroupTagString,
+  childTagString: legacyChildTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(hostEl, legacyTagString);
+  const groupTagString = resolveSuiteTag(groupEl, legacyGroupTagString);
+  const childTagString = resolveSuiteTag(childEl, legacyChildTagString);
+  const tag = unsafeStatic(tagString);
+  const groupTag = unsafeStatic(groupTagString);
+  const childTag = unsafeStatic(childTagString);
   describe('CheckboxIndeterminate', async () => {
     /** @type {{_$litStatic$: any}} */
 
@@ -74,7 +74,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
@@ -92,7 +92,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
     });
@@ -111,7 +111,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
@@ -132,7 +132,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -157,7 +157,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -185,7 +185,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -210,7 +210,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
@@ -226,7 +226,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
@@ -243,7 +243,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.false;
@@ -261,7 +261,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
 
       // Assert
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
@@ -281,7 +281,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -309,7 +309,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -337,7 +337,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -366,7 +366,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -395,7 +395,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -423,7 +423,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -451,7 +451,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -480,7 +480,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -568,11 +568,11 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
 
       // Act
-      const newChild = document.createElement(/** @type {string} */ cfg.childTagString);
+      const newChild = document.createElement(/** @type {string} */ childTagString);
       elIndeterminate.appendChild(newChild);
       await elIndeterminate.updateComplete;
 
@@ -592,7 +592,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
       expect(elIndeterminate.checked).to.be.false;
 
@@ -712,7 +712,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
       const elIndeterminate =
         /**  @type {LionCheckboxIndeterminate} */
-        el.querySelector(`${cfg.tagString}`);
+        el.querySelector(`${tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -740,7 +740,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
         const elIndeterminate =
           /**  @type {LionCheckboxIndeterminate} */
-          el.querySelector(`${cfg.tagString}`);
+          el.querySelector(`${tagString}`);
         expect(elIndeterminate.mixedState).to.be.true;
         expect(elIndeterminate.checked).to.be.false;
         expect(elIndeterminate.indeterminate).to.be.true;
@@ -775,10 +775,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
         const elIndeterminate =
           /**  @type {LionCheckboxIndeterminate} */
-          el.querySelector(`${cfg.tagString}`);
+          el.querySelector(`${tagString}`);
         const checkboxEls =
           /** @type {LionCheckbox[]} */
-          Array.from(el.querySelectorAll(`${cfg.childTagString}`));
+          Array.from(el.querySelectorAll(`${childTagString}`));
         expect(checkboxEls.map((checkboxEl) => checkboxEl.checked)).to.eql([true, false, false]);
 
         // @ts-ignore for testing purposes, we access this protected getter
@@ -808,10 +808,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       `);
         const elIndeterminate =
           /**  @type {LionCheckboxIndeterminate} */
-          el.querySelector(`${cfg.tagString}`);
+          el.querySelector(`${tagString}`);
         const checkboxEls =
           /** @type {LionCheckbox[]} */
-          Array.from(el.querySelectorAll(`${cfg.childTagString}`));
+          Array.from(el.querySelectorAll(`${childTagString}`));
 
         // Check when all child boxes in indeterminate state are unchecked
         // we don't have a tri-state, but a duo-state.
@@ -895,7 +895,7 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         `);
         const elIndeterminate =
           /**  @type {LionCheckboxIndeterminate} */
-          el.querySelector(`${cfg.tagString}`);
+          el.querySelector(`${tagString}`);
         expect(
           elIndeterminate.shadowRoot
             ?.querySelector('.choice-field__nested-checkboxes')

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

@@ -1,126 +1,2 @@
-import { expect, fixture as _fixture } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-import '@lion/ui/define/lion-collapsible.js';
-
-/**
-
- * @typedef {import('../src/LionCollapsible.js').LionCollapsible} LionCollapsible
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionCollapsible>} */ _fixture;
-const collapsibleTemplate = html`
-  <button slot="invoker">More about cars</button>
-  <div slot="content" style="font-size: 12px; line-height: 16px; font-family: Arial;">
-    Most definitions of cars say that they run primarily on roads, seat one to eight people, have
-    four tires, and mainly transport people rather than goods.
-  </div>
-`;
-let isCollapsibleOpen = false;
-/** @param {boolean} state */
-const collapsibleToggle = (state) => {
-  isCollapsibleOpen = state;
-};
-const defaultCollapsible = html` <lion-collapsible>${collapsibleTemplate}</lion-collapsible> `;
-const collapsibleWithEvents = html`
-  <lion-collapsible
-    @opened-changed=${
-      /** @param {Event} e */ (e) =>
-        collapsibleToggle(/** @type {LionCollapsible} */ e.target?.opened)
-    }
-  >
-    ${collapsibleTemplate}
-  </lion-collapsible>
-`;
-
-/**
- * @param {LionCollapsible} el
- */
-function getProtectedMembers(el) {
-  return {
-    // @ts-ignore
-    contentHeight: el._contentHeight,
-  };
-}
-describe('<lion-collapsible>', () => {
-  describe('Collapsible', () => {
-    it('sets opened to false by default', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      expect(collapsible.opened).to.equal(false);
-    });
-    it('has [opened] on current expanded invoker which serves as styling hook', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      collapsible.opened = true;
-      await collapsible.updateComplete;
-      expect(collapsible).to.have.attribute('opened');
-    });
-    it('should return content node height before and after collapsing', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      const collHeight1 = getProtectedMembers(collapsible);
-      expect(collHeight1.contentHeight).to.equal('0px');
-      collapsible.show();
-      await collapsible.updateComplete;
-      const collHeight2 = getProtectedMembers(collapsible);
-      expect(collHeight2.contentHeight).to.equal('32px');
-    });
-  });
-  describe('User interaction', () => {
-    it('opens a invoker on click', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      const invoker = collapsible.querySelector('[slot=invoker]');
-      invoker?.dispatchEvent(new Event('click'));
-      expect(collapsible.opened).to.equal(true);
-    });
-    it('should toggle the content using `toggle()`', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      collapsible.toggle();
-      expect(collapsible.opened).to.equal(true);
-    });
-    it('should expand and collapse the content using `show()` and `hide()`', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      collapsible.show();
-      expect(collapsible.opened).to.equal(true);
-      collapsible.hide();
-      expect(collapsible.opened).to.equal(false);
-    });
-    it('should listen to the open and close state change', async () => {
-      const collapsible = await fixture(collapsibleWithEvents);
-      collapsible.show();
-      await collapsible.updateComplete;
-      expect(isCollapsibleOpen).to.equal(true);
-      collapsible.hide();
-      await collapsible.updateComplete;
-      expect(isCollapsibleOpen).to.equal(false);
-    });
-  });
-  describe('Accessibility', () => {
-    it('[collapsed] is a11y AXE accessible', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      await expect(collapsible).to.be.accessible();
-    });
-    it('[expanded] is a11y AXE accessible', async () => {
-      const collapsible = await fixture(defaultCollapsible);
-      collapsible.show();
-      await expect(collapsible).to.be.accessible();
-    });
-    describe('Invoker', () => {
-      it('links id of content items to invoker via [aria-controls]', async () => {
-        const collapsibleElement = await fixture(defaultCollapsible);
-        const invoker = collapsibleElement.querySelector('[slot=invoker]');
-        const content = collapsibleElement.querySelector('[slot=content]');
-        expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
-      });
-      it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
-        const collapsibleElement = await fixture(defaultCollapsible);
-        const invoker = collapsibleElement.querySelector('[slot=invoker]');
-        expect(invoker).to.have.attribute('aria-expanded', 'false');
-      });
-      it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
-        const collapsibleElement = await fixture(defaultCollapsible);
-        const invoker = collapsibleElement.querySelector('[slot=invoker]');
-        collapsibleElement.opened = true;
-        await collapsibleElement.updateComplete;
-        expect(invoker).to.have.attribute('aria-expanded', 'true');
-      });
-    });
-  });
-});
+import { runCollapsibleSuite } from '../test-suites/LionCollapsible.suite.js';
+runCollapsibleSuite();

package/components/collapsible/test-suites/LionCollapsible.suite.js

@@ -0,0 +1,147 @@
+import { expect, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '@lion/ui/define/lion-collapsible.js';
+import { LionCollapsible } from '@lion/ui/collapsible.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+/**
+ * @param {LionCollapsible} el
+ */
+function getProtectedMembers(el) {
+  return {
+    // @ts-ignore
+    contentHeight: el._contentHeight,
+  };
+}
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ */
+
+/**
+ * Runs the `<lion-collapsible>` behavioural suite. The caller hands the elements it should run
+ * against; anything left out keeps Lion's own element. The two slots are native elements, so those
+ * roles take their tag (`invoker: 'button'`, `content: 'div'`).
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; invoker: SuiteElement; content: SuiteElement}>} [customConfig]
+ */
+export function runCollapsibleSuite({
+  classes: {
+    host: hostEl = LionCollapsible,
+    // the two slots are native elements, so their default is the tag
+    invoker: invokerEl = 'button',
+    content: contentEl = 'div',
+  } = {},
+  tagString,
+} = {}) {
+  const tag = unsafeStatic(resolveSuiteTag(hostEl, tagString));
+  const invokerRef = unsafeStatic(resolveSuiteTag(invokerEl));
+  const contentRef = unsafeStatic(resolveSuiteTag(contentEl));
+  const fixture = /** @type {(arg: TemplateResult) => Promise<LionCollapsible>} */ _fixture;
+  const collapsibleTemplate = html`
+    <${invokerRef} slot="invoker">More about cars</${invokerRef}>
+    <${contentRef} slot="content" style="font-size: 12px; line-height: 16px; font-family: Arial;">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </${contentRef}>
+  `;
+  let isCollapsibleOpen = false;
+  /** @param {boolean} state */
+  const collapsibleToggle = (state) => {
+    isCollapsibleOpen = state;
+  };
+  const defaultCollapsible = html` <${tag}>${collapsibleTemplate}</${tag}> `;
+  const collapsibleWithEvents = html`
+    <${tag}
+      @opened-changed=${/** @param {Event} e */ (e) => collapsibleToggle(/** @type {LionCollapsible} */ e.target?.opened)}
+    >
+      ${collapsibleTemplate}
+    </${tag}>
+  `;
+  describe('<lion-collapsible>', () => {
+    describe('Collapsible', () => {
+      it('sets opened to false by default', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        expect(collapsible.opened).to.equal(false);
+      });
+      it('has [opened] on current expanded invoker which serves as styling hook', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        collapsible.opened = true;
+        await collapsible.updateComplete;
+        expect(collapsible).to.have.attribute('opened');
+      });
+      it('should return content node height before and after collapsing', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        const collHeight1 = getProtectedMembers(collapsible);
+        expect(collHeight1.contentHeight).to.equal('0px');
+        collapsible.show();
+        await collapsible.updateComplete;
+        const collHeight2 = getProtectedMembers(collapsible);
+        expect(collHeight2.contentHeight).to.equal('32px');
+      });
+    });
+    describe('User interaction', () => {
+      it('opens a invoker on click', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        const invoker = collapsible.querySelector('[slot=invoker]');
+        invoker?.dispatchEvent(new Event('click'));
+        expect(collapsible.opened).to.equal(true);
+      });
+      it('should toggle the content using `toggle()`', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        collapsible.toggle();
+        expect(collapsible.opened).to.equal(true);
+      });
+      it('should expand and collapse the content using `show()` and `hide()`', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        collapsible.show();
+        expect(collapsible.opened).to.equal(true);
+        collapsible.hide();
+        expect(collapsible.opened).to.equal(false);
+      });
+      it('should listen to the open and close state change', async () => {
+        const collapsible = await fixture(collapsibleWithEvents);
+        collapsible.show();
+        await collapsible.updateComplete;
+        expect(isCollapsibleOpen).to.equal(true);
+        collapsible.hide();
+        await collapsible.updateComplete;
+        expect(isCollapsibleOpen).to.equal(false);
+      });
+    });
+    describe('Accessibility', () => {
+      it('[collapsed] is a11y AXE accessible', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        await expect(collapsible).to.be.accessible();
+      });
+      it('[expanded] is a11y AXE accessible', async () => {
+        const collapsible = await fixture(defaultCollapsible);
+        collapsible.show();
+        await expect(collapsible).to.be.accessible();
+      });
+      describe('Invoker', () => {
+        it('links id of content items to invoker via [aria-controls]', async () => {
+          const collapsibleElement = await fixture(defaultCollapsible);
+          const invoker = collapsibleElement.querySelector('[slot=invoker]');
+          const content = collapsibleElement.querySelector('[slot=content]');
+          expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
+        });
+        it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
+          const collapsibleElement = await fixture(defaultCollapsible);
+          const invoker = collapsibleElement.querySelector('[slot=invoker]');
+          expect(invoker).to.have.attribute('aria-expanded', 'false');
+        });
+        it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
+          const collapsibleElement = await fixture(defaultCollapsible);
+          const invoker = collapsibleElement.querySelector('[slot=invoker]');
+          collapsibleElement.opened = true;
+          await collapsibleElement.updateComplete;
+          expect(invoker).to.have.attribute('aria-expanded', 'true');
+        });
+      });
+    });
+  });
+}

package/components/combobox/test/lion-combobox-integrations.test.js

@@ -1,15 +1,20 @@
 import { css } from 'lit';
 import { runListboxMixinSuite } from '@lion/ui/listbox-test-suites.js';
 import '@lion/ui/define/lion-combobox.js';
+import { LionOption } from '@lion/ui/listbox.js';
 import { runCustomChoiceGroupMixinSuite } from '../../form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
 import { LionCombobox } from '../src/LionCombobox.js';
 import { ScopedStylesController } from '../../core/src/ScopedStylesController.js';
 runListboxMixinSuite({
-  tagString: 'lion-combobox',
+  classes: {
+    host: LionCombobox,
+  },
 });
 runCustomChoiceGroupMixinSuite({
-  parentTagString: 'lion-combobox',
-  childTagString: 'lion-option',
+  classes: {
+    host: LionCombobox,
+    child: LionOption,
+  },
 });
 
 // Test case for using ScopedStylesController inside the LionCombobox
@@ -28,5 +33,7 @@ class ComboboxWithScopedStyles extends LionCombobox {
 }
 customElements.define('combobox-with-scoped-styles', ComboboxWithScopedStyles);
 runListboxMixinSuite({
-  tagString: 'combobox-with-scoped-styles',
+  classes: {
+    host: ComboboxWithScopedStyles,
+  },
 });