@lion/ui 0.23.0 → 0.24.0

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

@@ -18,7 +18,6 @@ import {
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
-
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
 
@@ -34,9 +33,7 @@ export function runValidateMixinSuite(customConfig) {
     tagString: null,
     ...customConfig,
   };
-
   const lightDom = cfg.lightDom || '';
-
   class ValidateElement extends ValidateMixin(LitElement) {
     connectedCallback() {
       super.connectedCallback();
@@ -45,10 +42,8 @@ export function runValidateMixinSuite(customConfig) {
       this.appendChild(inputNode);
     }
   }
-
   const tagString = cfg.tagString || defineCE(ValidateElement);
   const tag = unsafeStatic(tagString);
-
   describe('ValidateMixin', () => {
     /**
      *   Terminology
@@ -76,7 +71,7 @@ export function runValidateMixinSuite(customConfig) {
       it('throws and console.errors if adding non Validator instances to the validators array', async () => {
         // we throw and console error as constructor throw are not visible to the end user
         const stub = sinon.stub(console, 'error');
-        const el = /** @type {ValidateElement} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ValidateElement} */ await fixture(html`<${tag}></${tag}>`);
         const errorMessage =
           'Validators array only accepts class instances of Validator. Type "array" found. This may be caused by having multiple installations of "@lion/ui/form-core.js".';
         expect(() => {
@@ -84,7 +79,6 @@ export function runValidateMixinSuite(customConfig) {
           el.validators = [[new Required()]];
         }).to.throw(errorMessage);
         expect(stub.args[0][0]).to.equal(errorMessage);
-
         const errorMessage2 =
           'Validators array only accepts class instances of Validator. Type "string" found. This may be caused by having multiple installations of "@lion/ui/form-core.js".';
         expect(() => {
@@ -92,10 +86,8 @@ export function runValidateMixinSuite(customConfig) {
           el.validators = ['required'];
         }).to.throw(errorMessage2);
         expect(stub.args[1][0]).to.equal(errorMessage2);
-
         stub.restore();
       });
-
       it('throws a console error if adding a non supported Validator type', async () => {
         // we throw and console error to improve DX
         const stub = sinon.stub(console, 'error');
@@ -105,28 +97,25 @@ export function runValidateMixinSuite(customConfig) {
             super();
             this.type = 'major error';
           }
-
           static get validatorName() {
             return 'MajorValidator';
           }
         }
-        const el = /** @type {ValidateElement} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /** @type {ValidateElement} */ await fixture(html`<${tag}></${tag}>`);
         expect(() => {
           el.validators = [new MajorValidator()];
         }).to.throw(errorMessage);
         expect(stub.args[0][0]).to.equal(errorMessage);
-
         stub.restore();
       });
-
       it('validates on initialization (once form field has bootstrapped/initialized)', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new Required()]}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
 
@@ -134,208 +123,169 @@ export function runValidateMixinSuite(customConfig) {
       it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
         class BundledValidator extends EventTarget {
           static ['_$isValidator$'] = true;
-
           static validatorName = '';
-
           constructor() {
             super();
-
             this.type = 'error';
           }
-
           get config() {
             // simplified version of the actual config
             return {};
           }
-
           execute() {
             // simplified version of the action execution
             return true;
           }
-
           onFormControlConnect() {}
-
           onFormControlDisconnect() {}
-
           async _getMessage() {
             // simplified version of the actual logic
             return 'You need to enter something.';
           }
         }
-
         class BundledRequired extends BundledValidator {
           static validatorName = 'Required';
         }
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
             <${tag}
             .validators=${[new BundledRequired()]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-          `)
-        );
-
+          `);
         expect(el.hasFeedbackFor).to.deep.equal([]);
       });
-
       it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
         class MyRequired extends Required {
           static validatorName = 'SomethingOtherThanRequired';
         }
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
             <${tag}
             .validators=${[new MyRequired()]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-          `)
-        );
-
+          `);
         expect(el.hasFeedbackFor).to.deep.equal([]);
       });
-
       it('determines whether the passed Validators are ResultValidators judging by the presence of "executeOnResults"', async () => {
         class ValidateElementWithSuccessType extends ValidateElement {
           static get validationTypes() {
             return ['error', 'success'];
           }
         }
-
         const elTagString = defineCE(ValidateElementWithSuccessType);
         const elTag = unsafeStatic(elTagString);
-
         class BundledValidator extends EventTarget {
           static ['_$isValidator$'] = true;
-
           static validatorName = '';
-
           constructor() {
             super();
-
             this.type = 'error';
           }
-
           get config() {
             // simplified version of the actual config
             return {};
           }
-
           execute() {
             // simplified version of the action execution
             return true;
           }
-
           onFormControlConnect() {}
-
           onFormControlDisconnect() {}
-
           async _getMessage() {
             // simplified version of the actual logic
             return 'Success message.';
           }
         }
-
         class BundledDefaultSuccess extends BundledValidator {
           constructor() {
             super();
-
             this.type = 'success';
           }
-
           executeOnResults() {
             return true;
           }
         }
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
             <${elTag}
             .validators=${[new Required(), new BundledDefaultSuccess()]}
             .modelValue=${'myValue'}
           >${lightDom}</${elTag}>
-          `)
-        );
-
+          `);
         expect(el.hasFeedbackFor).to.deep.equal(['success']);
       });
-
       it('revalidates when ".modelValue" changes', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new AlwaysValid()]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         const validateSpy = sinon.spy(el, 'validate');
         el.modelValue = 'x';
         expect(validateSpy.callCount).to.equal(1);
       });
