@lion/ui 0.25.0 → 0.26.0

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

@@ -0,0 +1,1236 @@
+import { html } from 'lit/static-html.js';
+import { LionSelectInvoker, LionSelectRich } from '@lion/ui/select-rich.js';
+import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
+import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
+import { OverlayController } from '@lion/ui/overlays.js';
+import { LionOption } from '@lion/ui/listbox.js';
+import '@lion/ui/define/lion-select-rich.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+import { LionTabs } from '@lion/ui/tabs.js';
+import '@lion/ui/define/lion-tabs.js';
+import { LitElement, nothing } from 'lit';
+import sinon from 'sinon';
+import {
+  fixture as _fixture,
+  unsafeStatic,
+  nextFrame,
+  aTimeout,
+  defineCE,
+  expect,
+  waitUntil,
+} from '@open-wc/testing';
+import { cache } from 'lit/directives/cache.js';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import { isElementVisible } from '../../core/test-helpers/isElementVisible.js';
+
+/**
+ * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('../../listbox/types/ListboxMixinTypes.js').ListboxHost} ListboxHost
+ * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */ _fixture;
+
+/**
+ * Runs the `lion-select-rich` behavioural suite. The caller hands the elements it should run against;
+ * anything left out keeps Lion's own element.
+ * @typedef {import('@lion/ui/types/test-suites.js').SuiteElement} SuiteElement
+ * @param {import('@lion/ui/types/test-suites.js').SuiteConfig<{host: SuiteElement; option: SuiteElement; tabs: SuiteElement}>} [customConfig]
+ */
+export function runSelectRichSuite({
+  classes: {
+    host: hostEl = LionSelectRich,
+    option: optionEl = LionOption,
+    tabs: tabsEl = LionTabs,
+  } = {},
+  tagString: legacyTagString,
+  optionTagString: legacyOptionTagString,
+  tabsTagString: legacyTabsTagString,
+} = {}) {
+  const hostTagString = resolveSuiteTag(hostEl, legacyTagString);
+  const hostTag = unsafeStatic(hostTagString);
+  const tagNameOption = resolveSuiteTag(optionEl, legacyOptionTagString);
+  const tagOption = unsafeStatic(tagNameOption);
+  const tagNameTabs = resolveSuiteTag(tabsEl, legacyTabsTagString);
+  const tagTabs = unsafeStatic(tagNameTabs);
+  describe('lion-select-rich', () => {
+    it('clicking the label should focus the invoker', async () => {
+      const el = await fixture(html` <${hostTag} label="foo"> </${hostTag}> `);
+      expect(isActiveElement(document.body)).to.be.true;
+      const { _labelNode, _invokerNode } = getSelectRichMembers(el);
+      _labelNode.click();
+      expect(isActiveElement(_invokerNode)).to.be.true;
+    });
+    it('has an attribute focused when focused', async () => {
+      const el = await fixture(html` <${hostTag} label="foo"> </${hostTag}> `);
+      el.focus();
+      await el.updateComplete;
+      expect(el.hasAttribute('focused')).to.be.true;
+      el.blur();
+      await el.updateComplete;
+      expect(el.hasAttribute('focused')).to.be.false;
+    });
+    it('checks the first enabled option', async () => {
+      const el = await fixture(html`
+        <${hostTag}>
+          <${tagOption} .choiceValue=${'Red'}></${tagOption}>
+          <${tagOption} .choiceValue=${'Hotpink'}></${tagOption}>
+          <${tagOption} .choiceValue=${'Blue'}></${tagOption}>
+        </${hostTag}>
+      `);
+      expect(el.activeIndex).to.equal(0);
+      expect(el.checkedIndex).to.equal(0);
+    });
+    it('still has a checked value while disabled', async () => {
+      const el = await fixture(html`
+        <${hostTag} disabled>
+          <${tagOption} .choiceValue=${'Red'}>Red</${tagOption}>
+          <${tagOption} .choiceValue=${'Hotpink'}>Hotpink</${tagOption}>
+          <${tagOption} .choiceValue=${'Blue'}>Blue</${tagOption}>
+        </${hostTag}>
+      `);
+      expect(el.modelValue).to.equal('Red');
+    });
+    it('supports having no default selection initially', async () => {
+      const el = await fixture(html`
+        <${hostTag} id="color" name="color" label="Favorite color" has-no-default-selected>
+          <${tagOption} .choiceValue=${'red'}>Red</${tagOption}>
+          <${tagOption} .choiceValue=${'hotpink'}>Hotpink</${tagOption}>
+          <${tagOption} .choiceValue=${'teal'}>Teal</${tagOption}>
+        </${hostTag}>
+      `);
+      const { _invokerNode } = getSelectRichMembers(el);
+      expect(_invokerNode.selectedElement).to.be.undefined;
+      expect(el.modelValue).to.equal('');
+    });
+    describe('Invoker', () => {
+      it('generates an lion-select-invoker if no invoker is provided', async () => {
+        const el = await fixture(html` <${hostTag}> </${hostTag}> `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(_invokerNode).to.exist;
+        expect(_invokerNode).to.be.instanceOf(LionSelectInvoker);
+      });
+      it('sets the first option as the selectedElement if no option is checked', async () => {
+        const el = await fixture(html`
+          <${hostTag} name="foo">
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        const options = el.formElements;
+        expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
+      });
+      it('syncs the selected element to the invoker', async () => {
+        const el = await fixture(html`
+          <${hostTag} name="foo">
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20} checked>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        const options = el.querySelectorAll(tagNameOption);
+        expect(_invokerNode.selectedElement).dom.to.equal(options[1]);
+        el.checkedIndex = 0;
+        await el.updateComplete;
+        expect(_invokerNode.selectedElement).dom.to.equal(options[0]);
+      });
+      it('delegates readonly to the invoker', async () => {
+        const el = await fixture(html`
+          <${hostTag} readonly>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(el.hasAttribute('readonly')).to.be.true;
+        expect(_invokerNode.hasAttribute('readonly')).to.be.true;
+      });
+      it('delegates singleOption to the invoker', async () => {
+        const el = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(el.singleOption).to.be.true;
+        expect(_invokerNode.hasAttribute('single-option')).to.be.true;
+      });
+      it('sets and removes the button role and aria attributes on change of singleOption', async () => {
+        const el = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(_invokerNode.hasAttribute('role')).to.be.true;
+        expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+        expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+        el.singleOption = true;
+        await el.updateComplete;
+        expect(_invokerNode.hasAttribute('role')).to.be.false;
+        expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.false;
+        expect(_invokerNode.hasAttribute('aria-expanded')).to.be.false;
+        el.singleOption = false;
+        await el.updateComplete;
+        expect(_invokerNode.hasAttribute('role')).to.be.true;
+        expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+        expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+      });
+      it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
+        const tagString = defineCE(
+          class LionCustomOption extends LionOption {
+            render() {
+              return html`${this.modelValue.value}`;
+            }
+            createRenderRoot() {
+              return this;
+            }
+          },
+        );
+        const tag = unsafeStatic(tagString);
+        const firstOption =
+          /** @type {LionOption} */
+          await _fixture(html`<${tag} checked .choiceValue=${10}></${tag}>`);
+        const el = await fixture(html`
+          <${hostTag}>
+            ${firstOption}
+            <${tag} .choiceValue=${20}></${tag}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        const firstChild =
+          /** @type {HTMLElement} */
+          /** @type {ShadowRoot} */ _invokerNode.shadowRoot.firstElementChild;
+        expect(firstChild.textContent).to.equal('10');
+        firstOption.modelValue = {
+          value: 30,
+          checked: true,
+        };
+        await el.updateComplete;
+        expect(firstChild.textContent).to.equal('30');
+      });
+
+      // FIXME: wrong values in safari/webkit even though this passes in the "real" debug browsers
+      it.skip('inherits the content width including arrow width', async () => {
+        const el = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${10}>Item 2 with long label</${tagOption}>
+          </${hostTag}>
+        `);
+        el.opened = true;
+        const options = el.formElements;
+        await el.updateComplete;
+        const { _invokerNode, _inputNode } = getSelectRichMembers(el);
+        expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
+        const newOption = /** @type {LionOption} */ document.createElement(tagNameOption);
+        newOption.choiceValue = 30;
+        newOption.textContent = '30 with longer label';
+        _inputNode.appendChild(newOption);
+        await el.updateComplete;
+        expect(_invokerNode.clientWidth).to.equal(options[2].clientWidth);
+        _inputNode.removeChild(newOption);
+        await el.updateComplete;
+        expect(_invokerNode.clientWidth).to.equal(options[1].clientWidth);
+      });
+    });
+    describe('overlay', () => {
+      it('should be closed by default', async () => {
+        const el = await fixture(html` <${hostTag}></${hostTag}> `);
+        expect(el.opened).to.be.false;
+      });
+      it('shows/hides the listbox via opened attribute', async () => {
+        const el = await fixture(html` <${hostTag}></${hostTag}> `);
+        const { _overlayCtrl } = getSelectRichMembers(el);
+        el.opened = true;
+        await el.updateComplete;
+        expect(_overlayCtrl.isShown).to.be.true;
+        el.opened = false;
+        await el.updateComplete;
+        await el.updateComplete; // safari takes a little longer
+        expect(_overlayCtrl.isShown).to.be.false;
+      });
+      it('syncs opened state with overlay shown', async () => {
+        const el = await fixture(html` <${hostTag} .opened=${true}></${hostTag}> `);
+        const outerEl =
+          /** @type {HTMLButtonElement} */
+          await _fixture('<button>somewhere</button>');
+        expect(el.opened).to.be.true;
+        mimicClick(outerEl);
+        await aTimeout(0);
+        expect(el.opened).to.be.false;
+      });
+      it('will focus the listbox on open and invoker on close', async () => {
+        const el = await fixture(html` <${hostTag}></${hostTag}> `);
+        const { _overlayCtrl, _listboxNode, _invokerNode } = getSelectRichMembers(el);
+        await _overlayCtrl.show();
+        await el.updateComplete;
+        expect(isActiveElement(_listboxNode)).to.be.true;
+        expect(isActiveElement(_invokerNode)).to.be.false;
+        el.opened = false;
+        await el.updateComplete;
+        await el.updateComplete; // safari takes a little longer
+        expect(isActiveElement(_listboxNode)).to.be.false;
+        expect(isActiveElement(_invokerNode)).to.be.true;
+      });
+      it('opens the listbox with checked option as active', async () => {
+        const el = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20} checked>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _overlayCtrl } = getSelectRichMembers(el);
+        await _overlayCtrl.show();
+        await el.updateComplete;
+        const options = el.formElements;
+        expect(options[1].active).to.be.true;
+        expect(options[1].checked).to.be.true;
+      });
+      it('stays closed on click if it is disabled or readonly or has a single option', async () => {
+        const elReadOnly = await fixture(html`
+          <${hostTag} readonly>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20} checked>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode: _invokerNodeReadOnly } = getSelectRichMembers(elReadOnly);
+        const elDisabled = await fixture(html`
+          <${hostTag} disabled>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20} checked>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode: _invokerNodeDisabled } = getSelectRichMembers(elDisabled);
+        const elSingleoption = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode: _invokerNodeSingleOption } = getSelectRichMembers(elSingleoption);
+        _invokerNodeReadOnly.click();
+        await elReadOnly.updateComplete;
+        expect(elReadOnly.opened).to.be.false;
+        _invokerNodeDisabled.click();
+        await elDisabled.updateComplete;
+        expect(elDisabled.opened).to.be.false;
+        _invokerNodeSingleOption.click();
+        await elSingleoption.updateComplete;
+        expect(elSingleoption.opened).to.be.false;
+      });
+      it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
+        const elReadOnly = await fixture(html`
+          <${hostTag} readonly>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20} checked>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const elSingleOption = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        elReadOnly.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowDown',
+          }),
+        );
+        expect(elReadOnly.opened).to.be.false;
+        elReadOnly.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowUp',
+          }),
+        );
+        expect(elReadOnly.opened).to.be.false;
+        elSingleOption.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowDown',
+          }),
+        );
+        expect(elSingleOption.opened).to.be.false;
+        elSingleOption.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowUp',
+          }),
+        );
+        expect(elSingleOption.opened).to.be.false;
+      });
+      it('sets inheritsReferenceWidth to min by default', async () => {
+        const el = await fixture(html`
+          <${hostTag} name="favoriteColor" label="Favorite color">
+            <${tagOption} .choiceValue=${'red'}>Red</${tagOption}>
+            <${tagOption} .choiceValue=${'hotpink'}>Hotpink</${tagOption}>
+            <${tagOption} .choiceValue=${'teal'}>Teal</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _overlayCtrl } = getSelectRichMembers(el);
+        expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
+        el.opened = true;
+        await el.updateComplete;
+        expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
+      });
+      it('should override the inheritsWidth prop when no default selected feature is used', async () => {
+        const el = await fixture(html`
+          <${hostTag} name="favoriteColor" label="Favorite color" has-no-default-selected>
+            <${tagOption} .choiceValue=${'red'}>Red</${tagOption}>
+            <${tagOption} .choiceValue=${'hotpink'}>Hotpink</${tagOption}>
+            <${tagOption} .choiceValue=${'teal'}>Teal</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _overlayCtrl } = getSelectRichMembers(el);
+
+        // The default is min, so we override that behavior here
+        _overlayCtrl.updateConfig({
+          inheritsReferenceWidth: 'full',
+        });
+        el._initialInheritsReferenceWidth = 'full';
+        expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
+        el.opened = true;
+        await el.updateComplete;
+        // Opens while hasNoDefaultSelected = true, so we expect an override
+        expect(_overlayCtrl.inheritsReferenceWidth).to.equal('min');
+
+        // Emulate selecting hotpink, it closing, and opening it again
+        el.modelValue = 'hotpink';
+        el.opened = false;
+        await el.updateComplete; // necessary for overlay controller to actually close and re-open
+        await el.updateComplete; // safari takes a little longer
+        el.opened = true;
+        await el.updateComplete;
+        await el.updateComplete; // safari takes a little longer
+        await _overlayCtrl._showComplete;
+
+        // noDefaultSelected will now flip the override back to what was the initial reference width
+        expect(_overlayCtrl.inheritsReferenceWidth).to.equal('full');
+      });
+      it('should have singleOption only if there is exactly one option', async () => {
+        const el = await fixture(html`
+          <${hostTag}>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _inputNode, _invokerNode } = getSelectRichMembers(el);
+        expect(el.singleOption).to.be.false;
+        expect(_invokerNode.singleOption).to.be.false;
+        const optionElm = el.formElements[0];
+        optionElm.parentNode.removeChild(optionElm);
+        // @ts-ignore [test] we don't need args in this case
+        el.requestUpdate();
+        await el.updateComplete;
+        expect(el.singleOption).to.be.true;
+        expect(_invokerNode.singleOption).to.be.true;
+        const newOption = /** @type {LionOption} */ document.createElement(tagNameOption);
+        newOption.choiceValue = 30;
+        _inputNode.appendChild(newOption);
+        // @ts-ignore [test] allow to not provide args for testing purposes
+        el.requestUpdate();
+        await el.updateComplete;
+        expect(el.singleOption).to.be.false;
+        expect(_invokerNode.singleOption).to.be.false;
+      });
+      it('should have singleOption only if one option and no hasNoDefaultSelected', async () => {
+        const el = await fixture(html`
+          <${hostTag} has-no-default-selected>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(el.singleOption).to.be.false;
+        expect(_invokerNode.singleOption).to.be.false;
+      });
+      it('adds/removes the autofocus attribute to/from _listboxNode', async () => {
+        const el = await fixture(html` <${hostTag}></${hostTag}> `);
+        const { _listboxNode } = getSelectRichMembers(el);
+        expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
+        el.opened = true;
+        await el.updateComplete;
+        expect(_listboxNode.hasAttribute('autofocus')).to.be.true;
+        el.opened = false;
+        await el.updateComplete;
+        await el.updateComplete; // safari takes a little longer
+        expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
+      });
+      it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
+        const el = await fixture(html`
+          <${hostTag} .config=${{
+            trapsKeyboardFocus: true,
+          }}></${hostTag}>
+        `);
+        const { _listboxNode } = getSelectRichMembers(el);
+        expect(isActiveElement(_listboxNode)).to.be.false;
+        el.opened = true;
+        await el.updateComplete;
+        expect(isActiveElement(_listboxNode)).to.be.true;
+        el.opened = false;
+        await el.updateComplete;
+        await el.updateComplete; // safari takes a little longer
+        expect(isActiveElement(_listboxNode)).to.be.false;
+      });
+    });
+    describe('interaction-mode', () => {
+      it('allows to specify an interaction-mode which determines other behaviors', async () => {
+        const el = await fixture(html`
+          <${hostTag} interaction-mode="mac"> </${hostTag}>
+        `);
+        expect(el.interactionMode).to.equal('mac');
+      });
+    });
+    describe('Keyboard navigation', () => {
+      it('opens the listbox with [Enter] key via click handler', async () => {
+        const el = await fixture(html` <${hostTag}> </${hostTag}> `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        _invokerNode.click();
+        await aTimeout(0);
+        expect(el.opened).to.be.true;
+      });
+      it('opens the listbox with [ ](Space) key via click handler', async () => {
+        const el = await fixture(html` <${hostTag}> </${hostTag}> `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        _invokerNode.click();
+        await aTimeout(0);
+        expect(el.opened).to.be.true;
+      });
+      it('closes the listbox with [Escape] key once opened', async () => {
+        const el = await fixture(html` <${hostTag} opened> </${hostTag}> `);
+        const { _listboxNode } = getSelectRichMembers(el);
+        _listboxNode.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: 'Escape',
+          }),
+        );
+        expect(el.opened).to.be.false;
+      });
+      it('closes the listbox with [Tab] key once opened', async () => {
+        const el = await fixture(html` <${hostTag} opened> </${hostTag}> `);
+        // tab can only be caught via keydown
+        const { _listboxNode } = getSelectRichMembers(el);
+        _listboxNode.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: 'Tab',
+          }),
+        );
+        expect(el.opened).to.be.false;
+      });
+      it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
+        const el = await fixture(html`
+          <${hostTag} opened .config=${{
+            trapsKeyboardFocus: true,
+          }}> </${hostTag}>
+        `);
+        // tab can only be caught via keydown
+        const { _listboxNode } = getSelectRichMembers(el);
+        _listboxNode.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: 'Tab',
+          }),
+        );
+        expect(el.opened).to.be.true;
+      });
+    });
+    describe('Mouse navigation', () => {
+      it('opens the listbox via click on invoker', async () => {
+        const el = await fixture(html` <${hostTag}> </${hostTag}> `);
+        expect(el.opened).to.be.false;
+        const { _invokerNode } = getSelectRichMembers(el);
+        _invokerNode.click();
+        await nextFrame(); // reflection of click takes some time
+        expect(el.opened).to.be.true;
+      });
+      it('closes the listbox when an option gets clicked', async () => {
+        const el = await fixture(html`
+          <${hostTag} opened>
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+          </${hostTag}>
+        `);
+        expect(el.opened).to.be.true;
+        el.formElements[0].click();
+        expect(el.opened).to.be.false;
+      });
+    });
+    describe('Keyboard navigation Windows', () => {
+      it('closes the listbox with [Enter] key once opened', async () => {
+        const el = await fixture(html` <${hostTag} opened> </${hostTag}> `);
+        const { _listboxNode } = getSelectRichMembers(el);
+        _listboxNode.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: 'Enter',
+          }),
+        );
+        expect(el.opened).to.be.false;
+      });
+    });
+    describe('Keyboard navigation Mac', () => {
+      it('checks active item and closes the listbox with [Enter] key via click handler once opened', async () => {
+        const el = await fixture(html`
+          <${hostTag} opened interaction-mode="mac">
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _listboxNode } = getSelectRichMembers(el);
+
+        // changes active but not checked
+        el.activeIndex = 1;
+        expect(el.checkedIndex).to.equal(0);
+        _listboxNode.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: 'Enter',
+          }),
+        );
+        expect(el.opened).to.be.false;
+        expect(el.checkedIndex).to.equal(1);
+      });
+      it('opens the listbox with [ArrowUp] key', async () => {
+        const el = await fixture(html`
+          <${hostTag} interaction-mode="mac"> </${hostTag}>
+        `);
+        el.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowUp',
+          }),
+        );
+        await el.updateComplete;
+        expect(el.opened).to.be.true;
+      });
+      it('opens the listbox with [ArrowDown] key', async () => {
+        const el = await fixture(html`
+          <${hostTag} interaction-mode="mac"> </${hostTag}>
+        `);
+        el.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'ArrowDown',
+          }),
+        );
+        await el.updateComplete;
+        expect(el.opened).to.be.true;
+      });
+    });
+    describe('Accessibility', () => {
+      it('has the right references to its inner elements', async () => {
+        const el = await fixture(html`
+          <${hostTag} label="age">
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _invokerNode, _feedbackNode, _labelNode, _helpTextNode } = getSelectRichMembers(el);
+        expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_labelNode.id);
+        expect(_invokerNode.getAttribute('aria-labelledby')).to.contain(_invokerNode.id);
+        expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_helpTextNode.id);
+        expect(_invokerNode.getAttribute('aria-describedby')).to.contain(_feedbackNode.id);
+        expect(_invokerNode.getAttribute('aria-haspopup')).to.equal('listbox');
+      });
+      it('notifies when the listbox is expanded or not', async () => {
+        // smoke test for overlay functionality
+        const el = await fixture(html` <${hostTag}> </${hostTag}> `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(_invokerNode.getAttribute('aria-expanded')).to.equal('false');
+        el.opened = true;
+        await el.updateComplete;
+        await el.updateComplete; // need 2 awaits as overlay.show is an async function
+
+        expect(_invokerNode.getAttribute('aria-expanded')).to.equal('true');
+      });
+    });
+    describe('Use cases', () => {
+      it('keeps showing the selected item after a new item has been added in the selectedIndex position', async () => {
+        const mySelectContainerTagString = defineCE(
+          // @ts-expect-error
+          class extends LitElement {
+            static get properties() {
+              return {
+                colorList: Array,
+              };
+            }
+            constructor() {
+              super();
+              this.colorList = [
+                {
+                  label: 'Red',
+                  value: 'red',
+                  checked: false,
+                },
+                {
+                  label: 'Hotpink',
+                  value: 'hotpink',
+                  checked: true,
+                },
+                {
+                  label: 'Teal',
+                  value: 'teal',
+                  checked: false,
+                },
+              ];
+            }
+            render() {
+              return html`
+                <${hostTag} label="Favorite color" name="color">
+                  ${this.colorList.map(
+                    (colorObj) => html`
+                      <${tagOption}
+                        .modelValue=${{
+                          value: colorObj.value,
+                          checked: colorObj.checked,
+                        }}
+                        >${colorObj.label}</${tagOption}
+                      >
+                    `,
+                  )}
+                </${hostTag}>
+              `;
+            }
+          },
+        );
+        const mySelectContainerTag = unsafeStatic(mySelectContainerTagString);
+        const el = await fixture(html`
+          <${mySelectContainerTag}></${mySelectContainerTag}>
+        `);
+        const selectRich =
+          /** @type {LionSelectRich} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(hostTagString);
+        const { _invokerNode, _listboxNode } = getSelectRichMembers(selectRich);
+        expect(selectRich.checkedIndex).to.equal(1);
+        expect(selectRich.modelValue).to.equal('hotpink');
+        expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
+        const newOption = /** @type {LionOption} */ document.createElement(tagNameOption);
+        newOption.modelValue = {
+          checked: false,
+          value: 'blue',
+        };
+        newOption.textContent = 'Blue';
+        const hotpinkEl = _listboxNode.children[1];
+        hotpinkEl.insertAdjacentElement('beforebegin', newOption);
+        expect(selectRich.checkedIndex).to.equal(2);
+        expect(selectRich.modelValue).to.equal('hotpink');
+        expect(/** @type {LionOption} */ _invokerNode.selectedElement.value).to.equal('hotpink');
+      });
+    });
+    describe('Render from `lit` `cache`', () => {
+      describe('when `lion-option` is set by `.choiceValue` property with and no `checked` attribute', () => {
+        it('should display the second option', async () => {
+          const colours = [
+            {
+              label: 'Red',
+              value: 'red',
+            },
+            {
+              label: 'Blue',
+              value: 'blue',
+            },
+          ];
+
+          /**
+           * Note, inactive tab content is **destroyed** on every tab switch.
+           */
+          class Wrapper extends LitElement {
+            static properties = {
+              ...super.properties,
+              activeTabIndex: {
+                type: Number,
+              },
+            };
+            constructor() {
+              super();
+              this.activeTabIndex = 0;
+            }
+
+            /**
+             * @param {number} index
+             */
+            changeActiveTabIndex(index) {
+              this.activeTabIndex = index;
+            }
+            render() {
+              const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+              return html`
+                <${tagTabs}>
+                  <button
+                    slot="tab"
+                    class="first-button"
+                    @click=${() => changeActiveTabIndexRef(0)}
+                  >
+                    Info
+                  </button>
+                  <p slot="panel">
+                    ${cache(
+                      this.activeTabIndex === 0
+                        ? html`<${hostTag} name="favoriteColor" label="Favorite color">
+                            ${colours.map(
+                              (colour) => html`<${tagOption} .choiceValue="${colour.value}"
+                                  >${colour.label}</${tagOption}
+                                >`,
+                            )}
+                          </${hostTag}>`
+                        : nothing,
+                    )}
+                  </p>
+                  <button
+                    slot="tab"
+                    class="second-button"
+                    @click=${() => changeActiveTabIndexRef(1)}
+                  >
+                    Work
+                  </button>
+                  <p slot="panel">Info page with lots of information about us.</p>
+                </${tagTabs}>
+              `;
+            }
+          }
+          const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
+          const tagString = defineCE(Wrapper);
+          const wrapperTag = unsafeStatic(tagString);
+          const wrapperElement =
+            /** @type {Wrapper} */
+            await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
+          await wrapperElement.updateComplete;
+          const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+          /**
+           * @returns { boolean }
+           */
+          const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+          /**
+           * @returns { string | undefined }
+           */
+          const getSelectedColourLabel = () =>
+            getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+          const getDialog = () =>
+            wrapperElementShadowRoot
+              ?.querySelector(hostTagString)
+              ?.shadowRoot?.querySelector('dialog');
+          const isDialogVisible = () =>
+            // @ts-ignore
+            isElementVisible(getDialog()) &&
+            getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+          await waitUntil(isSelectRichRendered);
+          getInvoker()?.click();
+          await waitUntil(isDialogVisible);
+          // @ts-ignore [dynamic-key-access-in-test]
+          const optionBlue =
+            /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+              tagNameOption,
+            )?.[1];
+          optionBlue?.click();
+          await waitUntil(() => !isDialogVisible());
+          const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+          expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+          getSecondButton()?.click();
+          await waitUntil(() => !isSelectRichRendered());
+          getFirstButton()?.click();
+          await waitUntil(isSelectRichRendered);
+          const selectedColourAfterTabSwitch = getSelectedColourLabel();
+          expect(selectedColourAfterTabSwitch).to.equal('Blue');
+        });
+      });
+      describe('when `lion-option` is set by `.choiceValue` property and `checked` attribute', () => {
+        it('should display the second option', async () => {
+          const colours = [
+            {
+              label: 'Red',
+              value: 'red',
+              checked: true,
+            },
+            {
+              label: 'Blue',
+              value: 'blue',
+              checked: false,
+            },
+          ];
+
+          /**
+           * Note, inactive tab content is **destroyed** on every tab switch.
+           */
+          class Wrapper extends LitElement {
+            static properties = {
+              ...super.properties,
+              activeTabIndex: {
+                type: Number,
+              },
+            };
+            constructor() {
+              super();
+              this.activeTabIndex = 0;
+            }
+
+            /**
+             * @param {number} index
+             */
+            changeActiveTabIndex(index) {
+              this.activeTabIndex = index;
+            }
+            render() {
+              const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+              return html`
+                <${tagTabs}>
+                  <button
+                    slot="tab"
+                    class="first-button"
+                    @click=${() => changeActiveTabIndexRef(0)}
+                  >
+                    Info
+                  </button>
+                  <p slot="panel">
+                    ${cache(
+                      this.activeTabIndex === 0
+                        ? html`<${hostTag} name="favoriteColor" label="Favorite color">
+                            ${colours.map(
+                              (colour) => html`<${tagOption}
+                                  .choiceValue="${colour.value}"
+                                  checked="${colour.checked || nothing}"
+                                  >${colour.label}</${tagOption}
+                                >`,
+                            )}
+                          </${hostTag}>`
+                        : nothing,
+                    )}
+                  </p>
+                  <button
+                    slot="tab"
+                    class="second-button"
+                    @click=${() => changeActiveTabIndexRef(1)}
+                  >
+                    Work
+                  </button>
+                  <p slot="panel">Info page with lots of information about us.</p>
+                </${tagTabs}>
+              `;
+            }
+          }
+          const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
+          const tagString = defineCE(Wrapper);
+          const wrapperTag = unsafeStatic(tagString);
+          const wrapperElement =
+            /** @type {Wrapper} */
+            await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
+          await wrapperElement.updateComplete;
+          const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+          /**
+           * @returns { boolean }
+           */
+          const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+          /**
+           * @returns { string | undefined }
+           */
+          const getSelectedColourLabel = () =>
+            getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+          const getDialog = () =>
+            wrapperElementShadowRoot
+              ?.querySelector(hostTagString)
+              ?.shadowRoot?.querySelector('dialog');
+          const isDialogVisible = () =>
+            // @ts-ignore
+            isElementVisible(getDialog()) &&
+            getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+          await waitUntil(isSelectRichRendered);
+          getInvoker()?.click();
+          await waitUntil(isDialogVisible);
+          // @ts-ignore [dynamic-key-access-in-test]
+          const optionBlue =
+            /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+              tagNameOption,
+            )?.[1];
+          optionBlue?.click();
+          await waitUntil(() => !isDialogVisible());
+          const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+          expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+          getSecondButton()?.click();
+          await waitUntil(() => !isSelectRichRendered());
+          getFirstButton()?.click();
+          await waitUntil(isSelectRichRendered);
+          const selectedColourAfterTabSwitch = getSelectedColourLabel();
+          expect(selectedColourAfterTabSwitch).to.equal('Blue');
+        });
+      });
+      describe('when `lion-option` is set by `.modelValue` property', () => {
+        it('should display the second option', async () => {
+          const colours = [
+            {
+              label: 'Red',
+              value: 'red',
+              checked: true,
+            },
+            {
+              label: 'Blue',
+              value: 'blue',
+              checked: false,
+            },
+          ];
+
+          /**
+           * Note, inactive tab content is **destroyed** on every tab switch.
+           */
+          class Wrapper extends LitElement {
+            static properties = {
+              ...super.properties,
+              activeTabIndex: {
+                type: Number,
+              },
+            };
+            constructor() {
+              super();
+              this.activeTabIndex = 0;
+            }
+
+            /**
+             * @param {number} index
+             */
+            changeActiveTabIndex(index) {
+              this.activeTabIndex = index;
+            }
+            render() {
+              const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+              return html`
+                <${tagTabs}>
+                  <button
+                    slot="tab"
+                    class="first-button"
+                    @click=${() => changeActiveTabIndexRef(0)}
+                  >
+                    Info
+                  </button>
+                  <p slot="panel">
+                    ${cache(
+                      this.activeTabIndex === 0
+                        ? html`<${hostTag} name="favoriteColor" label="Favorite color">
+                            ${colours.map(
+                              (colour) => html`<${tagOption}
+                                  @model-value-changed=${(/** @type {Event} */ ev) => {
+                                    const lionOption = /** @type {LionOption} */ ev.target;
+                                    // eslint-disable-next-line no-param-reassign
+                                    colour.checked = lionOption.modelValue.checked;
+                                  }}
+                                  .modelValue=${{
+                                    value: colour.value,
+                                    checked: colour.checked,
+                                  }}
+                                  >${colour.label}</${tagOption}
+                                >`,
+                            )}
+                          </${hostTag}>`
+                        : nothing,
+                    )}
+                  </p>
+                  <button
+                    slot="tab"
+                    class="second-button"
+                    @click=${() => changeActiveTabIndexRef(1)}
+                  >
+                    Work
+                  </button>
+                  <p slot="panel">Info page with lots of information about us.</p>
+                </${tagTabs}>
+              `;
+            }
+          }
+          const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ _fixture;
+          const tagString = defineCE(Wrapper);
+          const wrapperTag = unsafeStatic(tagString);
+          const wrapperElement =
+            /** @type {Wrapper} */
+            await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`);
+          await wrapperElement.updateComplete;
+          const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+          /**
+           * @returns { HTMLElement | null | undefined }
+           */
+          const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+          /**
+           * @returns { boolean }
+           */
+          const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+          /**
+           * @returns { string | undefined }
+           */
+          const getSelectedColourLabel = () =>
+            getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+          const getDialog = () =>
+            wrapperElementShadowRoot
+              ?.querySelector(hostTagString)
+              ?.shadowRoot?.querySelector('dialog');
+          const isDialogVisible = () =>
+            // @ts-ignore
+            isElementVisible(getDialog()) &&
+            getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+          await waitUntil(isSelectRichRendered);
+          getInvoker()?.click();
+          await waitUntil(isDialogVisible);
+          // @ts-ignore [dynamic-key-access-in-test]
+          const optionBlue =
+            /** @type { HTMLElement | undefined } */ wrapperElementShadowRoot?.querySelectorAll(
+              tagNameOption,
+            )?.[1];
+          optionBlue?.click();
+          await waitUntil(() => !isDialogVisible());
+          const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+          expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+          getSecondButton()?.click();
+          await waitUntil(() => !isSelectRichRendered());
+          getFirstButton()?.click();
+          await waitUntil(isSelectRichRendered);
+          const selectedColourAfterTabSwitch = getSelectedColourLabel();
+          expect(selectedColourAfterTabSwitch).to.equal('Blue');
+        });
+      });
+    });
+    describe('Teardown', () => {
+      it('does not throw when tearing down before the overlay controller is set up', () => {
+        const el = /** @type {LionSelectRich} */ document.createElement(hostTagString);
+
+        // @ts-expect-error [allow-private] in tests
+        expect(() => el._teardownOverlayCtrl()).not.to.throw();
+      });
+      it('correctly removes event listeners when disconnected from dom', async () => {
+        const el = await fixture(html`
+          <${hostTag} label="age">
+            <${tagOption} .choiceValue=${10}>Item 1</${tagOption}>
+            <${tagOption} .choiceValue=${20}>Item 2</${tagOption}>
+          </${hostTag}>
+        `);
+        const { _overlayCtrl } = getSelectRichMembers(el);
+        const eventRemoveSpy = sinon.spy(_overlayCtrl, 'removeEventListener');
+        el.parentNode?.removeChild(el);
+        expect(eventRemoveSpy.callCount).to.equal(0);
+        await el.updateComplete;
+        expect(eventRemoveSpy.callCount).to.equal(0);
+        await el.updateComplete;
+        const hasOneInstanceFor = (
+          /** @type {string} */ eventName,
+          /** @type {any[][]} */ eventsToSearch,
+          /** @type {string} */ methodToRemove,
+        ) =>
+          Boolean(
+            eventsToSearch.filter(
+              ([eventToSearch, methodToSearch]) =>
+                eventToSearch === eventName && methodToSearch === methodToRemove,
+            ).length,
+          );
+
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__overlayOnShow)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__overlayBeforeShow)).to.be
+          .true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__overlayOnHide)).to.be.true;
+      });
+    });
+    describe('Subclassers', () => {
+      it('allows to override the type of overlay', async () => {
+        const mySelectTagString = defineCE(
+          class MySelect extends LionSelectRich {
+            // @ts-expect-error
+            _defineOverlay({ invokerNode, contentNode, contentWrapperNode }) {
+              const ctrl = new OverlayController({
+                placementMode: 'global',
+                contentNode,
+                contentWrapperNode,
+                invokerNode,
+              });
+              this.addEventListener('switch', () => {
+                ctrl.updateConfig({
+                  placementMode: 'local',
+                });
+              });
+              return ctrl;
+            }
+          },
+        );
+        const mySelectTag = unsafeStatic(mySelectTagString);
+        const el = await fixture(html`
+          <${mySelectTag} label="Favorite color" name="color">
+
+              ${Array(2).map(
+                (_, i) => html`
+                  <${tagOption} .modelValue="${{
+                    value: i,
+                    checked: false,
+                  }}"
+                    >value ${i}</${tagOption}
+                  >
+                `,
+              )}
+
+          </${mySelectTag}>
+        `);
+        await el.updateComplete;
+        const { _overlayCtrl } = getSelectRichMembers(el);
+        expect(_overlayCtrl.placementMode).to.equal('global');
+        el.dispatchEvent(new Event('switch'));
+        expect(_overlayCtrl.placementMode).to.equal('local');
+      });
+      it('supports putting a placeholder template when there is no default selection initially', async () => {
+        const invokerTagName = defineCE(
+          class extends LionSelectInvoker {
+            _noSelectionTemplate() {
+              return html` Please select an option.. `;
+            }
+          },
+        );
+        // const invokerTag = unsafeStatic(invokerTagName);
+
+        const selectTagName = defineCE(
+          class extends LionSelectRich {
+            get slots() {
+              return {
+                ...super.slots,
+                invoker: () => document.createElement(invokerTagName),
+              };
+            }
+          },
+        );
+        const selectTag = unsafeStatic(selectTagName);
+        const el = await fixture(html`
+          <${selectTag} id="color" name="color" label="Favorite color" has-no-default-selected>
+
+              <${tagOption} .choiceValue=${'red'}>Red</${tagOption}>
+              <${tagOption} .choiceValue=${'hotpink'} disabled>Hotpink</${tagOption}>
+              <${tagOption} .choiceValue=${'teal'}>Teal</${tagOption}>
+
+          </${selectTag}>
+        `);
+        const { _invokerNode } = getSelectRichMembers(el);
+        expect(
+          /** @type {ShadowRoot} */ _invokerNode.shadowRoot.getElementById('content-wrapper'),
+        ).dom.to.equal(`<div id="content-wrapper">Please select an option..</div>`);
+        expect(el.modelValue).to.equal('');
+      });
+    });
+  });
+}