@lion/ui 0.23.0 → 0.25.0

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

@@ -38,7 +38,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
   let groupTag;
   /** @type {{_$litStatic$: any}} */
   let childTag;
-
   before(async () => {
     // @ts-expect-error
     tag = unsafeStatic(cfg.tagString);
@@ -47,7 +46,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
     // @ts-expect-error
     childTag = unsafeStatic(cfg.childTagString);
   });
-
   describe('CheckboxIndeterminate', async () => {
     /** @type {{_$litStatic$: any}} */
 
@@ -63,7 +61,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       // Assert
       expect(el.getAttribute('type')).to.equal('checkbox');
     });
-
     it('should not be indeterminate by default if all children are unchecked', async () => {
       // Arrange
       const el = await fixture(html`
@@ -75,14 +72,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           </${tag}>
         </${groupTag}>
       `);
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
     });
-
     it('should be indeterminate if one child is checked', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -94,17 +90,16 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
     });
-
     it('should be checked if all children are checked', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -113,20 +108,19 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie" checked></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
       expect(elIndeterminate?.checked).to.be.true;
     });
-
     it('should become indeterminate if one child is checked', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -135,12 +129,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
-
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -150,10 +142,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
     });
-
     it('should become checked if all children are checked', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -162,11 +154,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -179,10 +170,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
       expect(elIndeterminate?.checked).to.be.true;
     });
-
     it('should become indeterminate if all children except disabled ones are checked', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -191,11 +182,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -207,7 +197,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
       expect(elIndeterminate?.checked).to.be.true;
     });
-
     it('should be checked when all children are prechecked', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -219,15 +208,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
     });
-
     it('should be checked when it has one prechecked child', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -237,15 +224,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
     });
-
     it('should be unchecked when it has an disabled checked child and an unchecked child', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -256,15 +241,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate?.hasAttribute('checked')).to.be.false;
     });
-
     it('should be indeterminated when some of the children are prechecked', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -276,18 +259,17 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
 
       // Assert
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
     });
-
     it('should sync all children when parent is checked (from indeterminate to checked)', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -296,11 +278,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -313,10 +294,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
     });
-
     it('should not sync any disabled children when parent is checked (from indeterminate to checked)', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -325,11 +306,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -342,10 +322,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
     });
-
     it('should remain unchecked when parent is clicked and all children are disabled', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -354,11 +334,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie" disabled></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -372,10 +351,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
     });
-
     it('should remain checked when parent is clicked and all children are disabled and checked', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -384,11 +363,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie" disabled checked></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -402,10 +380,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
     });
-
     it('should sync all children when parent is checked (from unchecked to checked)', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -414,11 +392,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -431,10 +408,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
     });
-
     it('should sync all children when parent is checked (from checked to unchecked)', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -443,11 +420,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie" checked></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -460,10 +436,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
     });
-
     it('should sync all prechecked children when parent is indeterminate and some of the children are disabled (from checked to unchecked)', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -472,11 +448,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} checked label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -490,10 +465,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
     });
-
     it('should stay as indeterminated after it is clicked, when it is interminated already and some children are disabled', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <${tag} label="Favorite scientists">
@@ -502,11 +477,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             <${childTag} label="Marie Curie"></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -519,10 +493,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
     });
-
     it('should work as expected with siblings checkbox-indeterminate', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]" label="Favorite scientists">
           <${tag}