-
       it('revalidates when child ".modelValue" changes', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             ._repropagationRole="${'fieldset'}"
             .validators=${[new AlwaysValid()]}
             .modelValue=${'myValue'}
           ><lion-field id="child"><input slot="input"></lion-field></${tag}>
-        `)
-        );
+        `);
         const validateSpy = sinon.spy(el, 'validate');
-        /** @type {LionField} */ (el.querySelector('#child')).modelValue = 'test';
+        /** @type {LionField} */
+        el.querySelector('#child').modelValue = 'test';
         await el.updateComplete;
         expect(validateSpy.callCount).to.equal(1);
       });
-
       it('revalidates when ".validators" changes', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new AlwaysValid()]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         const validateSpy = sinon.spy(el, 'validate');
         el.validators = [new MinLength(3)];
         expect(validateSpy.callCount).to.equal(1);
       });
-
       it('revalidates when validator "param-changed"', async () => {
         const validator = new MinLength(3);
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[validator]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         const validateSpy = sinon.spy(el, 'validate');
         expect(validateSpy.callCount).to.equal(0);
-
         validator.param = 4;
-
         expect(validateSpy.callCount).to.equal(1);
       });
-
       it('calls "_onValidatorUpdated" when Validator instanced updated', async () => {
         const validator = new MinLength(3);
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[validator]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore
         const spy = sinon.spy(el, '_onValidatorUpdated');
@@ -346,7 +296,9 @@ export function runValidateMixinSuite(customConfig) {
         const [eventArg1, metaArg1] = spy.args[0];
         expect(eventArg1).to.be.instanceOf(Event);
         expect(eventArg1.type).to.equal('param-changed');
-        expect(metaArg1).to.eql({ validator });
+        expect(metaArg1).to.eql({
+          validator,
+        });
 
         // on config-changed
         validator.config = {};
@@ -354,18 +306,19 @@ export function runValidateMixinSuite(customConfig) {
         const [eventArg2, metaArg2] = spy.args[1];
         expect(eventArg2).to.be.instanceOf(Event);
         expect(eventArg2.type).to.equal('config-changed');
-        expect(metaArg2).to.eql({ validator });
+        expect(metaArg2).to.eql({
+          validator,
+        });
       });
-
       it('clears current results when ".modelValue" changes', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new AlwaysValid()]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore [allow-private] in test
         const clearSpy = sinon.spy(el, '__clearValidationResults');
@@ -381,16 +334,15 @@ export function runValidateMixinSuite(customConfig) {
        * Inside "Validator integration" we test reinitiation on Validator param change
        */
     });
-
     describe('Validation process: internal flow', () => {
       it('firstly checks for empty values', async () => {
         const alwaysValid = new AlwaysValid();
         const alwaysValidExecuteSpy = sinon.spy(alwaysValid, 'execute');
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .validators=${[alwaysValid]}>${lightDom}</${tag}>
-        `)
-        );
+        `);
         // @ts-ignore [allow-private] in test
         const isEmptySpy = sinon.spy(el, '__isEmpty');
         const validateSpy = sinon.spy(el, 'validate');
@@ -398,19 +350,17 @@ export function runValidateMixinSuite(customConfig) {
         expect(validateSpy.callCount).to.equal(1);
         expect(alwaysValidExecuteSpy.callCount).to.equal(0);
         expect(isEmptySpy.callCount).to.equal(1);
-
         el.modelValue = 'nonEmpty';
         expect(validateSpy.callCount).to.equal(2);
         expect(alwaysValidExecuteSpy.callCount).to.equal(1);
         expect(isEmptySpy.callCount).to.equal(2);
       });
-
       it('secondly checks for synchronous Validators: creates RegularValidationResult', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .validators=${[new AlwaysValid()]}>${lightDom}</${tag}>
-        `)
-        );
+        `);
         // @ts-ignore [allow-private] in test
         const isEmptySpy = sinon.spy(el, '__isEmpty');
         // @ts-ignore [allow-private] in test
@@ -418,15 +368,14 @@ export function runValidateMixinSuite(customConfig) {
         el.modelValue = 'nonEmpty';
         expect(isEmptySpy.calledBefore(syncSpy)).to.be.true;
       });
-
       it('thirdly schedules asynchronous Validators: creates RegularValidationResult', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .validators=${[new AlwaysValid(), new AsyncAlwaysValid()]}>
             ${lightDom}
           </${tag}>
-        `)
-        );
+        `);
         // @ts-ignore [allow-private] in test
         const syncSpy = sinon.spy(el, '__executeSyncValidators');
         // @ts-ignore [allow-private] in test
@@ -434,31 +383,27 @@ export function runValidateMixinSuite(customConfig) {
         el.modelValue = 'nonEmpty';
         expect(syncSpy.calledBefore(asyncSpy)).to.be.true;
       });
-
       it('finally checks for ResultValidators: creates TotalValidationResult', async () => {
         class MyResult extends ResultValidator {
           static get validatorName() {
             return 'ResultValidator';
           }
         }
-
-        let el = /** @type {ValidateElement} */ (
+        let el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new AlwaysValid(), new MyResult()]}>
             ${lightDom}
           </${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore [allow-private] in test
         const syncSpy = sinon.spy(el, '__executeSyncValidators');
         // @ts-ignore [allow-private] in test
         const resultSpy2 = sinon.spy(el, '__executeMetaValidators');
-
         el.modelValue = 'nonEmpty';
         expect(syncSpy.calledBefore(resultSpy2)).to.be.true;
-
         el = await fixture(html`
           <${tag}
             .validators=${[new AsyncAlwaysValid(), new MyResult()]}>
@@ -470,37 +415,34 @@ export function runValidateMixinSuite(customConfig) {
         const asyncSpy = sinon.spy(el, '__executeAsyncValidators');
         // @ts-ignore [allow-private] in test
         const resultSpy = sinon.spy(el, '__executeMetaValidators');
-
         el.modelValue = 'nonEmpty';
         expect(resultSpy.callCount).to.equal(1);
         expect(asyncSpy.callCount).to.equal(1);
         await el.validateComplete;
         expect(resultSpy.callCount).to.equal(2);
       });
-
       describe('Finalization', () => {
         it('fires private "validate-performed" event on every cycle', async () => {
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${tag} .validators=${[new AlwaysValid(), new AsyncAlwaysInvalid()]}>
               ${lightDom}
             </${tag}>
-          `)
-          );
+          `);
           const cbSpy = sinon.spy();
           el.addEventListener('validate-performed', cbSpy);
           el.modelValue = 'nonEmpty';
           expect(cbSpy.callCount).to.equal(1);
         });
-
         it('resolves ".validateComplete" Promise', async () => {
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${tag} .validators=${[new AsyncAlwaysInvalid()]}>
               ${lightDom}
             </${tag}>
-          `)
-          );
+          `);
           el.modelValue = 'nonEmpty';
           // @ts-ignore [allow-private] in test
           const validateResolveSpy = sinon.spy(el, '__validateCompleteResolve');
@@ -509,7 +451,6 @@ export function runValidateMixinSuite(customConfig) {
         });
       });
     });
-
     describe('Validator Integration', () => {
       class IsCat extends Validator {
         /**
@@ -528,12 +469,10 @@ export function runValidateMixinSuite(customConfig) {
             return showError;
           };
         }
-
         static get validatorName() {
           return 'IsCat';
         }
       }
-
       class OtherValidator extends Validator {
         /**
          * @param  {...any} args
@@ -542,12 +481,10 @@ export function runValidateMixinSuite(customConfig) {
           super(...args);
           this.execute = () => true;
         }
-
         static get validatorName() {
           return 'otherValidator';
         }
       }
-
       it('Validators will be called with ".modelValue" as first argument', async () => {
         const otherValidator = new OtherValidator();
         const otherValidatorSpy = sinon.spy(otherValidator, 'execute');
@@ -560,7 +497,6 @@ export function runValidateMixinSuite(customConfig) {
         // @ts-expect-error weird sinon type error..
         expect(otherValidatorSpy.calledWith('model')).to.be.true;
       });
-
       it('Validators will be called with viewValue as first argument when modelValue is unparseable', async () => {
         const otherValidator = new OtherValidator();
         const otherValidatorSpy = sinon.spy(otherValidator, 'execute');
@@ -573,9 +509,10 @@ export function runValidateMixinSuite(customConfig) {
         // @ts-expect-error weird sinon type error..
         expect(otherValidatorSpy.calledWith('view')).to.be.true;
       });
-
       it('Validators will be called with param as a second argument', async () => {
-        const param = { number: 5 };
+        const param = {
+          number: 5,
+        };
         const validator = new IsCat(param);
         const executeSpy = sinon.spy(validator, 'execute');
         await fixture(html`
