@lion/ui 0.23.0 → 0.24.0

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

@@ -2,7 +2,6 @@ import { LitElement } from 'lit';
 import { IsNumber, Required, LionField, Validator, FormGroupMixin } from '@lion/ui/form-core.js';
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
-
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import {
   aTimeout,
@@ -29,9 +28,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
       };
     }
   }
-
   const childTagString = cfg.childTagString || defineCE(FormChild);
-
   class FormGroup extends FormGroupMixin(LitElement) {
     constructor() {
       super();
@@ -41,7 +38,6 @@ export function runFormGroupMixinSuite(cfg = {}) {
       this._repropagationRole = 'fieldset'; // configures FormControlMixin
     }
   }
-
   const tagString = cfg.tagString || defineCE(FormGroup);
   const tag = unsafeStatic(tagString);
   const childTag = unsafeStatic(childTagString);
@@ -52,47 +48,42 @@ export function runFormGroupMixinSuite(cfg = {}) {
   <${childTag} name="hobbies[]"></${childTag}>
   <${childTag} name="hobbies[]"></${childTag}>
 `;
-
   beforeEach(() => {
     localizeTearDown();
   });
-
   describe('FormGroupMixin', () => {
     // TODO: Tests below belong to FormControlMixin. Preferably run suite integration test
     it(`has a fieldName based on the label`, async () => {
-      const el1 = /**  @type {FormGroup} */ (
-        await fixture(html`<${tag} label="foo">${inputSlots}</${tag}>`)
-      );
+      const el1 =
+        /**  @type {FormGroup} */
+        await fixture(html`<${tag} label="foo">${inputSlots}</${tag}>`);
       const { _labelNode: _labelNode1 } = getFormControlMembers(el1);
       expect(el1.fieldName).to.equal(_labelNode1.textContent);
-
-      const el2 = /**  @type {FormGroup} */ (
-        await fixture(html`<${tag}><label slot="label">bar</label>${inputSlots}</${tag}>`)
-      );
+      const el2 =
+        /**  @type {FormGroup} */
+        await fixture(html`<${tag}><label slot="label">bar</label>${inputSlots}</${tag}>`);
       const { _labelNode: _labelNode2 } = getFormControlMembers(el2);
       expect(el2.fieldName).to.equal(_labelNode2.textContent);
     });
-
     it(`has a fieldName based on the name if no label exists`, async () => {
-      const el = /**  @type {FormGroup} */ (
-        await fixture(html`<${tag} name="foo">${inputSlots}</${tag}>`)
-      );
+      const el =
+        /**  @type {FormGroup} */
+        await fixture(html`<${tag} name="foo">${inputSlots}</${tag}>`);
       expect(el.fieldName).to.equal(el.name);
     });
-
     it(`can override fieldName`, async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag} label="foo" .fieldName="${'bar'}">${inputSlots}</${tag}>
-    `)
-      );
+    `);
       // @ts-ignore [allow-protected] in test
       expect(el.__fieldName).to.equal(el.fieldName);
     });
 
     // TODO: Tests below belong to FormRegistrarMixin. Preferably run suite integration test
     it(`${tagString} has an up to date list of every form element in .formElements`, async () => {
-      const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}>${inputSlots}</${tag}>`));
+      const el = /**  @type {FormGroup} */ await fixture(html`<${tag}>${inputSlots}</${tag}>`);
       // @ts-ignore [allow-protected] in test
       expect(el.formElements._keys().length).to.equal(3);
       expect(el.formElements['hobbies[]'].length).to.equal(2);
@@ -101,27 +92,33 @@ export function runFormGroupMixinSuite(cfg = {}) {
       expect(el.formElements._keys().length).to.equal(3);
       expect(el.formElements['hobbies[]'].length).to.equal(1);
     });
-
     it(`supports in html wrapped form elements`, async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag}>
         <div>
           <${childTag} name="foo"></${childTag}>
         </div>
       </${tag}>
-    `)
-      );
+    `);
       expect(el.formElements.length).to.equal(1);
       el.children[0].removeChild(el.formElements.foo);
       expect(el.formElements.length).to.equal(0);
     });
-
     it('handles names with ending [] as an array', async () => {
-      const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}>${inputSlots}</${tag}>`));
-      el.formElements['gender[]'][0].modelValue = { value: 'male' };
-      el.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
-      el.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
+      const el = /**  @type {FormGroup} */ await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+      el.formElements['gender[]'][0].modelValue = {
+        value: 'male',
+      };
+      el.formElements['hobbies[]'][0].modelValue = {
+        checked: false,
+        value: 'chess',
+      };
+      el.formElements['hobbies[]'][1].modelValue = {
+        checked: false,
+        value: 'rugby',
+      };
 
       // @ts-ignore
       expect(el.formElements._keys().length).to.equal(3);
@@ -129,81 +126,79 @@ export function runFormGroupMixinSuite(cfg = {}) {
       expect(el.formElements['hobbies[]'][0].modelValue.value).to.equal('chess');
       expect(el.formElements['gender[]'][0].modelValue.value).to.equal('male');
       expect(el.modelValue['hobbies[]']).to.deep.equal([
-        { checked: false, value: 'chess' },
-        { checked: false, value: 'rugby' },
+        {
+          checked: false,
+          value: 'chess',
+        },
+        {
+          checked: false,
+          value: 'rugby',
+        },
       ]);
     });
-
     it('throws if name is the same as its parent', async () => {
       const orig = console.info;
       console.info = () => {};
-
       let error;
-      const el = /**  @type {FormGroup} */ (await fixture(html`<${tag} name="foo"></${tag}>`));
+      const el = /**  @type {FormGroup} */ await fixture(html`<${tag} name="foo"></${tag}>`);
       try {
         // we test the api directly as errors thrown from a web component are in a
         // different context and we can not catch them here => register fake elements
         el.addFormElement(
-          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ ({
+          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ {
             name: 'foo',
-          }),
+          },
         );
       } catch (err) {
         error = err;
       }
       expect(error).to.be.instanceOf(TypeError);
-      expect(/** @type {TypeError} */ (error).message).to.equal(
+      expect(/** @type {TypeError} */ error.message).to.equal(
         'You can not have the same name "foo" as your parent',
       );
-
       console.info = orig; // restore original console
     });
-
     it('throws if same name without ending [] is used', async () => {
       const orig = console.info;
       console.info = () => {};
-
       let error;
-      const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /**  @type {FormGroup} */ await fixture(html`<${tag}></${tag}>`);
       try {
         // we test the api directly as errors thrown from a web component are in a
         // different context and we can not catch them here => register fake elements
         el.addFormElement(
-          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ ({
+          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ {
             name: 'fooBar',
-          }),
+          },
         );
         el.addFormElement(
-          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ ({
+          /**  @type {HTMLElement & import('../../types/FormControlMixinTypes.js').FormControlHost} */ {
             name: 'fooBar',
-          }),
+          },
         );
       } catch (err) {
         error = err;
       }
       expect(error).to.be.instanceOf(TypeError);
-      expect(/** @type {TypeError} */ (error).message).to.equal(
+      expect(/** @type {TypeError} */ error.message).to.equal(
         'Name "fooBar" is already registered - if you want an array add [] to the end',
       );
-
       console.info = orig; // restore original console
     });
     /* eslint-enable no-console */
 
     it('can dynamically add/remove elements', async () => {
-      const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}>${inputSlots}</${tag}>`));
-      const newField = /**  @type {FormGroup} */ (
-        await fixture(html`<${childTag} name="lastName"></${childTag}>`)
-      );
+      const el = /**  @type {FormGroup} */ await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+      const newField =
+        /**  @type {FormGroup} */
+        await fixture(html`<${childTag} name="lastName"></${childTag}>`);
       const { _inputNode } = getFormControlMembers(el);
 
       // @ts-ignore [allow-protected] in test
       expect(el.formElements._keys().length).to.equal(3);