@@ -557,16 +531,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             ></${childTag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elFirstIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector('#first-checkbox-indeterminate')
-      );
-
-      const elSecondIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector('#second-checkbox-indeterminate')
-      );
-
+      `);
+      const elFirstIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector('#first-checkbox-indeterminate');
+      const elSecondIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector('#second-checkbox-indeterminate');
       const elFirstSubCheckboxes = getCheckboxIndeterminateMembers(elFirstIndeterminate);
       const elSecondSubCheckboxes = getCheckboxIndeterminateMembers(elSecondIndeterminate);
 
@@ -581,11 +552,9 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elFirstSubCheckboxes._subCheckboxes[0].hasAttribute('checked')).to.be.true;
       expect(elFirstSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.true;
       expect(elFirstSubCheckboxes._subCheckboxes[2].hasAttribute('checked')).to.be.true;
-
       expect(elSecondSubCheckboxes._subCheckboxes[0].hasAttribute('checked')).to.be.false;
       expect(elSecondSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.false;
     });
-
     it('should work as expected when new checkbox was added', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -597,21 +566,19 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
 
       // Act
-      const newChild = document.createElement(/** @type {string} */ (cfg.childTagString));
+      const newChild = document.createElement(/** @type {string} */ cfg.childTagString);
       elIndeterminate.appendChild(newChild);
       await elIndeterminate.updateComplete;
 
       // Assert
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
     });
-
     it('should work as expected when an existing checkbox was removed', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
@@ -623,24 +590,23 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         </${tag}>
       </${groupTag}>
     `);
-
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
       expect(elIndeterminate.checked).to.be.false;
 
       // Act
-      elIndeterminate.removeChild(/** @type {ChildNode} */ (elIndeterminate.lastChild));
+      elIndeterminate.removeChild(/** @type {ChildNode} */ elIndeterminate.lastChild);
       await elIndeterminate.updateComplete;
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
     });
-
     it('should work as expected with nested indeterminate checkboxes', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]" label="Favorite scientists">
           <${tag} label="Scientists" id="parent-checkbox-indeterminate">
@@ -673,14 +639,13 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             </${tag}>
           </${tag}>
         </${groupTag}>
-      `)
-      );
-      const elNestedIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector('#nested-checkbox-indeterminate')
-      );
-      const elParentIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector('#parent-checkbox-indeterminate')
-      );
+      `);
+      const elNestedIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector('#nested-checkbox-indeterminate');
+      const elParentIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector('#parent-checkbox-indeterminate');
       const elNestedSubCheckboxes = getCheckboxIndeterminateMembers(elNestedIndeterminate);
       const elParentSubCheckboxes = getCheckboxIndeterminateMembers(elParentIndeterminate);
 
@@ -725,10 +690,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elParentIndeterminate?.hasAttribute('checked')).to.be.true;
       expect(elParentIndeterminate?.hasAttribute('indeterminate')).to.be.false;
     });
-
     it('should work as expected if extra html', async () => {
       // Arrange
-      const el = /**  @type {LionCheckboxGroup} */ (
+      const el =
+        /**  @type {LionCheckboxGroup} */
         await fixture(html`
         <${groupTag} name="scientists[]">
           <div>
@@ -744,11 +709,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           </div>
           <div>Too much fun, stop it !</div>
         </${groupTag}>
-      `)
-      );
-      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-        el.querySelector(`${cfg.tagString}`)
-      );
+      `);
+      const elIndeterminate =
+        /**  @type {LionCheckboxIndeterminate} */
+        el.querySelector(`${cfg.tagString}`);
       const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
 
       // Act
@@ -774,10 +738,9 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           </${tag}>
         </${groupTag}>
       `);
-        const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-          el.querySelector(`${cfg.tagString}`)
-        );
-
+        const elIndeterminate =
+          /**  @type {LionCheckboxIndeterminate} */
+          el.querySelector(`${cfg.tagString}`);
         expect(elIndeterminate.mixedState).to.be.true;
         expect(elIndeterminate.checked).to.be.false;
         expect(elIndeterminate.indeterminate).to.be.true;
@@ -800,7 +763,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         expect(elIndeterminate.checked).to.be.false;
         expect(elIndeterminate.indeterminate).to.be.true;
       });
