@lion/ui 0.25.0 → 0.26.0

package/components/input-iban/test/lion-input-iban-integrations.test.js

@@ -1,9 +1,11 @@
+import { LionInputIban } from '@lion/ui/input-iban.js';
 import '@lion/ui/define/lion-input-iban.js';
 import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
-const tagString = 'lion-input-iban';
 describe('<lion-input-iban> integrations', () => {
   runFormatMixinSuite({
-    tagString,
+    classes: {
+      host: LionInputIban,
+    },
     modelValueType: 'iban',
   });
 });

package/components/input-iban/test/lion-input-iban.test.js

@@ -1,73 +1,2 @@
-import { expect, fixture as _fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { IsCountryIBAN, formatIBAN, parseIBAN } from '@lion/ui/input-iban.js';
-import '@lion/ui/define/lion-input-iban.js';
-
-/**
- * @typedef {import('../src/LionInputIban.js').LionInputIban} LionInputIban
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputIban>} */ _fixture;
-describe('<lion-input-iban>', () => {
-  it('uses formatIBAN for formatting', async () => {
-    const el = await fixture(`<lion-input-iban></lion-input-iban>`);
-    expect(el.formatter).to.equal(formatIBAN);
-  });
-  it('uses parseIBAN for parsing', async () => {
-    const el = await fixture(`<lion-input-iban></lion-input-iban>`);
-    expect(el.parser).to.equal(parseIBAN);
-  });
-  it('has a type = text', async () => {
-    const el = await fixture(`<lion-input-iban></lion-input-iban>`);
-    const { _inputNode } = getInputMembers(el);
-    expect(_inputNode.type).to.equal('text');
-  });
-  it('has validator "IsIBAN" applied by default', async () => {
-    const el = await fixture(`<lion-input-iban></lion-input-iban>`);
-    el.modelValue = 'FOO';
-    expect(el.hasFeedbackFor).to.include('error');
-    expect(el.validationStates).to.have.property('error');
-    expect(el.validationStates.error).to.have.property('IsIBAN');
-    el.modelValue = 'DE89370400440532013000';
-    expect(el.hasFeedbackFor).not.to.include('error');
-    expect(el.validationStates).to.have.property('error');
-    expect(el.validationStates.error).not.to.have.property('IsIBAN');
-  });
-  it('can apply validator "IsCountryIBAN" to restrict countries', async () => {
-    const el = await fixture(html`
-      <lion-input-iban .validators=${[new IsCountryIBAN('NL')]}> </lion-input-iban>
-    `);
-    el.modelValue = 'DE89370400440532013000';
-    expect(el.hasFeedbackFor).to.include('error');
-    expect(el.validationStates).to.have.property('error');
-    expect(el.validationStates.error).to.have.property('IsCountryIBAN');
-    el.modelValue = 'NL17INGB0002822608';
-    expect(el.hasFeedbackFor).not.to.include('error');
-    expect(el.validationStates).to.have.property('error');
-    expect(el.validationStates.error).not.to.have.property('IsCountryIBAN');
-    el.modelValue = 'FOO';
-    expect(el.hasFeedbackFor).to.include('error');
-    expect(el.validationStates).to.have.property('error');
-    expect(el.validationStates.error).to.have.property('IsIBAN');
-    expect(el.validationStates.error).to.have.property('IsCountryIBAN');
-  });
-  it('is accessible', async () => {
-    const el = await fixture(
-      `<lion-input-iban><label slot="label">Label</label></lion-input-iban>`,
-    );
-    await expect(el).to.be.accessible();
-  });
-  it('is accessible when readonly', async () => {
-    const el = await fixture(
-      `<lion-input-iban readonly><label slot="label">Label</label></lion-input-iban>`,
-    );
-    await expect(el).to.be.accessible();
-  });
-  it('is accessible when disabled', async () => {
-    const el = await fixture(
-      `<lion-input-iban disabled><label slot="label">Label</label></lion-input-iban>`,
-    );
-    await expect(el).to.be.accessible();
-  });
-});
+import { runInputIbanSuite } from '../test-suites/lion-input-iban.suite.js';
+runInputIbanSuite();

package/components/input-iban/test-suites/lion-input-iban.suite.js

@@ -0,0 +1,88 @@
+import { html } from 'lit/static-html.js';
+import { unsafeStatic, expect, fixture as _fixture } from '@open-wc/testing';
+import { getInputMembers } from '@lion/ui/input-test-helpers.js';
+import { LionInputIban, IsCountryIBAN, formatIBAN, parseIBAN } from '@lion/ui/input-iban.js';
+import '@lion/ui/define/lion-input-iban.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputIban>} */ _fixture;
+
+/**
+ * Runs the `lion-input-iban` behavioural suite, moved out of `test/lion-input-iban.test.js` so a Subclasser can run
+ * the same guarantees against its own element. Pass `tagString` to point it at your
+ * registered tag; see docs/guides/principles/test-suites.md.
+ * `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<{host: SuiteElement}>} [customConfig]
+ */
+export function runInputIbanSuite({
+  classes: { host = LionInputIban } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(tagString);
+  describe('<lion-input-iban>', () => {
+    it('uses formatIBAN for formatting', async () => {
+      const el = await fixture(`<${tagString}></${tagString}>`);
+      expect(el.formatter).to.equal(formatIBAN);
+    });
+    it('uses parseIBAN for parsing', async () => {
+      const el = await fixture(`<${tagString}></${tagString}>`);
+      expect(el.parser).to.equal(parseIBAN);
+    });
+    it('has a type = text', async () => {
+      const el = await fixture(`<${tagString}></${tagString}>`);
+      const { _inputNode } = getInputMembers(el);
+      expect(_inputNode.type).to.equal('text');
+    });
+    it('has validator "IsIBAN" applied by default', async () => {
+      const el = await fixture(`<${tagString}></${tagString}>`);
+      el.modelValue = 'FOO';
+      expect(el.hasFeedbackFor).to.include('error');
+      expect(el.validationStates).to.have.property('error');
+      expect(el.validationStates.error).to.have.property('IsIBAN');
+      el.modelValue = 'DE89370400440532013000';
+      expect(el.hasFeedbackFor).not.to.include('error');
+      expect(el.validationStates).to.have.property('error');
+      expect(el.validationStates.error).not.to.have.property('IsIBAN');
+    });
+    it('can apply validator "IsCountryIBAN" to restrict countries', async () => {
+      const el = await fixture(html`
+        <${tag} .validators=${[new IsCountryIBAN('NL')]}> </${tag}>
+      `);
+      el.modelValue = 'DE89370400440532013000';
+      expect(el.hasFeedbackFor).to.include('error');
+      expect(el.validationStates).to.have.property('error');
+      expect(el.validationStates.error).to.have.property('IsCountryIBAN');
+      el.modelValue = 'NL17INGB0002822608';
+      expect(el.hasFeedbackFor).not.to.include('error');
+      expect(el.validationStates).to.have.property('error');
+      expect(el.validationStates.error).not.to.have.property('IsCountryIBAN');
+      el.modelValue = 'FOO';
+      expect(el.hasFeedbackFor).to.include('error');
+      expect(el.validationStates).to.have.property('error');
+      expect(el.validationStates.error).to.have.property('IsIBAN');
+      expect(el.validationStates.error).to.have.property('IsCountryIBAN');
+    });
+    it('is accessible', async () => {
+      const el = await fixture(`<${tagString}><label slot="label">Label</label></${tagString}>`);
+      await expect(el).to.be.accessible();
+    });
+    it('is accessible when readonly', async () => {
+      const el = await fixture(
+        `<${tagString} readonly><label slot="label">Label</label></${tagString}>`,
+      );
+      await expect(el).to.be.accessible();
+    });
+    it('is accessible when disabled', async () => {
+      const el = await fixture(
+        `<${tagString} disabled><label slot="label">Label</label></${tagString}>`,
+      );
+      await expect(el).to.be.accessible();
+    });
+  });
+}

package/components/input-range/test/lion-input-range.test.js

@@ -1,176 +1,2 @@
-import { expect, fixture as _fixture, nextFrame, html } from '@open-wc/testing';
-import '@lion/ui/define/lion-input-range.js';
-
-/**
- * @typedef {import('../src/LionInputRange.js').LionInputRange} LionInputRange
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputRange>} */ _fixture;
-describe('<lion-input-range>', () => {
-  it('has a type = range', async () => {
-    const el = await fixture(`<lion-input-range></lion-input-range>`);
-    expect(el._inputNode.type).to.equal('range');
-  });
-  it('displays the modelValue and unit', async () => {
-    const el = await fixture(html`
-      <lion-input-range .modelValue=${75} unit="${`%`}"></lion-input-range>
-    `);
-    expect(
-      /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value')
-      ).innerText,
-    ).to.equal('75');
-    expect(
-      /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__unit')
-      ).innerText,
-    ).to.equal('%');
-  });
-  it('displays 2 tick labels (min and max values) by default', async () => {
-    const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
-    expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
-    expect(
-      /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[0]
-      ).textContent?.trim(),
-    ).to.equal(`Minimum ${el.min.toString()}`);
-    expect(
-      /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[1]
-      ).textContent?.trim(),
-    ).to.equal(`Maximum ${el.max.toString()}`);
-  });
-  it('update min and max attributes when min and max property change', async () => {
-    const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
-    el.min = 120;
-    el.max = 220;
-    await nextFrame(); // sync to native element takes some time
-    expect(el._inputNode.min).to.equal(el.min.toString());
-    expect(el._inputNode.max).to.equal(el.max.toString());
-  });
-  it('can hide the tick labels', async () => {
-    const el = await fixture(
-      `<lion-input-range min="100" max="200" no-min-max-labels></lion-input-range>`,
-    );
-    expect(el.shadowRoot?.querySelectorAll('.input-group__input')[0]).dom.to.equal(`
-      <div class="input-group__input">
-        <slot name="input"></slot>
-      </div>
-    `);
-  });
-  it('parser method should return a value parsed into a number format', async () => {
-    const el = await fixture(html`
-      <lion-input-range min="100" max="200" .modelValue=${150}></lion-input-range>
-    `);
-    expect(el.modelValue).to.equal(150);
-    el._inputNode.value = '130';
-    el._inputNode.dispatchEvent(new Event('input'));
-    expect(el.modelValue).to.equal(130);
-  });
-  it('is accessible', async () => {
-    const el = await fixture(`<lion-input-range label="range"></lion-input-range>`);
-    await expect(el).to.be.accessible();
-  });
-  it('is accessible when disabled', async () => {
-    const el = await fixture(`<lion-input-range label="range" disabled></lion-input-range>`);
-    await expect(el).to.be.accessible();
-  });
-  describe('Custom min/max labels', () => {
-    it('displays custom minLabel in the limits when provided', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
-      `);
-      const minDiv =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[0];
-      expect(minDiv.textContent?.trim()).to.equal('Minimum Low');
-    });
-    it('displays custom maxLabel in the limits when provided', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
-      `);
-      const maxDiv =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[1];
-      expect(maxDiv.textContent?.trim()).to.equal('Maximum High');
-    });
-    it('displays custom minLabel as value display when value equals min', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
-      `);
-      const valueSpan =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
-      expect(valueSpan.innerText).to.equal('Low');
-    });
-    it('displays custom maxLabel as value display when value equals max', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" max-label="High" .modelValue=${100}></lion-input-range>
-      `);
-      const valueSpan =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
-      expect(valueSpan.innerText).to.equal('High');
-    });
-    it('displays formatted number when value is between min and max', async () => {
-      const el = await fixture(html`
-        <lion-input-range
-          min="0"
-          max="100"
-          min-label="Low"
-          max-label="High"
-          .modelValue=${50}
-        ></lion-input-range>
-      `);
-      const valueSpan =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
-      expect(valueSpan.innerText).to.equal('50');
-    });
-    it('maintains numeric modelValue even when displaying custom label', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
-      `);
-      const valueSpan =
-        /** @type {HTMLElement} */
-        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
-      // Display shows custom label
-      expect(valueSpan.innerText).to.equal('Low');
-      // But modelValue is still the number
-      expect(el.modelValue).to.equal(0);
-      expect(typeof el.modelValue).to.equal('number');
-    });
-    it('sets aria-valuetext to minLabel when modelValue equals min', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
-      `);
-      el.modelValue = 0;
-      await nextFrame();
-      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
-    });
-    it('sets aria-valuetext to maxLabel when modelValue equals max', async () => {
-      const el = await fixture(html`
-        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
-      `);
-      el.modelValue = 100;
-      await nextFrame();
-      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('High');
-    });
-    it('removes aria-valuetext when modelValue is between min and max', async () => {
-      const el = await fixture(html`
-        <lion-input-range
-          min="0"
-          max="100"
-          min-label="Low"
-          max-label="High"
-          .modelValue=${0}
-        ></lion-input-range>
-      `);
-      await nextFrame();
-      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
-      el.modelValue = 50;
-      await nextFrame();
-      expect(el._inputNode.hasAttribute('aria-valuetext')).to.equal(false);
-    });
-  });
-});
+import { runInputRangeSuite } from '../test-suites/lion-input-range.suite.js';
+runInputRangeSuite();