-
       el.appendChild(newField);
       // @ts-ignore [allow-protected] in test
       expect(el.formElements._keys().length).to.equal(4);
-
       _inputNode.removeChild(newField);
       // @ts-ignore [allow-protected] in test
       expect(el.formElements._keys().length).to.equal(3);
@@ -212,34 +207,63 @@ export function runFormGroupMixinSuite(cfg = {}) {
     // TODO: Tests below belong to FormGroupMixin. Preferably run suite integration test
 
     it('can read/write all values (of every input) via this.modelValue', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag}>
         <${childTag} name="lastName"></${childTag}>
         <${tag} name="newfieldset">${inputSlots}</${tag}>
       </${tag}>
-    `)
-      );
-      const newFieldset = /**  @type {FormGroup} */ (el.querySelector(tagString));
+    `);
+      const newFieldset = /**  @type {FormGroup} */ el.querySelector(tagString);
       el.formElements.lastName.modelValue = 'Bar';
-      newFieldset.formElements['hobbies[]'][0].modelValue = { checked: true, value: 'chess' };
-      newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'football' };
-      newFieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-      newFieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-      newFieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
-
+      newFieldset.formElements['hobbies[]'][0].modelValue = {
+        checked: true,
+        value: 'chess',
+      };
+      newFieldset.formElements['hobbies[]'][1].modelValue = {
+        checked: false,
+        value: 'football',
+      };
+      newFieldset.formElements['gender[]'][0].modelValue = {
+        checked: false,
+        value: 'male',
+      };
+      newFieldset.formElements['gender[]'][1].modelValue = {
+        checked: false,
+        value: 'female',
+      };
+      newFieldset.formElements.color.modelValue = {
+        checked: false,
+        value: 'blue',
+      };
       expect(el.modelValue).to.deep.equal({
         lastName: 'Bar',
         newfieldset: {
           'hobbies[]': [
-            { checked: true, value: 'chess' },
-            { checked: false, value: 'football' },
+            {
+              checked: true,
+              value: 'chess',
+            },
+            {
+              checked: false,
+              value: 'football',
+            },
           ],
           'gender[]': [
-            { checked: false, value: 'male' },
-            { checked: false, value: 'female' },
+            {
+              checked: false,
+              value: 'male',
+            },
+            {
+              checked: false,
+              value: 'female',
+            },
           ],
-          color: { checked: false, value: 'blue' },
+          color: {
+            checked: false,
+            value: 'blue',
+          },
         },
       });
 
@@ -249,17 +273,31 @@ export function runFormGroupMixinSuite(cfg = {}) {
         lastName: 2,
         newfieldset: {
           'hobbies[]': [
-            { checked: true, value: 'chess' },
-            { checked: false, value: 'baseball' },
+            {
+              checked: true,
+              value: 'chess',
+            },
+            {
+              checked: false,
+              value: 'baseball',
+            },
           ],
           'gender[]': [
-            { checked: false, value: 'male' },
-            { checked: false, value: 'female' },
+            {
+              checked: false,
+              value: 'male',
+            },
+            {
+              checked: false,
+              value: 'female',
+            },
           ],
-          color: { checked: false, value: 'blue' },
+          color: {
+            checked: false,
+            value: 'blue',
+          },
         },
       };
-
       expect(newFieldset.formElements['hobbies[]'][0].modelValue).to.deep.equal({
         checked: true,
         value: 'chess',
@@ -270,26 +308,24 @@ export function runFormGroupMixinSuite(cfg = {}) {
       });
       expect(el.formElements.lastName.modelValue).to.equal(2);
     });
-
     it('works with document.createElement', async () => {
-      const el = /** @type {FormGroup} */ (document.createElement(tagString));
-      const childEl = /** @type {FormChild} */ (document.createElement(childTagString));
+      const el = /** @type {FormGroup} */ document.createElement(tagString);
+      const childEl = /** @type {FormChild} */ document.createElement(childTagString);
       childEl.name = 'planet';
       childEl.modelValue = 'earth';
       expect(el.formElements.length).to.equal(0);
-
       const wrapper = await fixture('<div></div>');
       el.appendChild(childEl);
       wrapper.appendChild(el);
-
       expect(el.formElements.length).to.equal(1);
-
       await el.registrationComplete;
-      expect(el.modelValue).to.deep.equal({ planet: 'earth' });
+      expect(el.modelValue).to.deep.equal({
+        planet: 'earth',
+      });
     });
-
     it('does not list disabled values in this.modelValue', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag}>
         <${childTag} name="a" disabled .modelValue="${'x'}"></${childTag}>
@@ -302,8 +338,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
           <${childTag} name="e" .modelValue="${'x'}"></${childTag}>
         </${tag}>
       </${tag}>
-    `)
-      );
+    `);
       expect(el.modelValue).to.deep.equal({
         b: 'x',
         newFieldset: {
@@ -311,7 +346,6 @@ export function runFormGroupMixinSuite(cfg = {}) {
         },
       });
     });
-
     it('allows overriding whether fields are included in when fetching modelValue/serializedValue etc.', async () => {
       class FormGroupSubclass extends FormGroupMixin(LitElement) {
         constructor() {
@@ -334,10 +368,10 @@ export function runFormGroupMixinSuite(cfg = {}) {
           return true;
         }
       }
-
       const tagStringSubclass = defineCE(FormGroupSubclass);
       const tagSubclass = unsafeStatic(tagStringSubclass);
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
           <${tagSubclass}>
             <${childTag} name="a" disabled .modelValue="${'x'}"></${childTag}>
@@ -350,8 +384,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
               <${childTag} name="e" .modelValue="${'x'}"></${childTag}>
             </${tagSubclass}>
           </${tagSubclass}>
-        `)
-      );
+        `);
       expect(el.modelValue).to.deep.equal({
         a: 'x',
         b: 'x',
@@ -363,7 +396,6 @@ export function runFormGroupMixinSuite(cfg = {}) {
           e: 'x',
         },
       });
-
       expect(el.serializedValue).to.deep.equal({
         b: 'x',
         newFieldset: {
@@ -371,7 +403,6 @@ export function runFormGroupMixinSuite(cfg = {}) {
         },
       });
     });
-
     it('allows imperatively passing a filter function to _getFromAllFormElements', async () => {
       class FormGroupSubclass extends FormGroupMixin(LitElement) {
         constructor() {
@@ -393,10 +424,10 @@ export function runFormGroupMixinSuite(cfg = {}) {
           return true;
         }
       }
-
       const tagStringSubclass = defineCE(FormGroupSubclass);
       const tagSubclass = unsafeStatic(tagStringSubclass);
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
           <${tagSubclass}>
             <${childTag} name="a" disabled .modelValue="${'x'}"></${childTag}>
@@ -409,8 +440,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
               <${childTag} name="e" .modelValue="${'x'}"></${childTag}>
             </${tagSubclass}>
           </${tagSubclass}>
-        `)
-      );
+        `);
 
       // @ts-ignore -- we are testing a protected method here
       expect(el._getFromAllFormElements('serializedValue')).to.eql({
@@ -430,86 +460,80 @@ export function runFormGroupMixinSuite(cfg = {}) {
         disabledFieldset: {},
       });
     });
-
     it('does not throw if setter data of this.modelValue can not be handled', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag}>
         <${childTag} name="firstName" .modelValue=${'foo'}></${childTag}>
         <${childTag} name="lastName" .modelValue=${'bar'}></${childTag}>
       </${tag}>
-    `)
-      );
+    `);
       const initState = {
         firstName: 'foo',
         lastName: 'bar',
       };
       expect(el.modelValue).to.deep.equal(initState);
-
       el.modelValue = undefined;
       expect(el.modelValue).to.deep.equal(initState);
-
       el.modelValue = null;
       expect(el.modelValue).to.deep.equal(initState);
     });
