@lion/ui 0.22.0 → 0.24.0

package/components/combobox/test/lion-combobox.test.js

@@ -15,7 +15,6 @@ import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-
 import { sendKeys } from '@web/test-runner-commands';
 import { LitElement, nothing } from 'lit';
 import sinon from 'sinon';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -27,7 +26,8 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all', disabled?: boolean, readonly?: boolean }} config
  */
 async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}) {
-  const el = /** @type {LionCombobox} */ (
+  const el =
+    /** @type {LionCombobox} */
     await fixture(html`
       <lion-combobox label="Search" name="foo">
         <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -35,8 +35,7 @@ async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}
         <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
         <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
       </lion-combobox>
-    `)
-  );
+    `);
   if (autocomplete) {
     el.autocomplete = autocomplete;
   }
@@ -52,7 +51,6 @@ async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}
   await el.updateComplete;
   return [el, el.formElements];
 }
-
 describe('lion-combobox', () => {
   describe('Rendering on API change', () => {
     it('renders when options changed', async () => {
@@ -78,59 +76,54 @@ describe('lion-combobox', () => {
           label: 'Pineapple',
         },
       ];
-
       class Wrapper extends LitElement {
         static properties = {
           ...super.properties,
-          entries: { type: Array },
+          entries: {
+            type: Array,
+          },
         };
-
         constructor() {
           super();
           this.entries = entries;
         }
-
         render() {
           return html`<lion-combobox name="foo">
             ${this.entries.map(
-              entry => html`<lion-option .choiceValue="${entry.id}">${entry.label}</lion-option>`,
+              (entry) => html`<lion-option .choiceValue="${entry.id}">${entry.label}</lion-option>`,
             )}
           </lion-combobox>`;
         }
       }
-
       const tagString = defineCE(Wrapper);
       const tag = unsafeStatic(tagString);
-      const wrapperElement = /** @type {Wrapper} */ (await fixture(html`<${tag}></${tag}>`));
+      const wrapperElement = /** @type {Wrapper} */ await fixture(html`<${tag}></${tag}>`);
       await waitUntil(
         () =>
           wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
             .length === entries.length,
       );
-
       wrapperElement.entries = [
         {
           id: '4',
           label: 'Banana',
         },
       ];
-
       await waitUntil(
         () =>
           wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
             .length === wrapperElement.entries.length,
       );
-
       const optionElements = wrapperElement.shadowRoot?.querySelectorAll('lion-option');
       expect(optionElements?.length).to.equal(wrapperElement.entries.length);
       const optionElement = optionElements?.item(0);
       expect(optionElement?.textContent).to.equal('Banana');
     });
   });
-
   describe('Options visibility', () => {
     it('hides options when text in input node is cleared after typing something by default', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -138,12 +131,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const options = el.formElements;
-      const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
-
+      const visibleOptions = () => options.filter((o) => o.getAttribute('aria-hidden') !== 'true');
       async function performChecks() {
         await mimicUserTyping(el, 'c');
         await el.updateComplete;
@@ -153,7 +143,6 @@ describe('lion-combobox', () => {
         await el.updateComplete;
         expect(visibleOptions().length).to.equal(0, `autocompleteMode is ${el.autocomplete}`);
       }
-
       el.autocomplete = 'none';
       await performChecks();
       el.autocomplete = 'list';
@@ -163,9 +152,9 @@ describe('lion-combobox', () => {
       el.autocomplete = 'both';
       await performChecks();
     });
-
     it('hides all options on reset()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -173,12 +162,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const options = el.formElements;
-      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
-
+      const visibleOptions = () => options.filter((o) => o.style.display !== 'none');
       await mimicUserTyping(el, 'cha');
       await el.updateComplete;
       expect(visibleOptions().length).to.equal(1);
@@ -186,9 +172,9 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(visibleOptions().length).to.equal(0);
     });
-
     it('shows all options on reset() when showAllOnEmpty is set to true and overlay was open', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" show-all-on-empty>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -196,24 +182,20 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const options = el.formElements;
-      const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
-
+      const visibleOptions = () => options.filter((o) => o.getAttribute('aria-hidden') !== 'true');
       await mimicUserTyping(el, 'cha');
       await el.updateComplete;
       expect(visibleOptions().length).to.equal(1);
       expect(el.opened).to.be.true;
-
       el.reset();
       await el.updateComplete;
       expect(visibleOptions().length).to.equal(4);
     });
-
     it('hides listbox on click/enter (when multiple-choice is false)', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -221,19 +203,15 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _listboxNode } = getComboboxMembers(el);
-
       async function open() {
         await mimicUserTyping(el, 'ch');
         return el.updateComplete;
       }
-
       await open();
       expect(el.opened).to.be.true;
-      const visibleOptions = el.formElements.filter(o => o.style.display !== 'none');
+      const visibleOptions = el.formElements.filter((o) => o.style.display !== 'none');
       visibleOptions[0].click();
       expect(el.opened).to.be.false;
       await open();
@@ -243,10 +221,10 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(el.opened).to.be.false;
     });
-
     describe('With ".showAllOnEmpty"', () => {
       it('keeps showing options when text in input node is cleared after typing something', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" autocomplete="list" show-all-on-empty>
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -254,12 +232,10 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-
+          `);
         const options = el.formElements;
-        const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
-
+        const visibleOptions = () =>
+          options.filter((o) => o.getAttribute('aria-hidden') !== 'true');
         async function performChecks() {
           await mimicUserTyping(el, 'c');
           await el.updateComplete;
@@ -268,7 +244,6 @@ describe('lion-combobox', () => {
           await el.updateComplete;
           expect(visibleOptions().length).to.equal(options.length);
         }
-
         el.autocomplete = 'none';
         await performChecks();
         el.autocomplete = 'list';
@@ -278,9 +253,9 @@ describe('lion-combobox', () => {
         el.autocomplete = 'both';
         await performChecks();
       });
-
       it('shows overlay on click', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" .showAllOnEmpty="${true}">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -288,18 +263,21 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _inputNode } = getComboboxMembers(el);
-
         expect(el.opened).to.be.false;
-        _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+        _inputNode.dispatchEvent(
+          new Event('click', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
         await el.updateComplete;
         expect(el.opened).to.be.true;
       });
-
       it('hides overlay on [Escape] after being opened', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" .showAllOnEmpty="${true}" opened>
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -307,19 +285,20 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         await el.updateComplete;
-
         const { _inputNode } = getComboboxMembers(el);
-
-        _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+        _inputNode.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'Escape',
+          }),
+        );
         await el.updateComplete;
         expect(el.opened).to.be.false;
       });
-
       it('hides listbox on click/enter (when multiple-choice is false)', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" .showAllOnEmpty="${true}">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -327,11 +306,8 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-
+          `);
         const { _listboxNode, _inputNode } = getComboboxMembers(el);
-
         async function open() {
           await mimicUserTyping(el, 'ch');
           return el.updateComplete;
@@ -345,75 +321,66 @@ describe('lion-combobox', () => {
         if (isSafari) {
           return;
         }
-
         await open();
         expect(el.opened).to.be.true;
-        const visibleOptions = el.formElements.filter(o => o.style.display !== 'none');
+        const visibleOptions = el.formElements.filter((o) => o.style.display !== 'none');
         visibleOptions[0].click();
         await el.updateComplete;
         expect(el.opened).to.be.false;
-
         _inputNode.value = '';
         _inputNode.blur();
         await open();
         await el.updateComplete;
-
         el.activeIndex = el.formElements.indexOf(visibleOptions[0]);
         mimicKeyPress(_listboxNode, 'Enter');
         expect(el.opened).to.be.false;
       });
     });
   });
-
   describe('Structure', () => {
     it('has a listbox node', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             <lion-option .choiceValue="${'20'}">Item 2</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _listboxNode } = getComboboxMembers(el);
-
       expect(_listboxNode).to.exist;
       // TODO: worked before, find out what has changed in ScopedElements
       // expect(_listboxNode instanceof LionOptions).to.be.true;
       expect(el.querySelector('[role=listbox]')).to.equal(_listboxNode);
     });
-
     it('has a textbox element', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             <lion-option .choiceValue="${'20'}">Item 2</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _comboboxNode } = getComboboxMembers(el);
-
       expect(_comboboxNode).to.exist;
       expect(el.querySelector('[role=combobox]')).to.equal(_comboboxNode);
     });
-
     it('has validator "MatchesOption" applied by default', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             <lion-option .choiceValue="${'20'}">Item 2</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, '30');
       await el.updateComplete;
       expect(el.hasFeedbackFor).to.include('error');
       expect(el.validationStates).to.have.property('error');
       expect(el.validationStates.error).to.have.property('MatchesOption');
     });
-
     it('keeps slottable provided in `slots` getter as direct host child', async () => {
       class MyEl extends SlotMixin(LionCombobox) {
         // @ts-ignore
@@ -428,7 +395,6 @@ describe('lion-combobox', () => {
             }),
           };
         }
-
         _labelTemplate() {
           return html`
             <div class="form-field__label">
@@ -438,7 +404,6 @@ describe('lion-combobox', () => {
             </div>
           `;
         }
-
         constructor() {
           super();
           this.renderSlot = false;
@@ -446,44 +411,39 @@ describe('lion-combobox', () => {
       }
       const tagName = defineCE(MyEl);
       const wrappingTag = unsafeStatic(tagName);
-
-      const el = /** @type {MyEl} */ (
+      const el =
+        /** @type {MyEl} */
         await fixture(html`
           <${wrappingTag} label="my label">
             <lion-option .choiceValue="${'1'}">${'one'}</lion-option>
           </${wrappingTag}>
-        `)
-      );
+        `);
       await el.registrationComplete;
-
       el.renderSlot = true;
       await el.updateComplete;
       const lazyRenderedSlot = el.querySelector('#lazyRenderedSlotId');
       expect(lazyRenderedSlot?.parentElement === el).to.be.true;
     });
   });