@@ -586,7 +523,6 @@ export function runValidateMixinSuite(customConfig) {
         `);
         expect(executeSpy.args[0][1]).to.equal(param);
       });
-
       it('Validators will be called with a config that has { node } as a third argument', async () => {
         const validator = new IsCat();
         const executeSpy = sinon.spy(validator, 'execute');
@@ -599,14 +535,12 @@ export function runValidateMixinSuite(customConfig) {
         // @ts-expect-error another sinon type problem
         expect(executeSpy.args[0][2].node).to.equal(el);
       });
-
       it('Validators will not be called on empty values', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .validators=${[new IsCat()]}>${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         el.modelValue = 'cat';
         expect(el.validationStates.error.IsCat).to.be.undefined;
         el.modelValue = 'dog';
@@ -614,54 +548,47 @@ export function runValidateMixinSuite(customConfig) {
         el.modelValue = '';
         expect(el.validationStates.error.IsCat).to.be.undefined;
       });
-
       it('Validators get retriggered on parameter change', async () => {
         const isCatValidator = new IsCat('Felix');
         const catSpy = sinon.spy(isCatValidator, 'execute');
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[isCatValidator]}
             .modelValue=${'cat'}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         el.modelValue = 'cat';
         expect(catSpy.callCount).to.equal(1);
         isCatValidator.param = 'Garfield';
         expect(catSpy.callCount).to.equal(2);
       });
-
       it('Validators will not be called on readOnly fields', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .validators=${[new IsCat()]}>${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         el.readOnly = true;
         el.modelValue = 'dog';
         expect(el.validationStates.error.IsCat).to.be.undefined;
       });
     });
-
     describe('Async Validator Integration', () => {
       /** @type {Promise<any>} */
       let asyncVPromise;
       /** @type {function} */
       let asyncVResolve;
-
       beforeEach(() => {
-        asyncVPromise = new Promise(resolve => {
+        asyncVPromise = new Promise((resolve) => {
           asyncVResolve = resolve;
         });
       });
-
       class IsAsyncCat extends Validator {
         static get validatorName() {
           return 'delayed-cat';
         }
-
         static get async() {
           return true;
         }
@@ -681,16 +608,15 @@ export function runValidateMixinSuite(customConfig) {
       // default execution trigger is keyup (think of password availability backend)
       // can configure execution trigger (blur, etc?)
       it('handles "execute" functions returning promises', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .modelValue=${'dog'}
             .validators=${[new IsAsyncCat()]}>
           ${lightDom}
           </${tag}>
-        `)
-        );
-
+        `);
         const validator = el.validators[0];
         expect(validator instanceof Validator).to.be.true;
         expect(el.hasFeedbackFor).to.deep.equal([]);
@@ -698,21 +624,18 @@ export function runValidateMixinSuite(customConfig) {
         await aTimeout(0);
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
-
       it('sets ".isPending/[is-pending]" when validation is in progress', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .modelValue=${'dog'}>${lightDom}</${tag}>
-        `)
-        );
+        `);
         expect(el.isPending).to.be.false;
         expect(el.hasAttribute('is-pending')).to.be.false;
-
         el.validators = [new IsAsyncCat()];
         expect(el.isPending).to.be.true;
         await aTimeout(0);
         expect(el.hasAttribute('is-pending')).to.be.true;
-
         asyncVResolve();
         await aTimeout(0);
         expect(el.isPending).to.be.false;
@@ -723,14 +646,13 @@ export function runValidateMixinSuite(customConfig) {
       it.skip('debounces async validation for performance', async () => {
         const asyncV = new IsAsyncCat();
         const asyncVExecuteSpy = sinon.spy(asyncV, 'execute');
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .modelValue=${'dog'}>
             ${lightDom}
           </${tag}>
-        `)
-        );
+        `);
         // debounce started
         el.validators = [asyncV];
         expect(asyncVExecuteSpy.called).to.equal(0);
@@ -751,18 +673,16 @@ export function runValidateMixinSuite(customConfig) {
 
       // TODO: nice to have...
       it.skip('developer can configure debounce on FormControl instance', async () => {});
-
       it.skip('cancels and reschedules async validation on ".modelValue" change', async () => {
         const asyncV = new IsAsyncCat();
         const asyncVAbortSpy = sinon.spy(asyncV, 'abortExecution');
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag} .modelValue=${'dog'}>
             ${lightDom}
           </${tag}>
-        `)
-        );
+        `);
         // debounce started
         el.validators = [asyncV];
         expect(asyncVAbortSpy.called).to.equal(0);
@@ -775,8 +695,8 @@ export function runValidateMixinSuite(customConfig) {
       it.skip('developer can configure condition for asynchronous validation', async () => {
         const asyncV = new IsAsyncCat();
         const asyncVExecuteSpy = sinon.spy(asyncV, 'execute');
-
-        const el = /** @type {ValidateElement & { isFocused: boolean }} */ (
+        const el =
+          /** @type {ValidateElement & { isFocused: boolean }} */
           await fixture(html`
           <${tag}
             .isFocused=${true}
