@lion/ui 0.24.0 → 0.26.0

package/components/form-core/test-suites/InteractionStateMixin.suite.js

@@ -11,16 +11,20 @@ import {
 import sinon from 'sinon';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { InteractionStateMixin, ValidateMixin, MinLength } from '@lion/ui/form-core.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
- * @param {{tagString?: string, allowedModelValueTypes?: Array.<ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor>}} [customConfig]
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * Runs the interaction-state suite. The caller hands the element to run against; leaving `host` out
+ * keeps the element this suite builds from the mixin.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}, {allowedModelValueTypes?: any[]}>} [customConfig]
  */
-export function runInteractionStateMixinSuite(customConfig) {
-  const cfg = {
-    tagString: null,
-    allowedModelValueTypes: [Array, Object, Number, Boolean, String, Date],
-    ...customConfig,
-  };
+export function runInteractionStateMixinSuite({
+  classes = {},
+  allowedModelValueTypes = [Array, Object, Number, Boolean, String, Date],
+  tagString: legacyTagString,
+} = {}) {
   describe(`InteractionStateMixin`, async () => {
     class IState extends InteractionStateMixin(ValidateMixin(LitElement)) {
       connectedCallback() {
@@ -41,8 +45,8 @@ export function runInteractionStateMixinSuite(customConfig) {
         return this._modelValue;
       }
     }
-    cfg.tagString = cfg.tagString ? cfg.tagString : defineCE(IState);
-    const tag = unsafeStatic(cfg.tagString);
+    const tagString = resolveSuiteTag(classes?.host, legacyTagString, IState);
+    const tag = unsafeStatic(tagString);
     it('sets states to false on init', async () => {
       const el = /** @type {IState} */ await fixture(html`<${tag}></${tag}>`);
       expect(el.dirty).to.be.false;
@@ -115,7 +119,7 @@ export function runInteractionStateMixinSuite(customConfig) {
 
     // This method actually tests the implementation of the _isPrefilled method.
     it(`can determine "prefilled" based on different modelValue types
-      (${cfg.allowedModelValueTypes.map((t) => t.name).join(', ')})`, async () => {
+      (${allowedModelValueTypes.map((t) => t.name).join(', ')})`, async () => {
       /** @typedef {{_inputNode: HTMLElement}} inputNodeInterface */
 
       const el = /** @type {IState & inputNodeInterface} */ await fixture(html`<${tag}></${tag}>`);
@@ -140,13 +144,13 @@ export function runInteractionStateMixinSuite(customConfig) {
       };
 
       // Prefilled
-      if (cfg.allowedModelValueTypes.includes(Array)) {
+      if (allowedModelValueTypes.includes(Array)) {
         changeModelValueAndLeave(['not-empty']);
         expect(el.prefilled, 'not empty array should be "prefilled"').to.be.true;
         changeModelValueAndLeave([]);
         expect(el.prefilled, 'empty array should not be "prefilled"').to.be.false;
       }
-      if (cfg.allowedModelValueTypes.includes(Object)) {
+      if (allowedModelValueTypes.includes(Object)) {
         changeModelValueAndLeave({
           not: 'empty',
         });
@@ -154,17 +158,17 @@ export function runInteractionStateMixinSuite(customConfig) {
         changeModelValueAndLeave({});
         expect(el.prefilled, 'empty object should not be "prefilled"').to.be.false;
       }
-      if (cfg.allowedModelValueTypes.includes(Number)) {
+      if (allowedModelValueTypes.includes(Number)) {
         changeModelValueAndLeave(0);
         expect(el.prefilled, 'numbers should be "prefilled"').to.be.true;
       }
-      if (cfg.allowedModelValueTypes.includes(String)) {
+      if (allowedModelValueTypes.includes(String)) {
         changeModelValueAndLeave(false);
         expect(el.prefilled, 'booleans should be "prefilled"').to.be.true;
         changeModelValueAndLeave('');
         expect(el.prefilled, 'empty string should not be "prefilled"').to.be.false;
       }
-      if (cfg.allowedModelValueTypes.includes(Date)) {
+      if (allowedModelValueTypes.includes(Date)) {
         changeModelValueAndLeave(new Date());
         expect(el.prefilled, 'Dates should be "prefilled"').to.be.true;
       }

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -1,10 +1,11 @@
-import { defineCE, expect, fixture, html, triggerFocusFor, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture, html, triggerFocusFor, unsafeStatic } from '@open-wc/testing';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { NativeTextFieldMixin } from '@lion/ui/form-core.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { browserDetection } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 import { spy } from 'sinon';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -13,13 +14,12 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  */
 
 /**
- * @param {{tagString?: string, modelValueType?: modelValueType}} [customConfig]
+ * Runs the `NativeTextFieldMixin` behavioural suite. The caller hands the element to run against;
+ * leaving `host` out keeps the element this suite builds from the mixin.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}, {modelValueType?: modelValueType}>} [customConfig]
  */
-export function runNativeTextFieldMixinSuite(customConfig) {
-  const cfg = {
-    tagString: null,
-    ...customConfig,
-  };
+export function runNativeTextFieldMixinSuite({ classes = {}, tagString: legacyTagString } = {}) {
   describe('NativeTextFieldMixin', () => {
     class NativeTextFieldClass extends NativeTextFieldMixin(LitElement) {
       get slots() {
@@ -29,8 +29,7 @@ export function runNativeTextFieldMixinSuite(customConfig) {
         };
       }
     }
-    cfg.tagString = cfg.tagString ? cfg.tagString : defineCE(NativeTextFieldClass);
-    const tag = unsafeStatic(cfg.tagString);
+    const tag = unsafeStatic(resolveSuiteTag(classes?.host, legacyTagString, NativeTextFieldClass));
     it('preserves the caret position on value change', async () => {
       const el = /** @type {NativeTextFieldClass} */ await fixture(html`<${tag}></${tag}>`);
       // @ts-ignore [allow-protected] in test

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -20,20 +20,23 @@ import { LitElement } from 'lit';
 import sinon from 'sinon';
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('@lion/ui/form-core.js').LionField} LionField
  */
 
 /**
- * @param {{tagString?: string | null, lightDom?: string}} [customConfig]
+ * Runs the `ValidateMixin` behavioural suite. The caller hands the element to run against; leaving
+ * `host` out keeps the element this suite builds from the mixin.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}, {lightDom?: string}>} [customConfig]
  */
-export function runValidateMixinSuite(customConfig) {
-  const cfg = {
-    tagString: null,
-    ...customConfig,
-  };
-  const lightDom = cfg.lightDom || '';
+export function runValidateMixinSuite({
+  classes = {},
+  tagString: legacyTagString,
+  lightDom = '',
+} = {}) {
   class ValidateElement extends ValidateMixin(LitElement) {
     connectedCallback() {
       super.connectedCallback();
@@ -42,7 +45,7 @@ export function runValidateMixinSuite(customConfig) {
       this.appendChild(inputNode);
     }
   }
-  const tagString = cfg.tagString || defineCE(ValidateElement);
+  const tagString = resolveSuiteTag(classes.host, legacyTagString, ValidateElement);
   const tag = unsafeStatic(tagString);
   describe('ValidateMixin', () => {
     /**
@@ -703,8 +706,9 @@ export function runValidateMixinSuite(customConfig) {
             .modelValue=${'dog'}
             .validators=${[asyncV]}
             .asyncValidateOn=${
-              /** @param {{ formControl: { isFocused: boolean } }} opts */ ({ formControl }) =>
-                !formControl.isFocused
+              /** @param {{ classes?: Record<string, CustomElementConstructor>, formControl: { isFocused: boolean } }} opts */ ({
+                formControl,
+              }) => !formControl.isFocused
             }
             >
           ${lightDom}

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -12,12 +12,25 @@ import {
   ValidateMixin,
   Validator,
 } from '@lion/ui/form-core.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('../types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
  */
 
-export function runValidateMixinFeedbackPart() {
+/** @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement */
+
+/**
+ * Runs the validity-feedback suite. The caller hands the element to run against; leaving `host` out
+ * keeps the element this suite builds from the mixin.
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export function runValidateMixinFeedbackPart(customConfig = {}) {
+  const classes = {
+    ...customConfig?.classes,
+  };
+  // legacy key, kept for callers that registered their own tag
+  const customTagString = customConfig?.tagString;
   const localizeManager = getLocalizeManager();
   describe('Validity Feedback', () => {
     beforeEach(() => {
@@ -31,7 +44,7 @@ export function runValidateMixinFeedbackPart() {
         this.appendChild(inputNode);
       }
     }
-    const tagString = defineCE(ValidateElement);
+    const tagString = resolveSuiteTag(classes.host, customTagString, ValidateElement);
     const tag = unsafeStatic(tagString);
     class ContainsLowercaseA extends Validator {
       static get validatorName() {

package/components/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js

@@ -11,6 +11,7 @@ import { LionInput } from '@lion/ui/input.js';
 import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import { resolveSuiteTag } from '../../../core/test-helpers/resolveSuiteTag.js';
 class ChoiceInputFoo extends ChoiceInputMixin(LionInput) {}
 customElements.define('choice-input-foo', ChoiceInputFoo);
 class ChoiceInputBar extends ChoiceInputMixin(LionInput) {
@@ -26,22 +27,43 @@ class ChoiceInputGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {}
 customElements.define('choice-input-group', ChoiceInputGroup);
 
 /**
- * @param {{ parentTagString?:string, childTagString?: string, choiceType?: string}} config
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * `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<{child: SuiteElement; childBar: SuiteElement; childFoo: SuiteElement; host: SuiteElement}, {childTagString?: any; childTagStringBar?: any; childTagStringFoo?: any; choiceType?: any; parentTagString?: any}>} customConfig
  */
-export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choiceType } = {}) {
-  const cfg = {
-    parentTagString: parentTagString || 'choice-input-group',
-    childTagString: childTagString || 'choice-input',
-    childTagStringFoo: 'choice-input-foo',
-    childTagStringBar: 'choice-input-bar',
-    choiceType: choiceType || 'single',
-  };
-  const parentTag = unsafeStatic(cfg.parentTagString);
-  const childTag = unsafeStatic(cfg.childTagString);
-  const childTagFoo = unsafeStatic(cfg.childTagStringFoo);
-  const childTagBar = unsafeStatic(cfg.childTagStringBar);
-  describe(`ChoiceGroupMixin: ${cfg.parentTagString}`, () => {
-    if (cfg.choiceType === 'single') {
+export function runChoiceGroupMixinSuite({
+  classes = {},
+  choiceType = 'single',
+  parentTagString: legacyParentTagString,
+  childTagString: legacyChildTagString,
+  childTagStringFoo: legacyChildTagStringFoo,
+  childTagStringBar: legacyChildTagStringBar,
+} = {}) {
+  // Every element this suite renders is built from the mixins, so the class - not a Lion element - is
+  // the default, and it only exists inside the `describe` below.
+  const parentTagString = resolveSuiteTag(
+    classes?.host,
+    legacyParentTagString,
+    'choice-input-group',
+  );
+  const childTagString = resolveSuiteTag(classes?.child, legacyChildTagString, 'choice-input');
+  const childTagStringFoo = resolveSuiteTag(
+    classes?.childFoo,
+    legacyChildTagStringFoo,
+    'choice-input-foo',
+  );
+  const childTagStringBar = resolveSuiteTag(
+    classes?.childBar,
+    legacyChildTagStringBar,
+    'choice-input-bar',
+  );
+  const parentTag = unsafeStatic(parentTagString);
+  const childTag = unsafeStatic(childTagString);
+  const childTagFoo = unsafeStatic(childTagStringFoo);
+  const childTagBar = unsafeStatic(childTagStringBar);
+  describe(`ChoiceGroupMixin: ${parentTagString}`, () => {
+    if (choiceType === 'single') {
       it('has a single modelValue representing initial checked values', async () => {
         const el =
           /** @type {ChoiceInputGroup} */
@@ -113,7 +135,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       expect(() => {
         el.addFormElement(invalidChild);
       }).to.throw(
-        `The ${cfg.parentTagString} name="gender[]" does not allow to register ${cfg.childTagString} with .modelValue="Lara" - The modelValue should represent an Object { value: "foo", checked: false }`,
+        `The ${parentTagString} name="gender[]" does not allow to register ${childTagString} with .modelValue="Lara" - The modelValue should represent an Object { value: "foo", checked: false }`,
       );
     });
     it('automatically sets the name property of child fields to its own name', async () => {
@@ -224,7 +246,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal('other');
       } else {
         expect(el.modelValue).to.deep.equal(['other']);
@@ -241,7 +263,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.equal('other');
       } else {
         expect(el.serializedValue).to.deep.equal(['other']);
@@ -258,7 +280,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.formattedValue).to.equal('other');
       } else {
         expect(el.formattedValue).to.deep.equal(['other']);
@@ -275,7 +297,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         el.modelValue = 'other';
         await el.registrationComplete;
         expect(el.modelValue).to.equal('other');
@@ -295,7 +317,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         // @ts-expect-error
         el.serializedValue = 'other';
         await el.registrationComplete;
@@ -317,14 +339,14 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'other'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal('');
       } else {
         expect(el.modelValue).to.deep.equal([]);
       }
       el.modelValue = undefined;
       await el.updateComplete;
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal('');
       } else {
         expect(el.modelValue).to.deep.equal([]);
@@ -342,7 +364,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${date} checked></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal(date);
         el.formElements[0].checked = true;
         expect(el.modelValue).to.deep.equal({
@@ -368,7 +390,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${''}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal(0);
         el.formElements[1].checked = true;
         expect(el.modelValue).to.equal('');
@@ -403,7 +425,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           ></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal('female');
       } else {
         expect(el.modelValue).to.deep.equal(['female']);
@@ -442,7 +464,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           ></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.eql({
           v: 'female',
         });
@@ -453,7 +475,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           },
         ]);
       }
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         el.modelValue = {
           v: 'other',
         };
@@ -498,7 +520,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       el.formElements[2].checked = true;
       expect(counter).to.equal(2); // other becomes checked
 
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         // not found values trigger no event
         el.modelValue = 'foo';
         expect(counter).to.equal(2);
@@ -548,7 +570,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
         </${parentTag}>
       `);
       el.formElements[0].checked = true;
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('male');
       } else {
         expect(el.serializedValue).to.deep.equal(['male']);
@@ -563,7 +585,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);
@@ -580,7 +602,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
       `);
       el.formElements[0].checked = true;
       el.clear();
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);
@@ -702,7 +724,7 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
             </${parentTag}>
           </lion-fieldset>
         `);
-        if (cfg.choiceType === 'single') {
+        if (choiceType === 'single') {
           expect(el.serializedValue).to.deep.equal({
             'gender[]': ['female'],
           });

package/components/form-core/test-suites/choice-group/ChoiceInputMixin.suite.js

@@ -3,6 +3,7 @@ import { LionInput } from '@lion/ui/input.js';
 import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
+import { resolveSuiteTag } from '../../../core/test-helpers/resolveSuiteTag.js';
 class ChoiceInput extends ChoiceInputMixin(LionInput) {
   constructor() {
     super();
@@ -12,14 +13,14 @@ class ChoiceInput extends ChoiceInputMixin(LionInput) {
 customElements.define('choice-group-input', ChoiceInput);
 
 /**
- * @param {{ tagString?:string, tagType?: string}} config
+ * `tagString`, `klass` and the older role tag keys are deprecated: pass `classes` instead (Lion
+ * itself uses `classes` everywhere).
+ * @param {{ classes?: Record<string, CustomElementConstructor>, tagString?:string, tagType?: string}} config
  * @deprecated
  */
-export function runChoiceInputMixinSuite({ tagString } = {}) {
-  const cfg = {
-    tagString: tagString || 'choice-group-input',
-  };
-  const tag = unsafeStatic(cfg.tagString);
+export function runChoiceInputMixinSuite({ classes = {}, tagString: legacyTagString } = {}) {
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, 'choice-group-input');
+  const tag = unsafeStatic(tagString);
   describe(`ChoiceInputMixin: ${tagString}`, () => {
     it('is hidden when attribute hidden is true', async () => {
       const el = /** @type {ChoiceInput} */ await fixture(html`<${tag} hidden></${tag}>`);

package/components/form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js

@@ -2,6 +2,7 @@ import '@lion/ui/define/lion-fieldset.js';
 import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
 import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
+import { resolveSuiteTag } from '../../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  *
@@ -9,22 +10,18 @@ import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testi
  */
 
 /**
- * @param {{ parentTagString?:string, childTagString?: string, choiceType?: string}} config
+ * Both elements are built here rather than taken from Lion, so `host` and `child` are the only roles
+ * and anything the caller leaves out keeps the class this suite builds.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; child: SuiteElement}, {choiceType?: string}>} [customConfig]
  */
-export function runCustomChoiceGroupMixinSuite({
-  parentTagString,
-  childTagString,
-  choiceType,
-} = {}) {
-  const cfg = {
-    parentTagString: parentTagString || 'custom-choice-input-group',
-    childTagString: childTagString || 'custom-choice-input',
-    choiceType: choiceType || 'single',
-  };
-  const parentTag = unsafeStatic(cfg.parentTagString);
-  const childTag = unsafeStatic(cfg.childTagString);
-  describe(`CustomChoiceGroupMixin: ${cfg.parentTagString}`, () => {
-    if (cfg.choiceType === 'single') {
+export function runCustomChoiceGroupMixinSuite({ classes = {}, choiceType = 'single' } = {}) {
+  const parentTagString = resolveSuiteTag(classes?.host, undefined, 'custom-choice-input-group');
+  const childTagString = resolveSuiteTag(classes?.child, undefined, 'custom-choice-input');
+  const parentTag = unsafeStatic(parentTagString);
+  const childTag = unsafeStatic(childTagString);
+  describe(`CustomChoiceGroupMixin: ${parentTagString}`, () => {
+    if (choiceType === 'single') {
       it('has a single modelValue representing a custom value', async () => {
         const el =
           /** @type {CustomChoiceGroup} */
@@ -65,7 +62,7 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.modelValue).to.equal('other');
       } else {
         expect(el.modelValue).to.deep.equal(['other']);
@@ -82,7 +79,7 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.equal('other');
       } else {
         expect(el.serializedValue).to.deep.equal(['other']);
@@ -99,7 +96,7 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.formattedValue).to.equal('other');
       } else {
         expect(el.formattedValue).to.deep.equal(['other']);
@@ -116,7 +113,7 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         el.modelValue = 'other';
         await el.registrationComplete;
         expect(el.modelValue).to.equal('other');
@@ -135,7 +132,7 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         // @ts-expect-error
         el.serializedValue = 'other';
         await el.registrationComplete;
@@ -156,13 +153,13 @@ export function runCustomChoiceGroupMixinSuite({
           <${childTag} .choiceValue=${'female'}></${childTag}>
         </${parentTag}>
       `);
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         el.modelValue = 'other';
       } else {
         el.modelValue = ['other'];
       }
       el.clear();
-      if (cfg.choiceType === 'single') {
+      if (choiceType === 'single') {
         expect(el.serializedValue).to.deep.equal('');
       } else {
         expect(el.serializedValue).to.deep.equal([]);

package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js

@@ -3,17 +3,26 @@ import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
 import { LionInput } from '@lion/ui/input.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
-import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { FormGroupMixin } from '@lion/ui/form-core.js';
+import { resolveSuiteTag } from '../../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('@lion/ui/form-core.js').LionField} LionField
  */
 
 /**
- * @param {{ tagString?: string, childTagString?:string }} [cfg]
+ * Runs the form-group suite. The caller hands the elements it should run against - `host` is the
+ * group, `child` what sits inside it; anything left out keeps the class this suite builds from the
+ * mixins.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; child: SuiteElement}>} [customConfig]
  */
-export function runFormGroupMixinInputSuite(cfg = {}) {
+export function runFormGroupMixinInputSuite({
+  classes = {},
+  tagString: legacyTagString,
+  childTagString: legacyChildTagString,
+} = {}) {
   const FormChild = class extends LionInput {
     get slots() {
       return {
@@ -22,7 +31,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       };
     }
   };
-  const childTagString = cfg.childTagString || defineCE(FormChild);
+  const childTagString = resolveSuiteTag(classes?.child, legacyChildTagString, FormChild);
   const FormGroup = class extends FormGroupMixin(LitElement) {
     constructor() {
       super();
@@ -34,7 +43,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       this._repropagationRole = 'fieldset'; // configures FormControlMixin
     }
   };
-  const tagString = cfg.tagString || defineCE(FormGroup);
+  const tagString = resolveSuiteTag(classes?.host, legacyTagString, FormGroup);
   const tag = unsafeStatic(tagString);
   const childTag = unsafeStatic(childTagString);
   beforeEach(() => {