-
   describe('Values', () => {
     it('syncs modelValue with textbox', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .modelValue="${'10'}">
             <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             <lion-option .choiceValue="${'20'}">Item 2</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       expect(_inputNode.value).to.equal('10');
-
       el.modelValue = '20';
       await el.updateComplete;
       expect(_inputNode.value).to.equal('20');
     });
-
     it('sets modelValue to Unparseable if no option is selected', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .modelValue="${'Artichoke'}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -491,10 +451,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       expect(el.modelValue).to.equal('Artichoke');
       expect(el.formElements[0].checked).to.be.true;
       el.setCheckedIndex(-1);
@@ -503,7 +461,6 @@ describe('lion-combobox', () => {
       expect(el.modelValue instanceof Unparseable).to.be.true;
       expect(el.modelValue.viewValue).to.equal('Artichoke');
       expect(el.formElements[0].checked).to.be.false;
-
       el.setCheckedIndex(-1);
       _inputNode.value = 'Foo';
       el.__shouldAutocompleteNextUpdate = true;
@@ -511,7 +468,6 @@ describe('lion-combobox', () => {
       expect(el.modelValue instanceof Unparseable).to.be.true;
       expect(el.modelValue.viewValue).to.equal('Foo');
       expect(el.formElements[0].checked).to.be.false;
-
       el.setCheckedIndex(0);
       el.__shouldAutocompleteNextUpdate = true;
       await el.updateComplete;
@@ -519,9 +475,9 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.equal('Artichoke');
       expect(el.formElements[0].checked).to.be.true;
     });
-
     it('sets modelValue to _inputNode.value if no option is selected when requireOptionMatch is false', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .modelValue="${'Artichoke'}" .requireOptionMatch="${false}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -529,10 +485,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       expect(el.modelValue).to.equal('Artichoke');
       expect(el.formElements[0].checked).to.be.true;
       el.setCheckedIndex(-1);
@@ -540,7 +494,6 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(el.modelValue).to.equal('Artichoke');
       expect(el.formElements[0].checked).to.be.true;
-
       el.setCheckedIndex(-1);
       _inputNode.value = 'Foo';
       el.__shouldAutocompleteNextUpdate = true;
@@ -548,9 +501,9 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.equal('Foo');
       expect(el.formElements[0].checked).to.be.false;
     });
-
     it('sets modelValue to empty array if no option is selected for multiple choice', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice .modelValue="${['Artichoke']}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -558,8 +511,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       expect(el.modelValue).to.deep.equal(['Artichoke']);
       expect(el.formElements[0].checked).to.be.true;
       el.setCheckedIndex([]);
@@ -567,9 +519,9 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.deep.equal([]);
       expect(el.formElements[0].checked).to.be.false;
     });
-
     it('clears modelValue and textbox value on clear()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .modelValue="${'Artichoke'}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -577,16 +529,13 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       el.clear();
       expect(el.modelValue).to.equal('');
       expect(_inputNode.value).to.equal('');
-
-      const el2 = /** @type {LionCombobox} */ (
+      const el2 =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice .modelValue="${['Artichoke']}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -594,43 +543,36 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       el2.clear();
       expect(el2.modelValue).to.eql([]);
       // @ts-ignore [allow-protected] in test
       expect(el2._inputNode.value).to.equal('');
     });
-
     it('correctly emits event with an empty value when clear() is called', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(
           html`<lion-combobox>
             <lion-option .choiceValue=${'red'}>Red</lion-option>
             <lion-option .choiceValue=${'green'}>Green</lion-option>
             <lion-option .choiceValue=${'blue'}>Blue</lion-option>
           </lion-combobox>`,
-        )
-      );
-
+        );
       el.modelValue = 'red';
       await el.updateComplete;
-
       el.addEventListener('model-value-changed', ({ target }) => {
         expect(target).to.not.be.null;
-
-        const { modelValue, value } = /** @type {LionCombobox} */ (target);
+        const { modelValue, value } = /** @type {LionCombobox} */ target;
         expect(value).to.equal('');
         expect(modelValue).to.equal('');
       });
-
       el.clear();
       await el.updateComplete;
     });
-
     it('updates option list after clear()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -638,22 +580,19 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const options = el.formElements;
       await mimicUserTyping(el, 'a');
       await el.updateComplete;
-
-      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      const visibleOptions = () => options.filter((o) => o.style.display !== 'none');
       expect(visibleOptions().length).to.equal(3, 'after input');
-
       el.clear();
       await el.updateComplete;
       expect(visibleOptions().length).to.equal(0, 'after clear');
     });
-
     it('keeps interaction states on clear()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -661,19 +600,17 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'a');
       await el.updateComplete;
       expect(el.dirty).to.equal(true);
-
       el.clear();
       await el.updateComplete;
       expect(el.dirty).to.equal(true);
     });
-
     it('resets modelValue and textbox value on reset()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .modelValue="${'Artichoke'}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -681,16 +618,14 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
       el.modelValue = 'Chard';
       el.reset();
       expect(el.modelValue).to.equal('Artichoke');
       expect(_inputNode.value).to.equal('Artichoke');
-
-      const el2 = /** @type {LionCombobox} */ (
+      const el2 =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice .modelValue="${['Artichoke']}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -698,40 +633,37 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       el2.modelValue = ['Artichoke', 'Chard'];
       el2.reset();
       expect(el2.modelValue).to.deep.equal(['Artichoke']);
       // @ts-ignore [allow-protected] in test
       expect(el2._inputNode.value).to.equal('');
     });
-
     it('syncs textbox to modelValue', async () => {
       for (const autocompleteMode of ['none', 'list', 'inline', 'both']) {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" show-all-on-empty .autocomplete="${autocompleteMode}">
               <lion-option .choiceValue="${'Aa'}" checked>Aa</lion-option>
               <lion-option .choiceValue="${'Bb'}">Bb</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _inputNode } = getComboboxMembers(el);
-
         expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
-
         el.formElements[0].click();
         await el.updateComplete;
-
         expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
         expect(el.checkedIndex).to.equal(0, `autocompleteMode is ${autocompleteMode}`);
-
         await mimicUserTyping(el, 'B');
         await el.updateComplete;
         if (autocompleteMode === 'none' || autocompleteMode === 'list') {
           expect(el.modelValue).to.deep.equal(
-            { type: 'unparseable', viewValue: 'B' },
+            {
+              type: 'unparseable',
+              viewValue: 'B',
+            },
             `autocompleteMode is ${autocompleteMode}`,
           );
           await el.updateComplete;
@@ -742,9 +674,9 @@ describe('lion-combobox', () => {
         }
       }
     });
-
     it('works with Required validator', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .validators=${[new Required()]}>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -752,17 +684,16 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       el.submitted = true;
       await el.feedbackComplete;
       expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
       await el.feedbackComplete;
       expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
     });
-
     it('ignores empty string modelValue inputs', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice autocomplete="none">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -770,26 +701,22 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       el.requireOptionMatch = false;
       await el.updateComplete;
       const { _inputNode } = getComboboxMembers(el);
-
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
       expect(el.modelValue).to.eql([]);
-
       await mimicUserTyping(el, ' ');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
       expect(el.modelValue).to.eql([]);
     });
-
     it('allows a value outside of the option list when requireOptionMatch is false', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .validators=${[new Required()]}>
             <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -797,23 +724,20 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       el.requireOptionMatch = false;
       const { _inputNode } = getComboboxMembers(el);
       expect(el.checkedIndex).to.equal(0);
-
       await mimicUserTyping(el, 'Foo');
       _inputNode.dispatchEvent(new Event('input'));
       await el.updateComplete;
-
       expect(el.checkedIndex).to.equal(-1);
       expect(el.modelValue).to.equal('Foo');
       expect(_inputNode.value).to.equal('Foo');
     });
-
     it('fires "model-value-changed" on every textbox change when requireOptionMatch is false and autocomplete is both', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both" .requireOptionMatch="${false}">
             <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -821,12 +745,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
-      const fake = sinon.fake(ev => ev.target.modelValue);
+        `);
+      const fake = sinon.fake((ev) => ev.target.modelValue);
       el.addEventListener('model-value-changed', fake);
-
       await mimicUserTyping(el, 'Foo');
       await el.updateComplete;
       expect(fake).to.have.been.calledThrice;
@@ -835,9 +756,9 @@ describe('lion-combobox', () => {
       expect(fake.thirdCall.returnValue).to.equal('Foo');
       expect(el.modelValue).to.equal('Foo');
     });
-
     it('fires "model-value-changed" on every textbox change when requireOptionMatch is false and autocomplete is none', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none" .requireOptionMatch="${false}">
             <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -845,12 +766,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
-      const fake = sinon.fake(ev => ev.target.modelValue);
+        `);
+      const fake = sinon.fake((ev) => ev.target.modelValue);
       el.addEventListener('model-value-changed', fake);
-
       await mimicUserTyping(el, 'Foo');
       await el.updateComplete;
       expect(fake.callCount).to.equal(4);
@@ -860,9 +778,9 @@ describe('lion-combobox', () => {
       expect(fake.getCall(3).returnValue).to.equal('Foo');
       expect(el.modelValue).to.equal('Foo');
     });
-
     it('does not fire "model-value-changed" when requireOptionMatch is false but the textbox value did not change', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none" .requireOptionMatch="${false}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -870,23 +788,20 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'Foo');
       await el.updateComplete;
-
       const spy = sinon.spy();
       el.addEventListener('model-value-changed', spy);
 
       // Re-triggering autocompletion with the exact same textbox value should not dispatch again
       el.__shouldAutocompleteNextUpdate = true;
       await el.updateComplete;
-
       expect(spy).to.not.have.been.called;
     });