-
       it('should reset to old child checkbox states when reaching indeterminate state', async () => {
         const el = await fixture(html`
         <${groupTag} name="scientists[]">
@@ -811,31 +773,29 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           </${tag}>
         </${groupTag}>
       `);
-        const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-          el.querySelector(`${cfg.tagString}`)
-        );
-        const checkboxEls = /** @type {LionCheckbox[]} */ (
-          Array.from(el.querySelectorAll(`${cfg.childTagString}`))
-        );
-
-        expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, false, false]);
+        const elIndeterminate =
+          /**  @type {LionCheckboxIndeterminate} */
+          el.querySelector(`${cfg.tagString}`);
+        const checkboxEls =
+          /** @type {LionCheckbox[]} */
+          Array.from(el.querySelectorAll(`${cfg.childTagString}`));
+        expect(checkboxEls.map((checkboxEl) => checkboxEl.checked)).to.eql([true, false, false]);
 
         // @ts-ignore for testing purposes, we access this protected getter
         elIndeterminate._inputNode.click();
         await elIndeterminate.updateComplete;
-        expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, true, true]);
+        expect(checkboxEls.map((checkboxEl) => checkboxEl.checked)).to.eql([true, true, true]);
 
         // @ts-ignore for testing purposes, we access this protected getter
         elIndeterminate._inputNode.click();
         await elIndeterminate.updateComplete;
-        expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([false, false, false]);
+        expect(checkboxEls.map((checkboxEl) => checkboxEl.checked)).to.eql([false, false, false]);
 
         // @ts-ignore for testing purposes, we access this protected getter
         elIndeterminate._inputNode.click();
         await elIndeterminate.updateComplete;
-        expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, false, false]);
+        expect(checkboxEls.map((checkboxEl) => checkboxEl.checked)).to.eql([true, false, false]);
       });
-
       it('should no longer reach indeterminate state if the child boxes are all checked or all unchecked during indeterminate state', async () => {
         const el = await fixture(html`
         <${groupTag} name="scientists[]">
@@ -846,12 +806,12 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           </${tag}>
         </${groupTag}>
       `);
-        const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-          el.querySelector(`${cfg.tagString}`)
-        );
-        const checkboxEls = /** @type {LionCheckbox[]} */ (
-          Array.from(el.querySelectorAll(`${cfg.childTagString}`))
-        );
+        const elIndeterminate =
+          /**  @type {LionCheckboxIndeterminate} */
+          el.querySelector(`${cfg.tagString}`);
+        const checkboxEls =
+          /** @type {LionCheckbox[]} */
+          Array.from(el.querySelectorAll(`${cfg.childTagString}`));
 
         // Check when all child boxes in indeterminate state are unchecked
         // we don't have a tri-state, but a duo-state.
@@ -892,7 +852,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
           await checkEl.updateComplete;
           await elIndeterminate.updateComplete;
         }
-
         expect(elIndeterminate.checked).to.be.true;
         expect(elIndeterminate.indeterminate).to.be.false;
 
@@ -909,10 +868,10 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         expect(elIndeterminate.indeterminate).to.be.false;
       });
     });
-
     describe('accessibility', () => {
       it('is accessible', async () => {
-        const el = /** @type {LionCheckboxGroup} */ (
+        const el =
+          /** @type {LionCheckboxGroup} */
           await fixture(html`
             <${groupTag} name="scientists[]">
               <${tag} label="Favorite scientists">
@@ -921,11 +880,9 @@ export function runCheckboxIndeterminateSuite(customConfig) {
                 <${childTag} label="Marie Curie"></${childTag}>
               </${tag}>
             </${groupTag}>
-          `)
-        );
+          `);
         await expect(el).to.be.accessible();
       });
-
       it('has role="list" and its children role="listitem"', async () => {
         const el = await fixture(html`
           <${groupTag} name="scientists[]">
@@ -936,10 +893,9 @@ export function runCheckboxIndeterminateSuite(customConfig) {
             </${tag}>
           </${groupTag}>
         `);
-        const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
-          el.querySelector(`${cfg.tagString}`)
-        );
-
+        const elIndeterminate =
+          /**  @type {LionCheckboxIndeterminate} */
+          el.querySelector(`${cfg.tagString}`);
         expect(
           elIndeterminate.shadowRoot
             ?.querySelector('.choice-field__nested-checkboxes')