-
     it('disables/enables all its formElements if it becomes disabled/enabled', async () => {
-      const el = /**  @type {FormGroup} */ (
-        await fixture(html`<${tag} disabled>${inputSlots}</${tag}>`)
-      );
+      const el =
+        /**  @type {FormGroup} */
+        await fixture(html`<${tag} disabled>${inputSlots}</${tag}>`);
       expect(el.formElements.color.disabled).to.be.true;
       expect(el.formElements['hobbies[]'][0].disabled).to.be.true;
       expect(el.formElements['hobbies[]'][1].disabled).to.be.true;
-
       el.disabled = false;
       await el.updateComplete;
       expect(el.formElements.color.disabled).to.equal(false);
       expect(el.formElements['hobbies[]'][0].disabled).to.equal(false);
       expect(el.formElements['hobbies[]'][1].disabled).to.equal(false);
     });
-
     it('does not propagate/override initial disabled value on nested form elements', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
       <${tag}>
         <${tag} name="sub" disabled>${inputSlots}</${tag}>
       </${tag}>
-    `)
-      );
-
+    `);
       expect(el.disabled).to.equal(false);
       expect(el.formElements.sub.disabled).to.be.true;
       expect(el.formElements.sub.formElements.color.disabled).to.be.true;
       expect(el.formElements.sub.formElements['hobbies[]'][0].disabled).to.be.true;
       expect(el.formElements.sub.formElements['hobbies[]'][1].disabled).to.be.true;
     });
-
     it('can set initial modelValue on creation', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
-      <${tag} .modelValue=${{ lastName: 'Bar' }}>
+      <${tag} .modelValue=${{
+        lastName: 'Bar',
+      }}>
         <${childTag} name="lastName"></${childTag}>
       </${tag}>
-    `)
-      );
-
+    `);
       expect(el.modelValue).to.eql({
         lastName: 'Bar',
       });
     });
-
     it('can set initial serializedValue on creation', async () => {
-      const el = /**  @type {FormGroup} */ (
+      const el =
+        /**  @type {FormGroup} */
         await fixture(html`
-      <${tag} .modelValue=${{ lastName: 'Bar' }}>
+      <${tag} .modelValue=${{
+        lastName: 'Bar',
+      }}>
         <${childTag} name="lastName"></${childTag}>
       </${tag}>
-    `)
-      );
-
-      expect(el.modelValue).to.eql({ lastName: 'Bar' });
+    `);
+      expect(el.modelValue).to.eql({
+        lastName: 'Bar',
+      });
     });
-
     describe('Validation', () => {
       it('validates on init', async () => {
         class IsCat extends Validator {
@@ -525,27 +549,24 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
-          <${childTag} name="color" .validators=${[
-            new IsCat(),
-          ]} .modelValue=${'blue'}></${childTag}>
+          <${childTag} name="color" .validators=${[new IsCat()]} .modelValue=${'blue'}></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el.formElements.color.validationStates.error.IsCat).to.be.true;
       });
-
       it('validates when a value changes', async () => {
-        const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}>${inputSlots}</${tag}>`));
-
+        const el = /**  @type {FormGroup} */ await fixture(html`<${tag}>${inputSlots}</${tag}>`);
         const spy = sinon.spy(el, 'validate');
-        el.formElements.color.modelValue = { checked: true, value: 'red' };
+        el.formElements.color.modelValue = {
+          checked: true,
+          value: 'red',
+        };
         expect(spy.callCount).to.equal(1);
       });
-
       it('has a special validator for all children - can be checked via this.error.FormElementsHaveNoError', async () => {
         class IsCat extends Validator {
           static get validatorName() {
@@ -560,32 +581,27 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
-          <${childTag} name="color" .validators=${[
-            new IsCat(),
-          ]} .modelValue=${'blue'}></${childTag}>
+          <${childTag} name="color" .validators=${[new IsCat()]} .modelValue=${'blue'}></${childTag}>
         </${tag}>
-      `)
-        );
-
+      `);
         expect(el.validationStates.error.FormElementsHaveNoError).to.be.true;
         expect(el.formElements.color.validationStates.error.IsCat).to.be.true;
         el.formElements.color.modelValue = 'cat';
         expect(el.validationStates.error).to.deep.equal({});
       });
-
       it('works with Required', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} name="myGroup" .validators="${[new Required()]}">
           <${childTag} name="fieldA"></${childTag}>
           <${childTag} name="fieldB"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         // initially the group is invalid
         expect(el.validationStates.error.Required).to.be.true;
         el.formElements.fieldA.modelValue = 'foo';
@@ -595,15 +611,14 @@ export function runFormGroupMixinSuite(cfg = {}) {
         el.formElements.fieldA.modelValue = '';
         expect(el.validationStates.error.Required).to.be.true;
       });
-
       it('does not show error feedback (nor aria-invalid) for invalid children before interaction', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="myField" .validators=${[new Required()]}></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         await el.updateComplete;
         await el.feedbackComplete;
 
@@ -620,7 +635,6 @@ export function runFormGroupMixinSuite(cfg = {}) {
         expect(el.showsFeedbackFor).to.deep.equal(['error']);
         expect(el.getAttribute('aria-invalid')).to.equal('true');
       });
-
       it('validates on children (de)registration', async () => {
         class HasEvenNumberOfChildren extends Validator {
           static get validatorName() {
@@ -635,115 +649,103 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} .validators=${[new HasEvenNumberOfChildren()]}>
           <${childTag} id="c1" name="c1"></${childTag}>
         </${tag}>
-      `)
-        );
-        const child2 = /**  @type {FormGroup} */ (
+      `);
+        const child2 =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${childTag} name="c2"></${childTag}>
-      `)
-        );
+      `);
         expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true;
-
         el.appendChild(child2);
         expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined);
-
         el.removeChild(child2);
         expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true;
 
         // Edge case: remove all children
-        el.removeChild(/**  @type {Node} */ (el.querySelector('[id=c1]')));
-
+        el.removeChild(/**  @type {Node} */ el.querySelector('[id=c1]'));
         expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined);
       });
     });
-
     describe('Interaction states', () => {
       it('has false states (dirty, touched, prefilled) on init', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
         expect(fieldset.dirty).to.equal(false, 'dirty');
         expect(fieldset.touched).to.equal(false, 'touched');
         expect(fieldset.prefilled).to.equal(false, 'prefilled');
       });
-
       it('sets dirty when value changed', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
-        fieldset.formElements['hobbies[]'][0].modelValue = { checked: true, value: 'football' };
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+        fieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: true,
+          value: 'football',
+        };
         expect(fieldset.dirty).to.be.true;
       });