-
     it('fires "model-value-changed" via checked option repropagation (not the manual dispatch) when requireOptionMatch is true', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -894,16 +809,13 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const spy = sinon.spy();
       el.addEventListener('model-value-changed', spy);
-
       await mimicUserTyping(el, 'cha');
       await el.updateComplete;
       expect(el.modelValue).to.equal('Chard');
       expect(spy).to.have.been.calledOnce;
-
       spy.resetHistory();
       // No option matches "xyz", so checkedIndex stays -1 and requireOptionMatch is true:
       // no event should be manually dispatched (normal Unparseable flow, no double event)
@@ -912,9 +824,9 @@ describe('lion-combobox', () => {
       expect(el.modelValue instanceof Unparseable).to.be.true;
       expect(spy).to.have.been.calledOnce;
     });
-
     it('fires "model-value-changed" via checked option repropagation (not the manual dispatch) when requireOptionMatch is false and no option matches the input', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -922,12 +834,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       el.requireOptionMatch = false;
       await el.updateComplete;
-
       const spy = sinon.spy();
       el.addEventListener('model-value-changed', spy);
 
@@ -939,9 +848,9 @@ describe('lion-combobox', () => {
       expect(spy.args.length).to.equal(3);
       expect(spy.args[2][0].target.modelValue).to.equal('Chicorys');
     });
-
     it("doesn't select any similar options after using delete when requireOptionMatch is false", async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .validators=${[new Required()]}>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -949,29 +858,24 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       el.requireOptionMatch = false;
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'Art');
       await el.updateComplete;
-
       await mimicUserTypingAdvanced(el, ['Delete']);
       await el.updateComplete;
       await el.updateComplete;
-
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.checkedIndex).to.equal(-1);
       expect(el.modelValue).to.equal('Art');
       expect(_inputNode.value).to.equal('Art');
     });
-
     it("when removing a letter it won't select the option", async () => {
       // We don't autocomplete when characters are removed
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -979,8 +883,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
       expect(el.checkedIndex).to.equal(0);
 
@@ -992,28 +895,25 @@ describe('lion-combobox', () => {
       _inputNode.value = arr.join('');
       await el.updateComplete;
       el.dispatchEvent(new Event('blur'));
-
       expect(el.checkedIndex).to.equal(-1);
       expect(el.modelValue instanceof Unparseable).to.be.true;
       expect(el.modelValue.viewValue).to.equal('Artichok');
     });
-
     it('allows the user to override the parser', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
-            .parser="${/** @param {string} value */ value => value.replace(/[0-9]/g, '')}"
+            .parser="${/** @param {string} value */ (value) => value.replace(/[0-9]/g, '')}"
           >
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
             <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       el.setCheckedIndex(-1);
       _inputNode.value = 'Foo123';
       el.__shouldAutocompleteNextUpdate = true;
@@ -1021,9 +921,9 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.equal('Foo');
       expect(el.formElements[0].checked).to.be.false;
     });
-
     it('allows custom selections when multi-choice when requireOptionMatch is false', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
@@ -1036,32 +936,26 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       el.requireOptionMatch = false;
       await el.updateComplete;
-
       const { _inputNode } = getComboboxMembers(el);
       expect(el.modelValue).to.eql(['Chard']);
       expect(el.checkedIndex).to.eql([1]);
-
       await mimicUserTyping(el, 'Foo');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.modelValue).to.eql(['Chard', 'Foo']);
       expect(el.checkedIndex).to.eql([1]);
-
       await mimicUserTyping(el, 'Bar');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
     });
-
     it('allows many custom selections when multi-choice when requireOptionMatch is false', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
@@ -1074,33 +968,26 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       el.requireOptionMatch = false;
       await el.updateComplete;
-
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'Foo');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.modelValue).to.eql(['Foo']);
       expect(el.checkedIndex).to.eql([]);
-
       await mimicUserTyping(el, 'Bar');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.modelValue).to.eql(['Foo', 'Bar']);
       expect(el.checkedIndex).to.eql([]);
     });
-
     it('allows new options when multi-choice when requireOptionMatch=false and autocomplete="both", without selecting similar values', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
@@ -1113,23 +1000,18 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await el.updateComplete;
-
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'Artist');
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.modelValue).to.eql(['Artist']);
     });
-
     it('allows new options when multi-choice when requireOptionMatch=false and autocomplete="both", when deleting autocomplete values using Backspace', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
@@ -1142,11 +1024,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await el.updateComplete;
-
       const { _inputNode } = getComboboxMembers(el);
       await mimicUserTyping(el, 'Art');
       await el.updateComplete;
@@ -1154,12 +1033,11 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       mimicKeyPress(_inputNode, 'Enter');
       await el.updateComplete;
-
       expect(el.modelValue).to.eql(['Art']);
     });
-
     it('allows new custom options when multi-choice when requireOptionMatch=false and autocomplete="both", when deleting autocompleted values using Delete', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox
             name="foo"
@@ -1172,14 +1050,10 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await el.updateComplete;
-
       const { _inputNode } = getComboboxMembers(el);
       el.modelValue = [];
-
       await mimicUserTyping(el, 'Art');
       await el.updateComplete;
       await mimicUserTypingAdvanced(el, ['Delete']);
@@ -1188,12 +1062,11 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(el.modelValue).to.eql(['Art']);
     });
-
     it('allows prefilling the combobox', async () => {
       const autocompleteValues = ['inline', 'none', 'both', 'list'];
-
       for (const autocompleteValue of autocompleteValues) {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox autocomplete="${autocompleteValue}" .modelValue="${'Chard'}" name="foo">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1201,18 +1074,16 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-
+          `);
         expect(el.modelValue).to.equal('Chard');
         // @ts-expect-error
         expect(el._inputNode.value).to.equal('Chard');
       }
     });
-
     it('submits form on [Enter] when listbox is closed', async () => {
-      const submitSpy = sinon.spy(e => e.preventDefault());
-      const el = /** @type {HTMLFormElement}  */ (
+      const submitSpy = sinon.spy((e) => e.preventDefault());
+      const el =
+        /** @type {HTMLFormElement}  */
         await fixture(html`
           <form @submit=${submitSpy}>
             <lion-combobox name="foo">
@@ -1223,9 +1094,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
             <button type="submit">submit</button>
           </form>
-        `)
-      );
-      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+        `);
+      const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
       const { _inputNode } = getComboboxMembers(combobox);
       await combobox.updateComplete;
       _inputNode.focus();
@@ -1234,10 +1104,10 @@ describe('lion-combobox', () => {
       });
       expect(submitSpy.callCount).to.equal(1);
     });
-
     it('does not submit form on [Enter] when listbox is opened', async () => {
-      const submitSpy = sinon.spy(e => e.preventDefault());
-      const el = /** @type {HTMLFormElement}  */ (
+      const submitSpy = sinon.spy((e) => e.preventDefault());
+      const el =
+        /** @type {HTMLFormElement}  */
         await fixture(html`
           <form @submit=${submitSpy}>
             <lion-combobox name="foo">
@@ -1248,9 +1118,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
             <button type="submit">submit</button>
           </form>
-        `)
-      );
-      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+        `);
+      const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
       const { _inputNode } = getComboboxMembers(combobox);
       combobox.opened = true;
       await combobox.updateComplete;
@@ -1261,10 +1130,10 @@ describe('lion-combobox', () => {
       expect(submitSpy.callCount).to.equal(0);
     });
   });
-
   describe('Overlay visibility', () => {
     it('does not show overlay on click', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1272,27 +1141,28 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _comboboxNode } = getComboboxMembers(el);
-
       expect(el.opened).to.equal(false);
-      _comboboxNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _comboboxNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.equal(false);
     });
-
     it('does not flash the menu when _showOverlayCondition returns "false"', async () => {
       class ComplexCombobox extends LionCombobox {
         _showOverlayCondition() {
           return false;
         }
       }
-
       const tagName = defineCE(ComplexCombobox);
       const tag = unsafeStatic(tagName);
-
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html` 
           <${tag} name="combo" label="Display only the label once selected">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1300,15 +1170,13 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-      );
-
+        `);
       const dialog = el.shadowRoot?.querySelector('dialog');
       /**
        * hasDropdownFlashed is `true` if the menu was shown for a short period of time and then got closed
        */
       let hasDropdownFlashed = false;
-      const observer = new MutationObserver(mutationList => {
+      const observer = new MutationObserver((mutationList) => {
         // eslint-disable-next-line no-unused-vars
         for (const mutation of mutationList) {
           if (dialog?.style.display === '') {
@@ -1316,8 +1184,9 @@ describe('lion-combobox', () => {
           }
         }
       });
-      observer.observe(/** @type {Node} */ (dialog), { attributeFilter: ['style'] });
-
+      observer.observe(/** @type {Node} */ dialog, {
+        attributeFilter: ['style'],
+      });
       const { _inputNode } = getComboboxMembers(el);
       _inputNode.focus();
       await sendKeys({
@@ -1325,9 +1194,9 @@ describe('lion-combobox', () => {
       });
       expect(hasDropdownFlashed).to.be.false;
     });
-
     it('shows overlay on click when filled', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1335,16 +1204,19 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _comboboxNode } = getComboboxMembers(el);
       el.modelValue = 'Art';
       expect(el.opened).to.equal(false);
-      _comboboxNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _comboboxNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.equal(false);
     });
-
     it('shows overlay again after select and char keyup', async () => {
       /**
        * Scenario:
@@ -1354,7 +1226,8 @@ describe('lion-combobox', () => {
        * still has focus
        * [4] user changes textbox value to "Artichoke": the overlay should show again
        */
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1362,15 +1235,18 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const options = el.formElements;
       const { _inputNode } = getComboboxMembers(el);
-
       expect(el.opened).to.equal(false);
 
       // step [1]
-      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.equal(false);
 
@@ -1391,9 +1267,34 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(el.opened).to.equal(true);
     });
-
+    it('syncs a manually checked selection on overlay close while the input remains focused', async () => {
+      const el =
+        /** @type {LionCombobox} */
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="list">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+          </lion-combobox>
+        `);
+      const { _inputNode } = getComboboxMembers(el);
+      _inputNode.focus();
+      el.opened = true;
+      await el.updateComplete;
+      expect(el.opened).to.equal(true);
+      expect(isActiveElement(_inputNode)).to.be.true;
+      el.setCheckedIndex(0);
+      await el.updateComplete;
+      expect(el.modelValue).to.equal('Artichoke');
+      expect(el.checkedIndex).to.equal(0);
+      expect(_inputNode.value).to.equal('');
+      el.opened = false;
+      await el.updateComplete;
+      expect(_inputNode.value).to.equal('Artichoke');
+      expect(isActiveElement(_inputNode)).to.be.true;
+    });
     it('hides (and clears) overlay on [Escape]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1401,23 +1302,23 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
       expect(_inputNode.value).to.equal('Artichoke');
-
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Escape',
+        }),
+      );
       expect(el.opened).to.equal(false);
       expect(_inputNode.value).to.equal('');
     });
