@lion/ui 0.24.0 → 0.26.0

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

@@ -0,0 +1,3665 @@
+import { html } from 'lit/static-html.js';
+import {
+  getComboboxMembers,
+  getFilteredOptionValues,
+  mimicKeyPress,
+  mimicUserTyping,
+  mimicUserTypingAdvanced,
+} from '@lion/ui/combobox-test-helpers.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import { browserDetection, SlotMixin } from '@lion/ui/core.js';
+import '@lion/ui/define/lion-combobox.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+import { Required, Unparseable } from '@lion/ui/form-core.js';
+import { defineCE, expect, fixture, unsafeStatic, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { LitElement, nothing } from 'lit';
+import sinon from 'sinon';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+
+/**
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * Runs the `lion-combobox` behavioural suite. The caller hands the elements it should run against;
+ * anything left out keeps Lion's own element.
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; option: SuiteElement}, {optionTagString?: any}>} [customConfig]
+ */
+export function runComboboxSuite({
+  classes = {},
+  tagString: legacyTagString,
+  optionTagString,
+} = {}) {
+  const hostTag = unsafeStatic(resolveSuiteTag(classes.host, legacyTagString, 'lion-combobox'));
+  const tagNameOption = resolveSuiteTag(classes.option, optionTagString, 'lion-option');
+  const tagOption = unsafeStatic(tagNameOption);
+
+  /**
+   * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
+   * @typedef {import('@lion/ui/listbox.js').LionOption} LionOption
+   */
+
+  /**
+   * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all', disabled?: boolean, readonly?: boolean }} config
+   */
+  async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}) {
+    const el =
+      /** @type {LionCombobox} */
+      await fixture(html`
+        <${hostTag} label="Search" name="foo">
+          <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+          <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+          <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+          <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+        </${hostTag}>
+      `);
+    if (autocomplete) {
+      el.autocomplete = autocomplete;
+    }
+    if (matchMode) {
+      el.matchMode = matchMode;
+    }
+    if (disabled) {
+      el.disabled = disabled;
+    }
+    if (readonly) {
+      el.readOnly = readonly;
+    }
+    await el.updateComplete;
+    return [el, el.formElements];
+  }
+  describe('lion-combobox', () => {
+    describe('Rendering on API change', () => {
+      it('renders when options changed', async () => {
+        const entries = [
+          {
+            id: '1',
+            label: 'Apple',
+          },
+          {
+            id: '2',
+            label: 'Artichoke',
+          },
+          {
+            id: '3',
+            label: 'Asparagus',
+          },
+          {
+            id: '4',
+            label: 'Banana',
+          },
+          {
+            id: '5',
+            label: 'Pineapple',
+          },
+        ];
+        class Wrapper extends LitElement {
+          static properties = {
+            ...super.properties,
+            entries: {
+              type: Array,
+            },
+          };
+          constructor() {
+            super();
+            this.entries = entries;
+          }
+          render() {
+            return html`<${hostTag} name="foo">
+              ${this.entries.map((entry) => html`<${tagOption} .choiceValue="${entry.id}">${entry.label}</${tagOption}>`)}
+            </${hostTag}>`;
+          }
+        }
+        const tagString = defineCE(Wrapper);
+        const tag = unsafeStatic(tagString);
+        const wrapperElement = /** @type {Wrapper} */ await fixture(html`<${tag}></${tag}>`);
+        await waitUntil(
+          () =>
+            wrapperElement?.shadowRoot
+              ?.querySelector('lion-options')
+              ?.querySelectorAll(tagNameOption).length === entries.length,
+        );
+        wrapperElement.entries = [
+          {
+            id: '4',
+            label: 'Banana',
+          },
+        ];
+        await waitUntil(
+          () =>
+            wrapperElement?.shadowRoot
+              ?.querySelector('lion-options')
+              ?.querySelectorAll(tagNameOption).length === wrapperElement.entries.length,
+        );
+        const optionElements = wrapperElement.shadowRoot?.querySelectorAll(tagNameOption);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        const visibleOptions = () =>
+          options.filter((o) => o.getAttribute('aria-hidden') !== 'true');
+        async function performChecks() {
+          await mimicUserTyping(el, 'c');
+          await el.updateComplete;
+          expect(visibleOptions().length).to.equal(4, `autocompleteMode is ${el.autocomplete}`);
+          // Remove [hard], [c]
+          await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace']);
+          await el.updateComplete;
+          expect(visibleOptions().length).to.equal(0, `autocompleteMode is ${el.autocomplete}`);
+        }
+        el.autocomplete = 'none';
+        await performChecks();
+        el.autocomplete = 'list';
+        await performChecks();
+        el.autocomplete = 'inline';
+        await performChecks();
+        el.autocomplete = 'both';
+        await performChecks();
+      });
+      it('hides all options on reset()', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        const visibleOptions = () => options.filter((o) => o.style.display !== 'none');
+        await mimicUserTyping(el, 'cha');
+        await el.updateComplete;
+        expect(visibleOptions().length).to.equal(1);
+        el.reset();
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" show-all-on-empty>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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');
+        visibleOptions[0].click();
+        expect(el.opened).to.be.false;
+        await open();
+        expect(el.opened).to.be.true;
+        el.activeIndex = el.formElements.indexOf(visibleOptions[0]);
+        mimicKeyPress(_listboxNode, 'Enter');
+        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} */
+            await fixture(html`
+              <${hostTag} name="foo" autocomplete="list" show-all-on-empty>
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const options = el.formElements;
+          const visibleOptions = () =>
+            options.filter((o) => o.getAttribute('aria-hidden') !== 'true');
+          async function performChecks() {
+            await mimicUserTyping(el, 'c');
+            await el.updateComplete;
+            expect(visibleOptions().length).to.equal(4);
+            await mimicUserTyping(el, '');
+            await el.updateComplete;
+            expect(visibleOptions().length).to.equal(options.length);
+          }
+          el.autocomplete = 'none';
+          await performChecks();
+          el.autocomplete = 'list';
+          await performChecks();
+          el.autocomplete = 'inline';
+          await performChecks();
+          el.autocomplete = 'both';
+          await performChecks();
+        });
+        it('shows overlay on click', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo" .showAllOnEmpty="${true}">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _inputNode } = getComboboxMembers(el);
+          expect(el.opened).to.be.false;
+          _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} */
+            await fixture(html`
+              <${hostTag} name="foo" .showAllOnEmpty="${true}" opened>
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          await el.updateComplete;
+          const { _inputNode } = getComboboxMembers(el);
+          _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} */
+            await fixture(html`
+              <${hostTag} name="foo" .showAllOnEmpty="${true}">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _listboxNode, _inputNode } = getComboboxMembers(el);
+          async function open() {
+            await mimicUserTyping(el, 'ch');
+            return el.updateComplete;
+          }
+
+          // FIXME: temp disable for Safari. Works locally, not in build
+          const isSafari = (() => {
+            const ua = navigator.userAgent.toLowerCase();
+            return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
+          })();
+          if (isSafari) {
+            return;
+          }
+          await open();
+          expect(el.opened).to.be.true;
+          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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+            </${hostTag}>
+          `);
+        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
+          get slots() {
+            return {
+              ...super.slots,
+              _lazyRenderedSlot: () => ({
+                template: this.renderSlot
+                  ? html`<span id="lazyRenderedSlotId">(Optional)</span>`
+                  : html`${nothing}`,
+                renderAsDirectHostChild: true,
+              }),
+            };
+          }
+          _labelTemplate() {
+            return html`
+              <div class="form-field__label">
+                <slot name="label"></slot>
+                <slot name="_lazyRenderedSlot"></slot>
+                <slot></slot>
+              </div>
+            `;
+          }
+          constructor() {
+            super();
+            this.renderSlot = false;
+          }
+        }
+        const tagName = defineCE(MyEl);
+        const wrappingTag = unsafeStatic(tagName);
+        const el =
+          /** @type {MyEl} */
+          await fixture(html`
+            <${wrappingTag} label="my label">
+              <${tagOption} .choiceValue="${'1'}">${'one'}</${tagOption}>
+            </${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} */
+          await fixture(html`
+            <${hostTag} name="foo" .modelValue="${'10'}">
+              <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .modelValue="${'Artichoke'}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        expect(el.modelValue).to.equal('Artichoke');
+        expect(el.formElements[0].checked).to.be.true;
+        el.setCheckedIndex(-1);
+        el.__shouldAutocompleteNextUpdate = true;
+        await el.updateComplete;
+        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;
+        await el.updateComplete;
+        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;
+        expect(el.modelValue instanceof Unparseable).to.be.false;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .modelValue="${'Artichoke'}" .requireOptionMatch="${false}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        expect(el.modelValue).to.equal('Artichoke');
+        expect(el.formElements[0].checked).to.be.true;
+        el.setCheckedIndex(-1);
+        el.__shouldAutocompleteNextUpdate = true;
+        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;
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice .modelValue="${['Artichoke']}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        expect(el.modelValue).to.deep.equal(['Artichoke']);
+        expect(el.formElements[0].checked).to.be.true;
+        el.setCheckedIndex([]);
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .modelValue="${'Artichoke'}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        el.clear();
+        expect(el.modelValue).to.equal('');
+        expect(_inputNode.value).to.equal('');
+        const el2 =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice .modelValue="${['Artichoke']}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`<${hostTag}>
+              <${tagOption} .choiceValue=${'red'}>Red</${tagOption}>
+              <${tagOption} .choiceValue=${'green'}>Green</${tagOption}>
+              <${tagOption} .choiceValue=${'blue'}>Blue</${tagOption}>
+            </${hostTag}>`);
+        el.modelValue = 'red';
+        await el.updateComplete;
+        el.addEventListener('model-value-changed', ({ target }) => {
+          expect(target).to.not.be.null;
+          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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        await mimicUserTyping(el, 'a');
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .modelValue="${'Artichoke'}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice .modelValue="${['Artichoke']}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+            await fixture(html`
+              <${hostTag} name="foo" show-all-on-empty .autocomplete="${autocompleteMode}">
+                <${tagOption} .choiceValue="${'Aa'}" checked>Aa</${tagOption}>
+                <${tagOption} .choiceValue="${'Bb'}">Bb</${tagOption}>
+              </${hostTag}>
+            `);
+          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',
+              },
+              `autocompleteMode is ${autocompleteMode}`,
+            );
+            await el.updateComplete;
+            expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
+          } else {
+            expect(el.modelValue).to.equal('Bb', `autocompleteMode is ${autocompleteMode}`);
+            expect(el.checkedIndex).to.equal(1, `autocompleteMode is ${autocompleteMode}`);
+          }
+        }
+      });
+      it('works with Required validator', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" .validators=${[new Required()]}>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice autocomplete="none">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .validators=${[new Required()]}>
+              <${tagOption} checked .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both" .requireOptionMatch="${false}">
+              <${tagOption} checked .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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;
+        expect(fake.firstCall.returnValue).to.equal('F');
+        expect(fake.secondCall.returnValue).to.equal('Fo');
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none" .requireOptionMatch="${false}">
+              <${tagOption} checked .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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);
+        expect(fake.firstCall.returnValue).to.equal('');
+        expect(fake.secondCall.returnValue).to.equal('F');
+        expect(fake.thirdCall.returnValue).to.equal('Fo');
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none" .requireOptionMatch="${false}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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)
+        await mimicUserTyping(el, 'xyz');
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        el.requireOptionMatch = false;
+        await el.updateComplete;
+        const spy = sinon.spy();
+        el.addEventListener('model-value-changed', spy);
+
+        // No option matches "Chards", so checkedIndex becomes -1 and requireOptionMatch is false:
+        // no event should be manually dispatched (normal Unparseable flow, no double event)
+        await mimicUserTyping(el, 'Chicorys');
+        await el.updateComplete;
+        expect(el.checkedIndex).to.equal(-1);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .validators=${[new Required()]}>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} checked .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        expect(el.checkedIndex).to.equal(0);
+
+        // Simulate backspace deleting the char at the end of the string
+        mimicKeyPress(_inputNode, 'Backspace');
+        _inputNode.dispatchEvent(new Event('input'));
+        const arr = _inputNode.value.split('');
+        arr.splice(_inputNode.value.length - 1, 1);
+        _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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              .parser="${/** @param {string} value */ (value) => value.replace(/[0-9]/g, '')}"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        el.setCheckedIndex(-1);
+        _inputNode.value = 'Foo123';
+        el.__shouldAutocompleteNextUpdate = true;
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              multiple-choice
+              .validators=${[new Required()]}
+              autocomplete="none"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} checked .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              multiple-choice
+              .validators=${[new Required()]}
+              autocomplete="none"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              multiple-choice
+              .requireOptionMatch=${false}
+              autocomplete="both"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              multiple-choice
+              .requireOptionMatch=${false}
+              autocomplete="both"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await el.updateComplete;
+        const { _inputNode } = getComboboxMembers(el);
+        await mimicUserTyping(el, 'Art');
+        await el.updateComplete;
+        await mimicUserTypingAdvanced(el, ['Backspace']);
+        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} */
+          await fixture(html`
+            <${hostTag}
+              name="foo"
+              multiple-choice
+              .requireOptionMatch=${false}
+              autocomplete="both"
+            >
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await el.updateComplete;
+        const { _inputNode } = getComboboxMembers(el);
+        el.modelValue = [];
+        await mimicUserTyping(el, 'Art');
+        await el.updateComplete;
+        await mimicUserTypingAdvanced(el, ['Delete']);
+        await el.updateComplete;
+        mimicKeyPress(_inputNode, 'Enter');
+        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} */
+            await fixture(html`
+              <${hostTag} autocomplete="${autocompleteValue}" .modelValue="${'Chard'}" name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          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}  */
+          await fixture(html`
+            <form @submit=${submitSpy}>
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+              <button type="submit">submit</button>
+            </form>
+          `);
+        const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
+        const { _inputNode } = getComboboxMembers(combobox);
+        await combobox.updateComplete;
+        _inputNode.focus();
+        await sendKeys({
+          press: 'Enter',
+        });
+        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}  */
+          await fixture(html`
+            <form @submit=${submitSpy}>
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+              <button type="submit">submit</button>
+            </form>
+          `);
+        const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
+        const { _inputNode } = getComboboxMembers(combobox);
+        combobox.opened = true;
+        await combobox.updateComplete;
+        _inputNode.focus();
+        await sendKeys({
+          press: 'Enter',
+        });
+        expect(submitSpy.callCount).to.equal(0);
+      });
+    });
+    describe('Overlay visibility', () => {
+      it('does not show overlay on click', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _comboboxNode } = getComboboxMembers(el);
+        expect(el.opened).to.equal(false);
+        _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} */
+          await fixture(html` 
+            <${tag} name="combo" label="Display only the label once selected">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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) => {
+          // eslint-disable-next-line no-unused-vars
+          for (const mutation of mutationList) {
+            if (dialog?.style.display === '') {
+              hasDropdownFlashed = true;
+            }
+          }
+        });
+        observer.observe(/** @type {Node} */ dialog, {
+          attributeFilter: ['style'],
+        });
+        const { _inputNode } = getComboboxMembers(el);
+        _inputNode.focus();
+        await sendKeys({
+          type: 'art',
+        });
+        expect(hasDropdownFlashed).to.be.false;
+      });
+      it('shows overlay on click when filled', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _comboboxNode } = getComboboxMembers(el);
+        el.modelValue = 'Art';
+        expect(el.opened).to.equal(false);
+        _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:
+         * [1] user focuses textbox: overlay hidden
+         * [2] user types char: overlay shows
+         * [3] user selects "Artichoke": overlay closes, textbox gets value "Artichoke" and textbox
+         * still has focus
+         * [4] user changes textbox value to "Artichoke": the overlay should show again
+         */
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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,
+          }),
+        );
+        await el.updateComplete;
+        expect(el.opened).to.equal(false);
+
+        // step [2]
+        await mimicUserTyping(el, 'c');
+        await el.updateComplete;
+        expect(el.opened).to.equal(true);
+
+        // step [3]
+        options[0].click();
+        await el.updateComplete;
+        expect(el.opened).to.equal(false);
+        expect(isActiveElement(_inputNode)).to.be.true;
+
+        // step [4]
+        await el.updateComplete;
+        await mimicUserTyping(el, 'c');
+        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`
+            <${hostTag} name="foo" autocomplete="list">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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',
+          }),
+        );
+        expect(el.opened).to.equal(false);
+        expect(_inputNode.value).to.equal('');
+      });
+      it('hides overlay on [Enter]', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        await mimicUserTyping(el, 'art');
+        await el.updateComplete;
+        expect(el.opened).to.equal(true);
+        expect(_inputNode.value).to.equal('Artichoke');
+
+        // 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',
+          }),
+        );
+        expect(el.opened).to.equal(false);
+        expect(_inputNode.value).to.equal('Artichoke');
+      });
+      it('hides overlay on [Tab]', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        await mimicUserTyping(el, 'art');
+        await el.updateComplete;
+        expect(el.opened).to.equal(true);
+        expect(_inputNode.value).to.equal('Artichoke');
+
+        // 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',
+          }),
+        );
+        expect(el.opened).to.equal(false);
+        expect(_inputNode.value).to.equal('Artichoke');
+      });
+      it('keeps overlay open on [Shift]', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        await mimicUserTyping(el, 'art');
+        await el.updateComplete;
+        expect(el.opened).to.equal(true);
+        expect(_inputNode.value).to.equal('Artichoke');
+
+        // 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',
+          }),
+        );
+        expect(el.opened).to.equal(true);
+        expect(_inputNode.value).to.equal('Artichoke');
+      });
+      it('clears checkedIndex on empty text', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        await mimicUserTyping(el, 'art');
+        await el.updateComplete;
+        expect(el.opened).to.equal(true);
+        expect(_inputNode.value).to.equal('Artichoke');
+        expect(el.checkedIndex).to.equal(0);
+
+        // await mimicUserTyping(el, '');
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" .showAllOnEmpty="${true}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        // @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;
+        expect(overlayCfg.visibilityTriggerFunction).to.equal(undefined);
+      });
+
+      // NB: If this becomes a suite, move to separate file
+      describe('Subclassers', () => {
+        it('allows to control overlay visibility via "_showOverlayCondition": should not display overlay if currentValue length condition is not fulfilled', async () => {
+          class ShowOverlayConditionCombobox extends LionCombobox {
+            /** @param {{ currentValue: string, lastKey:string }} options */
+            _showOverlayCondition(options) {
+              return (
+                // @ts-ignore
+                this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+              );
+            }
+          }
+          const tagName = defineCE(ShowOverlayConditionCombobox);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+            <${tag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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 */
+            _showOverlayCondition(options) {
+              return (
+                // @ts-ignore
+                this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+              );
+            }
+          }
+          const tagName = defineCE(ShowOverlayConditionCombobox);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+            <${tag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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 */
+            _showOverlayCondition(options) {
+              return (
+                // @ts-ignore
+                this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+              );
+            }
+          }
+          const tagName = defineCE(ShowOverlayConditionCombobox);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+            <${tag} name="foo">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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} */
+            await fixture(html`
+              <${hostTag} name="foo" multiple-choice>
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          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');
+          expect(visibleOptions.length).to.not.equal(0);
+          visibleOptions.forEach((o, i) => {
+            expect(o.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
+            expect(o.getAttribute('aria-setsize')).to.equal(`${visibleOptions.length}`);
+          });
+          /**
+           * @param {{ style: { display: string; }; }} o
+           */
+          const hiddenOptions = options.filter((o) => o.style.display === 'none');
+          /**
+           * @param {{ hasAttribute: (arg0: string) => any; }} o
+           */
+          hiddenOptions.forEach((o) => {
+            expect(o.hasAttribute('aria-posinset')).to.equal(false);
+            expect(o.hasAttribute('aria-setsize')).to.equal(false);
+          });
+        });
+
+        /**
+         * Note that we use aria-hidden instead of 'display:none' to allow for animations
+         * (like fade in/out)
+         */
+        it('sets aria-hidden="true" on hidden entries', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          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) => {
+            expect(o.hasAttribute('aria-hidden')).to.be.false;
+          });
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" .validators=${[new Required()]}>
+                <${tagOption} checked .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _overlayCtrl } = getComboboxMembers(el);
+          expect(_overlayCtrl.contentWrapperNode.getAttribute('aria-label')).to.equal(
+            'Combobox options popup',
+          );
+        });
+      });
+    });
+
+    // Notice that the LionComboboxInvoker always needs to be used in conjunction with the
+    // LionCombobox, and therefore will be tested integrated,
+    describe('Invoker component integration', () => {
+      describe('Accessibility', () => {
+        it('sets role="combobox" on textbox wrapper/listbox sibling', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+                <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+              </${hostTag}>
+            `);
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" ._ariaVersion="${'1.0'}">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+                <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+              </${hostTag}>
+            `);
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" ._ariaVersion="${'1.1'}">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+                <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+              </${hostTag}>
+            `);
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+                <${tagOption} .choiceValue="${'20'}">Item 2</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _listboxNode } = getComboboxMembers(el);
+          expect(_listboxNode.hasAttribute('tabindex')).to.be.false;
+        });
+      });
+    });
+    describe('Selection display', () => {
+      class MySelectionDisplay extends LitElement {
+        /**
+         * @param {import('lit').PropertyValues } changedProperties
+         */
+        onComboboxElementUpdated(changedProperties) {
+          if (
+            changedProperties.has('modelValue') &&
+            // @ts-ignore
+            this.comboboxElement.multipleChoice
+          ) {
+            // do smth..
+          }
+        }
+      }
+      const selectionDisplayTag = unsafeStatic(defineCE(MySelectionDisplay));
+      it('stores internal reference _selectionDisplayNode in LionCombobox', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+          <${hostTag} name="foo">
+            <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
+            <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        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} */
+          await fixture(html`
+          <${hostTag} name="foo">
+            <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
+            <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        // @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} */
+          await fixture(html`
+          <${hostTag} name="foo">
+            <${selectionDisplayTag} slot="selection-display"></${selectionDisplayTag}>
+            <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        // @ts-ignore sinon type error
+        const spy = sinon.spy(el._selectionDisplayNode, 'onComboboxElementUpdated');
+        el.requestUpdate('modelValue', undefined);
+        await el.updateComplete;
+        expect(spy).to.have.been.calledOnce;
+      });
+
+      // TODO: put those in distinct file if ./docs/lion-combobox-selection-display.js is accessible
+      // and exposable
+      describe.skip('Selected chips display', () => {
+        // it('displays chips next to textbox, ordered based on user selection', async () => {
+        //   const el = /** @type {LionCombobox} */ (await fixture(html`
+        //     <${hostTag} name="foo" multiple-choice>
+        //       <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+        //     </${hostTag}>
+        //   `));
+        //   const options = el.formElements;
+        //   options[2].checked = true; // Chicory
+        //   options[0].checked = true; // Artichoke
+        //   options[1].checked = true; // Chard
+        //   const chips = Array.from(el._comboboxNode.querySelectorAll('.selection-chip'));
+        //   expect(chips.map(elm => elm.textContent)).to.eql(['Chicory', 'Artichoke', 'Chard']);
+        //   expect(el._comboboxNode.selectedElements).to.eql([options[2], options[0], options[1]]);
+        // });
+        // it('stages deletable chips on [Backspace]', async () => {
+        //   const el = /** @type {LionCombobox} */ (await fixture(html`
+        //     <${hostTag} name="foo" multiple-choice>
+        //       <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+        //     </${hostTag}>
+        //   `));
+        //   const options = el.formElements;
+        //   options[0].checked = true; // Artichoke
+        //   options[1].checked = true; // Chard
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.false;
+        //   el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.true;
+        //   el._inputNode.blur();
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.false;
+        // });
+        // it('deletes staged chip on [Backspace]', async () => {
+        //   const el = /** @type {LionCombobox} */ (await fixture(html`
+        //     <${hostTag} name="foo" multiple-choice>
+        //       <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+        //       <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+        //     </${hostTag}>
+        //   `));
+        //   const options = el.formElements;
+        //   options[0].checked = true; // Artichoke
+        //   options[1].checked = true; // Chard
+        //   expect(el._comboboxNode.selectedElements).to.eql([options[0], options[1]]);
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.false;
+        //   el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+        //   expect(el._comboboxNode.selectedElements).to.eql([options[0], options[1]]);
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.true;
+        //   el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+        //   expect(el._comboboxNode.selectedElements).to.eql([options[0]]);
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.true;
+        //   el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+        //   expect(el._comboboxNode.selectedElements).to.eql([]);
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.true;
+        //   el._inputNode.blur();
+        //   expect(el._comboboxNode.removeChipOnNextBackspace).to.be.false;
+        // });
+      });
+    });
+    describe('Autocompletion', () => {
+      it('has autocomplete "both" by default', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+            </${hostTag}>
+          `);
+        expect(el.autocomplete).to.equal('both');
+      });
+      it('filters options when autocomplete is "both"', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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);
+
+        // We don't autocomplete when characters are removed
+        await mimicUserTyping(el, 'c'); // The user pressed backspace (number of chars decreased)
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="list">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await mimicUserTyping(el, 'ch');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql([
+          'Artichoke',
+          'Chard',
+          'Chicory',
+          'Victoria Plum',
+        ]);
+      });
+      it('does not autocomplete on [Enter] when textbox content does not match options', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Mango'}">Mango</${tagOption}>
+              <${tagOption} .choiceValue="${'Lemon'}">Lemon</${tagOption}>
+              <${tagOption} .choiceValue="${'Apple'}">Apple</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        mimicUserTypingAdvanced(el, ['m', 'a', 'k']);
+        await el.updateComplete;
+        mimicKeyPress(_inputNode, 'Enter');
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo">
+              <${tagOption} .choiceValue="${'Mango'}">Mango</${tagOption}>
+              <${tagOption} .choiceValue="${'Lemon'}">Lemon</${tagOption}>
+              <${tagOption} .choiceValue="${'Apple'}">Apple</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        mimicUserTypingAdvanced(el, ['m', 'o', 'Backspace', 'Backspace', 'm', 'o']);
+        await el.updateComplete;
+        await el.updateComplete;
+        await el.updateComplete;
+        await el.updateComplete;
+        mimicKeyPress(_inputNode, 'Enter');
+        await el.updateComplete;
+        await el.updateComplete;
+        expect(_inputNode.value).to.equal('Mo');
+      });
+      it('does not filter options when autocomplete is "inline"', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await mimicUserTyping(el, 'ch');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql([
+          'Artichoke',
+          'Chard',
+          'Chicory',
+          'Victoria Plum',
+        ]);
+      });
+      it('resets "checkedIndex" when going from matched to unmatched textbox value', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await mimicUserTyping(el2, 'ch');
+        await el2.updateComplete;
+        expect(el2.checkedIndex).to.equal(1);
+
+        // Also works when 'diminishing amount of chars'
+        await mimicUserTyping(el2, 'x');
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+
+        /** 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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        await mimicUserTyping(el2, 'ch');
+        await el2.updateComplete;
+        expect(el2.checkedIndex).to.equal(1);
+
+        // match-mode all ensures the user sees Artichoke option, but it's not
+        // auto-completed or auto-selected, because it doesn't start with "cho"
+        // See next test for more clarification
+        await mimicUserTyping(el2, 'cho');
+        await el2.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="both">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              <${tagOption} .choiceValue="${'Daikon'}">Daikon</${tagOption}>
+            </${hostTag}>
+          `);
+
+        // first match is Char'd', but better match is 'D'aikon
+        await mimicUserTyping(el, 'd');
+        await el.updateComplete;
+        expect(el.checkedIndex).to.equal(3);
+        expect(getFilteredOptionValues(el)).to.eql(['Chard', 'Daikon']);
+      });
+      it('completes chars inside textbox', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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');
+        expect(_inputNode.selectionStart).to.equal('chic'.length);
+        expect(_inputNode.selectionEnd).to.equal('Chicory'.length);
+
+        // Diminishing chars, but autocompletion
+        await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace', 'Backspace']); // Ch
+        await el.updateComplete;
+        expect(_inputNode.value).to.equal('Ch');
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        await el.updateComplete;
+        expect(_inputNode.value).to.equal('');
+
+        /**
+         * @param {'none' | 'list' | 'inline' | 'both'} autocomplete
+         * @param {number|number[]} index
+         * @param {string} valueOnClose
+         */
+        async function performChecks(autocomplete, index, valueOnClose) {
+          await el.updateComplete;
+          el.opened = true;
+          el.setCheckedIndex(-1);
+          await el.updateComplete;
+          el.autocomplete = autocomplete;
+          el.setCheckedIndex(index);
+          await el.updateComplete;
+          el.opened = false;
+          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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none" ._syncToTextboxCondition="${() => false}">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const { _inputNode } = getComboboxMembers(el);
+        expect(_inputNode.value).to.equal('');
+
+        /**
+         * @param {'none' | 'list' | 'inline' | 'both'} autocomplete
+         * @param {number|number[]} index
+         * @param {string} valueOnClose
+         */
+        async function performChecks(autocomplete, index, valueOnClose) {
+          await el.updateComplete;
+          el.opened = true;
+          el.setCheckedIndex(-1);
+          await el.updateComplete;
+          el.autocomplete = autocomplete;
+          el.setCheckedIndex(index);
+          el.opened = false;
+          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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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);
+        expect(el.checkedIndex).to.equal(2);
+
+        // Diminishing chars, but autocompletion
+        await mimicUserTypingAdvanced(el, [
+          'Backspace',
+          'Backspace',
+          'Backspace',
+          'Backspace',
+          'a',
+        ]); // a
+        await el.updateComplete;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="list" match-mode="all">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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
+
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="inline">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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);
+
+        // Autocompletion happened. When we go backwards ('Ch[ard]' => 'Ch'), we should not
+        // autocomplete to 'Chard' anymore.
+        await mimicUserTypingAdvanced(el, ['Backspace']);
+        await el.updateComplete;
+        expect(_inputNode.value).to.equal('Ch'); // so not 'Chard'
+        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');
+          }
+          render() {
+            return html`
+              <${hostTag} id="combobox" label="Server side completion">
+                ${this.options.map((option) => html` <${tagOption} .choiceValue="${option}">${option}</${tagOption}> `)}
+              </${hostTag}>
+            `;
+          }
+        }
+        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}>`);
+          await el.combobox.registrationComplete;
+          // @ts-ignore [allow-protected] in test
+          const spy = sinon.spy(el.combobox, '_handleAutocompletion');
+          el.addOption();
+          await el.updateComplete;
+          await el.updateComplete;
+          expect(spy).to.have.been.calledOnce;
+          el.clearOptions();
+          await el.updateComplete;
+          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}>`);
+          await el.combobox.registrationComplete;
+          const { _inputNode } = getComboboxMembers(el.combobox);
+
+          // Act (start typing)
+          await mimicUserTypingAdvanced(el.combobox, ['l']);
+          // simulate fetching data from server
+          el.clearOptions();
+          await el.updateComplete;
+          await el.updateComplete;
+          el.fillAllOptions();
+          await el.updateComplete;
+          await el.updateComplete;
+
+          // Assert
+          expect(_inputNode.value).to.equal('lorem');
+          expect(_inputNode.selectionStart).to.equal(1);
+          expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length);
+          expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']);
+
+          // Act (continue typing)
+          await mimicUserTypingAdvanced(el.combobox, ['o']);
+          // simulate fetching data from server
+          el.clearOptions();
+          await el.updateComplete;
+          await el.updateComplete;
+          el.fillAllOptions();
+          await el.updateComplete;
+          await el.updateComplete;
+
+          // Assert
+          expect(_inputNode.value).to.equal('lorem');
+          expect(_inputNode.selectionStart).to.equal(2);
+          expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length);
+          expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']);
+
+          // We don't autocomplete when characters are removed
+          await mimicUserTypingAdvanced(el.combobox, ['Backspace', 'Backspace']);
+          expect(_inputNode.value).to.equal('l');
+          expect(_inputNode.selectionStart).to.equal(_inputNode.value.length);
+        });
+      });
+      describe('Subclassers', () => {
+        it('allows to configure autoselect', async () => {
+          class X extends LionCombobox {
+            _autoSelectCondition() {
+              return true;
+            }
+          }
+          const tagName = defineCE(X);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+            <${tag} name="foo" opened>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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} */
+          await fixture(html`
+            <${hostTag} name="foo" match-mode="all">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        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>`);
+        expect(options[2]).lightDom.to.equal(`<span aria-label="Chicory"><b>C</b>hicory</span>`);
+        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 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 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} */
+          await fixture(html`
+            <${hostTag} name="foo" match-mode="all">
+              <${tagOption} .choiceValue="${'Artichoke'}">
+                <div>Artichoke</div>
+                <small>Cardoon</small>
+              </${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">
+                <div>Chard</div>
+                <small>Beet</small>
+              </${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">
+                <div>Chicory</div>
+                <small>Chicory</small>
+              </${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">
+                <div>Victoria Plum</div>
+                <small>Prunus domestica</small>
+              </${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        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>`,
+        );
+        expect(options[1]).lightDom.to.equal(
+          `<span aria-label=" Chard Beet "><div><b>Ch</b>ard</div><small>Beet</small>`,
+        );
+        expect(options[2]).lightDom.to.equal(
+          `<span aria-label=" Chicory Chicory "><div><b>Ch</b>icory</div><small><b>Ch</b>icory</small>`,
+        );
+        expect(options[3]).lightDom.to.equal(
+          `<div>Victoria Plum</div><small>Prunus domestica</small>`,
+        );
+      });
+      it('resets removes highlights on reset()', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" match-mode="all">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        const options = el.formElements;
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none">
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" autocomplete="none" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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 {
+            // eslint-disable-next-line no-unused-vars
+            _syncToTextboxCondition() {
+              return true;
+            }
+
+            /**
+             * @param {any} modelValue
+             * @param {any} oldModelValue
+             */
+            // eslint-disable-next-line no-unused-vars
+            _syncToTextboxMultiple(modelValue, oldModelValue) {
+              // In a real scenario (depending on how selection display works),
+              // you could override the default (last selected option) with '' for instance
+              this._setTextboxValue(`${modelValue}-${oldModelValue}-multi`);
+            }
+          }
+          const tagName = defineCE(X);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+            <${tag} name="foo" autocomplete="none" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${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 {
+              /**
+               * Return the value to be used for the input value
+               * @overridable
+               * @param {any} option
+               * @returns {string}
+               */
+              // eslint-disable-next-line class-methods-use-this
+              _getTextboxValueFromOption(option) {
+                return option.label;
+              }
+            }
+            const tagName = defineCE(X);
+            const tag = unsafeStatic(tagName);
+            const el =
+              /** @type {LionCombobox} */
+              await fixture(html`
+              <${tag} name="foo" autocomplete="both" multiple-choice>
+                <${tagOption} .label="${'Artichoke as label'}" .choiceValue="${{
+                  value: 'Artichoke',
+                }}">Artichoke</${tagOption}>
+                <${tagOption} .label="${'Chard as label'}" .choiceValue="${{
+                  value: 'Chard',
+                }}">Chard</${tagOption}>
+                <${tagOption} .label="${'Chicory as label'}" .choiceValue="${{
+                  value: 'Chicory',
+                }}">Chicory</${tagOption}>
+                <${tagOption} .label="${'Victoria Plum as label'}" .choiceValue="${{
+                  value: 'Victoria Plum',
+                }}">Victoria Plum</${tagOption}>
+              </${tag}>
+            `);
+            const { _inputNode } = getComboboxMembers(el);
+            el.setCheckedIndex(-1);
+
+            // Act
+            el.setCheckedIndex([0]);
+
+            // Assert
+            expect(_inputNode.value).to.equal('Artichoke as label');
+
+            // Act
+            el.setCheckedIndex([3]);
+
+            // 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 {
+              /**
+               * Return the value to be used for the input value
+               * @overridable
+               * @param {any} option
+               * @returns {string}
+               */
+              // eslint-disable-next-line class-methods-use-this
+              _getTextboxValueFromOption(option) {
+                if (option && option.label) {
+                  return option.label;
+                }
+                return this.modelValue;
+              }
+            }
+            const tagName = defineCE(X);
+            const tag = unsafeStatic(tagName);
+            const el =
+              /** @type {LionCombobox} */
+              await fixture(html`
+              <${tag} name="foo">
+                <${tagOption} .label="${'Artichoke as label'}" .choiceValue="${{
+                  value: 'Artichoke',
+                }}">Artichoke</${tagOption}>
+                <${tagOption} .label="${'Chard as label'}" .choiceValue="${{
+                  value: 'Chard',
+                }}" checked>Chard</${tagOption}>
+                <${tagOption} .label="${'Chicory as label'}" .choiceValue="${{
+                  value: 'Chicory',
+                }}">Chicory</${tagOption}>
+                <${tagOption} .label="${'Victoria Plum as label'}" .choiceValue="${{
+                  value: 'Victoria Plum',
+                }}">Victoria Plum</${tagOption}>
+              </${tag}>
+            `);
+            const { _inputNode } = getComboboxMembers(el);
+
+            // Assume
+            expect(_inputNode.value).to.equal('Chard as label');
+
+            // Act
+            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 {
+              /**
+               * Return the value to be used for the input value
+               * @overridable
+               * @param {any} option
+               * @returns {string}
+               */
+              // eslint-disable-next-line class-methods-use-this
+              _getTextboxValueFromOption(option) {
+                if (option && option.label) {
+                  return option.label;
+                }
+                return this.modelValue;
+              }
+            }
+            const tagName = defineCE(X);
+            const tag = unsafeStatic(tagName);
+            const el =
+              /** @type {LionCombobox} */
+              await fixture(html`
+              <${tag} name="foo" .modelValue="${{
+                value: 'Artichoke',
+              }}">
+                <${tagOption} .label="${'Artichoke as label'}" .choiceValue="${{
+                  value: 'Artichoke',
+                }}">Artichoke</${tagOption}>
+                <${tagOption} .label="${'Chard as label'}" .choiceValue="${{
+                  value: 'Chard',
+                }}">Chard</${tagOption}>
+                <${tagOption} .label="${'Chicory as label'}" .choiceValue="${{
+                  value: 'Chicory',
+                }}">Chicory</${tagOption}>
+                <${tagOption} .label="${'Victoria Plum as label'}" .choiceValue="${{
+                  value: 'Victoria Plum',
+                }}">Victoria Plum</${tagOption}>
+              </${tag}>
+            `);
+            const { _inputNode } = getComboboxMembers(el);
+
+            // Assume
+            expect(_inputNode.value).to.equal('Artichoke as label');
+
+            // Act
+            el.clear();
+
+            // Assert
+            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 {
+              /**
+               * Return the value to be used for the input value
+               * @overridable
+               * @param {any} option
+               * @returns {string}
+               */
+              // eslint-disable-next-line class-methods-use-this
+              _getTextboxValueFromOption(option) {
+                return option.label;
+              }
+            }
+            const tagName = defineCE(X);
+            const tag = unsafeStatic(tagName);
+            const el =
+              /** @type {LionCombobox} */
+              await fixture(html`
+              <${tag} name="foo">
+                <${tagOption} .label="${'Artichoke as label'}" .choiceValue="${{
+                  value: 'Artichoke',
+                }}">Artichoke</${tagOption}>
+                <${tagOption} .label="${'Chard as label'}" .choiceValue="${{
+                  value: 'Chard',
+                }}">Chard</${tagOption}>
+                <${tagOption} .label="${'Chicory as label'}" .choiceValue="${{
+                  value: 'Chicory',
+                }}">Chicory</${tagOption}>
+                <${tagOption} .label="${'Victoria Plum as label'}" .choiceValue="${{
+                  value: 'Victoria Plum',
+                }}">Victoria Plum</${tagOption}>
+              </${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 {
+            /**
+             * @overridable
+             * @param {LionOption & {__originalInnerHTML?:string}} option
+             * @param {string} matchingString
+             * @protected
+             */
+            _onFilterMatch(option, matchingString) {
+              Array.from(option.children).forEach((child) => {
+                if (child.hasAttribute('data-key')) {
+                  this._highlightMatchedOption(child, matchingString);
+                }
+              });
+              // Alternatively, an extension can add an animation here
+              // option.style.display = '';
+            }
+
+            /**
+             * @overridable
+             * @param {LionOption & {__originalInnerHTML?:string}} option
+             * @param {string} [curValue]
+             * @param {string} [prevValue]
+             * @protected
+             */
+            // eslint-disable-next-line no-unused-vars
+            _onFilterUnmatch(option, curValue, prevValue) {
+              Array.from(option.children).forEach((child) => {
+                if (child.hasAttribute('data-key')) {
+                  this._unhighlightMatchedOption(child);
+                }
+              });
+              // Alternatively, an extension can add an animation here
+              // option.style.display = 'none';
+            }
+          }
+          const tagName = defineCE(X);
+          const tag = unsafeStatic(tagName);
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${tag} name="foo" autocomplete="both">
+                <${tagOption} .choiceValue="${'Artichoke'}">
+                  <div data-key>Artichoke</div>
+                  <small>Cardoon</small>
+                </${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">
+                  <div data-key>Chard</div>
+                  <small>Beet</small>
+                </${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">
+                  <div data-key>Chicory</div>
+                  <small>Chicory</small>
+                </${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">
+                  <div data-key>Victoria Plum</div>
+                  <small>Prunus domestica</small>
+                </${tagOption}>
+              </${tag}>
+            `);
+          const options = el.formElements;
+          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>`,
+          );
+          expect(options[1]).lightDom.to.equal(
+            `<div data-key><span aria-label="Chard"><b>Ch</b>ard</div></span><small>Beet</small>`,
+          );
+          expect(options[2]).lightDom.to.equal(
+            `<div data-key><span aria-label="Chicory"><b>Ch</b>icory</span></div><small>Chicory</small>`,
+          );
+          expect(options[3]).lightDom.to.equal(
+            `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
+          );
+          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(
+            `<div data-key><span aria-label="Chard">Char<b>d</b></div></span><small>Beet</small>`,
+          );
+          expect(options[2]).lightDom.to.equal(`<div data-key>Chicory</div><small>Chicory</small>`);
+          expect(options[3]).lightDom.to.equal(
+            `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
+          );
+        });
+      });
+      describe('Active index behavior', () => {
+        it('sets the active index to the closest match on open by default', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          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
+           * 'inline' & 'both' autocomplete, because it is unavoidable there
+           * 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} */
+            await fixture(html`
+              <${hostTag} name="foo" autocomplete="none">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _inputNode } = getComboboxMembers(el);
+
+          /**
+           * @param {LionCombobox} elm
+           * @param {'none'|'list'|'inline'|'both'} autocomplete
+           */
+          async function setup(elm, autocomplete) {
+            // eslint-disable-next-line no-param-reassign
+            elm.autocomplete = autocomplete;
+            // eslint-disable-next-line no-param-reassign
+            elm.activeIndex = -1;
+            // eslint-disable-next-line no-param-reassign
+            elm.setCheckedIndex(-1);
+            // eslint-disable-next-line no-param-reassign
+            elm.opened = true;
+            await elm.updateComplete;
+          }
+
+          // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
+          // 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 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);
+
+          // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
+          // 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 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;
+
+          // 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 el.updateComplete;
+          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 el.updateComplete;
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" autocomplete="both">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _inputNode } = getComboboxMembers(el);
+          await mimicUserTyping(/** @type {LionCombobox} */ el, 'cha');
+          await el.updateComplete;
+          expect(el.activeIndex).to.equal(1);
+          await mimicUserTyping(/** @type {LionCombobox} */ el, 'ch');
+          await el.updateComplete;
+          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 el.updateComplete;
+          mimicKeyPress(_inputNode, 'Enter');
+          await mimicUserTyping(/** @type {LionCombobox} */ el, '');
+          await el.updateComplete;
+          // change selection, active index should update to closest match
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const { _inputNode } = getComboboxMembers(el);
+
+          // Select something
+          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);
+
+          // change selection, active index should update to closest match
+          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',
+          });
+          expect(
+            getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
+              'aria-autocomplete',
+            ),
+          ).to.equal('both');
+          [el] = await fruitFixture({
+            autocomplete: 'list',
+          });
+          expect(
+            getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
+              'aria-autocomplete',
+            ),
+          ).to.equal('list');
+          [el] = await fruitFixture({
+            autocomplete: 'none',
+          });
+          expect(
+            getComboboxMembers(/** @type {LionCombobox} */ el)._inputNode.getAttribute(
+              'aria-autocomplete',
+            ),
+          ).to.equal('none');
+        });
+        it('updates aria-activedescendant on textbox node', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo" autocomplete="none">
+                <${tagOption} .choiceValue="${'Artichoke'}" id="artichoke-option"
+                  >Artichoke</${tagOption}
+                >
+                <${tagOption} .choiceValue="${'Chard'}" id="chard-option">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          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 el.updateComplete;
+          expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
+            null,
+          );
+          // el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+          mimicKeyPress(elProts._inputNode, 'ArrowDown');
+          expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
+            'artichoke-option',
+          );
+          expect(el.formElements[1].active).to.equal(false);
+          const el2 =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo" autocomplete="both" match-mode="begin">
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+            `);
+          const el2Prots = getComboboxMembers(el2);
+          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 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');
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" match-mode="all">
+                <${tagOption} .choiceValue="${'Artichoke'}">
+                  <div>Artichoke</div>
+                  <small>Cardoon</small>
+                </${tagOption}>
+              </${hostTag}>
+            `);
+          const options = el.formElements;
+          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;
+          expect(labelledElement.innerText).to.equal('Artichoke\nCardoon');
+        });
+      });
+    });
+    describe('Accessibility', () => {
+      describe('Aria versions', () => {
+        it('[role=combobox] wraps input node in v1.1', async () => {
+          const el =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo" ._ariaVersion="${'1.1'}">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              </${hostTag}>
+            `);
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo" ._ariaVersion="${'1.0'}">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              </${hostTag}>
+            `);
+          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} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              </${hostTag}>
+            `);
+          const elProts = getComboboxMembers(el);
+          expect(elProts._ariaVersion).to.equal('1.1');
+          browserDetection.isChromium = false;
+          const el2 =
+            /** @type {LionCombobox} */
+            await fixture(html`
+              <${hostTag} name="foo">
+                <${tagOption} .choiceValue="${'10'}" checked>Item 1</${tagOption}>
+              </${hostTag}>
+            `);
+          const el2Prots = getComboboxMembers(el2);
+          expect(el2Prots._ariaVersion).to.equal('1.0');
+
+          // restore...
+          browserDetection.isChromium = browserDetectionIsChromiumOriginal;
+        });
+      });
+    });
+    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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+
+        // 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');
+        visibleOptions[0].click();
+        expect(el.opened).to.equal(true);
+      });
+      it('does not close listbox on [Enter]', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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',
+          }),
+        );
+        expect(el.opened).to.equal(true);
+      });
+      it('clears textbox after selection of a new item on [enter]', async () => {
+        const el =
+          /** @type {LionCombobox} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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');
+        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',
+          }),
+        );
+        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} */
+          await fixture(html`
+            <${hostTag} name="foo" multiple-choice>
+              <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+              <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+              <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+              <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+            </${hostTag}>
+          `);
+        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');
+        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}  */
+          await fixture(html`
+            <form @submit=${submitSpy}>
+              <${hostTag} name="foo" multiple-choice>
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+              <button type="submit">submit</button>
+            </form>
+          `);
+        const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
+        const { _inputNode } = getComboboxMembers(combobox);
+        await combobox.updateComplete;
+        _inputNode.focus();
+        await sendKeys({
+          press: 'Enter',
+        });
+        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}  */
+          await fixture(html`
+            <form @submit=${submitSpy}>
+              <${hostTag} name="foo" multiple-choice>
+                <${tagOption} .choiceValue="${'Artichoke'}">Artichoke</${tagOption}>
+                <${tagOption} .choiceValue="${'Chard'}">Chard</${tagOption}>
+                <${tagOption} .choiceValue="${'Chicory'}">Chicory</${tagOption}>
+                <${tagOption} .choiceValue="${'Victoria Plum'}">Victoria Plum</${tagOption}>
+              </${hostTag}>
+              <button type="submit">submit</button>
+            </form>
+          `);
+        const combobox = /** @type {LionCombobox} */ el.querySelector('[name="foo"]');
+        const { _inputNode } = getComboboxMembers(combobox);
+        combobox.opened = true;
+        await combobox.updateComplete;
+        _inputNode.focus();
+        await sendKeys({
+          press: 'Enter',
+        });
+        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 el.updateComplete;
+        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');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql([
+          'Chard',
+          'Chicory',
+        ]);
+      });
+      describe('Subclassers', () => {
+        it('allows for custom matching functions', async () => {
+          const [el] = await fruitFixture();
+          /**
+           * @param {{ value: any; }} option
+           * @param {any} curValue
+           */
+          function onlyExactMatches(option, curValue) {
+            return option.value === curValue;
+          }
+          el.matchCondition = onlyExactMatches;
+          await mimicUserTyping(/** @type {LionCombobox} */ el, 'Chicory');
+          await el.updateComplete;
+          expect(getFilteredOptionValues(/** @type {LionCombobox} */ el)).to.eql(['Chicory']);
+          await mimicUserTyping(/** @type {LionCombobox} */ el, 'Chicor');
+          await el.updateComplete;
+          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,
+        });
+        expect(el.disabled).to.equal(true);
+        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,
+          }),
+        );
+        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,
+        });
+        expect(el.disabled).to.equal(true);
+        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,
+          }),
+        );
+        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');
+          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);
+
+        // input should not be focusable
+        expect(_comboboxNode.tabIndex).to.equal(-1);
+        expect(_inputNode.tabIndex).to.equal(-1);
+
+        // aria-disabled should be set
+        expect(el.getAttribute('aria-disabled')).to.equal('true');
+
+        // 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);
+
+        // input should be focusable
+        expect(_inputNode.tabIndex).to.equal(0);
+
+        // aria-disabled should be set
+        expect(_comboboxNode.getAttribute('aria-readonly')).to.equal('true');
+
+        // 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);
+        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,
+          }),
+        );
+        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,
+        });
+        expect(el.readOnly).to.equal(true);
+        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,
+          }),
+        );
+        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');
+          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} */
+          await fixture(html`
+            <${hostTag} label="Search" name="foo">
+              <${tagOption} .choiceValue="${'test.com'}">test.com</${tagOption}>
+              <${tagOption} .choiceValue="${'func(arg)'}">func(arg)</${tagOption}>
+              <${tagOption} .choiceValue="${'array[0]'}">array[0]</${tagOption}>
+              <${tagOption} .choiceValue="${'C++'}">C++</${tagOption}>
+              <${tagOption} .choiceValue="${'a * b'}">a * b</${tagOption}>
+              <${tagOption} .choiceValue="${'What?'}">What?</${tagOption}>
+              <${tagOption} .choiceValue="${'$100'}">$100</${tagOption}>
+              <${tagOption} .choiceValue="${'x^2'}">x^2</${tagOption}>
+              <${tagOption} .choiceValue="${'a | b'}">a | b</${tagOption}>
+              <${tagOption} .choiceValue="${'path\\file'}">path\\file</${tagOption}>
+              <${tagOption} .choiceValue="${'{name}'}">{name}</${tagOption}>
+              <${tagOption} .choiceValue="${'user+tag@example.com'}">user+tag@example.com</${tagOption}>
+              <${tagOption} .choiceValue="${'(a+b)*c^2$'}">>(a+b)*c^2$</${tagOption}>
+              <${tagOption} .choiceValue="${'test|value?[x]'}">test|value?[x]</${tagOption}>
+              <${tagOption} .choiceValue="${'file.{txt|md}\\n'}">file.{txt|md}\\n</${tagOption}>
+              <${tagOption} .choiceValue="${'testXcom'}">testXcom</${tagOption}>
+              <${tagOption} .choiceValue="${'funcXargX'}">funcXargX</${tagOption}>
+              <${tagOption} .choiceValue="${'arrayX0X'}">arrayX0X</${tagOption}>
+            </${hostTag}>
+          `);
+
+        // Test dot - should not act as wildcard
+        await mimicUserTyping(el, 'test.com');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['test.com']);
+
+        // Test parentheses
+        await mimicUserTyping(el, '(arg)');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['func(arg)']);
+
+        // Test square brackets
+        await mimicUserTyping(el, '[0]');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['array[0]']);
+
+        // Test plus sign
+        await mimicUserTyping(el, '+');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['C++', 'user+tag@example.com', '(a+b)*c^2$']);
+
+        // Test asterisk
+        await mimicUserTyping(el, '*');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['a * b', '(a+b)*c^2$']);
+
+        // Test question mark
+        await mimicUserTyping(el, '?');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['What?', 'test|value?[x]']);
+
+        // Test dollar sign
+        await mimicUserTyping(el, '$');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['$100', '(a+b)*c^2$']);
+
+        // Test caret
+        await mimicUserTyping(el, '^2');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['x^2', '(a+b)*c^2$']);
+
+        // Test pipe
+        await mimicUserTyping(el, '|');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['a | b', 'test|value?[x]', 'file.{txt|md}\\n']);
+
+        // Test backslash
+        await mimicUserTyping(el, '\\');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['path\\file', 'file.{txt|md}\\n']);
+
+        // Test curly braces
+        await mimicUserTyping(el, '{name}');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['{name}']);
+
+        // Test complex combination with multiple special characters
+        await mimicUserTyping(el, '(a+b)*c');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['(a+b)*c^2$']);
+
+        // Test email with plus and dot
+        await mimicUserTyping(el, 'user+tag@example.com');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['user+tag@example.com']);
+
+        // Test combination with brackets, pipe and question mark
+        await mimicUserTyping(el, 'value?[x]');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['test|value?[x]']);
+
+        // Test combination with dot, curly braces, pipe and backslash
+        await mimicUserTyping(el, '.{txt|md}');
+        await el.updateComplete;
+        expect(getFilteredOptionValues(el)).to.eql(['file.{txt|md}\\n']);
+      });
+    });
+  });
+}