-
       it('sets touched when last field in fieldset left after focus', async () => {
-        const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}>${inputSlots}</${tag}>`));
+        const el = /**  @type {FormGroup} */ await fixture(html`<${tag}>${inputSlots}</${tag}>`);
         const { _inputNode: hobbyInputNode } = getFormControlMembers(
           el.formElements['hobbies[]'][0],
         );
         const { _inputNode: genderInputNode } = getFormControlMembers(
           el.formElements['hobbies[]'][el.formElements['gender[]'].length - 1],
         );
-
         await triggerFocusFor(hobbyInputNode);
         await triggerFocusFor(genderInputNode);
-        const button = /**  @type {FormGroup} */ (await fixture(html`<button>Button</button>`));
+        const button = /**  @type {FormGroup} */ await fixture(html`<button>Button</button>`);
         button.focus();
-
         expect(el.touched).to.be.true;
       });
-
       it('sets attributes [touched][dirty]', async () => {
-        const el = /**  @type {FormGroup} */ (await fixture(html`<${tag}></${tag}>`));
+        const el = /**  @type {FormGroup} */ await fixture(html`<${tag}></${tag}>`);
         el.touched = true;
         await el.updateComplete;
         expect(el).to.have.attribute('touched');
-
         el.dirty = true;
         await el.updateComplete;
         expect(el).to.have.attribute('dirty');
       });
-
       it('becomes prefilled if all form elements are prefilled', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="input1" .modelValue="${'prefilled'}"></${childTag}>
           <${childTag} name="input2"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el.prefilled).to.be.false;
-
-        const el2 = /**  @type {FormGroup} */ (
+        const el2 =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="input1" .modelValue="${'prefilled'}"></${childTag}>
           <${childTag} name="input2" .modelValue="${'prefilled'}"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el2.prefilled).to.be.true;
       });
-
       it(`becomes "touched" once the last element of a group becomes blurred by keyboard
       interaction (e.g. tabbing through the checkbox-group)`, async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <label slot="label">My group</label>
           <${childTag} name="myGroup[]" label="Option 1" value="1"></${childTag}>
           <${childTag} name="myGroup[]" label="Option 2" value="2"></${childTag}>
         </${tag}>
-      `)
-        );
-
-        const button = /**  @type {HTMLButtonElement} */ (await fixture(`<button>Blur</button>`));
-
+      `);
+        const button = /**  @type {HTMLButtonElement} */ await fixture(`<button>Blur</button>`);
         expect(el.touched).to.equal(false, 'initially, touched state is false');
         el.formElements[1].focus();
         expect(el.touched).to.equal(false, 'focus is on second checkbox');
@@ -753,44 +755,38 @@ export function runFormGroupMixinSuite(cfg = {}) {
           `focus is on element behind second checkbox (group has blurred)`,
         );
       });
-
       it(`becomes "touched" once the group as a whole becomes blurred via mouse interaction after
       keyboard interaction (e.g. focus is moved inside the group and user clicks somewhere outside
       the group)`, async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="input1"></${childTag}>
           <${childTag} name="input2"></${childTag}>
         </${tag}>
-      `)
-        );
-        const el2 = /**  @type {FormGroup} */ (
+      `);
+        const el2 =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="input1"></${childTag}>
           <${childTag} name="input2"></${childTag}>
         </${tag}>
-      `)
-        );
-
-        const outside = /**  @type {HTMLButtonElement} */ (
-          await fixture(html`<button>outside</button>`)
-        );
-
+      `);
+        const outside =
+          /**  @type {HTMLButtonElement} */
+          await fixture(html`<button>outside</button>`);
         outside.click();
         expect(el.touched, 'unfocused fieldset should stay untouched').to.be.false;
-
         el.formElements[0].focus();
         el.formElements[1].focus();
         expect(el.touched).to.be.false;
-
         outside.click(); // blur the group via a click
         outside.focus(); // a real mouse click moves focus as well
         expect(el.touched).to.be.true;
         expect(el2.touched).to.be.false;
       });
-
       it('potentially shows fieldset error message on interaction change', async () => {
         class Input1IsTen extends Validator {
           static get validatorName() {
@@ -805,27 +801,24 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-
-        const outSideButton = /**  @type {FormGroup} */ (
-          await fixture(html`<button>outside</button>`)
-        );
-        const el = /**  @type {FormGroup} */ (
+        const outSideButton =
+          /**  @type {FormGroup} */
+          await fixture(html`<button>outside</button>`);
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} .validators=${[new Input1IsTen()]}>
           <${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
         </${tag}>
-      `)
-        );
-        const input1 = /** @type {FormChild} */ (el.querySelector('[name=input1]'));
+      `);
+        const input1 = /** @type {FormChild} */ el.querySelector('[name=input1]');
         input1.modelValue = 2;
         input1.focus();
         outSideButton.focus();
-
         await el.updateComplete;
         expect(el.validationStates.error.Input1IsTen).to.be.true;
         expect(el.showsFeedbackFor).to.deep.equal(['error']);
       });
-
       it('show error if tabbing "out" of last ', async () => {
         class Input1IsTen extends Validator {
           static get validatorName() {
@@ -838,46 +831,48 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-        const outSideButton = /**  @type {FormGroup} */ (
-          await fixture(html`<button>outside</button>`)
-        );
-        const el = /**  @type {FormGroup} */ (
+        const outSideButton =
+          /**  @type {FormGroup} */
+          await fixture(html`<button>outside</button>`);
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} .validators=${[new Input1IsTen()]}>
           <${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
           <${childTag} name="input2" .validators=${[new IsNumber()]}></${childTag}>
         </${tag}>
-      `)
-        );
-        const inputs = /** @type {FormChild[]} */ (Array.from(el.querySelectorAll(childTagString)));
+      `);
+        const inputs = /** @type {FormChild[]} */ Array.from(el.querySelectorAll(childTagString));
         inputs[1].modelValue = 2; // make it dirty
         inputs[1].focus();
-
         outSideButton.focus();
-
         expect(el.validationStates.error.Input1IsTen).to.be.true;
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
-
       it('does not become dirty when elements are prefilled', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
-        <${tag} .serializedValue="${{ input1: 'x', input2: 'y' }}">
+        <${tag} .serializedValue="${{
+          input1: 'x',
+          input2: 'y',
+        }}">
           <${childTag} name="input1" ></${childTag}>
           <${childTag} name="input2"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el.dirty).to.be.false;
-
-        const el2 = /**  @type {FormGroup} */ (
+        const el2 =
+          /**  @type {FormGroup} */
           await fixture(html`
-        <${tag} .modelValue="${{ input1: 'x', input2: 'y' }}">
+        <${tag} .modelValue="${{
+          input1: 'x',
+          input2: 'y',
+        }}">
           <${childTag} name="input1" ></${childTag}>
           <${childTag} name="input2"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el2.dirty).to.be.false;
       });
     });
@@ -885,75 +880,149 @@ export function runFormGroupMixinSuite(cfg = {}) {
     // TODO: this should be tested in FormGroupMixin
     describe('serializedValue', () => {
       it('use form elements serializedValue', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
-        fieldset.formElements['hobbies[]'][0].serializer = /** @param {any} v */ v =>
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+        fieldset.formElements['hobbies[]'][0].serializer = /** @param {any} v */ (v) =>
           `${v.value}-serialized`;
-        fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'Bar' };
-        fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
-        fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-        fieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-        fieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
+        fieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: false,
+          value: 'Bar',
+        };
+        fieldset.formElements['hobbies[]'][1].modelValue = {
+          checked: false,
+          value: 'rugby',
+        };
+        fieldset.formElements['gender[]'][0].modelValue = {
+          checked: false,
+          value: 'male',
+        };
+        fieldset.formElements['gender[]'][1].modelValue = {
+          checked: false,
+          value: 'female',
+        };
+        fieldset.formElements.color.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
         expect(fieldset.formElements['hobbies[]'][0].serializedValue).to.equal('Bar-serialized');
         expect(fieldset.serializedValue).to.deep.equal({
-          'hobbies[]': ['Bar-serialized', { checked: false, value: 'rugby' }],
+          'hobbies[]': [
+            'Bar-serialized',
+            {
+              checked: false,
+              value: 'rugby',
+            },
+          ],
           'gender[]': [
-            { checked: false, value: 'male' },
-            { checked: false, value: 'female' },
+            {
+              checked: false,
+              value: 'male',
+            },
+            {
+              checked: false,
+              value: 'female',
+            },
           ],
-          color: { checked: false, value: 'blue' },
+          color: {
+            checked: false,
+            value: 'blue',
+          },
         });
       });