@@ -789,16 +709,13 @@ export function runValidateMixinSuite(customConfig) {
             >
           ${lightDom}
           </${tag}>
-        `)
-        );
-
+        `);
         expect(asyncVExecuteSpy.called).to.equal(0);
         el.isFocused = false;
         el.validate();
         expect(asyncVExecuteSpy.called).to.equal(1);
       });
     });
-
     describe('ResultValidator Integration', () => {
       const MySuccessResultValidator = class extends ResultValidator {
         /**
@@ -818,14 +735,13 @@ export function runValidateMixinSuite(customConfig) {
          */
         // eslint-disable-next-line class-methods-use-this
         executeOnResults({ regularValidationResult, prevShownValidationResult }) {
-          const errorOrWarning = /** @param {Validator} v */ v =>
+          const errorOrWarning = /** @param {Validator} v */ (v) =>
             v.type === 'error' || v.type === 'warning';
           const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
           const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
           return !hasErrorOrWarning && hasShownErrorOrWarning;
         }
       };
-
       const withSuccessTagString = defineCE(
         class extends ValidateMixin(LitElement) {
           static get validationTypes() {
@@ -835,7 +751,6 @@ export function runValidateMixinSuite(customConfig) {
         },
       );
       const withSuccessTag = unsafeStatic(withSuccessTagString);
-
       it('calls ResultValidators after regular validators', async () => {
         const resultValidator = new MySuccessResultValidator();
         const resultValidateSpy = sinon.spy(resultValidator, 'executeOnResults');
@@ -862,20 +777,18 @@ export function runValidateMixinSuite(customConfig) {
       `);
         expect(validateAsyncSpy.calledBefore(resultValidateSpy)).to.be.true;
       });
-
       it(`provides "regular" ValidationResult and previous FinalValidationResult as input to
         "executeOnResults" function`, async () => {
         const resultValidator = new MySuccessResultValidator();
         const resultValidateSpy = sinon.spy(resultValidator, 'executeOnResults');
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
             <${withSuccessTag}
               .validators=${[new MinLength(3), resultValidator]}
               .modelValue=${'myValue'}
             >${lightDom}</${withSuccessTag}>
-          `)
-        );
+          `);
         // @ts-ignore [allow-private] in test
         const prevValidationResult = el.__prevValidationResult;
         // @ts-ignore [allow-private] in test
@@ -886,14 +799,12 @@ export function runValidateMixinSuite(customConfig) {
           // @ts-ignore [allow-private] in test
           ...el.__asyncValidationResult,
         ];
-
         expect(resultValidateSpy.args[0][0]).to.eql({
           regularValidationResult,
           prevValidationResult,
           prevShownValidationResult,
         });
       });
-
       it('adds ResultValidator outcome as highest prio result to the FinalValidationResult', async () => {
         class AlwaysInvalidResult extends ResultValidator {
           // eslint-disable-next-line class-methods-use-this
@@ -902,44 +813,49 @@ export function runValidateMixinSuite(customConfig) {
             return hasError;
           }
         }
-
         const validator = new AlwaysInvalid();
         const resultV = new AlwaysInvalidResult();
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[validator, resultV]}
             .modelValue=${'myValue'}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore [allow-private] in test
         const totalValidationResult = el.__validationResult;
         expect(totalValidationResult).to.eql([
-          { validator: resultV, outcome: true },
-          { validator, outcome: true },
+          {
+            validator: resultV,
+            outcome: true,
+          },
+          {
+            validator,
+            outcome: true,
+          },
         ]);
       });
     });
-
     describe('getMessages with custom HTML', () => {
       it('will render HTML for lion-validation-feedback', async () => {
         const messageHtmlId = 'test123';
         const messageHtml = `<div id="test123">test</div>`;
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators="${[
               // @ts-expect-error
-              new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
+              new EqualsLength(4, {
+                getMessage: () => html`<div id="test123">test</div>`,
+              }),
             ]}" })]}"
             .modelValue="${'123'}"
             label="Custom message for validator instance"
           ></${tag}>
-        `)
-        );
+        `);
         expect(el.validationStates.error.EqualsLength).to.be.true;
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         const { _feedbackNode } = getFormControlMembers(el);
@@ -950,35 +866,32 @@ export function runValidateMixinSuite(customConfig) {
         expect(messageHtmlNode?.tagName).to.equal('DIV');
       });
     });
-
     describe('Required Validator integration', () => {
       it('will result in erroneous state when form control is empty', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new Required()]}
             .modelValue=${''}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         expect(el.validationStates.error.Required).to.be.true;
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
-
         el.modelValue = 'foo';
         expect(el.validationStates.error.Required).to.be.undefined;
         expect(el.hasFeedbackFor).to.deep.equal([]);
       });
-
       it('calls private ".__isEmpty" by default', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new Required()]}
             .modelValue=${''}
           >${lightDom}</${tag}>
-        `)
-        );
-        const validator = /** @type {Validator} */ (el.validators.find(v => v instanceof Required));
+        `);
+        const validator = /** @type {Validator} */ el.validators.find((v) => v instanceof Required);
         const executeSpy = sinon.spy(validator, 'execute');
         // @ts-ignore [allow-private] in test
         const privateIsEmptySpy = sinon.spy(el, '__isEmpty');
@@ -986,7 +899,6 @@ export function runValidateMixinSuite(customConfig) {
         expect(executeSpy.callCount).to.equal(0);
         expect(privateIsEmptySpy.callCount).to.equal(1);
       });
-
       it('calls "._isEmpty" when provided (useful for different modelValues)', async () => {
         class _isEmptyValidate extends ValidateMixin(LitElement) {
           _isEmpty() {
@@ -995,55 +907,53 @@ export function runValidateMixinSuite(customConfig) {
         }
         const customRequiredTagString = defineCE(_isEmptyValidate);
         const customRequiredTag = unsafeStatic(customRequiredTagString);
-
-        const el = /** @type {_isEmptyValidate} */ (
+        const el =
+          /** @type {_isEmptyValidate} */
           await fixture(html`
           <${customRequiredTag}
             .validators=${[new Required()]}
-            .modelValue=${{ model: 'foo' }}
+            .modelValue=${{
+              model: 'foo',
+            }}
           >${lightDom}</${customRequiredTag}>
-        `)
-        );
-
+        `);
         const providedIsEmptySpy = sinon.spy(el, '_isEmpty');