-
     it('hides overlay on [Enter]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1425,11 +1326,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
@@ -1437,13 +1335,17 @@ describe('lion-combobox', () => {
 
       // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
       // because this closely mimics what happens in the browser
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       expect(el.opened).to.equal(false);
       expect(_inputNode.value).to.equal('Artichoke');
     });
-
     it('hides overlay on [Tab]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1451,11 +1353,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
@@ -1463,13 +1362,17 @@ describe('lion-combobox', () => {
 
       // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
       // because this closely mimics what happens in the browser
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Tab',
+        }),
+      );
       expect(el.opened).to.equal(false);
       expect(_inputNode.value).to.equal('Artichoke');
     });
-
     it('keeps overlay open on [Shift]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1477,11 +1380,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
@@ -1489,13 +1389,17 @@ describe('lion-combobox', () => {
 
       // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
       // because this closely mimics what happens in the browser
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Shift',
+        }),
+      );
       expect(el.opened).to.equal(true);
       expect(_inputNode.value).to.equal('Artichoke');
     });
-
     it('clears checkedIndex on empty text', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1503,11 +1407,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
@@ -1515,15 +1416,17 @@ describe('lion-combobox', () => {
       expect(el.checkedIndex).to.equal(0);
 
       // await mimicUserTyping(el, '');
-      await sendKeys({ press: 'Backspace' });
+      await sendKeys({
+        press: 'Backspace',
+      });
       await el.updateComplete;
       el.opened = false;
       await el.updateComplete;
       expect(el.checkedIndex).to.equal(-1);
     });
-
     it('has the correct Overlay Config defined', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" .showAllOnEmpty="${true}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1531,15 +1434,12 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       // @ts-expect-error [allow-protected] in test
       const overlayCfg = el._defineOverlayConfig();
-
       const equalsOrContainsInput = (/** @type {HTMLInputElement|HTMLDivElement} */ invokerNode) =>
         // @ts-expect-error [allow-protected] in test
         invokerNode === el._inputNode || invokerNode.contains(el._inputNode);
-
       expect(overlayCfg.elementToFocusAfterHide).to.equal(undefined);
       // @ts-expect-error
       expect(equalsOrContainsInput(overlayCfg.invokerNode)).to.be.true;
@@ -1560,8 +1460,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
           <${tag} name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1569,13 +1469,10 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-        );
-
+        `);
         await mimicUserTyping(el, 'aaa');
         expect(el.opened).to.be.false;
       });
-
       it('allows to control overlay visibility via "_showOverlayCondition": should display overlay if currentValue length condition is fulfilled', async () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
@@ -1588,8 +1485,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
           <${tag} name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1597,13 +1494,10 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-        );
-
+        `);
         await mimicUserTyping(el, 'aaaa');
         expect(el.opened).to.be.true;
       });
-
       it('allows to control overlay visibility via "_showOverlayCondition": should not display overlay if currentValue length condition is not fulfilled after once fulfilled', async () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
@@ -1616,8 +1510,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
           <${tag} name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1625,21 +1519,18 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-        );