-
       it('treats names with ending [] as arrays', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
-        fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
-        fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
-        fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-        fieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-        fieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+        fieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: false,
+          value: 'chess',
+        };
+        fieldset.formElements['hobbies[]'][1].modelValue = {
+          checked: false,
+          value: 'rugby',
+        };
+        fieldset.formElements['gender[]'][0].modelValue = {
+          checked: false,
+          value: 'male',
+        };
+        fieldset.formElements['gender[]'][1].modelValue = {
+          checked: false,
+          value: 'female',
+        };
+        fieldset.formElements.color.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
         expect(fieldset.serializedValue).to.deep.equal({
           'hobbies[]': [
-            { checked: false, value: 'chess' },
-            { checked: false, value: 'rugby' },
+            {
+              checked: false,
+              value: 'chess',
+            },
+            {
+              checked: false,
+              value: 'rugby',
+            },
           ],
           'gender[]': [
-            { checked: false, value: 'male' },
-            { checked: false, value: 'female' },
+            {
+              checked: false,
+              value: 'male',
+            },
+            {
+              checked: false,
+              value: 'female',
+            },
           ],
-          color: { checked: false, value: 'blue' },
+          color: {
+            checked: false,
+            value: 'blue',
+          },
         });
       });
-
       it('0 is a valid value to be serialized', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
+        const fieldset =
+          /**  @type {FormGroup} */
           await fixture(html`
       <${tag}>
         <${childTag} name="price"></${childTag}>
-      </${tag}>`)
-        );
+      </${tag}>`);
         fieldset.formElements.price.modelValue = 0;
-        expect(fieldset.serializedValue).to.deep.equal({ price: 0 });
+        expect(fieldset.serializedValue).to.deep.equal({
+          price: 0,
+        });
       });
-
       it('allows for nested fieldsets', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
+        const fieldset =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} name="userData">
           <${childTag} name="comment"></${childTag}>
           <${tag} name="newfieldset">${inputSlots}</${tag}>
         </${tag}>
-      `)
-        );
-        const newFieldset = /**  @type {FormGroup} */ (fieldset.querySelector(tagString));
-        newFieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
-        newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
-        newFieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-        newFieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-        newFieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
+      `);
+        const newFieldset = /**  @type {FormGroup} */ fieldset.querySelector(tagString);
+        newFieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: false,
+          value: 'chess',
+        };
+        newFieldset.formElements['hobbies[]'][1].modelValue = {
+          checked: false,
+          value: 'rugby',
+        };
+        newFieldset.formElements['gender[]'][0].modelValue = {
+          checked: false,
+          value: 'male',
+        };
+        newFieldset.formElements['gender[]'][1].modelValue = {
+          checked: false,
+          value: 'female',
+        };
+        newFieldset.formElements.color.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
         fieldset.formElements.comment.modelValue = 'Foo';
         // @ts-ignore
         expect(fieldset.formElements._keys().length).to.equal(2);
@@ -963,93 +1032,143 @@ export function runFormGroupMixinSuite(cfg = {}) {
           comment: 'Foo',
           newfieldset: {
             'hobbies[]': [
-              { checked: false, value: 'chess' },
-              { checked: false, value: 'rugby' },
+              {
+                checked: false,
+                value: 'chess',
+              },
+              {
+                checked: false,
+                value: 'rugby',
+              },
             ],
             'gender[]': [
-              { checked: false, value: 'male' },
-              { checked: false, value: 'female' },
+              {
+                checked: false,
+                value: 'male',
+              },
+              {
+                checked: false,
+                value: 'female',
+              },
             ],
-            color: { checked: false, value: 'blue' },
+            color: {
+              checked: false,
+              value: 'blue',
+            },
           },
         });
       });
-
       it('does not serialize disabled values', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
+        const fieldset =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="custom[]"></${childTag}>
           <${childTag} name="custom[]"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
         fieldset.formElements['custom[]'][1].disabled = true;
-
         expect(fieldset.serializedValue).to.deep.equal({
           'custom[]': ['custom 1'],
         });
       });
-
       it('will exclude form elements within a disabled fieldset', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
+        const fieldset =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} name="userData">
           <${childTag} name="comment"></${childTag}>
           <${tag} name="newfieldset">${inputSlots}</${tag}>
         </${tag}>
-      `)
-        );
-
-        const newFieldset = /**  @type {FormGroup} */ (fieldset.querySelector(tagString));
+      `);
+        const newFieldset = /**  @type {FormGroup} */ fieldset.querySelector(tagString);
         fieldset.formElements.comment.modelValue = 'Foo';
-        newFieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
-        newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
-        newFieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-        newFieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-        newFieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
+        newFieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: false,
+          value: 'chess',
+        };
+        newFieldset.formElements['hobbies[]'][1].modelValue = {
+          checked: false,
+          value: 'rugby',
+        };
+        newFieldset.formElements['gender[]'][0].modelValue = {
+          checked: false,
+          value: 'male',
+        };
+        newFieldset.formElements['gender[]'][1].modelValue = {
+          checked: false,
+          value: 'female',
+        };
+        newFieldset.formElements.color.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
         newFieldset.formElements.color.disabled = true;
-
         expect(fieldset.serializedValue).to.deep.equal({
           comment: 'Foo',
           newfieldset: {
             'hobbies[]': [
-              { checked: false, value: 'chess' },
-              { checked: false, value: 'rugby' },
+              {
+                checked: false,
+                value: 'chess',
+              },
+              {
+                checked: false,
+                value: 'rugby',
+              },
             ],
             'gender[]': [
-              { checked: false, value: 'male' },
-              { checked: false, value: 'female' },
+              {
+                checked: false,
+                value: 'male',
+              },
+              {
+                checked: false,
+                value: 'female',
+              },
             ],
           },
         });
-
         newFieldset.formElements.color.disabled = false;
         expect(fieldset.serializedValue).to.deep.equal({
           comment: 'Foo',
           newfieldset: {
             'hobbies[]': [
-              { checked: false, value: 'chess' },
-              { checked: false, value: 'rugby' },
+              {
+                checked: false,
+                value: 'chess',
+              },
+              {
+                checked: false,
+                value: 'rugby',
+              },
             ],
             'gender[]': [
-              { checked: false, value: 'male' },
-              { checked: false, value: 'female' },
+              {
+                checked: false,
+                value: 'male',
+              },
+              {
+                checked: false,
+                value: 'female',
+              },
             ],
-            color: { checked: false, value: 'blue' },
+            color: {
+              checked: false,
+              value: 'blue',
+            },
           },
         });
       });
-
       it('updates the formElements keys when a name attribute changes', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
+        const fieldset =
+          /**  @type {FormGroup} */
           await fixture(html`
           <${tag}>
             <${childTag} name="foo" .modelValue=${'qux'}></${childTag}>
           </${tag}>
-        `)
-        );
+        `);
         expect(fieldset.serializedValue.foo).to.equal('qux');
         fieldset.formElements[0].name = 'bar';
         await fieldset.updateComplete;
@@ -1057,83 +1176,94 @@ export function runFormGroupMixinSuite(cfg = {}) {
         expect(fieldset.serializedValue.bar).to.equal('qux');
       });
     });