-        el.modelValue = { model: '' };
+        el.modelValue = {
+          model: '',
+        };
         expect(providedIsEmptySpy.callCount).to.equal(1);
         expect(el.validationStates.error.Required).to.be.true;
       });
-
       it('prevents other Validators from being called when input is empty', async () => {
         const alwaysInvalid = new AlwaysInvalid();
         const alwaysInvalidSpy = sinon.spy(alwaysInvalid, 'execute');
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new Required(), alwaysInvalid]}
             .modelValue=${''}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         expect(alwaysInvalidSpy.callCount).to.equal(0); // __isRequired returned false (invalid)
         el.modelValue = 'foo';
         expect(alwaysInvalidSpy.callCount).to.equal(1); // __isRequired returned true (valid)
       });
-
       it('adds [aria-required="true"] to "._inputNode"', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new Required()]}
             .modelValue=${''}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         const { _inputNode } = getFormControlMembers(el);
-
         expect(_inputNode?.getAttribute('aria-required')).to.equal('true');
         el.validators = [];
         expect(_inputNode?.getAttribute('aria-required')).to.be.null;
       });
     });
-
     describe('Default (preconfigured) Validators', () => {
       const preconfTagString = defineCE(
         class extends ValidateMixin(LitElement) {
@@ -1054,20 +964,17 @@ export function runValidateMixinSuite(customConfig) {
         },
       );
       const preconfTag = unsafeStatic(preconfTagString);
-
       it('can be stored for custom inputs', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
         <${preconfTag}
           .validators=${[new MinLength(3)]}
           .modelValue=${'12'}
-        ></${preconfTag}>`)
-        );
-
+        ></${preconfTag}>`);
         expect(el.validationStates.error.AlwaysInvalid).to.be.true;
         expect(el.validationStates.error.MinLength).to.be.true;
       });
-
       it('can be altered by App Developers', async () => {
         const altPreconfTagString = defineCE(
           class extends ValidateMixin(LitElement) {
@@ -1078,104 +985,98 @@ export function runValidateMixinSuite(customConfig) {
           },
         );
         const altPreconfTag = unsafeStatic(altPreconfTagString);
-
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${altPreconfTag}
             .modelValue=${'12'}
-          ></${altPreconfTag}>`)
-        );
-
+          ></${altPreconfTag}>`);
         expect(el.validationStates.error.MinLength).to.be.true;
         el.defaultValidators[0].param = 2;
         expect(el.validationStates.error.MinLength).to.be.undefined;
       });
-
       it('can be requested via "._allValidators" getter', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
         <${preconfTag}
           .validators=${[new MinLength(3)]}
-        ></${preconfTag}>`)
-        );
+        ></${preconfTag}>`);
         const { _allValidators } = getFormControlMembers(el);
-
         expect(el.validators.length).to.equal(1);
         expect(el.defaultValidators.length).to.equal(1);
         expect(_allValidators.length).to.equal(2);
-
         expect(_allValidators[0] instanceof MinLength).to.be.true;
         expect(_allValidators[1] instanceof AlwaysInvalid).to.be.true;
-
         el.validators = [new MaxLength(5)];
         const { _allValidators: _allValidatorsMl } = getFormControlMembers(el);
-
         expect(_allValidatorsMl[0] instanceof MaxLength).to.be.true;
         expect(_allValidatorsMl[1] instanceof AlwaysInvalid).to.be.true;
       });
     });
