@lion/ui 0.23.0 → 0.25.0

package/components/select-rich/test/lion-select-rich.test.js

@@ -20,7 +20,6 @@ import {
   waitUntil,
 } from '@open-wc/testing';
 import { cache } from 'lit/directives/cache.js';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -30,30 +29,24 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */ _fixture;
 describe('lion-select-rich', () => {
   it('clicking the label should focus the invoker', async () => {
     const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
     expect(isActiveElement(document.body)).to.be.true;
-
     const { _labelNode, _invokerNode } = getSelectRichMembers(el);
     _labelNode.click();
     expect(isActiveElement(_invokerNode)).to.be.true;
   });
-
   it('has an attribute focused when focused', async () => {
     const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
-
     el.focus();
     await el.updateComplete;
     expect(el.hasAttribute('focused')).to.be.true;
-
     el.blur();
     await el.updateComplete;
     expect(el.hasAttribute('focused')).to.be.false;
   });
-
   it('checks the first enabled option', async () => {
     const el = await fixture(html`
       <lion-select-rich>
@@ -65,7 +58,6 @@ describe('lion-select-rich', () => {
     expect(el.activeIndex).to.equal(0);
     expect(el.checkedIndex).to.equal(0);
   });
-
   it('still has a checked value while disabled', async () => {
     const el = await fixture(html`
       <lion-select-rich disabled>
@@ -74,10 +66,8 @@ describe('lion-select-rich', () => {
         <lion-option .choiceValue=${'Blue'}>Blue</lion-option>
       </lion-select-rich>
     `);
-
     expect(el.modelValue).to.equal('Red');
   });
-
   it('supports having no default selection initially', async () => {
     const el = await fixture(html`
       <lion-select-rich id="color" name="color" label="Favorite color" has-no-default-selected>
@@ -90,16 +80,13 @@ describe('lion-select-rich', () => {
     expect(_invokerNode.selectedElement).to.be.undefined;
     expect(el.modelValue).to.equal('');
   });
-
   describe('Invoker', () => {
     it('generates an lion-select-invoker if no invoker is provided', async () => {
       const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
       const { _invokerNode } = getSelectRichMembers(el);
-
       expect(_invokerNode).to.exist;
       expect(_invokerNode).to.be.instanceOf(LionSelectInvoker);
     });
-
     it('sets the first option as the selectedElement if no option is checked', async () => {
       const el = await fixture(html`
         <lion-select-rich name="foo">
@@ -111,7 +98,6 @@ describe('lion-select-rich', () => {
       const options = el.formElements;
       expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
     });
-
     it('syncs the selected element to the invoker', async () => {
       const el = await fixture(html`
         <lion-select-rich name="foo">
@@ -122,12 +108,10 @@ describe('lion-select-rich', () => {
       const { _invokerNode } = getSelectRichMembers(el);
       const options = el.querySelectorAll('lion-option');
       expect(_invokerNode.selectedElement).dom.to.equal(options[1]);
-
       el.checkedIndex = 0;
       await el.updateComplete;
       expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
     });
-
     it('delegates readonly to the invoker', async () => {
       const el = await fixture(html`
         <lion-select-rich readonly>
@@ -139,7 +123,6 @@ describe('lion-select-rich', () => {
       expect(el.hasAttribute('readonly')).to.be.true;
       expect(_invokerNode.hasAttribute('readonly')).to.be.true;
     });
-
     it('delegates singleOption to the invoker', async () => {
       const el = await fixture(html`
         <lion-select-rich>
@@ -150,7 +133,6 @@ describe('lion-select-rich', () => {
       expect(el.singleOption).to.be.true;
       expect(_invokerNode.hasAttribute('single-option')).to.be.true;
     });
-
     it('sets and removes the button role and aria attributes on change of singleOption', async () => {
       const el = await fixture(html`
         <lion-select-rich>
@@ -159,56 +141,50 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _invokerNode } = getSelectRichMembers(el);
-
       expect(_invokerNode.hasAttribute('role')).to.be.true;
       expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
       expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
-
       el.singleOption = true;
       await el.updateComplete;
       expect(_invokerNode.hasAttribute('role')).to.be.false;
       expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.false;
       expect(_invokerNode.hasAttribute('aria-expanded')).to.be.false;
-
       el.singleOption = false;
       await el.updateComplete;
       expect(_invokerNode.hasAttribute('role')).to.be.true;
       expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
       expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
     });
-
     it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
       const tagString = defineCE(
         class LionCustomOption extends LionOption {
           render() {
             return html`${this.modelValue.value}`;
           }
-
           createRenderRoot() {
             return this;
           }
         },
       );
       const tag = unsafeStatic(tagString);
-      const firstOption = /** @type {LionOption} */ (
-        await _fixture(html`<${tag} checked .choiceValue=${10}></${tag}>`)
-      );
-
+      const firstOption =
+        /** @type {LionOption} */
+        await _fixture(html`<${tag} checked .choiceValue=${10}></${tag}>`);
       const el = await fixture(html`
         <lion-select-rich>
           ${firstOption}
           <${tag} .choiceValue=${20}></${tag}>
         </lion-select-rich>
       `);
-
       const { _invokerNode } = getSelectRichMembers(el);
-
-      const firstChild = /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ (_invokerNode.shadowRoot).firstElementChild
-      );
+      const firstChild =
+        /** @type {HTMLElement} */
+        /** @type {ShadowRoot} */ _invokerNode.shadowRoot.firstElementChild;
       expect(firstChild.textContent).to.equal('10');
-
-      firstOption.modelValue = { value: 30, checked: true };
+      firstOption.modelValue = {
+        value: 30,
+        checked: true,
+      };
       await el.updateComplete;
       expect(firstChild.textContent).to.equal('30');
     });
@@ -225,72 +201,55 @@ describe('lion-select-rich', () => {
       const options = el.formElements;
       await el.updateComplete;
       const { _invokerNode, _inputNode } = getSelectRichMembers(el);
-
       expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
-
-      const newOption = /** @type {LionOption} */ (document.createElement('lion-option'));
+      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
       newOption.choiceValue = 30;
       newOption.textContent = '30 with longer label';
-
       _inputNode.appendChild(newOption);
       await el.updateComplete;
       expect(_invokerNode.clientWidth).to.equal(options[2].clientWidth);
-
       _inputNode.removeChild(newOption);
       await el.updateComplete;
       expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
     });
   });
-
   describe('overlay', () => {
     it('should be closed by default', async () => {
       const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
       expect(el.opened).to.be.false;
     });
-
     it('shows/hides the listbox via opened attribute', async () => {
       const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
       const { _overlayCtrl } = getSelectRichMembers(el);
-
       el.opened = true;
       await el.updateComplete;
       expect(_overlayCtrl.isShown).to.be.true;
-
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
       expect(_overlayCtrl.isShown).to.be.false;
     });
-
     it('syncs opened state with overlay shown', async () => {
       const el = await fixture(html` <lion-select-rich .opened=${true}></lion-select-rich> `);
-      const outerEl = /** @type {HTMLButtonElement} */ (
-        await _fixture('<button>somewhere</button>')
-      );
-
+      const outerEl = /** @type {HTMLButtonElement} */ await _fixture('<button>somewhere</button>');
       expect(el.opened).to.be.true;
-
       mimicClick(outerEl);
       await aTimeout(0);
       expect(el.opened).to.be.false;
     });
-
     it('will focus the listbox on open and invoker on close', async () => {
       const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
       const { _overlayCtrl, _listboxNode, _invokerNode } = getSelectRichMembers(el);
-
       await _overlayCtrl.show();
       await el.updateComplete;
       expect(isActiveElement(_listboxNode)).to.be.true;
       expect(isActiveElement(_invokerNode)).to.be.false;
-
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
       expect(isActiveElement(_listboxNode)).to.be.false;
       expect(isActiveElement(_invokerNode)).to.be.true;
     });
-
     it('opens the listbox with checked option as active', async () => {
       const el = await fixture(html`
         <lion-select-rich>
@@ -299,15 +258,12 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _overlayCtrl } = getSelectRichMembers(el);
-
       await _overlayCtrl.show();
       await el.updateComplete;
       const options = el.formElements;
-
       expect(options[1].active).to.be.true;
       expect(options[1].checked).to.be.true;
     });
-
     it('stays closed on click if it is disabled or readonly or has a single option', async () => {
       const elReadOnly = await fixture(html`
         <lion-select-rich readonly>
@@ -316,7 +272,6 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _invokerNode: _invokerNodeReadOnly } = getSelectRichMembers(elReadOnly);
-
       const elDisabled = await fixture(html`
         <lion-select-rich disabled>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
@@ -324,27 +279,22 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _invokerNode: _invokerNodeDisabled } = getSelectRichMembers(elDisabled);
-
       const elSingleoption = await fixture(html`
         <lion-select-rich>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
         </lion-select-rich>
       `);
       const { _invokerNode: _invokerNodeSingleOption } = getSelectRichMembers(elSingleoption);
-
       _invokerNodeReadOnly.click();
       await elReadOnly.updateComplete;
       expect(elReadOnly.opened).to.be.false;
-
       _invokerNodeDisabled.click();
       await elDisabled.updateComplete;
       expect(elDisabled.opened).to.be.false;
-
       _invokerNodeSingleOption.click();
       await elSingleoption.updateComplete;
       expect(elSingleoption.opened).to.be.false;
     });
-
     it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
       const elReadOnly = await fixture(html`
         <lion-select-rich readonly>
@@ -352,26 +302,36 @@ describe('lion-select-rich', () => {
           <lion-option .choiceValue=${20} checked>Item 2</lion-option>
         </lion-select-rich>
       `);
-
       const elSingleOption = await fixture(html`
         <lion-select-rich>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
         </lion-select-rich>
       `);
-
-      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      elReadOnly.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowDown',
+        }),
+      );
       expect(elReadOnly.opened).to.be.false;
-
-      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      elReadOnly.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowUp',
+        }),
+      );
       expect(elReadOnly.opened).to.be.false;
-
-      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      elSingleOption.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowDown',
+        }),
+      );
       expect(elSingleOption.opened).to.be.false;
-
-      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      elSingleOption.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowUp',
+        }),
+      );
       expect(elSingleOption.opened).to.be.false;
     });
-
     it('sets inheritsReferenceWidth to min by default', async () => {
       const el = await fixture(html`
         <lion-select-rich name="favoriteColor" label="Favorite color">
@@ -381,14 +341,11 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _overlayCtrl } = getSelectRichMembers(el);
-
       expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
       el.opened = true;
       await el.updateComplete;
-
       expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
     });
-
     it('should override the inheritsWidth prop when no default selected feature is used', async () => {
       const el = await fixture(html`
         <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
@@ -397,13 +354,13 @@ describe('lion-select-rich', () => {
           <lion-option .choiceValue=${'teal'}>Teal</lion-option>
         </lion-select-rich>
       `);
-
       const { _overlayCtrl } = getSelectRichMembers(el);
 
       // The default is min, so we override that behavior here
-      _overlayCtrl.updateConfig({ inheritsReferenceWidth: 'full' });
+      _overlayCtrl.updateConfig({
+        inheritsReferenceWidth: 'full',
+      });
       el._initialInheritsReferenceWidth = 'full';
-
       expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
       el.opened = true;
       await el.updateComplete;
@@ -423,7 +380,6 @@ describe('lion-select-rich', () => {
       // noDefaultSelected will now flip the override back to what was the initial reference width
       expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
     });
-
     it('should have singleOption only if there is exactly one option', async () => {
       const el = await fixture(html`
         <lion-select-rich>
@@ -431,12 +387,9 @@ describe('lion-select-rich', () => {
           <lion-option .choiceValue=${20}>Item 2</lion-option>
         </lion-select-rich>
       `);
-
       const { _inputNode, _invokerNode } = getSelectRichMembers(el);
-
       expect(el.singleOption).to.be.false;
       expect(_invokerNode.singleOption).to.be.false;
-
       const optionElm = el.formElements[0];
       optionElm.parentNode.removeChild(optionElm);
       // @ts-ignore [test] we don't need args in this case
@@ -444,8 +397,7 @@ describe('lion-select-rich', () => {
       await el.updateComplete;
       expect(el.singleOption).to.be.true;
       expect(_invokerNode.singleOption).to.be.true;
-
-      const newOption = /** @type {LionOption} */ (document.createElement('lion-option'));
+      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
       newOption.choiceValue = 30;
       _inputNode.appendChild(newOption);
       // @ts-ignore [test] allow to not provide args for testing purposes
@@ -454,54 +406,47 @@ describe('lion-select-rich', () => {
       expect(el.singleOption).to.be.false;
       expect(_invokerNode.singleOption).to.be.false;
     });
-
     it('should have singleOption only if one option and no hasNoDefaultSelected', async () => {
       const el = await fixture(html`
         <lion-select-rich has-no-default-selected>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
         </lion-select-rich>
       `);
-
       const { _invokerNode } = getSelectRichMembers(el);
-
       expect(el.singleOption).to.be.false;
       expect(_invokerNode.singleOption).to.be.false;
     });
-
     it('adds/removes the autofocus attribute to/from _listboxNode', async () => {
       const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
       const { _listboxNode } = getSelectRichMembers(el);
-
       expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
-
       el.opened = true;
       await el.updateComplete;
       expect(_listboxNode.hasAttribute('autofocus')).to.be.true;
-
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
       expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
     });
-
     it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
       const el = await fixture(html`
-        <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
+        <lion-select-rich
+          .config=${{
+            trapsKeyboardFocus: true,
+          }}
+        ></lion-select-rich>
       `);
       const { _listboxNode } = getSelectRichMembers(el);
       expect(isActiveElement(_listboxNode)).to.be.false;
-
       el.opened = true;
       await el.updateComplete;
       expect(isActiveElement(_listboxNode)).to.be.true;
-
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
       expect(isActiveElement(_listboxNode)).to.be.false;
     });
   });
-
   describe('interaction-mode', () => {
     it('allows to specify an interaction-mode which determines other behaviors', async () => {
       const el = await fixture(html`
@@ -510,7 +455,6 @@ describe('lion-select-rich', () => {
       expect(el.interactionMode).to.equal('mac');
     });
   });
-
   describe('Keyboard navigation', () => {
     it('opens the listbox with [Enter] key via click handler', async () => {
       const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
@@ -519,7 +463,6 @@ describe('lion-select-rich', () => {
       await aTimeout(0);
       expect(el.opened).to.be.true;
     });
-
     it('opens the listbox with [ ](Space) key via click handler', async () => {
       const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
       const { _invokerNode } = getSelectRichMembers(el);
@@ -527,33 +470,47 @@ describe('lion-select-rich', () => {
       await aTimeout(0);
       expect(el.opened).to.be.true;
     });
-
     it('closes the listbox with [Escape] key once opened', async () => {
       const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
       const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      _listboxNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Escape',
+        }),
+      );
       expect(el.opened).to.be.false;
     });
-
     it('closes the listbox with [Tab] key once opened', async () => {
       const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
       // tab can only be caught via keydown
       const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      _listboxNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Tab',
+        }),
+      );
       expect(el.opened).to.be.false;
     });
-
     it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
       const el = await fixture(html`
-        <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
+        <lion-select-rich
+          opened
+          .config=${{
+            trapsKeyboardFocus: true,
+          }}
+        >
+        </lion-select-rich>
       `);
       // tab can only be caught via keydown
       const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      _listboxNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Tab',
+        }),
+      );
       expect(el.opened).to.be.true;
     });
   });