-
     describe('Reset', () => {
       it('restores default values if changes were made', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} id="firstName" name="firstName" .modelValue="${'Foo'}"></${childTag}>
         </${tag}>
-      `)
-        );
-        await /** @type {FormChild} */ (el.querySelector(childTagString)).updateComplete;
-
-        const input = /** @type {FormChild} */ (el.querySelector('#firstName'));
-
+      `);
+        await /** @type {FormChild} */ el.querySelector(childTagString).updateComplete;
+        const input = /** @type {FormChild} */ el.querySelector('#firstName');
         input.modelValue = 'Bar';
-        expect(el.modelValue).to.deep.equal({ firstName: 'Bar' });
+        expect(el.modelValue).to.deep.equal({
+          firstName: 'Bar',
+        });
         expect(input.modelValue).to.equal('Bar');
-
         el.resetGroup();
-        expect(el.modelValue).to.deep.equal({ firstName: 'Foo' });
+        expect(el.modelValue).to.deep.equal({
+          firstName: 'Foo',
+        });
         expect(input.modelValue).to.equal('Foo');
       });
-
       it('restores default values of arrays if changes were made', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} id="firstName" name="firstName[]" .modelValue="${'Foo'}"></${childTag}>
         </${tag}>
-      `)
-        );
-        await /** @type {FormChild} */ (el.querySelector(childTagString)).updateComplete;
-
-        const input = /**  @type {FormChild} */ (el.querySelector('#firstName'));
-
+      `);
+        await /** @type {FormChild} */ el.querySelector(childTagString).updateComplete;
+        const input = /**  @type {FormChild} */ el.querySelector('#firstName');
         input.modelValue = 'Bar';
-        expect(el.modelValue).to.deep.equal({ 'firstName[]': ['Bar'] });
+        expect(el.modelValue).to.deep.equal({
+          'firstName[]': ['Bar'],
+        });
         expect(input.modelValue).to.equal('Bar');
-
         el.resetGroup();
-        expect(el.modelValue).to.deep.equal({ 'firstName[]': ['Foo'] });
+        expect(el.modelValue).to.deep.equal({
+          'firstName[]': ['Foo'],
+        });
         expect(input.modelValue).to.equal('Foo');
       });
-
       it('restores default values of a nested fieldset if changes were made', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${tag} id="name" name="name[]">
             <${childTag} id="firstName" name="firstName" .modelValue="${'Foo'}"></${childTag}>
           </${tag}>
         </${tag}>
-      `)
-        );
+      `);
         await Promise.all([
-          /**  @type {FormChild} */ (el.querySelector(tagString)).updateComplete,
-          /** @type {FormChild} */ (el.querySelector(childTagString)).updateComplete,
+          /**  @type {FormChild} */ el.querySelector(tagString).updateComplete,
+          /** @type {FormChild} */ el.querySelector(childTagString).updateComplete,
         ]);
-
-        const input = /**  @type {FormChild} */ (el.querySelector('#firstName'));
-        const nestedFieldset = /**  @type {FormGroup} */ (el.querySelector('#name'));
-
+        const input = /**  @type {FormChild} */ el.querySelector('#firstName');
+        const nestedFieldset = /**  @type {FormGroup} */ el.querySelector('#name');
         input.modelValue = 'Bar';
-        expect(el.modelValue).to.deep.equal({ 'name[]': [{ firstName: 'Bar' }] });
-        expect(nestedFieldset.modelValue).to.deep.equal({ firstName: 'Bar' });
+        expect(el.modelValue).to.deep.equal({
+          'name[]': [
+            {
+              firstName: 'Bar',
+            },
+          ],
+        });
+        expect(nestedFieldset.modelValue).to.deep.equal({
+          firstName: 'Bar',
+        });
         expect(input.modelValue).to.equal('Bar');
-
         el.resetGroup();
-        expect(el.modelValue).to.deep.equal({ 'name[]': [{ firstName: 'Foo' }] });
-        expect(nestedFieldset.modelValue).to.deep.equal({ firstName: 'Foo' });
+        expect(el.modelValue).to.deep.equal({
+          'name[]': [
+            {
+              firstName: 'Foo',
+            },
+          ],
+        });
+        expect(nestedFieldset.modelValue).to.deep.equal({
+          firstName: 'Foo',
+        });
         expect(input.modelValue).to.equal('Foo');
       });
-
       it('clears interaction state', async () => {
-        const el = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag} touched dirty>${inputSlots}</${tag}>`)
-        );
+        const el =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag} touched dirty>${inputSlots}</${tag}>`);
         // Safety check initially
         // @ts-ignore [allow-protected] in test
         el._setValueForAllFormElements('prefilled', true);
@@ -1151,26 +1281,26 @@ export function runFormGroupMixinSuite(cfg = {}) {
 
         // Reset all children states with prefilled true
         // @ts-ignore [allow-protected] in test
-        el._setValueForAllFormElements('modelValue', { checked: true }); // not prefilled
+        el._setValueForAllFormElements('modelValue', {
+          checked: true,
+        }); // not prefilled
         el.resetInteractionState();
         expect(el.dirty).to.equal(false, 'not "dirty" after 2nd reset');
         expect(el.touched).to.equal(false, 'not "touched" after 2nd reset');
         // prefilled state is dependant on value
         expect(el.prefilled).to.equal(true, '"prefilled" after 2nd reset');
       });
-
       it('clears submitted state', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
         fieldset.submitted = true;
         fieldset.resetGroup();
         expect(fieldset.submitted).to.equal(false);
-        fieldset.formElements.forEach(el => {
+        fieldset.formElements.forEach((el) => {
           expect(el.submitted).to.equal(false);
         });
       });
-
       it('has correct validation afterwards', async () => {
         class IsCat extends Validator {
           static validatorName = 'IsCat';
@@ -1197,35 +1327,31 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return hasError;
           }
         }
-
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag} .validators=${[new ColorContainsA()]}>
           <${childTag} name="color" .validators=${[new IsCat()]}></${childTag}>
           <${childTag} name="color2"></${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         expect(el.validationStates.error.ColorContainsA).to.be.true;
         expect(el.formElements.color.hasFeedbackFor).to.deep.equal([]);
-
         el.formElements.color.modelValue = 'onlyb';
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         expect(el.validationStates.error.ColorContainsA).to.be.true;
         expect(el.formElements.color.validationStates.error.IsCat).to.be.true;
-
         el.formElements.color.modelValue = 'cat';
         expect(el.hasFeedbackFor).to.deep.equal([]);
-
         el.resetGroup();
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
         expect(el.validationStates.error.ColorContainsA).to.be.true;
         expect(el.formElements.color.hasFeedbackFor).to.deep.equal([]);
       });
-
       it('has access to `_initialModelValue` based on initial children states', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="child[]" .modelValue="${'foo1'}">
@@ -1233,38 +1359,36 @@ export function runFormGroupMixinSuite(cfg = {}) {
           <${childTag} name="child[]" .modelValue="${'bar1'}">
           </${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         await el.updateComplete;
         el.modelValue['child[]'] = ['foo2', 'bar2'];
         // @ts-ignore [allow-protected] in test
         expect(el._initialModelValue['child[]']).to.eql(['foo1', 'bar1']);
       });
-
       it('does not wrongly recompute `_initialModelValue` after dynamic changes of children', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <${childTag} name="child[]" .modelValue="${'foo1'}">
           </${childTag}>
         </${tag}>
-      `)
-        );
+      `);
         el.modelValue['child[]'] = ['foo2'];
-        const childEl = /**  @type {FormGroup} */ (
+        const childEl =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${childTag} name="child[]" .modelValue="${'bar1'}">
         </${childTag}>
-      `)
-        );
+      `);
         el.appendChild(childEl);
         // @ts-ignore [allow-protected] in test
         expect(el._initialModelValue['child[]']).to.eql(['foo1', 'bar1']);
       });