-
     describe('State storage and reflection', () => {
       it('stores validity of individual Validators in ".validationStates.error[validator.validatorName]"', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .modelValue=${'a'}
             .validators=${[new MinLength(3), new AlwaysInvalid()]}
-          >${lightDom}</${tag}>`)
-        );
-
+          >${lightDom}</${tag}>`);
         expect(el.validationStates.error.MinLength).to.be.true;
         expect(el.validationStates.error.AlwaysInvalid).to.be.true;
-
         el.modelValue = 'abc';
         expect(el.validationStates.error.MinLength).to.equal(undefined);
         expect(el.validationStates.error.AlwaysInvalid).to.be.true;
       });
-
       it('removes "non active" states whenever modelValue becomes undefined', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${[new MinLength(3)]}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         el.modelValue = 'a';
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         expect(el.validationStates.error).to.not.eql({});
-
         el.modelValue = undefined;
         expect(el.hasFeedbackFor).to.deep.equal([]);
         expect(el.validationStates.error).to.eql({});
       });
-
       it('clears current validation results when validators array updated', async () => {
         const validators = [new Required()];
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .validators=${validators}
           >${lightDom}</${tag}>
-        `)
-        );
+        `);
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
-        expect(el.validationStates.error).to.eql({ Required: true });
-
+        expect(el.validationStates.error).to.eql({
+          Required: true,
+        });
         el.validators = [];
         expect(el.hasFeedbackFor).to.not.deep.equal(['error']);
         expect(el.validationStates.error).to.eql({});
-
         el.validators = [new Required()];
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         expect(el.validationStates.error).to.not.eql({});
       });
-
       it('can be configured to change visibility conditions per type', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
-          .validators="${[new Required({}, { type: 'error' })]}"
+          .validators="${[
+            new Required(
+              {},
+              {
+                type: 'error',
+              },
+            ),
+          ]}"
           .feedbackCondition="${(
             /** @type {string} */ type,
             /** @type {object} */ meta,
@@ -1187,101 +1088,91 @@ export function runValidateMixinSuite(customConfig) {
             return defaultCondition(type);
           }}"
           >${lightDom}</${tag}>
-        `)
-        );
-
+        `);
         expect(el.showsFeedbackFor).to.eql(['error']);
       });
-
       describe('Events', () => {
         it('fires "showsFeedbackForChanged" event async after feedbackData got synced to feedbackElement', async () => {
           const spy = sinon.spy();
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${tag}
               .submitted=${true}
               .validators=${[new MinLength(7)]}
               @showsFeedbackForChanged=${spy}
             >${lightDom}</${tag}>
-          `)
-          );
+          `);
           el.modelValue = 'a';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abc';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abcdefg';
           await el.updateComplete;
           expect(spy).to.have.callCount(2);
         });
-
         it('fires "showsFeedbackFor{type}Changed" event async when type visibility changed', async () => {
           const spy = sinon.spy();
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${tag}
               .submitted=${true}
               .validators=${[new MinLength(7)]}
               @showsFeedbackForErrorChanged=${spy}
             >${lightDom}</${tag}>
-          `)
-          );
+          `);
           el.modelValue = 'a';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abc';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abcdefg';
           await el.updateComplete;
           expect(spy).to.have.callCount(2);
         });
-
         it('fires "{type}StateChanged" event async when type validity changed', async () => {
           const spy = sinon.spy();
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${tag}
               .submitted=${true}
               .validators=${[new MinLength(7)]}
               @errorStateChanged=${spy}
             >${lightDom}</${tag}>
-          `)
-          );
+          `);
           expect(spy).to.have.callCount(0);
-
           el.modelValue = 'a';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abc';
           await el.updateComplete;
           expect(spy).to.have.callCount(1);
-
           el.modelValue = 'abcdefg';
           await el.updateComplete;
           expect(spy).to.have.callCount(2);
         });
       });
     });