-
+        `);
         await mimicUserTyping(el, 'aaaa');
         expect(el.opened).to.be.true;
-
         await mimicUserTyping(el, 'aaa');
         await el.updateComplete;
         expect(el.opened).to.be.false;
       });
     });
-
     describe('Accessibility', () => {
       it('sets "aria-posinset" and "aria-setsize" on visible entries', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" multiple-choice>
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1647,16 +1538,13 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const options = el.formElements;
         expect(el.opened).to.equal(false);
-
         await mimicUserTyping(el, 'art');
         await el.updateComplete;
         expect(el.opened).to.equal(true);
-
-        const visibleOptions = options.filter(o => o.style.display !== 'none');
+        const visibleOptions = options.filter((o) => o.style.display !== 'none');
         expect(visibleOptions.length).to.not.equal(0);
         visibleOptions.forEach((o, i) => {
           expect(o.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
@@ -1665,11 +1553,11 @@ describe('lion-combobox', () => {
         /**
          * @param {{ style: { display: string; }; }} o
          */
-        const hiddenOptions = options.filter(o => o.style.display === 'none');
+        const hiddenOptions = options.filter((o) => o.style.display === 'none');
         /**
          * @param {{ hasAttribute: (arg0: string) => any; }} o
          */
-        hiddenOptions.forEach(o => {
+        hiddenOptions.forEach((o) => {
           expect(o.hasAttribute('aria-posinset')).to.equal(false);
           expect(o.hasAttribute('aria-setsize')).to.equal(false);
         });
@@ -1680,7 +1568,8 @@ describe('lion-combobox', () => {
        * (like fade in/out)
        */
       it('sets aria-hidden="true" on hidden entries', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1688,27 +1577,24 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const options = el.formElements;
         expect(el.opened).to.equal(false);
-
         await mimicUserTyping(el, 'art');
         expect(el.opened).to.equal(true);
         await el.updateComplete;
-
-        const visibleOptions = options.filter(o => o.style.display !== 'none');
-        visibleOptions.forEach(o => {
+        const visibleOptions = options.filter((o) => o.style.display !== 'none');
+        visibleOptions.forEach((o) => {
           expect(o.hasAttribute('aria-hidden')).to.be.false;
         });
-        const hiddenOptions = options.filter(o => o.style.display === 'none');
-        hiddenOptions.forEach(o => {
+        const hiddenOptions = options.filter((o) => o.style.display === 'none');
+        hiddenOptions.forEach((o) => {
           expect(o.getAttribute('aria-hidden')).to.equal('true');
         });
       });
-
       it('dropdown has a label', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" .validators=${[new Required()]}>
               <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1716,8 +1602,7 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _overlayCtrl } = getComboboxMembers(el);
         expect(_overlayCtrl.contentWrapperNode.getAttribute('aria-label')).to.equal(
           'Combobox options popup',
@@ -1731,67 +1616,59 @@ describe('lion-combobox', () => {
   describe('Invoker component integration', () => {
     describe('Accessibility', () => {
       it('sets role="combobox" on textbox wrapper/listbox sibling', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
               <lion-option .choiceValue="${'20'}">Item 2</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _comboboxNode } = getComboboxMembers(el);
-
         expect(_comboboxNode.getAttribute('role')).to.equal('combobox');
       });
-
       it('sets aria-expanded to element with role="combobox" in wai-aria 1.0 and 1.1', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" ._ariaVersion="${'1.0'}">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
               <lion-option .choiceValue="${'20'}">Item 2</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _comboboxNode } = getComboboxMembers(el);
-
         expect(_comboboxNode.getAttribute('aria-expanded')).to.equal('false');
         el.opened = true;
         await el.updateComplete;
         expect(_comboboxNode.getAttribute('aria-expanded')).to.equal('true');
-
-        const el2 = /** @type {LionCombobox} */ (
+        const el2 =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" ._ariaVersion="${'1.1'}">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
               <lion-option .choiceValue="${'20'}">Item 2</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _comboboxNode: comboboxNode2 } = getComboboxMembers(el2);
-
         expect(comboboxNode2.getAttribute('aria-expanded')).to.equal('false');
         el2.opened = true;
         await el2.updateComplete;
         expect(_comboboxNode.getAttribute('aria-expanded')).to.equal('true');
       });
-
       it('makes sure listbox node is not focusable', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
               <lion-option .choiceValue="${'20'}">Item 2</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _listboxNode } = getComboboxMembers(el);
-
         expect(_listboxNode.hasAttribute('tabindex')).to.be.false;
       });
     });
   });
-
   describe('Selection display', () => {
     class MySelectionDisplay extends LitElement {
       /**
@@ -1808,43 +1685,39 @@ describe('lion-combobox', () => {
       }
     }
     const selectionDisplayTag = unsafeStatic(defineCE(MySelectionDisplay));
-
     it('stores internal reference _selectionDisplayNode in LionCombobox', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
         <lion-combobox name="foo">
           <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
           <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
         </lion-combobox>
-      `)
-      );
+      `);
       const { _selectionDisplayNode } = getComboboxMembers(el);
-
       expect(_selectionDisplayNode).to.equal(el.querySelector('[slot=selection-display]'));
     });
-
     it('sets a reference to combobox element in _selectionDisplayNode', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
         <lion-combobox name="foo">
           <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
           <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
         </lion-combobox>
-      `)
-      );
+      `);
       // @ts-ignore allow protected members
       expect(el._selectionDisplayNode.comboboxElement).to.equal(el);
     });
-
     it('calls "onComboboxElementUpdated(changedProperties)" on "updated" in _selectionDisplayNode', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
         <lion-combobox name="foo">
           <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
           <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
         </lion-combobox>
-      `)
-      );
+      `);
       // @ts-ignore sinon type error
       const spy = sinon.spy(el._selectionDisplayNode, 'onComboboxElementUpdated');
       el.requestUpdate('modelValue', undefined);
@@ -1916,21 +1789,20 @@ describe('lion-combobox', () => {
       // });
     });
   });
-
   describe('Autocompletion', () => {
     it('has autocomplete "both" by default', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       expect(el.autocomplete).to.equal('both');
     });
-
     it('filters options when autocomplete is "both"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1938,15 +1810,14 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']);
     });
-
     it('completes textbox when autocomplete is "both"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1954,12 +1825,10 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       const { _inputNode } = getComboboxMembers(el);
-
       expect(_inputNode.value).to.equal('Chard');
       expect(_inputNode.selectionStart).to.equal(2);
       expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length);
@@ -1969,9 +1838,9 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('c');
       expect(_inputNode.selectionStart).to.equal(_inputNode.value.length);
     });
-
     it('filters options when autocomplete is "list"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="list">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1979,18 +1848,16 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']);
       expect(_inputNode.value).to.equal('ch');
     });
-
     it('does not filter options when autocomplete is "none"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -1998,8 +1865,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(getFilteredOptionValues(el)).to.eql([
@@ -2009,17 +1875,16 @@ describe('lion-combobox', () => {
         'Victoria Plum',
       ]);
     });
-
     it('does not autocomplete on [Enter] when textbox content does not match options', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
             <lion-option .choiceValue="${'Lemon'}">Lemon</lion-option>
             <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
       mimicUserTypingAdvanced(el, ['m', 'a', 'k']);
       await el.updateComplete;
@@ -2028,17 +1893,16 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(_inputNode.value).to.equal('Mak');
     });
-
     it('does not autocomplete on [Enter] when textbox content does not match options and content was cleared via [Backspace]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo">
             <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
             <lion-option .choiceValue="${'Lemon'}">Lemon</lion-option>
             <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
       mimicUserTypingAdvanced(el, ['m', 'o', 'Backspace', 'Backspace', 'm', 'o']);
       await el.updateComplete;
@@ -2050,9 +1914,9 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(_inputNode.value).to.equal('Mo');
     });
-
     it('does not filter options when autocomplete is "inline"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2060,8 +1924,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(getFilteredOptionValues(el)).to.eql([
@@ -2071,9 +1934,9 @@ describe('lion-combobox', () => {
         'Victoria Plum',
       ]);
     });
-
     it('resets "checkedIndex" when going from matched to unmatched textbox value', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2081,19 +1944,17 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(el.checkedIndex).to.equal(1);
-
       await mimicUserTyping(el, 'cho');
       await el.updateComplete;
       expect(el.checkedIndex).to.equal(-1);
 
       // Works for autocomplete 'both' as well.
-      const el2 = /** @type {LionCombobox} */ (
+      const el2 =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2101,9 +1962,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await mimicUserTyping(el2, 'ch');
       await el2.updateComplete;
       expect(el2.checkedIndex).to.equal(1);
@@ -2113,9 +1972,9 @@ describe('lion-combobox', () => {
       await el2.updateComplete;
       expect(el2.checkedIndex).to.equal(-1);
     });
-
     it('resets "checkedIndex" when going from matched to another matched textbox value', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2123,19 +1982,17 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
 
       /** Goes from 2nd option Chard to 3rd option Chicory */
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(el.checkedIndex).to.equal(1);
-
       await mimicUserTyping(el, 'chi');
       await el.updateComplete;
       expect(el.checkedIndex).to.equal(2);
-
-      const el2 = /** @type {LionCombobox} */ (
+      const el2 =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2143,9 +2000,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await mimicUserTyping(el2, 'ch');
       await el2.updateComplete;
       expect(el2.checkedIndex).to.equal(1);
@@ -2158,9 +2013,9 @@ describe('lion-combobox', () => {
       expect(el2.checkedIndex).to.equal(-1);
       expect(getFilteredOptionValues(el2)).to.eql(['Artichoke']);
     });
-
     it('sets "checkedIndex" only if the match, matches from the beginning of the word', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="both">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2168,8 +2023,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             <lion-option .choiceValue="${'Daikon'}">Daikon</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
 
       // first match is Char'd', but better match is 'D'aikon
       await mimicUserTyping(el, 'd');
@@ -2177,9 +2031,9 @@ describe('lion-combobox', () => {
       expect(el.checkedIndex).to.equal(3);
       expect(getFilteredOptionValues(el)).to.eql(['Chard', 'Daikon']);
     });
-
     it('completes chars inside textbox', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2187,16 +2041,13 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(_inputNode.value).to.equal('Chard');
       expect(_inputNode.selectionStart).to.equal('ch'.length);
       expect(_inputNode.selectionEnd).to.equal('Chard'.length);
-
       await mimicUserTypingAdvanced(el, ['i', 'c']);
       await el.updateComplete;
       expect(_inputNode.value).to.equal('Chicory');
@@ -2210,9 +2061,9 @@ describe('lion-combobox', () => {
       expect(_inputNode.selectionStart).to.equal('ch'.length);
       expect(_inputNode.selectionEnd).to.equal('ch'.length);
     });
-
     it('synchronizes textbox on overlay close', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2220,8 +2071,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
       await el.updateComplete;
       expect(_inputNode.value).to.equal('');
@@ -2243,21 +2093,19 @@ describe('lion-combobox', () => {
         await el.updateComplete;
         expect(_inputNode.value).to.equal(valueOnClose, autocomplete);
       }
-
       await performChecks('none', 0, 'Artichoke');
       await performChecks('list', 0, 'Artichoke');
       await performChecks('inline', 0, 'Artichoke');
       await performChecks('both', 0, 'Artichoke');
-
       el.multipleChoice = true;
       await performChecks('none', [0, 1], '');
       await performChecks('list', [0, 1], '');
       await performChecks('inline', [0, 1], '');
       await performChecks('both', [0, 1], '');
     });
-
     it('is possible to adjust textbox synchronize condition on overlay close', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none" ._syncToTextboxCondition="${() => false}">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2265,9 +2113,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
       expect(_inputNode.value).to.equal('');
 
@@ -2287,21 +2133,19 @@ describe('lion-combobox', () => {
         await el.updateComplete;
         expect(_inputNode.value).to.equal(valueOnClose);
       }
-
       await performChecks('none', 0, '');
       await performChecks('list', 0, '');
       await performChecks('inline', 0, '');
       await performChecks('both', 0, '');
-
       el.multipleChoice = true;
       await performChecks('none', [0, 1], '');
       await performChecks('list', [0, 1], '');
       await performChecks('inline', [0, 1], '');
       await performChecks('both', [0, 1], '');
     });
-
     it('does inline autocompletion when adding chars', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2309,27 +2153,23 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await mimicUserTyping(el, 'ch'); // ch
       await el.updateComplete; // Ch[ard]
       expect(el.activeIndex).to.equal(1);
       expect(el.checkedIndex).to.equal(1);
-
       await mimicUserTypingAdvanced(el, ['i', 'c']); // Chic
       await el.updateComplete; // Chic[ory]
       expect(el.activeIndex).to.equal(2);
       expect(el.checkedIndex).to.equal(2);
-
       await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace', 'Backspace', 'Backspace', 'h']); // Ch
       await el.updateComplete; // Ch[ard]
       expect(el.activeIndex).to.equal(1);
       expect(el.checkedIndex).to.equal(1);
     });
-
     it('does inline autocompletion when changing the word', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2337,14 +2177,11 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(el.activeIndex).to.equal(1);
       expect(el.checkedIndex).to.equal(1);
-
       await mimicUserTypingAdvanced(el, ['i']);
       await el.updateComplete;
       expect(el.activeIndex).to.equal(2);
@@ -2356,9 +2193,9 @@ describe('lion-combobox', () => {
       expect(el.activeIndex).to.equal(0);
       expect(el.checkedIndex).to.equal(0);
     });
-
     it('filters options correctly when changing the middle of the word', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="list" match-mode="all">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2366,17 +2203,13 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'char');
       expect(_inputNode.value).to.equal('char');
       await el.updateComplete; // Char
 
       expect(getFilteredOptionValues(el)).to.eql(['Chard']);
-
       _inputNode.setSelectionRange(3, 3);
       await mimicUserTypingAdvanced(el, ['Backspace', 'i', 'c', 'o']);
       await el.updateComplete; // Chicor
@@ -2384,9 +2217,9 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('chicor');
       expect(getFilteredOptionValues(el)).to.eql(['Chicory']);
     });
-
     it('computation of "user intends autofill" works correctly afer autofill', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="inline">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2394,10 +2227,8 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
       expect(_inputNode.value).to.equal('Chard');
@@ -2412,42 +2243,35 @@ describe('lion-combobox', () => {
       expect(_inputNode.selectionStart).to.equal('Ch'.length);
       expect(_inputNode.selectionEnd).to.equal('Ch'.length);
     });
-
     describe('Server side completion support', () => {
       const listboxData = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];
-
       class MyEl extends LitElement {
         constructor() {
           super();
           /** @type {string[]} */
           this.options = [...listboxData];
         }
-
         clearOptions() {
           /** @type {string[]} */
           this.options = [];
           this.requestUpdate();
         }
-
         addOption() {
           this.options.push(`option ${this.options.length + 1}`);
           this.requestUpdate();
         }
-
         fillAllOptions() {
           this.options = [...listboxData];
           this.requestUpdate();
         }
-
         get combobox() {
-          return /** @type {LionCombobox} */ (this.shadowRoot?.querySelector('#combobox'));
+          return /** @type {LionCombobox} */ this.shadowRoot?.querySelector('#combobox');
         }
-
         render() {
           return html`
             <lion-combobox id="combobox" label="Server side completion">
               ${this.options.map(
-                option => html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
+                (option) => html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
               )}
             </lion-combobox>
           `;
@@ -2455,9 +2279,8 @@ describe('lion-combobox', () => {
       }
       const tagName = defineCE(MyEl);
       const wrappingTag = unsafeStatic(tagName);
-
       it('calls "_handleAutocompletion" after externally changing options', async () => {
-        const el = /** @type {MyEl} */ (await fixture(html`<${wrappingTag}></${wrappingTag}>`));
+        const el = /** @type {MyEl} */ await fixture(html`<${wrappingTag}></${wrappingTag}>`);
         await el.combobox.registrationComplete;
         // @ts-ignore [allow-protected] in test
         const spy = sinon.spy(el.combobox, '_handleAutocompletion');
@@ -2470,10 +2293,9 @@ describe('lion-combobox', () => {
         await el.updateComplete;
         expect(spy).to.have.been.calledTwice;
       });
-
       it('should handle dynamic options', async () => {
         // Arrange
-        const el = /** @type {MyEl} */ (await fixture(html`<${wrappingTag}></${wrappingTag}>`));
+        const el = /** @type {MyEl} */ await fixture(html`<${wrappingTag}></${wrappingTag}>`);
         await el.combobox.registrationComplete;
         const { _inputNode } = getComboboxMembers(el.combobox);
 
@@ -2515,7 +2337,6 @@ describe('lion-combobox', () => {
         expect(_inputNode.selectionStart).to.equal(_inputNode.value.length);
       });
     });
-
     describe('Subclassers', () => {
       it('allows to configure autoselect', async () => {
         class X extends LionCombobox {
@@ -2525,8 +2346,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(X);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
           <${tag} name="foo" opened>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2534,17 +2355,15 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-        );
-
+        `);
         await mimicUserTypingAdvanced(el, ['v', 'i']); // so we have options ['Victoria Plum']
         await el.updateComplete;
         expect(el.checkedIndex).to.equal(3);
       });
     });