-
       describe('resetGroup method', () => {
         it('calls resetGroup on children fieldsets', async () => {
-          const el = /**  @type {FormGroup} */ (
+          const el =
+            /**  @type {FormGroup} */
             await fixture(html`
           <${tag} name="parentFieldset">
             <${tag} name="childFieldset">
@@ -1272,16 +1396,15 @@ export function runFormGroupMixinSuite(cfg = {}) {
               </${childTag}>
             </${tag}>
           </${tag}>
-        `)
-          );
-          const childFieldsetEl = /** @type {FormGroup} */ (el.querySelector(tagString));
+        `);
+          const childFieldsetEl = /** @type {FormGroup} */ el.querySelector(tagString);
           const resetGroupSpy = sinon.spy(childFieldsetEl, 'resetGroup');
           el.resetGroup();
           expect(resetGroupSpy.callCount).to.equal(1);
         });
-
         it('calls reset on children fields', async () => {
-          const el = /**  @type {FormGroup} */ (
+          const el =
+            /**  @type {FormGroup} */
             await fixture(html`
           <${tag} name="parentFieldset">
             <${tag} name="childFieldset">
@@ -1289,18 +1412,17 @@ export function runFormGroupMixinSuite(cfg = {}) {
               </${childTag}>
             </${tag}>
           </${tag}>
-        `)
-          );
-          const childFieldsetEl = /** @type {FormChild} */ (el.querySelector(childTagString));
+        `);
+          const childFieldsetEl = /** @type {FormChild} */ el.querySelector(childTagString);
           const resetSpy = sinon.spy(childFieldsetEl, 'reset');
           el.resetGroup();
           expect(resetSpy.callCount).to.equal(1);
         });
       });
-
       describe('clearGroup method', () => {
         it('calls clearGroup on children fieldset', async () => {
-          const el = /**  @type {FormGroup} */ (
+          const el =
+            /**  @type {FormGroup} */
             await fixture(html`
           <${tag} name="parentFieldset">
           <${tag} name="childFieldset">
@@ -1308,16 +1430,15 @@ export function runFormGroupMixinSuite(cfg = {}) {
               </${childTag}>
             </${tag}>
           </${tag}>
-        `)
-          );
-          const childFieldsetEl = /** @type {FormGroup} */ (el.querySelector(tagString));
+        `);
+          const childFieldsetEl = /** @type {FormGroup} */ el.querySelector(tagString);
           const clearGroupSpy = sinon.spy(childFieldsetEl, 'clearGroup');
           el.clearGroup();
           expect(clearGroupSpy.callCount).to.equal(1);
         });
-
         it('calls clear on children fields', async () => {
-          const el = /**  @type {FormGroup} */ (
+          const el =
+            /**  @type {FormGroup} */
             await fixture(html`
           <${tag} name="parentFieldset">
           <${tag} name="childFieldset">
@@ -1325,16 +1446,15 @@ export function runFormGroupMixinSuite(cfg = {}) {
               </${childTag}>
             </${tag}>
           </${tag}>
-        `)
-          );
-          const childFieldsetEl = /** @type {FormChild} */ (el.querySelector(childTagString));
+        `);
+          const childFieldsetEl = /** @type {FormChild} */ el.querySelector(childTagString);
           const clearSpy = sinon.spy(childFieldsetEl, 'clear');
           el.clearGroup();
           expect(clearSpy.callCount).to.equal(1);
         });
-
         it('should clear the value of  fields', async () => {
-          const el = /**  @type {FormGroup} */ (
+          const el =
+            /**  @type {FormGroup} */
             await fixture(html`
           <${tag} name="parentFieldset">
           <${tag} name="childFieldset">
@@ -1342,73 +1462,84 @@ export function runFormGroupMixinSuite(cfg = {}) {
               </${childTag}>
             </${tag}>
           </${tag}>
-        `)
-          );
+        `);
           el.clearGroup();
-          expect(
-            /**  @type {FormChild} */ (el.querySelector('[name="child"]')).modelValue,
-          ).to.equal('');
+          expect(/**  @type {FormChild} */ el.querySelector('[name="child"]').modelValue).to.equal(
+            '',
+          );
         });
       });
     });
-
     describe('Accessibility', () => {
       it('has role="group" set', async () => {
-        const fieldset = /**  @type {FormGroup} */ (
-          await fixture(html`<${tag}>${inputSlots}</${tag}>`)
-        );
-        fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
-        fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
-        fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
-        fieldset.formElements['gender[]'][1].modelValue = { checked: false, value: 'female' };
-        fieldset.formElements.color.modelValue = { checked: false, value: 'blue' };
+        const fieldset =
+          /**  @type {FormGroup} */
+          await fixture(html`<${tag}>${inputSlots}</${tag}>`);
+        fieldset.formElements['hobbies[]'][0].modelValue = {
+          checked: false,
+          value: 'chess',
+        };
+        fieldset.formElements['hobbies[]'][1].modelValue = {
+          checked: false,
+          value: 'rugby',
+        };
+        fieldset.formElements['gender[]'][0].modelValue = {
+          checked: false,
+          value: 'male',
+        };
+        fieldset.formElements['gender[]'][1].modelValue = {
+          checked: false,
+          value: 'female',
+        };
+        fieldset.formElements.color.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
         expect(fieldset.hasAttribute('role')).to.be.true;
         expect(fieldset.getAttribute('role')).to.contain('group');
       });
-
       it('has an aria-labelledby from element with slot="label"', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
         <${tag}>
           <label slot="label">My Label</label>
           ${inputSlots}
         </${tag}>
-      `)
-        );
-        const label = /** @type {HTMLElement} */ (
-          Array.from(el.children).find(child => child.slot === 'label')
-        );
+      `);
+        const label =
+          /** @type {HTMLElement} */
+          Array.from(el.children).find((child) => child.slot === 'label');
         expect(el.hasAttribute('aria-labelledby')).to.equal(true);
         expect(el.getAttribute('aria-labelledby')).contains(label.id);
       });
-
       it('sets an aria-describedby to its children from element with slot="feedback"', async () => {
-        const el = /**  @type {FormGroup} */ (
+        const el =
+          /**  @type {FormGroup} */
           await fixture(html`
             <${tag}>
               <label slot="label">My Label</label>
               <div slot="feedback">My Feedback</div>
               ${inputSlots}
             </${tag}>
-          `)
-        );
-        const feedback = /** @type {HTMLElement} */ (
-          Array.from(el.children).find(child => child.slot === 'feedback')
-        );
+          `);
+        const feedback =
+          /** @type {HTMLElement} */
+          Array.from(el.children).find((child) => child.slot === 'feedback');
         expect(el.formElements[0]._inputNode.getAttribute('aria-describedby')).contains(
           feedback.id,
         );
       });
     });