package/components/input-range/test-suites/lion-input-range.suite.js

@@ -0,0 +1,195 @@
+import { html } from 'lit/static-html.js';
+import { unsafeStatic, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
+import '@lion/ui/define/lion-input-range.js';
+import { LionInputRange } from '@lion/ui/input-range.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputRange>} */ _fixture;
+
+/**
+ * Runs the `lion-input-range` behavioural suite, moved out of `test/lion-input-range.test.js` so a Subclasser can run
+ * the same guarantees against its own element. Pass `tagString` to point it at your
+ * registered tag; see docs/guides/principles/test-suites.md.
+ * `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<{host: SuiteElement}>} [customConfig]
+ */
+export function runInputRangeSuite({
+  classes: { host = LionInputRange } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(host, legacyTagString);
+  const tag = unsafeStatic(tagString);
+  describe('<lion-input-range>', () => {
+    it('has a type = range', async () => {
+      const el = await fixture(`<${tagString}></${tagString}>`);
+      expect(el._inputNode.type).to.equal('range');
+    });
+    it('displays the modelValue and unit', async () => {
+      const el = await fixture(html`
+        <${tag} .modelValue=${75} unit="${`%`}"></${tag}>
+      `);
+      expect(
+        /** @type {HTMLElement} */ (
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value')
+        ).innerText,
+      ).to.equal('75');
+      expect(
+        /** @type {HTMLElement} */ (
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__unit')
+        ).innerText,
+      ).to.equal('%');
+    });
+    it('displays 2 tick labels (min and max values) by default', async () => {
+      const el = await fixture(`<${tagString} min="100" max="200"></${tagString}>`);
+      expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
+      expect(
+        /** @type {HTMLElement} */ (
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[0]
+        ).textContent?.trim(),
+      ).to.equal(`Minimum ${el.min.toString()}`);
+      expect(
+        /** @type {HTMLElement} */ (
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[1]
+        ).textContent?.trim(),
+      ).to.equal(`Maximum ${el.max.toString()}`);
+    });
+    it('update min and max attributes when min and max property change', async () => {
+      const el = await fixture(`<${tagString} min="100" max="200"></${tagString}>`);
+      el.min = 120;
+      el.max = 220;
+      await nextFrame(); // sync to native element takes some time
+      expect(el._inputNode.min).to.equal(el.min.toString());
+      expect(el._inputNode.max).to.equal(el.max.toString());
+    });
+    it('can hide the tick labels', async () => {
+      const el = await fixture(
+        `<${tagString} min="100" max="200" no-min-max-labels></${tagString}>`,
+      );
+      expect(el.shadowRoot?.querySelectorAll('.input-group__input')[0]).dom.to.equal(`
+        <div class="input-group__input">
+          <slot name="input"></slot>
+        </div>
+      `);
+    });
+    it('parser method should return a value parsed into a number format', async () => {
+      const el = await fixture(html`
+        <${tag} min="100" max="200" .modelValue=${150}></${tag}>
+      `);
+      expect(el.modelValue).to.equal(150);
+      el._inputNode.value = '130';
+      el._inputNode.dispatchEvent(new Event('input'));
+      expect(el.modelValue).to.equal(130);
+    });
+    it('is accessible', async () => {
+      const el = await fixture(`<${tagString} label="range"></${tagString}>`);
+      await expect(el).to.be.accessible();
+    });
+    it('is accessible when disabled', async () => {
+      const el = await fixture(`<${tagString} label="range" disabled></${tagString}>`);
+      await expect(el).to.be.accessible();
+    });
+    describe('Custom min/max labels', () => {
+      it('displays custom minLabel in the limits when provided', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" min-label="Low" .modelValue=${50}></${tag}>
+        `);
+        const minDiv =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[0];
+        expect(minDiv.textContent?.trim()).to.equal('Minimum Low');
+      });
+      it('displays custom maxLabel in the limits when provided', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" max-label="High" .modelValue=${50}></${tag}>
+        `);
+        const maxDiv =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('.input-range__limits > div')[1];
+        expect(maxDiv.textContent?.trim()).to.equal('Maximum High');
+      });
+      it('displays custom minLabel as value display when value equals min', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" min-label="Low" .modelValue=${0}></${tag}>
+        `);
+        const valueSpan =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
+        expect(valueSpan.innerText).to.equal('Low');
+      });
+      it('displays custom maxLabel as value display when value equals max', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" max-label="High" .modelValue=${100}></${tag}>
+        `);
+        const valueSpan =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
+        expect(valueSpan.innerText).to.equal('High');
+      });
+      it('displays formatted number when value is between min and max', async () => {
+        const el = await fixture(html`
+          <${tag}
+            min="0"
+            max="100"
+            min-label="Low"
+            max-label="High"
+            .modelValue=${50}
+          ></${tag}>
+        `);
+        const valueSpan =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
+        expect(valueSpan.innerText).to.equal('50');
+      });
+      it('maintains numeric modelValue even when displaying custom label', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" min-label="Low" .modelValue=${0}></${tag}>
+        `);
+        const valueSpan =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.input-range__value');
+        // Display shows custom label
+        expect(valueSpan.innerText).to.equal('Low');
+        // But modelValue is still the number
+        expect(el.modelValue).to.equal(0);
+        expect(typeof el.modelValue).to.equal('number');
+      });
+      it('sets aria-valuetext to minLabel when modelValue equals min', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" min-label="Low" .modelValue=${50}></${tag}>
+        `);
+        el.modelValue = 0;
+        await nextFrame();
+        expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+      });
+      it('sets aria-valuetext to maxLabel when modelValue equals max', async () => {
+        const el = await fixture(html`
+          <${tag} min="0" max="100" max-label="High" .modelValue=${50}></${tag}>
+        `);
+        el.modelValue = 100;
+        await nextFrame();
+        expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('High');
+      });
+      it('removes aria-valuetext when modelValue is between min and max', async () => {
+        const el = await fixture(html`
+          <${tag}
+            min="0"
+            max="100"
+            min-label="Low"
+            max-label="High"
+            .modelValue=${0}
+          ></${tag}>
+        `);
+        await nextFrame();
+        expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+        el.modelValue = 50;
+        await nextFrame();
+        expect(el._inputNode.hasAttribute('aria-valuetext')).to.equal(false);
+      });
+    });
+  });
+}

