@lion/ui 0.22.0 → 0.24.0

package/components/listbox/src/ListboxMixin.js

@@ -6,9 +6,21 @@ import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionOptions } from './LionOptions.js';
 import { moveUserProvidedDefaultSlottablesToTarget } from '../../core/src/SlotMixin.js';
 
-// TODO: extract ListNavigationWithActiveDescendantMixin that can be reused in [role="menu"]
-// having children with [role="menuitem|menuitemcheckbox|menuitemradio|option"] and
-// list items that can be found via MutationObserver or registration (.formElements)
+// TODO: make this mixin reuse the interactive-list implementation instead of its own copy of the
+// navigation logic. The extraction this TODO used to ask for ("ListNavigationWithActiveDescendantMixin
+// that can be reused in [role="menu"]") now exists as `InteractiveListMixin`, the base of the menu
+// components (packages/ui/components/menu). Rebasing this mixin on it is also what makes the next step
+// possible, without breaking consumers in between:
+//   - rename the api to the focusgroup/platform vocabulary the menu already speaks:
+//     `orientation` ('vertical'/'horizontal') -> `axis` ('block'/'inline'),
+//     `rotateKeyboardNavigation` -> `wrap`, `multipleChoice` -> `multiple`
+//   - map the new axis values to the ARIA ones where `aria-orientation` is set (block -> vertical,
+//     inline -> horizontal); ARIA does not know the focusgroup tokens
+//   - keep the old properties and attributes working in the same release: add the new property with
+//     its own attribute, turn the old one into a deprecated alias that delegates to it (with a
+//     dev-only deprecation warning) and mark it `@deprecated` in ListboxMixinTypes, then remove the
+//     aliases in the next major
+//   - `hasNoDefaultSelected` and `selectionFollowsFocus` can stay: the menu uses those names too
 
 /**
  * @typedef {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue} HTMLElementWithValue
@@ -27,38 +39,37 @@ import { moveUserProvidedDefaultSlottablesToTarget } from '../../core/src/SlotMi
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const ListboxMixinImplementation = /** @type {ListboxMixin} */ (superclass =>
-  class ListboxMixin extends FormControlMixin(
-    ScopedElementsMixin(ChoiceGroupMixin(SlotMixin(FormRegistrarMixin(superclass)))),
-  ) {
-    /** @type {any} */
-    static get properties() {
-      return {
-        orientation: String,
-        selectionFollowsFocus: {
-          type: Boolean,
-          attribute: 'selection-follows-focus',
-        },
-        rotateKeyboardNavigation: {
-          type: Boolean,
-          attribute: 'rotate-keyboard-navigation',
-        },
-        hasNoDefaultSelected: {
-          type: Boolean,
-          reflect: true,
-          attribute: 'has-no-default-selected',
-        },
-        _noTypeAhead: {
-          type: Boolean,
-        },
-      };
-    }
-
-    static get styles() {
-      return [
-        // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
-        ...(super.styles || []),
-        css`
+const ListboxMixinImplementation = /** @type {ListboxMixin} */superclass => class ListboxMixin extends FormControlMixin(ScopedElementsMixin(ChoiceGroupMixin(SlotMixin(FormRegistrarMixin(superclass))))) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      // TODO: rename to `axis` with the values 'block'|'inline' (see the TODO at the top of this
+      // file); keep `orientation`/`orientation="vertical"|"horizontal"` working as a deprecated alias
+      orientation: String,
+      selectionFollowsFocus: {
+        type: Boolean,
+        attribute: 'selection-follows-focus'
+      },
+      // TODO: rename to `wrap` (see the TODO at the top of this file); keep the old property and
+      // attribute working as a deprecated alias
+      rotateKeyboardNavigation: {
+        type: Boolean,
+        attribute: 'rotate-keyboard-navigation'
+      },
+      hasNoDefaultSelected: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'has-no-default-selected'
+      },
+      _noTypeAhead: {
+        type: Boolean
+      }
+    };
+  }
+  static get styles() {
+    return [
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
+    ...(super.styles || []), css`
           :host {
             display: block;
           }
@@ -74,493 +85,479 @@ const ListboxMixinImplementation = /** @type {ListboxMixin} */ (superclass =>
           :host([orientation='horizontal']) ::slotted([role='listbox']) {
             display: flex;
           }
-        `,
-      ];
-    }
-
-    /**
-     * @override FormControlMixin
-     * @protected
-     */
-    // eslint-disable-next-line
-    _inputGroupInputTemplate() {
-      return html`
+        `];
+  }
+
+  /**
+   * @override FormControlMixin
+   * @protected
+   */
+  // eslint-disable-next-line
+  _inputGroupInputTemplate() {
+    return html`
         <div class="input-group__input">
           <slot name="input"></slot>
           <slot id="options-outlet"></slot>
         </div>
       `;
-    }
-
-    static get scopedElements() {
-      return {
-        // @ts-expect-error [external] fix types scopedElements
-        ...super.scopedElements,
-        'lion-options': LionOptions,
-      };
-    }
-
-    get slots() {
-      return {
-        ...super.slots,
-        input: () => {
-          const lionOptions = /** @type {import('./LionOptions.js').LionOptions} */ (
-            this.createScopedElement('lion-options')
-          );
-          lionOptions.setAttribute('data-tag-name', 'lion-options');
-          lionOptions.registrationTarget = this;
-          return lionOptions;
-        },
-      };
-    }
-
-    /**
-     * @configure FormControlMixin
+  }
+  static get scopedElements() {
+    return {
+      // @ts-expect-error [external] fix types scopedElements
+      ...super.scopedElements,
+      'lion-options': LionOptions
+    };
+  }
+  get slots() {
+    return {
+      ...super.slots,
+      input: () => {
+        const lionOptions = /** @type {import('./LionOptions.js').LionOptions} */
+        this.createScopedElement('lion-options');
+        lionOptions.setAttribute('data-tag-name', 'lion-options');
+        lionOptions.registrationTarget = this;
+        return lionOptions;
+      }
+    };
+  }
+
+  /**
+   * @configure FormControlMixin
+   */
+  get _inputNode() {
+    return /** @type {HTMLElementWithValue} */this.querySelector('[slot="input"]');
+  }
+
+  /**
+   * @overridable
+   */
+  get _listboxNode() {
+    // Cast to unknown first, since HTMLElementWithValue is not compatible with LionOptions
+    return /** @type {LionOptions} */ /** @type {unknown} */this._inputNode;
+  }
+
+  /**
+   * @overridable
+   * @type {HTMLElement}
+   */
+  get _listboxActiveDescendantNode() {
+    return /** @type {HTMLElement} */this._listboxNode.querySelector(`#${this._listboxActiveDescendant}`);
+  }
+
+  /**
+   * @overridable
+   * @type {HTMLElement}
+   */
+  get _listboxSlot() {
+    return /** @type {HTMLElement} */ /** @type {ShadowRoot} */this.shadowRoot.querySelector('slot[name=input]');
+  }
+
+  /**
+   * @overridable
+   * @type {HTMLElement}
+   */
+  get _scrollTargetNode() {
+    return this._listboxNode;
+  }
+
+  /**
+   * @overridable
+   * @type {HTMLElement}
+   */
+  get _activeDescendantOwnerNode() {
+    return this._listboxNode;
+  }
+  get activeIndex() {
+    return this.formElements.findIndex(el => el.active === true);
+  }
+  set activeIndex(index) {
+    if (this.formElements[index]) {
+      const el = this.formElements[index];
+      this.__setChildActive(el);
+    } else {
+      this.__setChildActive(null);
+    }
+  }
+
+  /**
+   * @type {number | number[]}
+   */
+  get checkedIndex() {
+    const options = this.formElements;
+    if (!this.multipleChoice) {
+      return options.indexOf(options.find(o => o.checked));
+    }
+    return options.filter(o => o.checked).map(o => options.indexOf(o));
+  }
+
+  /**
+   * @deprecated
+   * This setter exists for backwards compatibility of single choice groups.
+   * A setter api would be confusing for a multipleChoice group. Use `setCheckedIndex` instead.
+   * @param {number|number[]} index
+   */
+  set checkedIndex(index) {
+    this.setCheckedIndex(index);
+  }
+  constructor() {
+    super();
+    /**
+     * When setting this to true, on initial render, no option will be selected.
+     * It is advisable to override `_noSelectionTemplate` method in the select-invoker
+     * to render some kind of placeholder initially
+     */
+    this.hasNoDefaultSelected = false;
+    /**
+     * Informs screen reader and affects keyboard navigation.
+     * By default 'vertical'
+     */
+    this.orientation = 'vertical';
+    /**
+     * Will give first option active state when navigated to the next option from
+     * last option.
+     */
+    this.rotateKeyboardNavigation = false;
+    /**
+     * When true, will synchronize activedescendant and selected element on
+     * arrow key navigation.
+     * This behavior can usually be seen on <select> on the Windows platform.
+     * Note that this behavior cannot be used when multiple-choice is true.
+     * See: https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+     */
+    this.selectionFollowsFocus = false;
+    /**
+     * When false, a user can type on which the focus will jump to the matching option
+     */
+    this._noTypeAhead = false;
+    /**
+     * The pending char sequence that will set active list item
+     * @type {number}
+     * @protected
      */
-    get _inputNode() {
-      return /** @type {HTMLElementWithValue} */ (this.querySelector('[slot="input"]'));
-    }
-
+    this._typeAheadTimeout = 1000;
     /**
-     * @overridable
+     * @type {number | null}
+     * @protected
      */
-    get _listboxNode() {
-      // Cast to unknown first, since HTMLElementWithValue is not compatible with LionOptions
-      return /** @type {LionOptions} */ (/** @type {unknown} */ (this._inputNode));
-    }
-
+    this._listboxActiveDescendant = null;
+    /** @private */
+    this.__hasInitialSelectedFormElement = false;
     /**
-     * @overridable
-     * @type {HTMLElement}
+     * @type {'fieldset' | 'child' | 'choice-group'}
+     * @protected
      */
-    get _listboxActiveDescendantNode() {
-      return /** @type {HTMLElement} */ (
-        this._listboxNode.querySelector(`#${this._listboxActiveDescendant}`)
-      );
-    }
-
+    this._repropagationRole = 'choice-group'; // configures FormControlMixin
     /**
-     * @overridable
-     * @type {HTMLElement}
+     * When listbox is coupled to a textbox (in case we are dealing with a combobox),
+     * spaces should not select an element (they need to be put in the textbox)
+     * @protected
      */
-    get _listboxSlot() {
-      return /** @type {HTMLElement} */ (
-        /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('slot[name=input]')
-      );
-    }
+    this._listboxReceivesNoFocus = false;
 
     /**
-     * @overridable
-     * @type {HTMLElement}
+     * @type {string | string[] | undefined}
+     * @protected
      */
-    get _scrollTargetNode() {
-      return this._listboxNode;
-    }
+    this._oldModelValue = undefined;
 
     /**
-     * @overridable
-     * @type {HTMLElement}
+     * @type {EventListener}
+     * @protected
      */
-    get _activeDescendantOwnerNode() {
-      return this._listboxNode;
-    }
-
-    get activeIndex() {
-      return this.formElements.findIndex(el => el.active === true);
-    }
-
-    set activeIndex(index) {
-      if (this.formElements[index]) {
-        const el = this.formElements[index];
-        this.__setChildActive(el);
-      } else {
-        this.__setChildActive(null);
-      }
-    }
-
+    this._listboxOnKeyDown = this._listboxOnKeyDown.bind(this);
     /**
-     * @type {number | number[]}
+     * @type {EventListener}
+     * @protected
      */
-    get checkedIndex() {
-      const options = this.formElements;
-      if (!this.multipleChoice) {
-        return options.indexOf(options.find(o => o.checked));
-      }
-      return options.filter(o => o.checked).map(o => options.indexOf(o));
-    }
-
+    this._listboxOnClick = this._listboxOnClick.bind(this);
     /**
-     * @deprecated
-     * This setter exists for backwards compatibility of single choice groups.
-     * A setter api would be confusing for a multipleChoice group. Use `setCheckedIndex` instead.
-     * @param {number|number[]} index
+     * @type {EventListener}
+     * @protected
      */
-    set checkedIndex(index) {
-      this.setCheckedIndex(index);
-    }
-
-    constructor() {
-      super();
-      /**
-       * When setting this to true, on initial render, no option will be selected.
-       * It is advisable to override `_noSelectionTemplate` method in the select-invoker
-       * to render some kind of placeholder initially
-       */
-      this.hasNoDefaultSelected = false;
-      /**
-       * Informs screen reader and affects keyboard navigation.
-       * By default 'vertical'
-       */
-      this.orientation = 'vertical';
-      /**
-       * Will give first option active state when navigated to the next option from
-       * last option.
-       */
-      this.rotateKeyboardNavigation = false;
-      /**
-       * When true, will synchronize activedescendant and selected element on
-       * arrow key navigation.
-       * This behavior can usually be seen on <select> on the Windows platform.
-       * Note that this behavior cannot be used when multiple-choice is true.
-       * See: https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
-       */
-      this.selectionFollowsFocus = false;
-      /**
-       * When false, a user can type on which the focus will jump to the matching option
-       */
-      this._noTypeAhead = false;
-      /**
-       * The pending char sequence that will set active list item
-       * @type {number}
-       * @protected
-       */
-      this._typeAheadTimeout = 1000;
-      /**
-       * @type {number | null}
-       * @protected
-       */
-      this._listboxActiveDescendant = null;
-      /** @private */
-      this.__hasInitialSelectedFormElement = false;
-      /**
-       * @type {'fieldset' | 'child' | 'choice-group'}
-       * @protected
-       */
-      this._repropagationRole = 'choice-group'; // configures FormControlMixin
-      /**
-       * When listbox is coupled to a textbox (in case we are dealing with a combobox),
-       * spaces should not select an element (they need to be put in the textbox)
-       * @protected
-       */
-      this._listboxReceivesNoFocus = false;
-
-      /**
-       * @type {string | string[] | undefined}
-       * @protected
-       */
-      this._oldModelValue = undefined;
-
-      /**
-       * @type {EventListener}
-       * @protected
-       */
-      this._listboxOnKeyDown = this._listboxOnKeyDown.bind(this);
-      /**
-       * @type {EventListener}
-       * @protected
-       */
-      this._listboxOnClick = this._listboxOnClick.bind(this);
-      /**
-       * @type {EventListener}
-       * @protected
-       */
-      this._listboxOnKeyUp = this._listboxOnKeyUp.bind(this);
-      /**
-       * @type {EventListener}
-       * @protected
-       */
-      this._onChildActiveChanged = this._onChildActiveChanged.bind(this);
-      /**
-       * @type {EventListener}
-       * @private
-       */
-      this.__proxyChildModelValueChanged = this.__proxyChildModelValueChanged.bind(this);
-      /**
-       * @type {EventListener}
-       * @private
-       */
-      this.__preventScrollingWithArrowKeys = this.__preventScrollingWithArrowKeys.bind(this);
-      /**
-       * @type {string[]}
-       * @private
-       */
-      this.__typedChars = [];
-    }
-
-    connectedCallback() {
-      if (this._listboxNode) {
-        // if there is none yet, it will be supplied via 'get slots'
-        this._listboxNode.registrationTarget = this;
-      }
-      super.connectedCallback();
-      this._setupListboxNode();
-      this.__setupEventListeners();
-
-      // TODO: should this be handled at a more generic level?
-      this.registrationComplete.then(() => {
-        this.__initInteractionStates();
-      });
-    }
-
+    this._listboxOnKeyUp = this._listboxOnKeyUp.bind(this);
     /**
-     * @param {import('lit').PropertyValues } changedProperties
+     * @type {EventListener}
+     * @protected
      */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
-      this.__moveOptionsToListboxNode();
-      this.registrationComplete.then(() => {
-        /** @type {any[]} */
-        this._initialModelValue = this.modelValue;
-      });
-
-      // Every time new options are rendered from outside context, notify our parents
-      const observer = new MutationObserver(() => {
-        this._onListboxContentChanged();
-      });
-      observer.observe(this._listboxNode, { childList: true });
-    }
-
+    this._onChildActiveChanged = this._onChildActiveChanged.bind(this);
     /**
-     * @param {import('lit').PropertyValues } changedProperties
+     * @type {EventListener}
+     * @private
      */
-    updated(changedProperties) {
-      super.updated(changedProperties);
-
-      if (changedProperties.has('disabled')) {
-        if (this.disabled) {
-          this.__requestOptionsToBeDisabled();
-        } else {
-          this.__retractRequestOptionsToBeDisabled();
-        }
-      }
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this._teardownListboxNode();
-      this.__teardownEventListeners();
-    }
-
+    this.__proxyChildModelValueChanged = this.__proxyChildModelValueChanged.bind(this);
     /**
-     * If an array is passed for multiple-choice, it will check the indexes in array, and uncheck the rest
-     * If a number is passed, the item with the passed index is checked without unchecking others
-     * For single choice, __onChildCheckedChanged we ensure that we uncheck siblings
-     * @param {number|number[]} index
+     * @type {EventListener}
+     * @private
      */
-    setCheckedIndex(index) {
-      if (this.multipleChoice && Array.isArray(index)) {
-        this._uncheckChildren(this.formElements.filter(i => i === index));
-        index.forEach(i => {
-          if (this.formElements[i]) {
-            this.formElements[i].checked = !this.formElements[i].checked;
-          }
-        });
-        return;
-      }
-
-      if (typeof index === 'number') {
-        if (index === -1) {
-          this._uncheckChildren();
-        }
-        if (this.formElements[index]) {
-          if (this.formElements[index].disabled) {
-            this._uncheckChildren();
-          } else if (this.multipleChoice) {
-            this.formElements[index].checked = !this.formElements[index].checked;
-          } else {
-            this.formElements[index].checked = true;
-          }
-        }
-      }
-    }
-
+    this.__preventScrollingWithArrowKeys = this.__preventScrollingWithArrowKeys.bind(this);
     /**
-     * @enhance FormRegistrarMixin: make sure children have specific default states when added
-     * @param {FormControlHost & LionOption} child
-     * @param {Number} indexToInsertAt
+     * @type {string[]}
+     * @private
      */
-    addFormElement(child, indexToInsertAt) {
-      super.addFormElement(/** @type {FormControl} */ child, indexToInsertAt);
-      // we need to adjust the elements being registered
-      /* eslint-disable no-param-reassign */
-      child.id = child.id || `${this.localName}-option-${uuid()}`;
-
+    this.__typedChars = [];
+  }
+  connectedCallback() {
+    if (this._listboxNode) {
+      // if there is none yet, it will be supplied via 'get slots'
+      this._listboxNode.registrationTarget = this;
+    }
+    super.connectedCallback();
+    this._setupListboxNode();
+    this.__setupEventListeners();
+
+    // TODO: should this be handled at a more generic level?
+    this.registrationComplete.then(() => {
+      this.__initInteractionStates();
+    });
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.__moveOptionsToListboxNode();
+    this.registrationComplete.then(() => {
+      /** @type {any[]} */
+      this._initialModelValue = this.modelValue;
+    });
+
+    // Every time new options are rendered from outside context, notify our parents
+    const observer = new MutationObserver(() => {
+      this._onListboxContentChanged();
+    });
+    observer.observe(this._listboxNode, {
+      childList: true
+    });
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
       if (this.disabled) {
-        child.makeRequestToBeDisabled();
+        this.__requestOptionsToBeDisabled();
+      } else {
+        this.__retractRequestOptionsToBeDisabled();
       }
-
-      // TODO: small perf improvement could be made if logic below would be scheduled to next update,
-      // so it occurs once for all options
-      this.__setAttributeForAllFormElements('aria-setsize', this.formElements.length);
-      this.formElements.forEach((el, idx) => {
-        el.setAttribute('aria-posinset', idx + 1);
-      });
-
-      this.__proxyChildModelValueChanged(
-        /** @type {CustomEvent & { target: FormControlHost & LionOption; }} */ ({ target: child }),
-      );
-      this.resetInteractionState();
-      /* eslint-enable no-param-reassign */
-    }
-
-    resetInteractionState() {
-      super.resetInteractionState();
-      this.submitted = false;
     }
-
-    reset() {
-      this.modelValue = this._initialModelValue;
-      this.activeIndex = -1;
-      this.resetInteractionState();
-    }
-
-    clear() {
-      super.clear();
-      this.setCheckedIndex(-1);
-    }
-
-    /**
-     * @param {KeyboardEvent} ev
-     * @param {{setAsChecked:boolean}} options
-     * @protected
-     */
-    _handleTypeAhead(ev, { setAsChecked }) {
-      const { key, code } = ev;
-
-      if (code.startsWith('Key') || code.startsWith('Digit') || code.startsWith('Numpad')) {
-        ev.preventDefault();
-        this.__typedChars.push(key);
-        const chars = this.__typedChars.join('');
-        const matchedItemIndex =
-          // TODO: consider making this condition overridable for Subclassers by extracting it into protected method
-          this.formElements.findIndex(el => el.modelValue.value.toLowerCase().startsWith(chars));
-        if (matchedItemIndex >= 0) {
-          if (setAsChecked) {
-            this.setCheckedIndex(matchedItemIndex);
-          }
-          this.activeIndex = matchedItemIndex;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownListboxNode();
+    this.__teardownEventListeners();
+  }
+
+  /**
+   * If an array is passed for multiple-choice, it will check the indexes in array, and uncheck the rest
+   * If a number is passed, the item with the passed index is checked without unchecking others
+   * For single choice, __onChildCheckedChanged we ensure that we uncheck siblings
+   * @param {number|number[]} index
+   */
+  setCheckedIndex(index) {
+    if (this.multipleChoice && Array.isArray(index)) {
+      this._uncheckChildren(this.formElements.filter(i => i === index));
+      index.forEach(i => {
+        if (this.formElements[i]) {
+          this.formElements[i].checked = !this.formElements[i].checked;
         }
-        if (this.__pendingTypeAheadTimeout) {
-          // Prevent that pending timeouts 'intersect' with new 'typeahead sessions'
-          // @ts-ignore
-          window.clearTimeout(this.__pendingTypeAheadTimeout);
-        }
-        this.__pendingTypeAheadTimeout = setTimeout(() => {
-          // schedule a timeout to reset __typedChars
-          this.__typedChars = [];
-        }, this._typeAheadTimeout);
-      }
-    }
-
-    /**
-     * @override ChoiceGroupMixin: in the select disabled options are still going to a possible
-     * value, for example when prefilling or programmatically setting it.
-     * @protected
-     */
-    _getCheckedElements() {
-      return this.formElements.filter(el => el.checked);
+      });
+      return;
     }
-
-    /** @protected */
-    _setupListboxNode() {
-      if (this._listboxNode) {
-        this.__setupListboxNodeInteractions();
-      } else if (this._listboxSlot) {
-        /**
-         * For ShadyDom the listboxNode is available right from the start so we can add those events
-         * immediately.
-         * For native ShadowDom the select gets rendered before the listboxNode is available so we
-         * will add an event to the slotchange and add the events once available.
-         */
-        this._listboxSlot.addEventListener('slotchange', () => {
-          this.__setupListboxNodeInteractions();
-        });
+    if (typeof index === 'number') {
+      if (index === -1) {
+        this._uncheckChildren();
       }
-    }
-
-    /**
-     * A Subclasser can perform additional logic whenever the elements inside the listbox are
-     * updated. For instance, when a combobox does server side autocomplete, we want to
-     * match highlighted parts client side.
-     * @configurable
-     */
-    // eslint-disable-next-line class-methods-use-this
-    _onListboxContentChanged() {}
-
-    _teardownListboxNode() {
-      if (this._listboxNode) {
-        this._listboxNode.removeEventListener('keydown', this._listboxOnKeyDown);
-        this._listboxNode.removeEventListener('click', this._listboxOnClick);
-        this._listboxNode.removeEventListener('keyup', this._listboxOnKeyUp);
+      if (this.formElements[index]) {
+        if (this.formElements[index].disabled) {
+          this._uncheckChildren();
+        } else if (this.multipleChoice) {
+          this.formElements[index].checked = !this.formElements[index].checked;
+        } else {
+          this.formElements[index].checked = true;
+        }
       }
     }
-
-    /**
-     * @param {number} currentIndex
-     * @param {number} [offset=1]
-     * @protected
-     */
-    _getNextEnabledOption(currentIndex, offset = 1) {
-      return this.__getEnabledOption(currentIndex, offset);
-    }
-
-    /**
-     * @param {number} currentIndex
-     * @param {number} [offset=-1]
-     * @protected
-     */
-    _getPreviousEnabledOption(currentIndex, offset = -1) {
-      return this.__getEnabledOption(currentIndex, offset);
-    }
-
-    /**
-     * @overridable
-     * @param {Event & { target: LionOption }} ev
-     * @protected
-     */
-    // eslint-disable-next-line no-unused-vars, class-methods-use-this
-    _onChildActiveChanged({ target }) {
-      if (target.active === true) {
-        this.__setChildActive(target);
+  }
+
+  /**
+   * @enhance FormRegistrarMixin: make sure children have specific default states when added
+   * @param {FormControlHost & LionOption} child
+   * @param {Number} indexToInsertAt
+   */
+  addFormElement(child, indexToInsertAt) {
+    super.addFormElement(/** @type {FormControl} */child, indexToInsertAt);
+    // we need to adjust the elements being registered
+    /* eslint-disable no-param-reassign */
+    child.id = child.id || `${this.localName}-option-${uuid()}`;
+    if (this.disabled) {
+      child.makeRequestToBeDisabled();
+    }
+
+    // TODO: small perf improvement could be made if logic below would be scheduled to next update,
+    // so it occurs once for all options
+    this.__setAttributeForAllFormElements('aria-setsize', this.formElements.length);
+    this.formElements.forEach((el, idx) => {
+      el.setAttribute('aria-posinset', idx + 1);
+    });
+    this.__proxyChildModelValueChanged(/** @type {CustomEvent & { target: FormControlHost & LionOption; }} */{
+      target: child
+    });
+    this.resetInteractionState();
+    /* eslint-enable no-param-reassign */
+  }
+  resetInteractionState() {
+    super.resetInteractionState();
+    this.submitted = false;
+  }
+  reset() {
+    this.modelValue = this._initialModelValue;
+    this.activeIndex = -1;
+    this.resetInteractionState();
+  }
+  clear() {
+    super.clear();
+    this.setCheckedIndex(-1);
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   * @param {{setAsChecked:boolean}} options
+   * @protected
+   */
+  _handleTypeAhead(ev, {
+    setAsChecked
+  }) {
+    const {
+      key,
+      code
+    } = ev;
+    if (code.startsWith('Key') || code.startsWith('Digit') || code.startsWith('Numpad')) {
+      ev.preventDefault();
+      this.__typedChars.push(key);
+      const chars = this.__typedChars.join('');
+      const matchedItemIndex =
+      // TODO: consider making this condition overridable for Subclassers by extracting it into protected method
+      this.formElements.findIndex(el => el.modelValue.value.toLowerCase().startsWith(chars));
+      if (matchedItemIndex >= 0) {
+        if (setAsChecked) {
+          this.setCheckedIndex(matchedItemIndex);
+        }
+        this.activeIndex = matchedItemIndex;
       }
-    }
-
-    /**
-     * @desc
-     * Handle various keyboard controls; UP/DOWN will shift focus; SPACE selects
-     * an item.
-     *
-     * @param {KeyboardEvent} ev - the keydown event object
-     * @protected
-     */
-    _listboxOnKeyDown(ev) {
-      if (this.disabled) {
-        return;
+      if (this.__pendingTypeAheadTimeout) {
+        // Prevent that pending timeouts 'intersect' with new 'typeahead sessions'
+        // @ts-ignore
+        window.clearTimeout(this.__pendingTypeAheadTimeout);
       }
-
-      this._isHandlingUserInput = true;
-      setTimeout(() => {
-        // Since we can't control when subclasses are done handling keyboard input, we
-        // schedule a timeout to reset _isHandlingUserInput
-        this._isHandlingUserInput = false;
+      this.__pendingTypeAheadTimeout = setTimeout(() => {
+        // schedule a timeout to reset __typedChars
+        this.__typedChars = [];
+      }, this._typeAheadTimeout);
+    }
+  }
+
+  /**
+   * @override ChoiceGroupMixin: in the select disabled options are still going to a possible
+   * value, for example when prefilling or programmatically setting it.
+   * @protected
+   */
+  _getCheckedElements() {
+    return this.formElements.filter(el => el.checked);
+  }
+
+  /** @protected */
+  _setupListboxNode() {
+    if (this._listboxNode) {
+      this.__setupListboxNodeInteractions();
+    } else if (this._listboxSlot) {
+      /**
+       * For ShadyDom the listboxNode is available right from the start so we can add those events
+       * immediately.
+       * For native ShadowDom the select gets rendered before the listboxNode is available so we
+       * will add an event to the slotchange and add the events once available.
+       */
+      this._listboxSlot.addEventListener('slotchange', () => {
+        this.__setupListboxNodeInteractions();
       });
-
-      const { key } = ev;
-
-      switch (key) {
-        case ' ':
-        case 'Enter': {
+    }
+  }
+
+  /**
+   * A Subclasser can perform additional logic whenever the elements inside the listbox are
+   * updated. For instance, when a combobox does server side autocomplete, we want to
+   * match highlighted parts client side.
+   * @configurable
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _onListboxContentChanged() {}
+  _teardownListboxNode() {
+    if (this._listboxNode) {
+      this._listboxNode.removeEventListener('keydown', this._listboxOnKeyDown);
+      this._listboxNode.removeEventListener('click', this._listboxOnClick);
+      this._listboxNode.removeEventListener('keyup', this._listboxOnKeyUp);
+    }
+  }
+
+  /**
+   * @param {number} currentIndex
+   * @param {number} [offset=1]
+   * @protected
+   */
+  _getNextEnabledOption(currentIndex, offset = 1) {
+    return this.__getEnabledOption(currentIndex, offset);
+  }
+
+  /**
+   * @param {number} currentIndex
+   * @param {number} [offset=-1]
+   * @protected
+   */
+  _getPreviousEnabledOption(currentIndex, offset = -1) {
+    return this.__getEnabledOption(currentIndex, offset);
+  }
+
+  /**
+   * @overridable
+   * @param {Event & { target: LionOption }} ev
+   * @protected
+   */
+  // eslint-disable-next-line no-unused-vars, class-methods-use-this
+  _onChildActiveChanged({
+    target
+  }) {
+    if (target.active === true) {
+      this.__setChildActive(target);
+    }
+  }
+
+  /**
+   * @desc
+   * Handle various keyboard controls; UP/DOWN will shift focus; SPACE selects
+   * an item.
+   *
+   * @param {KeyboardEvent} ev - the keydown event object
+   * @protected
+   */
+  _listboxOnKeyDown(ev) {
+    if (this.disabled) {
+      return;
+    }
+    this._isHandlingUserInput = true;
+    setTimeout(() => {
+      // Since we can't control when subclasses are done handling keyboard input, we
+      // schedule a timeout to reset _isHandlingUserInput
+      this._isHandlingUserInput = false;
+    });
+    const {
+      key
+    } = ev;
+    switch (key) {
+      case ' ':
+      case 'Enter':
+        {
           if (key === ' ' && this._listboxReceivesNoFocus) {
             return;
           }
@@ -570,368 +567,353 @@ const ListboxMixinImplementation = /** @type {ListboxMixin} */ (superclass =>
           if (!this.formElements[this.activeIndex]) {
             return;
           }
-
           if (this.formElements[this.activeIndex].disabled) {
             return;
           }
-
           if (this.formElements[this.activeIndex].href) {
             this.formElements[this.activeIndex].click();
           }
-
           this.setCheckedIndex(this.activeIndex);
           break;
         }
-        case 'ArrowUp':
-          ev.preventDefault();
-          if (this.orientation === 'vertical') {
-            this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
-          }
-          break;
-        case 'ArrowLeft':
-          if (this._listboxReceivesNoFocus) {
-            return;
-          }
-          ev.preventDefault();
-          if (this.orientation === 'horizontal') {
-            this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
-          }
-          break;
-        case 'ArrowDown':
-          ev.preventDefault();
-          if (this.orientation === 'vertical') {
-            this.activeIndex = this._getNextEnabledOption(this.activeIndex);
-          }
-          break;
-        case 'ArrowRight':
-          if (this._listboxReceivesNoFocus) {
-            return;
-          }
-          ev.preventDefault();
-          if (this.orientation === 'horizontal') {
-            this.activeIndex = this._getNextEnabledOption(this.activeIndex);
-          }
-          break;
-        case 'Home':
-          if (this._listboxReceivesNoFocus) {
-            return;
-          }
-          ev.preventDefault();
-          this.activeIndex = this._getNextEnabledOption(0, 0);
-          break;
-        case 'End':
-          if (this._listboxReceivesNoFocus) {
-            return;
-          }
-          ev.preventDefault();
-          this.activeIndex = this._getPreviousEnabledOption(this.formElements.length - 1, 0);
-          break;
-        default:
-          if (!this._noTypeAhead) {
-            this._handleTypeAhead(ev, {
-              setAsChecked: this.selectionFollowsFocus && !this.multipleChoice,
-            });
-          }
-      }
-
-      const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
-      if (keys.includes(key) && this.selectionFollowsFocus && !this.multipleChoice) {
-        this.setCheckedIndex(this.activeIndex);
-      }
-    }
-
-    /**
-     * @overridable
-     * @param {MouseEvent} ev
-     * @protected
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    _listboxOnClick(ev) {
-      /**
-      For now we disable, handling click interactions via delegated click handlers, since
-      LionOption detects clicks itself and could now potentially be checked as offline dom.
-      When we enable both methods in multiple choice mode, we would 'cancel out' each other.
-      TODO: If we want to allow 'less smart' options (think of role=menu), we should enable this
-      again and disable click handling inside LionOption (since there would be no use case for
-      'orphan' options)
-       */
-      // const option = /** @type {HTMLElement} */ (ev.target).closest('[role=option]');
-      // const foundIndex = this.formElements.indexOf(option);
-      // if (foundIndex > -1) {
-      //   this.activeIndex = foundIndex;
-      //   this.setCheckedIndex(foundIndex, 'toggle', );
-      // }
-    }
-
-    /**
-     * @overridable
-     * @param {KeyboardEvent} ev
-     * @protected
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    _listboxOnKeyUp(ev) {
-      if (this.disabled) {
-        return;
-      }
-
-      this._isHandlingUserInput = true;
-      setTimeout(() => {
-        // Since we can't control when subclasses are done handling keyboard input, we
-        // schedule a timeout to reset _isHandlingUserInput
-        this._isHandlingUserInput = false;
-      });
-
-      const { key } = ev;
-      // eslint-disable-next-line default-case
-      switch (key) {
-        case 'ArrowUp':
-        case 'ArrowDown':
-        case 'Home':
-        case 'End':
-        case 'Enter':
-          ev.preventDefault();
-      }
-    }
-
-    /**
-     * @configure FormControlMixin
-     * @protected
-     */
-    _onLabelClick() {
-      this._listboxNode.focus();
-    }
-
-    /**
-     * @param {HTMLElement} el element
-     * @param {HTMLElement} [scrollTargetEl] container
-     * @protected
-     * @description allow Subclassers to adjust the animation: like non smooth behavior, different timing etc.
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    _scrollIntoView(el, scrollTargetEl) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-
-    /** @private */
-    __setupEventListeners() {
-      this._listboxNode.addEventListener(
-        'active-changed',
-        /** @type {EventListener} */ (this._onChildActiveChanged),
-      );
-      this._listboxNode.addEventListener(
-        'model-value-changed',
-        /** @type {EventListener} */ (this.__proxyChildModelValueChanged),
-      );
-    }
-
-    /** @private */
-    __teardownEventListeners() {
-      this._listboxNode.removeEventListener(
-        'active-changed',
-        /** @type {EventListener} */ (this._onChildActiveChanged),
-      );
-      this._listboxNode.removeEventListener(
-        'model-value-changed',
-        /** @type {EventListener} */ (this.__proxyChildModelValueChanged),
-      );
-    }
-
-    /**
-     * @param {LionOption | null} el
-     * @private
-     */
-    __setChildActive(el) {
-      this.formElements.forEach(formElement => {
-        // eslint-disable-next-line no-param-reassign
-        formElement.active = el === formElement;
-      });
-      if (!el) {
-        this._activeDescendantOwnerNode.removeAttribute('aria-activedescendant');
-        return;
-      }
-      this._activeDescendantOwnerNode.setAttribute('aria-activedescendant', el.id);
-
-      this._scrollIntoView(el, this._scrollTargetNode);
-    }
-
-    /**
-     * @param {LionOption|LionOption[]} [exclude]
-     * @protected
-     */
-    _uncheckChildren(exclude = []) {
-      const excludes = Array.isArray(exclude) ? exclude : [exclude];
-      this.formElements.forEach(option => {
-        if (!excludes.includes(option)) {
-          // eslint-disable-next-line no-param-reassign
-          option.checked = false;
+      case 'ArrowUp':
+        ev.preventDefault();
+        if (this.orientation === 'vertical') {
+          this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
+        }
+        break;
+      case 'ArrowLeft':
+        if (this._listboxReceivesNoFocus) {
+          return;
+        }
+        ev.preventDefault();
+        if (this.orientation === 'horizontal') {
+          this.activeIndex = this._getPreviousEnabledOption(this.activeIndex);
+        }
+        break;
+      case 'ArrowDown':
+        ev.preventDefault();
+        if (this.orientation === 'vertical') {
+          this.activeIndex = this._getNextEnabledOption(this.activeIndex);
+        }
+        break;
+      case 'ArrowRight':
+        if (this._listboxReceivesNoFocus) {
+          return;
+        }
+        ev.preventDefault();
+        if (this.orientation === 'horizontal') {
+          this.activeIndex = this._getNextEnabledOption(this.activeIndex);
+        }
+        break;
+      case 'Home':
+        if (this._listboxReceivesNoFocus) {
+          return;
+        }
+        ev.preventDefault();
+        this.activeIndex = this._getNextEnabledOption(0, 0);
+        break;
+      case 'End':
+        if (this._listboxReceivesNoFocus) {
+          return;
+        }
+        ev.preventDefault();
+        this.activeIndex = this._getPreviousEnabledOption(this.formElements.length - 1, 0);
+        break;
+      default:
+        if (!this._noTypeAhead) {
+          this._handleTypeAhead(ev, {
+            setAsChecked: this.selectionFollowsFocus && !this.multipleChoice
+          });
         }
-      });
-    }
-
-    /**
-     * @param {Event & { target: LionOption }} cfgOrEvent
-     * @private
-     */
-    __onChildCheckedChanged(cfgOrEvent) {
-      const { target } = cfgOrEvent;
-      if (cfgOrEvent.stopPropagation) {
-        cfgOrEvent.stopPropagation();
-      }
-      if (target.checked && !this.multipleChoice) {
-        this._uncheckChildren(target);
-      }
     }
-
-    /**
-     * // TODO: add to choiceGroup
-     * @param {string} attribute
-     * @param {number} value
-     * @private
-     */
-    __setAttributeForAllFormElements(attribute, value) {
-      this.formElements.forEach(formElement => {
-        formElement.setAttribute(attribute, value);
-      });
+    const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+    if (keys.includes(key) && this.selectionFollowsFocus && !this.multipleChoice) {
+      this.setCheckedIndex(this.activeIndex);
+    }
+  }
+
+  /**
+   * @overridable
+   * @param {MouseEvent} ev
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  _listboxOnClick(ev) {
+    /**
+    For now we disable, handling click interactions via delegated click handlers, since
+    LionOption detects clicks itself and could now potentially be checked as offline dom.
+    When we enable both methods in multiple choice mode, we would 'cancel out' each other.
+    TODO: If we want to allow 'less smart' options (think of role=menu), we should enable this
+    again and disable click handling inside LionOption (since there would be no use case for
+    'orphan' options)
+     */
+    // const option = /** @type {HTMLElement} */ (ev.target).closest('[role=option]');
+    // const foundIndex = this.formElements.indexOf(option);
+    // if (foundIndex > -1) {
+    //   this.activeIndex = foundIndex;
+    //   this.setCheckedIndex(foundIndex, 'toggle', );
+    // }
+  }
+
+  /**
+   * @overridable
+   * @param {KeyboardEvent} ev
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  _listboxOnKeyUp(ev) {
+    if (this.disabled) {
+      return;
+    }
+    this._isHandlingUserInput = true;
+    setTimeout(() => {
+      // Since we can't control when subclasses are done handling keyboard input, we
+      // schedule a timeout to reset _isHandlingUserInput
+      this._isHandlingUserInput = false;
+    });
+    const {
+      key
+    } = ev;
+    // eslint-disable-next-line default-case
+    switch (key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'Home':
+      case 'End':
+      case 'Enter':
+        ev.preventDefault();
     }
-
-    /**
-     * @param {CustomEvent & { target: LionOption; }} ev
-     * @private
-     */
-    __proxyChildModelValueChanged(ev) {
-      // We need to redispatch the model-value-changed event on 'this', so it will
-      // align with FormControl.__repropagateChildrenValues method. Also, this makes
-      // it act like a portal, in case the listbox is put in a modal overlay on body level.
-      if (ev.stopPropagation) {
-        ev.stopPropagation();
+  }
+
+  /**
+   * @configure FormControlMixin
+   * @protected
+   */
+  _onLabelClick() {
+    this._listboxNode.focus();
+  }
+
+  /**
+   * @param {HTMLElement} el element
+   * @param {HTMLElement} [scrollTargetEl] container
+   * @protected
+   * @description allow Subclassers to adjust the animation: like non smooth behavior, different timing etc.
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  _scrollIntoView(el, scrollTargetEl) {
+    el.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }
+
+  /** @private */
+  __setupEventListeners() {
+    this._listboxNode.addEventListener('active-changed', /** @type {EventListener} */this._onChildActiveChanged);
+    this._listboxNode.addEventListener('model-value-changed', /** @type {EventListener} */this.__proxyChildModelValueChanged);
+  }
+
+  /** @private */
+  __teardownEventListeners() {
+    this._listboxNode.removeEventListener('active-changed', /** @type {EventListener} */this._onChildActiveChanged);
+    this._listboxNode.removeEventListener('model-value-changed', /** @type {EventListener} */this.__proxyChildModelValueChanged);
+  }
+
+  /**
+   * @param {LionOption | null} el
+   * @private
+   */
+  __setChildActive(el) {
+    this.formElements.forEach(formElement => {
+      // eslint-disable-next-line no-param-reassign
+      formElement.active = el === formElement;
+    });
+    if (!el) {
+      this._activeDescendantOwnerNode.removeAttribute('aria-activedescendant');
+      return;
+    }
+    this._activeDescendantOwnerNode.setAttribute('aria-activedescendant', el.id);
+    this._scrollIntoView(el, this._scrollTargetNode);
+  }
+
+  /**
+   * @param {LionOption|LionOption[]} [exclude]
+   * @protected
+   */
+  _uncheckChildren(exclude = []) {
+    const excludes = Array.isArray(exclude) ? exclude : [exclude];
+    this.formElements.forEach(option => {
+      if (!excludes.includes(option)) {
+        // eslint-disable-next-line no-param-reassign
+        option.checked = false;
       }
-      this.__onChildCheckedChanged(ev);
-
-      // don't send this.modelValue as oldValue, since it will take modelValue getter which takes it from child elements, which is already the updated value
-      this.requestUpdate('modelValue', this._oldModelValue);
-      // only send model-value-changed if the event is caused by one of its children
-      if (ev.detail && ev.detail.formPath) {
-        this.dispatchEvent(
-          new CustomEvent('model-value-changed', {
-            detail: /** @type {ModelValueEventDetails} */ ({
-              formPath: ev.detail.formPath,
-              isTriggeredByUser: ev.detail.isTriggeredByUser || this._isHandlingUserInput,
-              element: ev.target,
-            }),
-          }),
-        );
+    });
+  }
+
+  /**
+   * @param {Event & { target: LionOption }} cfgOrEvent
+   * @private
+   */
+  __onChildCheckedChanged(cfgOrEvent) {
+    const {
+      target
+    } = cfgOrEvent;
+    if (cfgOrEvent.stopPropagation) {
+      cfgOrEvent.stopPropagation();
+    }
+    if (target.checked && !this.multipleChoice) {
+      this._uncheckChildren(target);
+    }
+  }
+
+  /**
+   * // TODO: add to choiceGroup
+   * @param {string} attribute
+   * @param {number} value
+   * @private
+   */
+  __setAttributeForAllFormElements(attribute, value) {
+    this.formElements.forEach(formElement => {
+      formElement.setAttribute(attribute, value);
+    });
+  }
+
+  /**
+   * @param {CustomEvent & { target: LionOption; }} ev
+   * @private
+   */
+  __proxyChildModelValueChanged(ev) {
+    // We need to redispatch the model-value-changed event on 'this', so it will
+    // align with FormControl.__repropagateChildrenValues method. Also, this makes
+    // it act like a portal, in case the listbox is put in a modal overlay on body level.
+    if (ev.stopPropagation) {
+      ev.stopPropagation();
+    }
+    this.__onChildCheckedChanged(ev);
+
+    // don't send this.modelValue as oldValue, since it will take modelValue getter which takes it from child elements, which is already the updated value
+    this.requestUpdate('modelValue', this._oldModelValue);
+    // only send model-value-changed if the event is caused by one of its children
+    if (ev.detail && ev.detail.formPath) {
+      this.dispatchEvent(new CustomEvent('model-value-changed', {
+        detail: (/** @type {ModelValueEventDetails} */{
+          formPath: ev.detail.formPath,
+          isTriggeredByUser: ev.detail.isTriggeredByUser || this._isHandlingUserInput,
+          element: ev.target
+        })
+      }));
+    }
+    this._oldModelValue = this.modelValue;
+  }
+
+  /**
+   * @param {number} currentIndex
+   * @param {number} offset
+   * @private
+   */
+  __getEnabledOption(currentIndex, offset) {
+    /**
+     * @param {number} i
+     */
+    const until = i => offset === 1 ? i < this.formElements.length : i >= 0;
+
+    // Try to find the next / previous option
+    for (let i = currentIndex + offset; until(i); i += offset) {
+      if (this.formElements[i] && !this.formElements[i].hasAttribute('aria-hidden')) {
+        return i;
       }
-      this._oldModelValue = this.modelValue;
     }
 
-    /**
-     * @param {number} currentIndex
-     * @param {number} offset
-     * @private
-     */
-    __getEnabledOption(currentIndex, offset) {
-      /**
-       * @param {number} i
-       */
-      const until = i => (offset === 1 ? i < this.formElements.length : i >= 0);
-
-      // Try to find the next / previous option
-      for (let i = currentIndex + offset; until(i); i += offset) {
+    // If above was unsuccessful, try to find the next/previous either
+    // from end --> start or start --> end
+    if (this.rotateKeyboardNavigation) {
+      const startIndex = offset === -1 ? this.formElements.length - 1 : 0;
+      for (let i = startIndex; until(i); i += offset) {
         if (this.formElements[i] && !this.formElements[i].hasAttribute('aria-hidden')) {
           return i;
         }
       }
-
-      // If above was unsuccessful, try to find the next/previous either
-      // from end --> start or start --> end
-      if (this.rotateKeyboardNavigation) {
-        const startIndex = offset === -1 ? this.formElements.length - 1 : 0;
-        for (let i = startIndex; until(i); i += offset) {
-          if (this.formElements[i] && !this.formElements[i].hasAttribute('aria-hidden')) {
-            return i;
-          }
-        }
-      }
-
-      // If above was unsuccessful, return currentIndex that we started with
-      return currentIndex;
     }
 
-    /**
-     * Moves options put in unnamed slot to slot with [role="listbox"]
-     * @private
-     */
-    __moveOptionsToListboxNode() {
-      const slot = /** @type {HTMLSlotElement} */ (
-        /** @type {ShadowRoot} */ (this.shadowRoot).getElementById('options-outlet')
-      );
-
-      if (slot) {
+    // If above was unsuccessful, return currentIndex that we started with
+    return currentIndex;
+  }
+
+  /**
+   * Moves options put in unnamed slot to slot with [role="listbox"]
+   * @private
+   */
+  __moveOptionsToListboxNode() {
+    const slot = /** @type {HTMLSlotElement} */
+    /** @type {ShadowRoot} */this.shadowRoot.getElementById('options-outlet');
+    if (slot) {
+      moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
+      slot.addEventListener('slotchange', () => {
         moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
-        slot.addEventListener('slotchange', () => {
-          moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
-        });
-      }
+      });
     }
-
-    /**
-     * @param {KeyboardEvent} ev
-     * @private
-     */
-    __preventScrollingWithArrowKeys(ev) {
-      if (this.disabled) {
-        return;
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   * @private
+   */
+  __preventScrollingWithArrowKeys(ev) {
+    if (this.disabled) {
+      return;
+    }
+    const {
+      key
+    } = ev;
+    switch (key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'Home':
+      case 'End':
+        ev.preventDefault();
+      /* no default */
+    }
+  }
+
+  /**
+   * Helper method used within `._setupListboxNode`
+   * @private
+   */
+  __setupListboxNodeInteractions() {
+    this._listboxNode.setAttribute('role', 'listbox');
+    this._listboxNode.setAttribute('aria-orientation', this.orientation);
+    this._listboxNode.setAttribute('aria-multiselectable', `${this.multipleChoice}`);
+    this._listboxNode.setAttribute('tabindex', '0');
+    this._listboxNode.addEventListener('click', this._listboxOnClick);
+    this._listboxNode.addEventListener('keyup', this._listboxOnKeyUp);
+    this._listboxNode.addEventListener('keydown', this._listboxOnKeyDown);
+    /** Since _scrollTargetNode can be _listboxNode, handle here  */
+    this._scrollTargetNode.addEventListener('keydown', this.__preventScrollingWithArrowKeys);
+  }
+
+  // TODO: move to ChoiceGroupMixin?
+  /** @private */
+  __requestOptionsToBeDisabled() {
+    this.formElements.forEach(el => {
+      if (el.makeRequestToBeDisabled) {
+        el.makeRequestToBeDisabled();
       }
-      const { key } = ev;
-      switch (key) {
-        case 'ArrowUp':
-        case 'ArrowDown':
-        case 'Home':
-        case 'End':
-          ev.preventDefault();
-        /* no default */
+    });
+  }
+
+  /** @private */
+  __retractRequestOptionsToBeDisabled() {
+    this.formElements.forEach(el => {
+      if (el.retractRequestToBeDisabled) {
+        el.retractRequestToBeDisabled();
       }
-    }
-
-    /**
-     * Helper method used within `._setupListboxNode`
-     * @private
-     */
-    __setupListboxNodeInteractions() {
-      this._listboxNode.setAttribute('role', 'listbox');
-      this._listboxNode.setAttribute('aria-orientation', this.orientation);
-      this._listboxNode.setAttribute('aria-multiselectable', `${this.multipleChoice}`);
-      this._listboxNode.setAttribute('tabindex', '0');
-      this._listboxNode.addEventListener('click', this._listboxOnClick);
-      this._listboxNode.addEventListener('keyup', this._listboxOnKeyUp);
-      this._listboxNode.addEventListener('keydown', this._listboxOnKeyDown);
-      /** Since _scrollTargetNode can be _listboxNode, handle here  */
-      this._scrollTargetNode.addEventListener('keydown', this.__preventScrollingWithArrowKeys);
-    }
-
-    // TODO: move to ChoiceGroupMixin?
-    /** @private */
-    __requestOptionsToBeDisabled() {
-      this.formElements.forEach(el => {
-        if (el.makeRequestToBeDisabled) {
-          el.makeRequestToBeDisabled();
-        }
-      });
-    }
-
-    /** @private */
-    __retractRequestOptionsToBeDisabled() {
-      this.formElements.forEach(el => {
-        if (el.retractRequestToBeDisabled) {
-          el.retractRequestToBeDisabled();
-        }
-      });
-    }
-
-    /** @private */
-    __initInteractionStates() {
-      this.initInteractionState();
-    }
-  });
-
+    });
+  }
+
+  /** @private */
+  __initInteractionStates() {
+    this.initInteractionState();
+  }
+};
 export const ListboxMixin = dedupeMixin(ListboxMixinImplementation);