-
     describe('Dynamically rendered children', () => {
       class DynamicCWrapper extends LitElement {
         static get properties() {
           return {
-            fields: { type: Array },
+            fields: {
+              type: Array,
+            },
           };
         }
-
         constructor() {
           super();
           /** @type {any[]} */
@@ -1418,13 +1549,12 @@ export function runFormGroupMixinSuite(cfg = {}) {
           /** @type {object|undefined} */
           this.serializedValue = undefined;
         }
-
         render() {
           return html`
               <${tag}
               .modelValue=${this.modelValue}
               .serializedValue=${this.serializedValue}>
-                ${this.fields.map(field => {
+                ${this.fields.map((field) => {
                   if (typeof field === 'object') {
                     return html`<${childTag} name="${field.name}" .modelValue="${field.value}"></${childTag}>`;
                   }
@@ -1436,114 +1566,119 @@ export function runFormGroupMixinSuite(cfg = {}) {
       }
       const dynamicChildrenTagString = defineCE(DynamicCWrapper);
       const dynamicChildrenTag = unsafeStatic(dynamicChildrenTagString);
-
       it(`when rendering children right from the start, sets their values correctly
       based on prefilled model/serializedValue`, async () => {
-        const el = /** @type {DynamicCWrapper} */ (
+        const el =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
           <${dynamicChildrenTag}
             .fields="${['firstName', 'lastName']}"
-            .modelValue="${{ firstName: 'foo', lastName: 'bar' }}"
+            .modelValue="${{
+              firstName: 'foo',
+              lastName: 'bar',
+            }}"
             >
           </${dynamicChildrenTag}>
-        `)
-        );
+        `);
         await el.updateComplete;
-        const fieldset = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(tagString)
-        );
+        const fieldset =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(tagString);
         expect(fieldset.formElements[0].modelValue).to.equal('foo');
         expect(fieldset.formElements[1].modelValue).to.equal('bar');
-
-        const el2 = /** @type {DynamicCWrapper} */ (
+        const el2 =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
           <${dynamicChildrenTag}
             .fields="${['firstName', 'lastName']}"
-            .serializedValue="${{ firstName: 'foo', lastName: 'bar' }}"
+            .serializedValue="${{
+              firstName: 'foo',
+              lastName: 'bar',
+            }}"
             >
           </${dynamicChildrenTag}>
-        `)
-        );
+        `);
         await el2.updateComplete;
-        const fieldset2 = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el2.shadowRoot).querySelector(tagString)
-        );
+        const fieldset2 =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el2.shadowRoot.querySelector(tagString);
         expect(fieldset2.formElements[0].serializedValue).to.equal('foo');
         expect(fieldset2.formElements[1].serializedValue).to.equal('bar');
       });
-
       it(`when rendering children delayed, sets their values
       correctly based on prefilled model/serializedValue`, async () => {
-        const el = /** @type {DynamicCWrapper} */ (
+        const el =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
-          <${dynamicChildrenTag} .modelValue="${{ firstName: 'foo', lastName: 'bar' }}">
+          <${dynamicChildrenTag} .modelValue="${{
+            firstName: 'foo',
+            lastName: 'bar',
+          }}">
           </${dynamicChildrenTag}>
-        `)
-        );
+        `);
         await el.updateComplete;
-        const fieldset = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(tagString)
-        );
+        const fieldset =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(tagString);
         el.fields = ['firstName', 'lastName'];
         await el.updateComplete;
         expect(fieldset.formElements[0].modelValue).to.equal('foo');
         expect(fieldset.formElements[1].modelValue).to.equal('bar');
-
-        const el2 = /** @type {DynamicCWrapper} */ (
+        const el2 =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
-          <${dynamicChildrenTag} .serializedValue="${{ firstName: 'foo', lastName: 'bar' }}">
+          <${dynamicChildrenTag} .serializedValue="${{
+            firstName: 'foo',
+            lastName: 'bar',
+          }}">
           </${dynamicChildrenTag}>
-        `)
-        );
+        `);
         await el2.updateComplete;
-        const fieldset2 = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el2.shadowRoot).querySelector(tagString)
-        );
+        const fieldset2 =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el2.shadowRoot.querySelector(tagString);
         el2.fields = ['firstName', 'lastName'];
         await el2.updateComplete;
         expect(fieldset2.formElements[0].serializedValue).to.equal('foo');
         expect(fieldset2.formElements[1].serializedValue).to.equal('bar');
       });
-
       it(`when rendering children partly delayed, sets their values correctly based on
       prefilled model/serializedValue`, async () => {
-        const el = /** @type {DynamicCWrapper} */ (
+        const el =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el.updateComplete;
-        const fieldset = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(tagString)
-        );
+        const fieldset =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(tagString);
         el.fields = ['firstName', 'lastName'];
         await el.updateComplete;
         expect(fieldset.formElements[0].modelValue).to.equal('foo');
         expect(fieldset.formElements[1].modelValue).to.equal('bar');
-
-        const el2 = /** @type {DynamicCWrapper} */ (
+        const el2 =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el2.updateComplete;
-        const fieldset2 = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el2.shadowRoot).querySelector(tagString)
-        );
+        const fieldset2 =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el2.shadowRoot.querySelector(tagString);
         el2.fields = ['firstName', 'lastName'];
         await el2.updateComplete;
         expect(fieldset2.formElements[0].serializedValue).to.equal('foo');
         expect(fieldset2.formElements[1].serializedValue).to.equal('bar');
       });
-
       it(`does not change interaction states when values set for delayed children`, async () => {
         function expectInteractionStatesToBeCorrectFor(/** @type {FormChild|FormGroup} */ elm) {
           expect(Boolean(elm.submitted)).to.be.false;
@@ -1551,88 +1686,94 @@ export function runFormGroupMixinSuite(cfg = {}) {
           expect(elm.touched).to.be.false;
           expect(elm.prefilled).to.be.true;
         }
-
-        const el = /** @type {DynamicCWrapper} */ (
+        const el =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el.updateComplete;
-        const fieldset = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(tagString)
-        );
+        const fieldset =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(tagString);
         await fieldset.registrationComplete;
-
         el.fields = ['firstName', 'lastName'];
         await el.updateComplete;
         expectInteractionStatesToBeCorrectFor(fieldset.formElements[0]);
         expectInteractionStatesToBeCorrectFor(fieldset.formElements[1]);
         expectInteractionStatesToBeCorrectFor(fieldset);
-
-        const el2 = /** @type {DynamicCWrapper} */ (
+        const el2 =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el2.updateComplete;
-        const fieldset2 = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el2.shadowRoot).querySelector(tagString)
-        );
+        const fieldset2 =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el2.shadowRoot.querySelector(tagString);
         await fieldset2.registrationComplete;
-
         el2.fields = ['firstName', 'lastName'];
         await el2.updateComplete;
         expectInteractionStatesToBeCorrectFor(fieldset2.formElements[0]);
         expectInteractionStatesToBeCorrectFor(fieldset2.formElements[1]);
         expectInteractionStatesToBeCorrectFor(fieldset2);
       });
-
       it(`prefilled children values take precedence over parent values`, async () => {
-        const el = /** @type {DynamicCWrapper} */ (
+        const el =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag}  .modelValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el.updateComplete;
-        const fieldset = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(tagString)
-        );
+        const fieldset =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(tagString);
         el.fields = [
-          { name: 'firstName', value: 'wins' },
-          { name: 'lastName', value: 'winsAsWell' },
+          {
+            name: 'firstName',
+            value: 'wins',
+          },
+          {
+            name: 'lastName',
+            value: 'winsAsWell',
+          },
         ];
         await el.updateComplete;
         expect(fieldset.formElements[0].modelValue).to.equal('wins');
         expect(fieldset.formElements[1].modelValue).to.equal('winsAsWell');
-
-        const el2 = /** @type {DynamicCWrapper} */ (
+        const el2 =
+          /** @type {DynamicCWrapper} */
           await fixture(html`
         <${dynamicChildrenTag} .serializedValue="${{
           firstName: 'foo',
           lastName: 'bar',
         }}">
         </${dynamicChildrenTag}>
-      `)
-        );
+      `);
         await el2.updateComplete;
-        const fieldset2 = /** @type {FormGroup} */ (
-          /** @type {ShadowRoot} */ (el2.shadowRoot).querySelector(tagString)
-        );
+        const fieldset2 =
+          /** @type {FormGroup} */
+          /** @type {ShadowRoot} */ el2.shadowRoot.querySelector(tagString);
         el2.fields = [
-          { name: 'firstName', value: 'wins' },
-          { name: 'lastName', value: 'winsAsWell' },
+          {
+            name: 'firstName',
+            value: 'wins',
+          },
+          {
+            name: 'lastName',
+            value: 'winsAsWell',
+          },
         ];
         await el2.updateComplete;
         expect(fieldset2.formElements[0].serializedValue).to.equal('wins');