package/components/input-stepper/test-suites/lion-input-stepper.integration.suite.js

@@ -2,10 +2,21 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-import { defineCE } from '@open-wc/testing';
+import '@open-wc/testing';
 import { LionInputStepper } from '../src/LionInputStepper.js';
-export const runInputStepperIntegrationSuite = (klass = LionInputStepper) => {
-  const tagString = defineCE(class extends klass {});
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+
+/**
+ * Runs the input-stepper suite. The caller hands the element to run against; leaving `host` out keeps
+ * `LionInputStepper`.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export const runInputStepperIntegrationSuite = ({
+  classes: { host = LionInputStepper } = {},
+  tagString: legacyTagString,
+} = {}) => {
+  const tagString = resolveSuiteTag(host, legacyTagString);
   runInteractionStateMixinSuite({
     tagString,
     allowedModelValueTypes: [Number],

package/components/input-stepper/test-suites/lion-input-stepper.suite.js

@@ -1,22 +1,26 @@
 import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
-import {
-  fixture as _fixture,
-  defineCE,
-  expect,
-  html,
-  nextFrame,
-  unsafeStatic,
-} from '@open-wc/testing';
+import { fixture as _fixture, expect, html, nextFrame, unsafeStatic } from '@open-wc/testing';
 import { nothing } from 'lit';
 import sinon from 'sinon';
 import { LionInputStepper } from '../src/LionInputStepper.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputStepper>} */ _fixture;
-export function runInputStepperSuite(klass = LionInputStepper) {
-  const tagString = defineCE(class extends klass {});
+
+/**
+ * Runs the input-stepper suite. The caller hands the element to run against; leaving `host` out keeps
+ * `LionInputStepper`.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement}>} [customConfig]
+ */
+export function runInputStepperSuite({
+  classes: { host = LionInputStepper } = {},
+  tagString: legacyTagString,
+} = {}) {
+  const tagString = resolveSuiteTag(host, legacyTagString);
   const tag = unsafeStatic(tagString);
   const defaultInputStepper = html`
     <${tag} name="year" label="Years"></${tag}>

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

@@ -2,6 +2,8 @@ import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
 import { LionInputTel } from '@lion/ui/input-tel.js';
 runInputTelSuite();
 runInputTelSuite({
-  klass: LionInputTel,
+  classes: {
+    host: LionInputTel,
+  },
   hasParentheses: true,
 });

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

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