-
     it('highlights first occurrence of matching option', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2552,12 +2371,9 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const options = el.formElements;
-
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
-
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'c');
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
       expect(options[1]).lightDom.to.equal(`<span aria-label="Chard"><b>C</b>hard</span>`);
@@ -2565,26 +2381,22 @@ describe('lion-combobox', () => {
       expect(options[3]).lightDom.to.equal(
         `<span aria-label="Victoria Plum">Vi<b>c</b>toria Plum</span>`,
       );
-
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
-
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>ch</b>oke</span>`);
       expect(options[1]).lightDom.to.equal(`<span aria-label="Chard"><b>Ch</b>ard</span>`);
       expect(options[2]).lightDom.to.equal(`<span aria-label="Chicory"><b>Ch</b>icory</span>`);
       expect(options[3]).lightDom.to.equal(`Victoria Plum`);
-
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'D');
-
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'D');
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(`Artichoke`);
       expect(options[1]).lightDom.to.equal(`<span aria-label="Chard">Char<b>d</b></span>`);
       expect(options[2]).lightDom.to.equal(`Chicory`);
       expect(options[3]).lightDom.to.equal(`Victoria Plum`);
     });
-
     it('highlights matching complex options', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
             <lion-option .choiceValue="${'Artichoke'}">
@@ -2604,12 +2416,9 @@ describe('lion-combobox', () => {
               <small>Prunus domestica</small>
             </lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const options = el.formElements;
-
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
-
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(
         `<span aria-label=" Artichoke Cardoon "><div>Arti<b>ch</b>oke</div><small>Cardoon</small>`,
@@ -2624,9 +2433,9 @@ describe('lion-combobox', () => {
         `<div>Victoria Plum</div><small>Prunus domestica</small>`,
       );
     });
-
     it('resets removes highlights on reset()', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2634,21 +2443,18 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const options = el.formElements;
-
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
-
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'c');
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
       el.reset();
       await el.updateComplete;
       expect(options[0]).lightDom.to.equal(`Artichoke`);
     });
-
     it('synchronizes textbox when autocomplete is "inline" or "both"', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2656,38 +2462,32 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       expect(_inputNode.value).to.equal('');
-
       el.setCheckedIndex(-1);
       el.autocomplete = 'list';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('art');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'none';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('art');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'inline';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'both';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
     });
-
     it('synchronizes last index to textbox when autocomplete is "inline" or "both" when multipleChoice', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" autocomplete="none" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2695,37 +2495,30 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       expect(_inputNode.value).to.eql('');
-
       el.setCheckedIndex(-1);
       el.setCheckedIndex(-1);
       el.autocomplete = 'list';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('art');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'none';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('art');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'inline';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-
       el.setCheckedIndex(-1);
       el.value = '';
       el.autocomplete = 'both';
       await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
     });
-
     describe('Subclassers', () => {
       it('allows to override "_syncCheckedWithTextboxMultiple"', async () => {
         class X extends LionCombobox {
@@ -2747,8 +2540,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(X);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
           <${tag} name="foo" autocomplete="none" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -2756,31 +2549,25 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </${tag}>
-        `)
-        );
+        `);
         const { _inputNode } = getComboboxMembers(el);
-
         el.setCheckedIndex(-1);
         el.autocomplete = 'none';
         el.setCheckedIndex([0]);
         expect(_inputNode.value).to.equal('Artichoke--multi');
-
         el.setCheckedIndex(-1);
         el.autocomplete = 'list';
         el.setCheckedIndex([0]);
         expect(_inputNode.value).to.equal('Artichoke--multi');
-
         el.setCheckedIndex(-1);
         el.autocomplete = 'inline';
         el.setCheckedIndex([0]);
         expect(_inputNode.value).to.equal('Artichoke--multi');
-
         el.setCheckedIndex(-1);
         el.autocomplete = 'both';
         el.setCheckedIndex([0]);
         expect(_inputNode.value).to.equal('Artichoke--multi');
       });
-
       describe('Override _getTextboxValueFromOption', () => {
         it('allows to override "_getTextboxValueFromOption" and sync to textbox when multiple', async () => {
           class X extends LionCombobox {
@@ -2797,8 +2584,8 @@ describe('lion-combobox', () => {
           }
           const tagName = defineCE(X);
           const tag = unsafeStatic(tagName);
-
-          const el = /** @type {LionCombobox} */ (
+          const el =
+            /** @type {LionCombobox} */
             await fixture(html`
             <${tag} name="foo" autocomplete="both" multiple-choice>
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
@@ -2814,8 +2601,7 @@ describe('lion-combobox', () => {
                 value: 'Victoria Plum',
               }}">Victoria Plum</lion-option>
             </${tag}>
-          `)
-          );
+          `);
           const { _inputNode } = getComboboxMembers(el);
           el.setCheckedIndex(-1);
 
@@ -2831,7 +2617,6 @@ describe('lion-combobox', () => {
           // Assert
           expect(_inputNode.value).to.equal('Victoria Plum as label');
         });
-
         it('allows to override "_getTextboxValueFromOption" and sync modelValue with textbox', async () => {
           class X extends LionCombobox {
             /**
@@ -2850,8 +2635,8 @@ describe('lion-combobox', () => {
           }
           const tagName = defineCE(X);
           const tag = unsafeStatic(tagName);
-
-          const el = /** @type {LionCombobox} */ (
+          const el =
+            /** @type {LionCombobox} */
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
@@ -2867,21 +2652,21 @@ describe('lion-combobox', () => {
                 value: 'Victoria Plum',
               }}">Victoria Plum</lion-option>
             </${tag}>
-          `)
-          );
+          `);
           const { _inputNode } = getComboboxMembers(el);
 
           // Assume
           expect(_inputNode.value).to.equal('Chard as label');
 
           // Act
-          el.modelValue = { value: 'Chicory' };
+          el.modelValue = {
+            value: 'Chicory',
+          };
           await el.updateComplete;
 
           // Assert
           expect(_inputNode.value).to.equal('Chicory as label');
         });
-
         it('allows to override "_getTextboxValueFromOption" and clears modelValue and textbox value on clear()', async () => {
           class X extends LionCombobox {
             /**
@@ -2900,10 +2685,12 @@ describe('lion-combobox', () => {
           }
           const tagName = defineCE(X);
           const tag = unsafeStatic(tagName);
-
-          const el = /** @type {LionCombobox} */ (
+          const el =
+            /** @type {LionCombobox} */
             await fixture(html`
-            <${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}">
+            <${tag} name="foo" .modelValue="${{
+              value: 'Artichoke',
+            }}">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
                 value: 'Artichoke',
               }}">Artichoke</lion-option>
@@ -2917,8 +2704,7 @@ describe('lion-combobox', () => {
                 value: 'Victoria Plum',
               }}">Victoria Plum</lion-option>
             </${tag}>
-          `)
-          );
+          `);
           const { _inputNode } = getComboboxMembers(el);
 
           // Assume
@@ -2931,7 +2717,6 @@ describe('lion-combobox', () => {
           expect(el.modelValue).to.equal('');
           expect(_inputNode.value).to.equal('');
         });
-
         it('allows to override "_getTextboxValueFromOption" and syncs textbox to modelValue', async () => {
           class X extends LionCombobox {
             /**
@@ -2947,8 +2732,8 @@ describe('lion-combobox', () => {
           }
           const tagName = defineCE(X);
           const tag = unsafeStatic(tagName);
-
-          const el = /** @type {LionCombobox} */ (
+          const el =
+            /** @type {LionCombobox} */
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
@@ -2964,31 +2749,25 @@ describe('lion-combobox', () => {
                 value: 'Victoria Plum',
               }}">Victoria Plum</lion-option>
             </${tag}>
-          `)
-          );
+          `);
           const { _inputNode } = getComboboxMembers(el);
 
           /** @param {string} autocompleteMode */
           async function performChecks(autocompleteMode) {
             await el.updateComplete;
-
             await mimicUserTypingAdvanced(el, ['A', 'r', 't', 'i']);
             await el.updateComplete;
             expect(_inputNode.value).to.equal('Arti', `autocompleteMode is ${autocompleteMode}`);
-
             await el.updateComplete;
             expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
             _inputNode.value = '';
           }
-
           el.autocomplete = 'none';
           await performChecks('none');
-
           el.autocomplete = 'list';
           await performChecks('list');
         });
       });
-
       it('allows to override "_onFilterMatch" and "_onFilterUmatch"', async () => {
         class X extends LionCombobox {
           /**
@@ -2998,7 +2777,7 @@ describe('lion-combobox', () => {
            * @protected
            */
           _onFilterMatch(option, matchingString) {
-            Array.from(option.children).forEach(child => {
+            Array.from(option.children).forEach((child) => {
               if (child.hasAttribute('data-key')) {
                 this._highlightMatchedOption(child, matchingString);
               }
@@ -3016,7 +2795,7 @@ describe('lion-combobox', () => {
            */
           // eslint-disable-next-line no-unused-vars
           _onFilterUnmatch(option, curValue, prevValue) {
-            Array.from(option.children).forEach(child => {
+            Array.from(option.children).forEach((child) => {
               if (child.hasAttribute('data-key')) {
                 this._unhighlightMatchedOption(child);
               }
@@ -3027,8 +2806,8 @@ describe('lion-combobox', () => {
         }
         const tagName = defineCE(X);
         const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <${tag} name="foo" autocomplete="both">
               <lion-option .choiceValue="${'Artichoke'}">
@@ -3048,12 +2827,9 @@ describe('lion-combobox', () => {
                 <small>Prunus domestica</small>
               </lion-option>
             </${tag}>
-          `)
-        );
+          `);
         const options = el.formElements;
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
-
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         await el.updateComplete;
         expect(options[0]).lightDom.to.equal(
           `<div data-key><span aria-label="Artichoke">Arti<b>ch</b>oke</span></div><small>Cardoon</small>`,
@@ -3067,9 +2843,7 @@ describe('lion-combobox', () => {
         expect(options[3]).lightDom.to.equal(
           `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
         );
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'D');
-
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'D');
         await el.updateComplete;
         expect(options[0]).lightDom.to.equal(`<div data-key>Artichoke</div><small>Cardoon</small>`);
         expect(options[1]).lightDom.to.equal(
@@ -3081,10 +2855,10 @@ describe('lion-combobox', () => {
         );
       });
     });