-
   describe('Mouse navigation', () => {
     it('opens the listbox via click on invoker', async () => {
       const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
@@ -563,7 +520,6 @@ describe('lion-select-rich', () => {
       await nextFrame(); // reflection of click takes some time
       expect(el.opened).to.be.true;
     });
-
     it('closes the listbox when an option gets clicked', async () => {
       const el = await fixture(html`
         <lion-select-rich opened>
@@ -575,16 +531,18 @@ describe('lion-select-rich', () => {
       expect(el.opened).to.be.false;
     });
   });
-
   describe('Keyboard navigation Windows', () => {
     it('closes the listbox with [Enter] key once opened', async () => {
       const el = await fixture(html` <lion-select-rich opened> </lion-select-rich> `);
       const { _listboxNode } = getSelectRichMembers(el);
-      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      _listboxNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       expect(el.opened).to.be.false;
     });
   });
-
   describe('Keyboard navigation Mac', () => {
     it('checks active item and closes the listbox with [Enter] key via click handler once opened', async () => {
       const el = await fixture(html`
@@ -598,30 +556,39 @@ describe('lion-select-rich', () => {
       // changes active but not checked
       el.activeIndex = 1;
       expect(el.checkedIndex).to.equal(0);
-      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      _listboxNode.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       expect(el.opened).to.be.false;
       expect(el.checkedIndex).to.equal(1);
     });
-
     it('opens the listbox with [ArrowUp] key', async () => {
       const el = await fixture(html`
         <lion-select-rich interaction-mode="mac"> </lion-select-rich>
       `);
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowUp',
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.true;
     });
-
     it('opens the listbox with [ArrowDown] key', async () => {
       const el = await fixture(html`
         <lion-select-rich interaction-mode="mac"> </lion-select-rich>
       `);
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowDown',
+        }),
+      );
       await el.updateComplete;
       expect(el.opened).to.be.true;
     });
   });
-
   describe('Accessibility', () => {
     it('has the right references to its inner elements', async () => {
       const el = await fixture(html`
@@ -631,19 +598,16 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
       const { _invokerNode, _feedbackNode, _labelNode, _helpTextNode } = getSelectRichMembers(el);
-
       expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_labelNode.id);
       expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_invokerNode.id);
       expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_helpTextNode.id);
       expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_feedbackNode.id);
       expect(_invokerNode.getAttribute('aria-haspopup')).to.equal('listbox');
     });
-
     it('notifies when the listbox is expanded or not', async () => {
       // smoke test for overlay functionality
       const el = await fixture(html` <lion-select-rich> </lion-select-rich> `);
       const { _invokerNode } = getSelectRichMembers(el);
-
       expect(_invokerNode.getAttribute('aria-expanded')).to.equal('false');
       el.opened = true;
       await el.updateComplete;
@@ -652,7 +616,6 @@ describe('lion-select-rich', () => {
       expect(_invokerNode.getAttribute('aria-expanded')).to.equal('true');
     });
   });
-
   describe('Use cases', () => {
     it('keeps showing the selected item after a new item has been added in the selectedIndex position', async () => {
       const mySelectContainerTagString = defineCE(
@@ -663,7 +626,6 @@ describe('lion-select-rich', () => {
               colorList: Array,
             };
           }
-
           constructor() {
             super();
             this.colorList = [
@@ -684,13 +646,16 @@ describe('lion-select-rich', () => {
               },
             ];
           }
-
           render() {
             return html`
               <lion-select-rich label="Favorite color" name="color">
                 ${this.colorList.map(
-                  colorObj => html`
-                    <lion-option .modelValue=${{ value: colorObj.value, checked: colorObj.checked }}
+                  (colorObj) => html`
+                    <lion-option
+                      .modelValue=${{
+                        value: colorObj.value,
+                        checked: colorObj.checked,
+                      }}
                       >${colorObj.label}</lion-option
                     >
                   `,
@@ -704,29 +669,26 @@ describe('lion-select-rich', () => {
       const el = await fixture(html`
         <${mySelectContainerTag}></${mySelectContainerTag}>
       `);
-
-      const selectRich = /** @type {LionSelectRich} */ (
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('lion-select-rich')
-      );
-
+      const selectRich =
+        /** @type {LionSelectRich} */
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('lion-select-rich');
       const { _invokerNode, _listboxNode } = getSelectRichMembers(selectRich);
-
       expect(selectRich.checkedIndex).to.equal(1);
       expect(selectRich.modelValue).to.equal('hotpink');
-      expect(/** @type {LionOption} */ (_invokerNode.selectedElement).value).to.equal('hotpink');
-
-      const newOption = /** @type {LionOption} */ (document.createElement('lion-option'));
-      newOption.modelValue = { checked: false, value: 'blue' };
+      expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
+      const newOption = /** @type {LionOption} */ document.createElement('lion-option');
+      newOption.modelValue = {
+        checked: false,
+        value: 'blue',
+      };
       newOption.textContent = 'Blue';
       const hotpinkEl = _listboxNode.children[1];
       hotpinkEl.insertAdjacentElement('beforebegin', newOption);
-
       expect(selectRich.checkedIndex).to.equal(2);
       expect(selectRich.modelValue).to.equal('hotpink');
-      expect(/** @type {LionOption} */ (_invokerNode.selectedElement).value).to.equal('hotpink');
+      expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
     });
   });
-
   describe('Render from `lit` `cache`', () => {
     describe('when `lion-option` is set by `.choiceValue` property with and no `checked` attribute', () => {
       it('should display the second option', async () => {
@@ -747,9 +709,10 @@ describe('lion-select-rich', () => {
         class Wrapper extends LitElement {
           static properties = {
             ...super.properties,
-            activeTabIndex: { type: Number },
+            activeTabIndex: {
+              type: Number,
+            },
           };
-
           constructor() {
             super();
             this.activeTabIndex = 0;
@@ -761,7 +724,6 @@ describe('lion-select-rich', () => {
           changeActiveTabIndex(index) {
             this.activeTabIndex = index;
           }
-
           render() {
             const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
             return html`
@@ -774,7 +736,7 @@ describe('lion-select-rich', () => {
                     this.activeTabIndex === 0
                       ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
                           ${colours.map(
-                            colour =>
+                            (colour) =>
                               html`<lion-option .choiceValue="${colour.value}"
                                 >${colour.label}</lion-option
                               >`,
@@ -791,13 +753,12 @@ describe('lion-select-rich', () => {
             `;
           }
         }
-
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
         const tagString = defineCE(Wrapper);
         const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement = /** @type {Wrapper} */ (
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
-        );
+        const wrapperElement =
+          /** @type {Wrapper} */
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
         await wrapperElement.updateComplete;
         const wrapperElementShadowRoot = wrapperElement.shadowRoot;
         /**
@@ -833,9 +794,10 @@ describe('lion-select-rich', () => {
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
         // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue = /** @type { HTMLElement | undefined } */ (
-          wrapperElementShadowRoot?.querySelectorAll('lion-option')
-        )?.[1];
+        const optionBlue =
+          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+            'lion-option',
+          )?.[1];
         optionBlue?.click();
         await waitUntil(() => !isDialogVisible());
         const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
@@ -869,9 +831,10 @@ describe('lion-select-rich', () => {
         class Wrapper extends LitElement {
           static properties = {
             ...super.properties,
-            activeTabIndex: { type: Number },
+            activeTabIndex: {
+              type: Number,
+            },
           };
-
           constructor() {
             super();
             this.activeTabIndex = 0;
@@ -883,7 +846,6 @@ describe('lion-select-rich', () => {
           changeActiveTabIndex(index) {
             this.activeTabIndex = index;
           }
-
           render() {
             const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
             return html`
@@ -896,7 +858,7 @@ describe('lion-select-rich', () => {
                     this.activeTabIndex === 0
                       ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
                           ${colours.map(
-                            colour =>
+                            (colour) =>
                               html`<lion-option
                                 .choiceValue="${colour.value}"
                                 checked="${colour.checked || nothing}"
@@ -915,13 +877,12 @@ describe('lion-select-rich', () => {
             `;
           }
         }
-
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
         const tagString = defineCE(Wrapper);
         const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement = /** @type {Wrapper} */ (
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
-        );
+        const wrapperElement =
+          /** @type {Wrapper} */
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
         await wrapperElement.updateComplete;
         const wrapperElementShadowRoot = wrapperElement.shadowRoot;
         /**
@@ -957,9 +918,10 @@ describe('lion-select-rich', () => {
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
         // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue = /** @type { HTMLElement | undefined } */ (
-          wrapperElementShadowRoot?.querySelectorAll('lion-option')
-        )?.[1];
+        const optionBlue =
+          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+            'lion-option',
+          )?.[1];
         optionBlue?.click();
         await waitUntil(() => !isDialogVisible());
         const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
@@ -993,9 +955,10 @@ describe('lion-select-rich', () => {
         class Wrapper extends LitElement {
           static properties = {
             ...super.properties,
-            activeTabIndex: { type: Number },
+            activeTabIndex: {
+              type: Number,
+            },
           };
-
           constructor() {
             super();
             this.activeTabIndex = 0;
@@ -1007,7 +970,6 @@ describe('lion-select-rich', () => {
           changeActiveTabIndex(index) {
             this.activeTabIndex = index;
           }
-
           render() {
             const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
             return html`
@@ -1020,14 +982,17 @@ describe('lion-select-rich', () => {
                     this.activeTabIndex === 0
                       ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
                           ${colours.map(
-                            colour =>
+                            (colour) =>
                               html`<lion-option
                                 @model-value-changed=${(/** @type {Event} */ ev) => {
-                                  const lionOption = /** @type {LionOption} */ (ev.target);
+                                  const lionOption = /** @type {LionOption} */ ev.target;
                                   // eslint-disable-next-line no-param-reassign
                                   colour.checked = lionOption.modelValue.checked;
                                 }}
-                                .modelValue=${{ value: colour.value, checked: colour.checked }}
+                                .modelValue=${{
+                                  value: colour.value,
+                                  checked: colour.checked,
+                                }}
                                 >${colour.label}</lion-option
                               >`,
                           )}
@@ -1043,13 +1008,12 @@ describe('lion-select-rich', () => {
             `;
           }
         }
-
-        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
         const tagString = defineCE(Wrapper);
         const wrapperTag = unsafeStatic(tagString);
-        const wrapperElement = /** @type {Wrapper} */ (
-          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
-        );
+        const wrapperElement =
+          /** @type {Wrapper} */
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
         await wrapperElement.updateComplete;
         const wrapperElementShadowRoot = wrapperElement.shadowRoot;
         /**
@@ -1085,9 +1049,10 @@ describe('lion-select-rich', () => {
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
         // @ts-ignore [dynamic-key-access-in-test]
-        const optionBlue = /** @type { HTMLElement | undefined } */ (
-          wrapperElementShadowRoot?.querySelectorAll('lion-option')
-        )?.[1];
+        const optionBlue =
+          /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+            'lion-option',
+          )?.[1];
         optionBlue?.click();
         await waitUntil(() => !isDialogVisible());
         const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
@@ -1101,15 +1066,13 @@ describe('lion-select-rich', () => {
       });
     });
   });
-
   describe('Teardown', () => {
     it('does not throw when tearing down before the overlay controller is set up', () => {
-      const el = /** @type {LionSelectRich} */ (document.createElement('lion-select-rich'));
+      const el = /** @type {LionSelectRich} */ document.createElement('lion-select-rich');
 
       // @ts-expect-error [allow-private] in tests
       expect(() => el._teardownOverlayCtrl()).not.to.throw();
     });
-
     it('correctly removes event listeners when disconnected from dom', async () => {
       const el = await fixture(html`
         <lion-select-rich label="age">
@@ -1117,19 +1080,13 @@ describe('lion-select-rich', () => {
           <lion-option .choiceValue=${20}>Item 2</lion-option>
         </lion-select-rich>
       `);
-
       const { _overlayCtrl } = getSelectRichMembers(el);
       const eventRemoveSpy = sinon.spy(_overlayCtrl, 'removeEventListener');
-
       el.parentNode?.removeChild(el);
-
       expect(eventRemoveSpy.callCount).to.equal(0);
-
       await el.updateComplete;
       expect(eventRemoveSpy.callCount).to.equal(0);
-
       await el.updateComplete;
-
       const hasOneInstanceFor = (
         /** @type {string} */ eventName,
         /** @type {any[][]} */ eventsToSearch,
@@ -1151,7 +1108,6 @@ describe('lion-select-rich', () => {
       expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__overlayOnHide)).to.be.true;
     });
   });
-
   describe('Subclassers', () => {
     it('allows to override the type of overlay', async () => {
       const mySelectTagString = defineCE(
@@ -1165,21 +1121,27 @@ describe('lion-select-rich', () => {
               invokerNode,
             });
             this.addEventListener('switch', () => {
-              ctrl.updateConfig({ placementMode: 'local' });
+              ctrl.updateConfig({
+                placementMode: 'local',
+              });
             });
             return ctrl;
           }
         },
       );
-
       const mySelectTag = unsafeStatic(mySelectTagString);
-
       const el = await fixture(html`
         <${mySelectTag} label="Favorite color" name="color">
 
             ${Array(2).map(
               (_, i) => html`
-                <lion-option .modelValue="${{ value: i, checked: false }}">value ${i}</lion-option>
+                <lion-option
+                  .modelValue="${{
+                    value: i,
+                    checked: false,
+                  }}"
+                  >value ${i}</lion-option
+                >
               `,
             )}
 
@@ -1187,12 +1149,10 @@ describe('lion-select-rich', () => {
       `);
       await el.updateComplete;
       const { _overlayCtrl } = getSelectRichMembers(el);
-
       expect(_overlayCtrl.placementMode).to.equal('global');
       el.dispatchEvent(new Event('switch'));
       expect(_overlayCtrl.placementMode).to.equal('local');
     });
-
     it('supports putting a placeholder template when there is no default selection initially', async () => {
       const invokerTagName = defineCE(
         class extends LionSelectInvoker {
@@ -1214,7 +1174,6 @@ describe('lion-select-rich', () => {
         },
       );
       const selectTag = unsafeStatic(selectTagName);
-
       const el = await fixture(html`
         <${selectTag} id="color" name="color" label="Favorite color" has-no-default-selected>
 
@@ -1225,9 +1184,8 @@ describe('lion-select-rich', () => {
         </${selectTag}>
       `);
       const { _invokerNode } = getSelectRichMembers(el);
-
       expect(
-        /** @type {ShadowRoot} */ (_invokerNode.shadowRoot).getElementById('content-wrapper'),
+        /** @type {ShadowRoot} */ _invokerNode.shadowRoot.getElementById('content-wrapper'),
       ).dom.to.equal(`<div id="content-wrapper">Please select an option..</div>`);
       expect(el.modelValue).to.equal('');
     });