-
     describe('Accessibility', () => {
       it.skip('calls "._inputNode.setCustomValidity(errorMessage)"', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${tag}
             .modelValue=${'123'}
-            .validators=${[new MinLength(3, { getMessage: async () => 'foo' })]}>
+            .validators=${[
+              new MinLength(3, {
+                getMessage: async () => 'foo',
+              }),
+            ]}>
             <input slot="input">
-          </${tag}>`)
-        );
+          </${tag}>`);
         const { _inputNode } = getFormControlMembers(el);
-
         if (_inputNode) {
           // @ts-ignore -- we are testing the protected _inputNode here
           const spy = sinon.spy(el._inputNode, 'setCustomValidity');
@@ -1302,7 +1193,6 @@ export function runValidateMixinSuite(customConfig) {
       it.skip(`removes validity message from DOM instead of toggling "display:none", to trigger Jaws
           and VoiceOver [to-be-implemented]`, async () => {});
     });
-
     describe('Extensibility: Custom Validator types', () => {
       const customTypeTagString = defineCE(
         class extends ValidateMixin(LitElement) {
@@ -1313,103 +1203,121 @@ export function runValidateMixinSuite(customConfig) {
         },
       );
       const customTypeTag = unsafeStatic(customTypeTagString);
-
       it('supports additional validationTypes in .hasFeedbackFor', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${customTypeTag}
             .validators=${[
-              new MinLength(2, { type: 'x' }),
-              new MinLength(3, { type: 'error' }),
-              new MinLength(4, { type: 'y' }),
+              new MinLength(2, {
+                type: 'x',
+              }),
+              new MinLength(3, {
+                type: 'error',
+              }),
+              new MinLength(4, {
+                type: 'y',
+              }),
             ]}
             .modelValue=${'1234'}
           >${lightDom}</${customTypeTag}>
-        `)
-        );
+        `);
         expect(el.hasFeedbackFor).to.deep.equal([]);
-
         el.modelValue = '123'; // triggers y
         expect(el.hasFeedbackFor).to.deep.equal(['y']);
-
         el.modelValue = '12'; // triggers error and y
         expect(el.hasFeedbackFor).to.deep.equal(['error', 'y']);
-
         el.modelValue = '1'; // triggers x, error and y
         expect(el.hasFeedbackFor).to.deep.equal(['x', 'error', 'y']);
       });
-
       it('supports additional validationTypes in .validationStates', async () => {
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${customTypeTag}
             .validators=${[
-              new MinLength(2, { type: 'x' }),
-              new MinLength(3, { type: 'error' }),
-              new MinLength(4, { type: 'y' }),
+              new MinLength(2, {
+                type: 'x',
+              }),
+              new MinLength(3, {
+                type: 'error',
+              }),
+              new MinLength(4, {
+                type: 'y',
+              }),
             ]}
             .modelValue=${'1234'}
           >${lightDom}</${customTypeTag}>
-        `)
-        );
+        `);
         expect(el.validationStates).to.eql({
           x: {},
           error: {},
           y: {},
         });
-
         el.modelValue = '123'; // triggers y
         expect(el.validationStates).to.eql({
           x: {},
           error: {},
-          y: { MinLength: true },
+          y: {
+            MinLength: true,
+          },
         });
-
         el.modelValue = '12'; // triggers error and y
         expect(el.validationStates).to.eql({
           x: {},
-          error: { MinLength: true },
-          y: { MinLength: true },
+          error: {
+            MinLength: true,
+          },
+          y: {
+            MinLength: true,
+          },
         });
-
         el.modelValue = '1'; // triggers x, error and y
         expect(el.validationStates).to.eql({
-          x: { MinLength: true },
-          error: { MinLength: true },
-          y: { MinLength: true },
+          x: {
+            MinLength: true,
+          },
+          error: {
+            MinLength: true,
+          },
+          y: {
+            MinLength: true,
+          },
         });
       });
-
       it('orders feedback based on provided "validationTypes"', async () => {
         // we set submitted to always show error message in the test
-        const el = /** @type {ValidateElement} */ (
+        const el =
+          /** @type {ValidateElement} */
           await fixture(html`
           <${customTypeTag}
             .submitted=${true}
             ._visibleMessagesAmount=${Infinity}
             .validators=${[
-              new MinLength(2, { type: 'x' }),
-              new MinLength(3, { type: 'error' }),
-              new MinLength(4, { type: 'y' }),
+              new MinLength(2, {
+                type: 'x',
+              }),
+              new MinLength(3, {
+                type: 'error',
+              }),
+              new MinLength(4, {
+                type: 'y',
+              }),
             ]}
             .modelValue=${'1'}
           >${lightDom}</${customTypeTag}>
-        `)
-        );
+        `);
         const { _feedbackNode } = getFormControlMembers(el);
-
         await el.feedbackComplete;
-
         const feedbackNode =
           /** @type {import('../src/validate/LionValidationFeedback.js').LionValidationFeedback} */
-          (_feedbackNode);
-        const resultOrder = feedbackNode.feedbackData?.map(v => v.type);
+          _feedbackNode;
+        const resultOrder = feedbackNode.feedbackData?.map((v) => v.type);
         expect(resultOrder).to.deep.equal(['error', 'x', 'y']);
-
         el.modelValue = '12';
         await el.updateComplete;
         await el.feedbackComplete;
-        const resultOrder2 = feedbackNode.feedbackData?.map(v => v.type);
+        const resultOrder2 = feedbackNode.feedbackData?.map((v) => v.type);
         expect(resultOrder2).to.deep.equal(['error', 'y']);
       });
 
@@ -1419,7 +1327,6 @@ export function runValidateMixinSuite(customConfig) {
        * 'Subclassers' for an example on how to do this
        */
     });
-
     describe('Subclassers', () => {
       describe('Adding new Validator types', () => {
         it('can add helpers for validation types', async () => {
@@ -1428,11 +1335,9 @@ export function runValidateMixinSuite(customConfig) {
               // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
               return [...super.validationTypes, 'x'];
             }
-
             get hasX() {
               return this.hasFeedbackFor.includes('x');
             }
-
             get hasXVisible() {
               return this.showsFeedbackFor.includes('x');
             }
@@ -1441,26 +1346,28 @@ export function runValidateMixinSuite(customConfig) {
           const elTag = unsafeStatic(elTagString);
 
           // we set submitted to always show errors
-          const el = /** @type {ValidateHasX} */ (
+          const el =
+            /** @type {ValidateHasX} */
             await fixture(html`
             <${elTag}
               .submitted=${true}
-              .validators=${[new MinLength(2, { type: 'x' })]}
+              .validators=${[
+                new MinLength(2, {
+                  type: 'x',
+                }),
+              ]}
               .modelValue=${'1'}
             >${lightDom}</${elTag}>
-          `)
-          );
+          `);
           await el.feedbackComplete;
           expect(el.hasX).to.be.true;
           expect(el.hasXVisible).to.be.true;
-
           el.modelValue = '12';
           expect(el.hasX).to.be.false;
           await el.updateComplete;
           await el.feedbackComplete;
           expect(el.hasXVisible).to.be.false;
         });
-
         it('can fire custom events if needed', async () => {
           /**
            *
@@ -1469,8 +1376,8 @@ export function runValidateMixinSuite(customConfig) {
            */
           function arrayDiff(array1 = [], array2 = []) {
             return array1
-              .filter(x => !array2.includes(x))
-              .concat(array2.filter(x => !array1.includes(x)));
+              .filter((x) => !array2.includes(x))
+              .concat(array2.filter((x) => !array1.includes(x)));
           }
           const elTagString = defineCE(
             class extends ValidateMixin(LitElement) {
@@ -1488,26 +1395,33 @@ export function runValidateMixinSuite(customConfig) {
                 if (name === 'hasFeedbackFor') {
                   const diff = arrayDiff(this.hasFeedbackFor, oldValue);
                   if (diff.length > 0 && diff.includes('x')) {
-                    this.dispatchEvent(new Event(`hasFeedbackForXChanged`, { bubbles: true }));
+                    this.dispatchEvent(
+                      new Event(`hasFeedbackForXChanged`, {
+                        bubbles: true,
+                      }),
+                    );
                   }
                 }
               }
             },
           );
           const elTag = unsafeStatic(elTagString);
-
           const spy = sinon.spy();
           // we set prefilled to always show errors
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${elTag}
               .prefilled=${true}
               @hasFeedbackForXChanged=${spy}
-              .validators=${[new MinLength(2, { type: 'x' })]}
+              .validators=${[
+                new MinLength(2, {
+                  type: 'x',
+                }),
+              ]}
               .modelValue=${'1'}
             >${lightDom}</${elTag}>
-          `)
-          );
+          `);
           expect(spy).to.have.callCount(1);
           el.modelValue = '1';
           expect(spy).to.have.callCount(1);
@@ -1519,7 +1433,6 @@ export function runValidateMixinSuite(customConfig) {
           expect(spy).to.have.callCount(3);
         });
       });