-
     describe('Active index behavior', () => {
       it('sets the active index to the closest match on open by default', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3092,13 +2866,11 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+          `);
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         expect(el.activeIndex).to.equal(1);
       });
-
       it('changes whether activeIndex is set to the closest match automatically depending on autocomplete', async () => {
         /**
          * Automatic selection (setting activeIndex to closest matching option) in lion is set for
@@ -3106,7 +2878,8 @@ describe('lion-combobox', () => {
          * For 'list' & 'none' autocomplete, it is turned off and manual selection is required.
          * TODO: Make this configurable for list & none autocomplete?
          */
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" autocomplete="none">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3114,8 +2887,7 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _inputNode } = getComboboxMembers(el);
 
         /**
@@ -3138,12 +2910,10 @@ describe('lion-combobox', () => {
         // Example 1. List Autocomplete with Manual Selection:
         // does not set active at all until user selects
         await setup(el, 'none');
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         expect(el.activeIndex).to.equal(-1);
         expect(el.opened).to.be.true;
-
         mimicKeyPress(_inputNode, 'Enter');
         expect(el.opened).to.be.false;
         expect(el.activeIndex).to.equal(-1);
@@ -3152,12 +2922,10 @@ describe('lion-combobox', () => {
         // Example 2. List Autocomplete with Automatic Selection:
         // does not set active at all until user selects
         await setup(el, 'list');
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         expect(el.opened).to.be.true;
         expect(el.activeIndex).to.equal(-1);
-
         mimicKeyPress(_inputNode, 'Enter');
         expect(el.activeIndex).to.equal(-1);
         expect(el.opened).to.be.false;
@@ -3165,37 +2933,33 @@ describe('lion-combobox', () => {
         // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
         // Example 3. List with Inline Autocomplete (mostly, but with aria-autocomplete="inline")
         await setup(el, 'inline');
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, '');
         await el.updateComplete;
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         await el.updateComplete;
         expect(el.opened).to.be.true;
-
         expect(el.activeIndex).to.equal(1);
-
         mimicKeyPress(_inputNode, 'Enter');
         await el.updateComplete;
         await el.updateComplete;
-
         expect(el.activeIndex).to.equal(-1);
         expect(el.opened).to.be.false;
 
         // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
         // Example 3. List with Inline Autocomplete
         await setup(el, 'both');
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, '');
         await el.updateComplete;
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         mimicKeyPress(_inputNode, 'Enter');
         expect(el.activeIndex).to.equal(1);
         expect(el.opened).to.be.false;
       });
-
       it('sets the active index to the closest match on autocomplete', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" autocomplete="both">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3203,37 +2967,32 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _inputNode } = getComboboxMembers(el);
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         expect(el.activeIndex).to.equal(1);
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         await el.updateComplete;
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'chi');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'chi');
         // Chard no longer matches, so should switch active to Chicory
         await el.updateComplete;
-
         expect(el.activeIndex).to.equal(2);
 
         // select artichoke
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'artichoke');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'artichoke');
         await el.updateComplete;
         mimicKeyPress(_inputNode, 'Enter');
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, '');
         await el.updateComplete;
         // change selection, active index should update to closest match
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'vic');
         await el.updateComplete;
         expect(el.activeIndex).to.equal(3);
       });
-
       it('supports clearing by [Escape] key and resets active state on all options', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3241,56 +3000,56 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _inputNode } = getComboboxMembers(el);
 
         // Select something
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
         await el.updateComplete;
         mimicKeyPress(_inputNode, 'Enter');
         expect(el.activeIndex).to.equal(1);
-
         mimicKeyPress(_inputNode, 'Escape');
         await el.updateComplete;
         expect(_inputNode.textContent).to.equal('');
-
-        el.formElements.forEach(option => expect(option.active).to.be.false);
+        el.formElements.forEach((option) => expect(option.active).to.be.false);
 
         // change selection, active index should update to closest match
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'vic');
         await el.updateComplete;
         expect(el.activeIndex).to.equal(3);
       });
     });
-
     describe('Accessibility', () => {
       it('synchronizes autocomplete option to textbox', async () => {
         let el;
-        [el] = await fruitFixture({ autocomplete: 'both' });
+        [el] = await fruitFixture({
+          autocomplete: 'both',
+        });
         expect(
-          getComboboxMembers(/** @type {LionCombobox} */ (el))._inputNode.getAttribute(
+          getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
             'aria-autocomplete',
           ),
         ).to.equal('both');
-
-        [el] = await fruitFixture({ autocomplete: 'list' });
+        [el] = await fruitFixture({
+          autocomplete: 'list',
+        });
         expect(
-          getComboboxMembers(/** @type {LionCombobox} */ (el))._inputNode.getAttribute(
+          getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
             'aria-autocomplete',
           ),
         ).to.equal('list');
-
-        [el] = await fruitFixture({ autocomplete: 'none' });
+        [el] = await fruitFixture({
+          autocomplete: 'none',
+        });
         expect(
-          getComboboxMembers(/** @type {LionCombobox} */ (el))._inputNode.getAttribute(
+          getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
             'aria-autocomplete',
           ),
         ).to.equal('none');
       });
-
       it('updates aria-activedescendant on textbox node', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" autocomplete="none">
               <lion-option .choiceValue="${'Artichoke'}" id="artichoke-option"
@@ -3300,17 +3059,13 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-
+          `);
         const elProts = getComboboxMembers(el);
-
         expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
           null,
         );
         expect(el.formElements[1].active).to.equal(false);
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         await el.updateComplete;
         expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
           null,
@@ -3321,8 +3076,8 @@ describe('lion-combobox', () => {
           'artichoke-option',
         );
         expect(el.formElements[1].active).to.equal(false);
-
-        const el2 = /** @type {LionCombobox} */ (
+        const el2 =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" autocomplete="both" match-mode="begin">
               <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3330,39 +3085,37 @@ describe('lion-combobox', () => {
               <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
               <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
             </lion-combobox>
-          `)
-        );
-
+          `);
         const el2Prots = getComboboxMembers(el2);
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el2), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el2, 'ch');
         await el2.updateComplete;
         expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
           el2.formElements[1].id,
         );
         expect(el2.formElements[1].active).to.equal(true);
-
         el2.autocomplete = 'list';
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         await el2.updateComplete;
         expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
           el2.formElements[1].id,
         );
         expect(el2.formElements[1].active).to.equal(true);
       });
-
       it('adds aria-label to highlighted options', async () => {
-        const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
+        const [el, options] = await fruitFixture({
+          autocomplete: 'both',
+          matchMode: 'all',
+        });
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'choke');
         await el.updateComplete;
         // @ts-ignore [dynamic-key-access-in-test]
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');
       });
-
       it('adds aria-label to highlighted complex options', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" match-mode="all">
               <lion-option .choiceValue="${'Artichoke'}">
@@ -3370,11 +3123,9 @@ describe('lion-combobox', () => {
                 <small>Cardoon</small>
               </lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const options = el.formElements;
-
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'choke');
         await el.updateComplete;
         const labelledElement = options[0].querySelector('span[aria-label=" Artichoke Cardoon "]');
         expect(labelledElement).to.not.be.null;
@@ -3382,60 +3133,51 @@ describe('lion-combobox', () => {
       });
     });
   });
-
   describe('Accessibility', () => {
     describe('Aria versions', () => {
       it('[role=combobox] wraps input node in v1.1', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" ._ariaVersion="${'1.1'}">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _comboboxNode, _inputNode } = getComboboxMembers(el);
-
         expect(_comboboxNode.contains(_inputNode)).to.be.true;
       });
-
       it('has one input node with [role=combobox] in v1.0', async () => {
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo" ._ariaVersion="${'1.0'}">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const { _comboboxNode, _inputNode } = getComboboxMembers(el);
-
         expect(_comboboxNode).to.equal(_inputNode);
       });
-
       it('autodetects aria version and sets it to 1.1 on Chromium browsers', async () => {
         const browserDetectionIsChromiumOriginal = browserDetection.isChromium;
-
         browserDetection.isChromium = true;
-        const el = /** @type {LionCombobox} */ (
+        const el =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const elProts = getComboboxMembers(el);
-
         expect(elProts._ariaVersion).to.equal('1.1');
-
         browserDetection.isChromium = false;
-        const el2 = /** @type {LionCombobox} */ (
+        const el2 =
+          /** @type {LionCombobox} */
           await fixture(html`
             <lion-combobox name="foo">
               <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
             </lion-combobox>
-          `)
-        );
+          `);
         const el2Prots = getComboboxMembers(el2);
-
         expect(el2Prots._ariaVersion).to.equal('1.0');
 
         // restore...
@@ -3443,11 +3185,11 @@ describe('lion-combobox', () => {
       });
     });
   });
-
   describe('Multiple Choice', () => {
     // TODO: possibly later share test with select-rich if it officially supports multipleChoice
     it('does not close listbox on click', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3455,21 +3197,19 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
 
       // activate opened listbox
       await mimicUserTyping(el, 'ch');
       await el.updateComplete;
-
       expect(el.opened).to.equal(true);
-      const visibleOptions = el.formElements.filter(o => o.style.display !== 'none');
+      const visibleOptions = el.formElements.filter((o) => o.style.display !== 'none');
       visibleOptions[0].click();
       expect(el.opened).to.equal(true);
     });
-
     it('does not close listbox on [Enter]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3477,23 +3217,24 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
 
       // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
       // because this closely mimics what happens in the browser
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       expect(el.opened).to.equal(true);
     });
-
     it('clears textbox after selection of a new item on [enter]', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3501,29 +3242,29 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
       const options = el.formElements;
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
-
       expect(el.opened).to.equal(true);
-      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      const visibleOptions = () => options.filter((o) => o.style.display !== 'none');
       expect(visibleOptions().length).to.equal(1);
 
       // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
       // because this closely mimics what happens in the browser
-      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      _inputNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       expect(el.opened).to.equal(true);
       expect(visibleOptions().length).to.equal(0);
       expect(_inputNode.value).to.equal('');
     });
-
     it('clears textbox after selection of a new item on click', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
@@ -3531,28 +3272,23 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
-        `)
-      );
-
+        `);
       const { _inputNode } = getComboboxMembers(el);
       const options = el.formElements;
-
       await mimicUserTyping(el, 'art');
       await el.updateComplete;
-
       expect(el.opened).to.equal(true);
-      const visibleOptions = () => options.filter(o => o.style.display !== 'none');
+      const visibleOptions = () => options.filter((o) => o.style.display !== 'none');
       expect(visibleOptions().length).to.equal(1);
-
       visibleOptions()[0].click();
       expect(el.opened).to.equal(true);
       expect(visibleOptions().length).to.equal(0);
       expect(_inputNode.value).to.equal('');
     });
-
     it('submits form on [Enter] when listbox is closed', async () => {
-      const submitSpy = sinon.spy(e => e.preventDefault());
-      const el = /** @type {HTMLFormElement}  */ (
+      const submitSpy = sinon.spy((e) => e.preventDefault());
+      const el =
+        /** @type {HTMLFormElement}  */
         await fixture(html`
           <form @submit=${submitSpy}>
             <lion-combobox name="foo" multiple-choice>
@@ -3563,9 +3299,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
             <button type="submit">submit</button>
           </form>
-        `)
-      );
-      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+        `);
+      const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
       const { _inputNode } = getComboboxMembers(combobox);
       await combobox.updateComplete;
       _inputNode.focus();
@@ -3574,10 +3309,10 @@ describe('lion-combobox', () => {
       });
       expect(submitSpy.callCount).to.equal(1);
     });
-
     it('does not submit form on [Enter] when listbox is opened', async () => {
-      const submitSpy = sinon.spy(e => e.preventDefault());
-      const el = /** @type {HTMLFormElement}  */ (
+      const submitSpy = sinon.spy((e) => e.preventDefault());
+      const el =
+        /** @type {HTMLFormElement}  */
         await fixture(html`
           <form @submit=${submitSpy}>
             <lion-combobox name="foo" multiple-choice>
@@ -3588,9 +3323,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
             <button type="submit">submit</button>
           </form>
-        `)
-      );
-      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+        `);
+      const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
       const { _inputNode } = getComboboxMembers(combobox);
       combobox.opened = true;
       await combobox.updateComplete;
@@ -3601,35 +3335,30 @@ describe('lion-combobox', () => {
       expect(submitSpy.callCount).to.equal(0);
     });
   });
-
   describe('Match Mode', () => {
     it('has a default value of "all"', async () => {
       const [el] = await fruitFixture();
       expect(el.matchMode).to.equal('all');
     });
-
     it('will suggest partial matches (in the middle of the word) when set to "all"', async () => {
       const [el] = await fruitFixture();
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'c');
       await el.updateComplete;
-      expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([
+      expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql([
         'Artichoke',
         'Chard',
         'Chicory',
         'Victoria Plum',
       ]);
     });
-
     it('will only suggest beginning matches when set to "begin"', async () => {
-      const [el] = await fruitFixture({ matchMode: 'begin' });
-      await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+      const [el] = await fruitFixture({
+        matchMode: 'begin',
+      });
+      await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
       await el.updateComplete;
-      expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([
-        'Chard',
-        'Chicory',
-      ]);
+      expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql(['Chard', 'Chicory']);
     });
-
     describe('Subclassers', () => {
       it('allows for custom matching functions', async () => {
         const [el] = await fruitFixture();
@@ -3641,65 +3370,71 @@ describe('lion-combobox', () => {
           return option.value === curValue;
         }
         el.matchCondition = onlyExactMatches;
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicory');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'Chicory');
         await el.updateComplete;
-        expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql(['Chicory']);
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicor');
+        expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql(['Chicory']);
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'Chicor');
         await el.updateComplete;
-        expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([]);
+        expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql([]);
       });
     });
   });
-
   describe('Disabled state', () => {
     it('does not open overlay or allow input when disabled', async () => {
-      const [el] = await fruitFixture({ disabled: true });
+      const [el] = await fruitFixture({
+        disabled: true,
+      });
       expect(el.disabled).to.equal(true);
-
-      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
-
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
       expect(el.disabled).to.be.true;
       expect(_inputNode.disabled).to.be.true;
 
       // Try to open overlay by clicking input
-      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.false;
     });
-
     it('does open overlay or allow input when disabled state is removed after it was previously disabled', async () => {
-      const [el] = await fruitFixture({ disabled: true });
+      const [el] = await fruitFixture({
+        disabled: true,
+      });
       expect(el.disabled).to.equal(true);
-
-      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
-
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
       expect(el.disabled).to.be.true;
       expect(_inputNode.disabled).to.be.true;
 
       // Try to open overlay by clicking input
-      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.false;
-
       el.disabled = false;
       await el.updateComplete;
-
       expect(el.disabled).to.be.false;
       expect(_inputNode.disabled).to.be.false;
 
       // Try to open overlay by clicking input
       async function open() {
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         return el.updateComplete;
       }
-
       await open();
       expect(el.opened).to.be.true;
     });
-
     it('sets aria-disabled and disables focus when combobox is disabled', async () => {
-      const [el] = await fruitFixture({ disabled: true });
-      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+      const [el] = await fruitFixture({
+        disabled: true,
+      });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
 
       // input should not be focusable
       expect(_comboboxNode.tabIndex).to.equal(-1);
@@ -3710,13 +3445,13 @@ describe('lion-combobox', () => {
 
       // aria-disabled should be set
       expect(_inputNode.getAttribute('aria-disabled')).to.equal('true');
-
       await expect(el).to.be.accessible();
     });
-
     it('ensure focus when combobox is readonly', async () => {
-      const [el] = await fruitFixture({ readonly: true });
-      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+      const [el] = await fruitFixture({
+        readonly: true,
+      });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
 
       // input should be focusable
       expect(_inputNode.tabIndex).to.equal(0);
@@ -3726,61 +3461,65 @@ describe('lion-combobox', () => {
 
       // aria-disabled should be set
       expect(_inputNode.getAttribute('aria-readonly')).to.equal('true');
-
       await expect(el).to.be.accessible();
     });
   });
-
   describe('Readonly state', () => {
     it('does not open overlay or allow input when readonly', async () => {
-      const [el] = await fruitFixture({ readonly: true });
-
-      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+      const [el] = await fruitFixture({
+        readonly: true,
+      });
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
       expect(el.readOnly).to.equal(true);
-
       expect(el.readOnly).to.be.true;
       expect(_inputNode.readOnly).to.be.true;
 
       // Try to open overlay by clicking input
-      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.false;
     });
-
     it('does open overlay or allow input when readonly state is removed after it was previously set', async () => {
-      const [el] = await fruitFixture({ readonly: true });
+      const [el] = await fruitFixture({
+        readonly: true,
+      });
       expect(el.readOnly).to.equal(true);
-
-      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
-
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ el);
       expect(el.readOnly).to.be.true;
       expect(_inputNode.readOnly).to.be.true;
 
       // Try to open overlay by clicking input
-      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.false;
-
       el.readOnly = false;
       await el.updateComplete;
-
       expect(el.readOnly).to.be.false;
       expect(_inputNode.readOnly).to.be.false;
 
       // Try to open overlay by clicking input
       async function open() {
-        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
         return el.updateComplete;
       }
-
       await open();
       expect(el.opened).to.be.true;
     });
   });
-
   describe('Special Characters in Search', () => {
     it('correctly escapes all regex special characters in search queries', async () => {
-      const el = /** @type {LionCombobox} */ (
+      const el =
+        /** @type {LionCombobox} */
         await fixture(html`
           <lion-combobox label="Search" name="foo">
             <lion-option .choiceValue="${'test.com'}">test.com</lion-option>
@@ -3802,8 +3541,7 @@ describe('lion-combobox', () => {
             <lion-option .choiceValue="${'funcXargX'}">funcXargX</lion-option>
             <lion-option .choiceValue="${'arrayX0X'}">arrayX0X</lion-option>
           </lion-combobox>
-        `)
-      );
+        `);
 
       // Test dot - should not act as wildcard
       await mimicUserTyping(el, 'test.com');