-
       describe('Changing feedback visibility conditions', () => {
         // TODO: add this test on FormControl layer
         it('reconsiders feedback visibility when interaction states changed', async () => {
@@ -1535,21 +1448,20 @@ export function runValidateMixinSuite(customConfig) {
                   submitted: Boolean,
                 };
               }
-
               _showFeedbackConditionFor() {
                 return true;
               }
             },
           );
           const elTag = unsafeStatic(elTagString);
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${elTag}
               .validators=${[new AlwaysInvalid()]}
               .modelValue=${'myValue'}
             >${lightDom}</${elTag}>
-          `)
-          );
+          `);
 
           // @ts-ignore [allow-protected] in test
           const spy = sinon.spy(el, '_updateShouldShowFeedbackFor');
@@ -1571,7 +1483,6 @@ export function runValidateMixinSuite(customConfig) {
             expect(spy.callCount).to.equal(counter);
           }
         });
-
         it('filters feedback visibility according interaction states', async () => {
           const elTagString = defineCE(
             class extends ValidateMixin(LitElement) {
@@ -1582,7 +1493,9 @@ export function runValidateMixinSuite(customConfig) {
               /** @type {any} */
               static get properties() {
                 return {
-                  modelValue: { type: String },
+                  modelValue: {
+                    type: String,
+                  },
                 };
               }
 
@@ -1600,17 +1513,26 @@ export function runValidateMixinSuite(customConfig) {
             },
           );
           const elTag = unsafeStatic(elTagString);
-          const el = /** @type {ValidateElement} */ (
+          const el =
+            /** @type {ValidateElement} */
             await fixture(html`
             <${elTag}
               .validators=${[
-                new AlwaysInvalid({}, { type: 'error' }),
-                new AlwaysInvalid({}, { type: 'info' }),
+                new AlwaysInvalid(
+                  {},
+                  {
+                    type: 'error',
+                  },
+                ),
+                new AlwaysInvalid(
+                  {},
+                  {
+                    type: 'info',
+                  },
+                ),
               ]}
             >${lightDom}</${elTag}>
-          `)
-          );
-
+          `);
           for (const [modelValue, expected] of [
             ['A', ['error']],
             ['B', ['error']],
@@ -1622,12 +1544,11 @@ export function runValidateMixinSuite(customConfig) {
             await el.feedbackComplete;
 
             // @ts-expect-error [allow-protected]
-            const resultOrder = el._feedbackNode.feedbackData.map(v => v.type);
+            const resultOrder = el._feedbackNode.feedbackData.map((v) => v.type);
             expect(resultOrder).to.deep.equal(expected);
           }
         });
       });
-
       describe('Changing feedback messages globally', () => {
         // Please see tests of Validation Feedback
       });