@vonage/vivid 4.12.1 → 4.14.0

package/shared/listbox.js

@@ -1,10 +1,10 @@
-import { e as keyArrowLeft, f as keyArrowRight } from './key-codes.js';
-import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
-import { i as isListboxOption } from './listbox-option.js';
+import { i as isListboxOption } from './definition35.js';
+import { V as VividElement } from './vivid-element.js';
+import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
+import { u as uniqueId } from './strings.js';
+import { O as Observable, a as attr, o as observable } from './defineVividComponent.js';
+import { a as applyMixins } from './apply-mixins2.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes2.js';
-import { u as uniqueId, i as inRange } from './strings.js';
 
 /**
  * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
@@ -22,1043 +22,474 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-/**
- * A Listbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
- *
- * @slot - The default slot for the listbox options
- *
- * @public
- */
-let Listbox$1 = class Listbox extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The internal unfiltered list of selectable options.
-         *
-         * @internal
-         */
-        this._options = [];
-        /**
-         * The index of the selected option.
-         *
-         * @public
-         */
-        this.selectedIndex = -1;
-        /**
-         * A collection of the selected options.
-         *
-         * @public
-         */
-        this.selectedOptions = [];
-        /**
-         * A standard `click` event creates a `focus` event before firing, so a
-         * `mousedown` event is used to skip that initial focus.
-         *
-         * @internal
-         */
-        this.shouldSkipFocus = false;
-        /**
-         * The current typeahead buffer string.
-         *
-         * @internal
-         */
-        this.typeaheadBuffer = "";
-        /**
-         * Flag for the typeahead timeout expiration.
-         *
-         * @internal
-         */
-        this.typeaheadExpired = true;
-        /**
-         * The timeout ID for the typeahead handler.
-         *
-         * @internal
-         */
-        this.typeaheadTimeout = -1;
-    }
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _Listbox = class _Listbox extends VividElement {
+  constructor() {
+    super(...arguments);
     /**
-     * The first selected option.
+     * The internal unfiltered list of selectable options.
      *
      * @internal
      */
-    get firstSelectedOption() {
-        var _a;
-        return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
-    }
+    this._options = [];
+    this.selectedIndex = -1;
+    this.selectedOptions = [];
     /**
-     * Returns true if there is one or more selectable option.
+     * A standard `click` event creates a `focus` event before firing, so a
+     * `mousedown` event is used to skip that initial focus.
      *
      * @internal
      */
-    get hasSelectableOptions() {
-        return this.options.length > 0 && !this.options.every(o => o.disabled);
-    }
-    /**
-     * The number of options.
-     *
-     * @public
-     */
-    get length() {
-        var _a, _b;
-        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    }
-    /**
-     * The list of options.
-     *
-     * @public
-     */
-    get options() {
-        Observable.track(this, "options");
-        return this._options;
-    }
-    set options(value) {
-        this._options = value;
-        Observable.notify(this, "options");
-    }
+    this.shouldSkipFocus = false;
+    this.typeaheadBuffer = "";
     /**
      * Flag for the typeahead timeout expiration.
      *
-     * @deprecated use `Listbox.typeaheadExpired`
-     * @internal
-     */
-    get typeAheadExpired() {
-        return this.typeaheadExpired;
-    }
-    set typeAheadExpired(value) {
-        this.typeaheadExpired = value;
-    }
-    /**
-     * Handle click events for listbox options.
-     *
-     * @internal
-     */
-    clickHandler(e) {
-        const captured = e.target.closest(`option,[role=option]`);
-        if (captured && !captured.disabled) {
-            this.selectedIndex = this.options.indexOf(captured);
-            return true;
-        }
-    }
-    /**
-     * Ensures that the provided option is focused and scrolled into view.
-     *
-     * @param optionToFocus - The option to focus
-     * @internal
-     */
-    focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
-        // To ensure that the browser handles both `focus()` and `scrollIntoView()`, the
-        // timing here needs to guarantee that they happen on different frames. Since this
-        // function is typically called from the `openChanged` observer, `DOM.queueUpdate`
-        // causes the calls to be grouped into the same frame. To prevent this,
-        // `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
-        if (this.contains(document.activeElement) && optionToFocus !== null) {
-            optionToFocus.focus();
-            requestAnimationFrame(() => {
-                optionToFocus.scrollIntoView({ block: "nearest" });
-            });
-        }
-    }
-    /**
-     * Handles `focusin` actions for the component. When the component receives focus,
-     * the list of selected options is refreshed and the first selected option is scrolled
-     * into view.
-     *
-     * @internal
-     */
-    focusinHandler(e) {
-        if (!this.shouldSkipFocus && e.target === e.currentTarget) {
-            this.setSelectedOptions();
-            this.focusAndScrollOptionIntoView();
-        }
-        this.shouldSkipFocus = false;
-    }
-    /**
-     * Returns the options which match the current typeahead buffer.
-     *
-     * @internal
-     */
-    getTypeaheadMatches() {
-        const pattern = this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
-        const re = new RegExp(`^${pattern}`, "gi");
-        return this.options.filter((o) => o.text.trim().match(re));
-    }
-    /**
-     * Determines the index of the next option which is selectable, if any.
-     *
-     * @param prev - the previous selected index
-     * @param next - the next index to select
-     *
-     * @internal
-     */
-    getSelectableIndex(prev = this.selectedIndex, next) {
-        const direction = prev > next ? -1 : prev < next ? 1 : 0;
-        const potentialDirection = prev + direction;
-        let nextSelectableOption = null;
-        switch (direction) {
-            case -1: {
-                nextSelectableOption = this.options.reduceRight((nextSelectableOption, thisOption, index) => !nextSelectableOption &&
-                    !thisOption.disabled &&
-                    index < potentialDirection
-                    ? thisOption
-                    : nextSelectableOption, nextSelectableOption);
-                break;
-            }
-            case 1: {
-                nextSelectableOption = this.options.reduce((nextSelectableOption, thisOption, index) => !nextSelectableOption &&
-                    !thisOption.disabled &&
-                    index > potentialDirection
-                    ? thisOption
-                    : nextSelectableOption, nextSelectableOption);
-                break;
-            }
-        }
-        return this.options.indexOf(nextSelectableOption);
-    }
-    /**
-     * Handles external changes to child options.
-     *
-     * @param source - the source object
-     * @param propertyName - the property
-     *
-     * @internal
-     */
-    handleChange(source, propertyName) {
-        switch (propertyName) {
-            case "selected": {
-                if (Listbox.slottedOptionFilter(source)) {
-                    this.selectedIndex = this.options.indexOf(source);
-                }
-                this.setSelectedOptions();
-                break;
-            }
-        }
-    }
-    /**
-     * Moves focus to an option whose label matches characters typed by the user.
-     * Consecutive keystrokes are batched into a buffer of search text used
-     * to match against the set of options.  If `TYPE_AHEAD_TIMEOUT_MS` passes
-     * between consecutive keystrokes, the search restarts.
-     *
-     * @param key - the key to be evaluated
-     *
-     * @internal
-     */
-    handleTypeAhead(key) {
-        if (this.typeaheadTimeout) {
-            window.clearTimeout(this.typeaheadTimeout);
-        }
-        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox.TYPE_AHEAD_TIMEOUT_MS);
-        if (key.length > 1) {
-            return;
-        }
-        this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
-    }
-    /**
-     * Handles `keydown` actions for listbox navigation and typeahead.
-     *
-     * @internal
-     */
-    keydownHandler(e) {
-        if (this.disabled) {
-            return true;
-        }
-        this.shouldSkipFocus = false;
-        const key = e.key;
-        switch (key) {
-            // Select the first available option
-            case keyHome: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectFirstOption();
-                }
-                break;
-            }
-            // Select the next selectable option
-            case keyArrowDown: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectNextOption();
-                }
-                break;
-            }
-            // Select the previous selectable option
-            case keyArrowUp: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectPreviousOption();
-                }
-                break;
-            }
-            // Select the last available option
-            case keyEnd: {
-                e.preventDefault();
-                this.selectLastOption();
-                break;
-            }
-            case keyTab: {
-                this.focusAndScrollOptionIntoView();
-                return true;
-            }
-            case keyEnter:
-            case keyEscape: {
-                return true;
-            }
-            case keySpace: {
-                if (this.typeaheadExpired) {
-                    return true;
-                }
-            }
-            // Send key to Typeahead handler
-            default: {
-                if (key.length === 1) {
-                    this.handleTypeAhead(`${key}`);
-                }
-                return true;
-            }
-        }
-    }
-    /**
-     * Prevents `focusin` events from firing before `click` events when the
-     * element is unfocused.
-     *
-     * @internal
-     */
-    mousedownHandler(e) {
-        this.shouldSkipFocus = !this.contains(document.activeElement);
-        return true;
-    }
-    /**
-     * Switches between single-selection and multi-selection mode.
-     *
-     * @param prev - the previous value of the `multiple` attribute
-     * @param next - the next value of the `multiple` attribute
-     *
-     * @internal
-     */
-    multipleChanged(prev, next) {
-        this.ariaMultiSelectable = next ? "true" : null;
-    }
-    /**
-     * Updates the list of selected options when the `selectedIndex` changes.
-     *
-     * @param prev - the previous selected index value
-     * @param next - the current selected index value
-     *
-     * @internal
-     */
-    selectedIndexChanged(prev, next) {
-        var _a;
-        if (!this.hasSelectableOptions) {
-            this.selectedIndex = -1;
-            return;
-        }
-        if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {
-            const selectableIndex = this.getSelectableIndex(prev, next);
-            const newNext = selectableIndex > -1 ? selectableIndex : prev;
-            this.selectedIndex = newNext;
-            if (next === newNext) {
-                this.selectedIndexChanged(next, newNext);
-            }
-            return;
-        }
-        this.setSelectedOptions();
-    }
-    /**
-     * Updates the selectedness of each option when the list of selected options changes.
-     *
-     * @param prev - the previous list of selected options
-     * @param next - the current list of selected options
-     *
      * @internal
      */
-    selectedOptionsChanged(prev, next) {
-        var _a;
-        const filteredNext = next.filter(Listbox.slottedOptionFilter);
-        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
-            const notifier = Observable.getNotifier(o);
-            notifier.unsubscribe(this, "selected");
-            o.selected = filteredNext.includes(o);
-            notifier.subscribe(this, "selected");
-        });
-    }
-    /**
-     * Moves focus to the first selectable option.
-     *
-     * @public
-     */
-    selectFirstOption() {
-        var _a, _b;
-        if (!this.disabled) {
-            this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
-        }
-    }
-    /**
-     * Moves focus to the last selectable option.
-     *
-     * @internal
-     */
-    selectLastOption() {
-        if (!this.disabled) {
-            this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
-        }
-    }
+    this.typeaheadExpired = true;
     /**
-     * Moves focus to the next selectable option.
+     * The timeout ID for the typeahead handler.
      *
      * @internal
      */
-    selectNextOption() {
-        if (!this.disabled && this.selectedIndex < this.options.length - 1) {
-            this.selectedIndex += 1;
-        }
-    }
-    /**
-     * Moves focus to the previous selectable option.
-     *
-     * @internal
-     */
-    selectPreviousOption() {
-        if (!this.disabled && this.selectedIndex > 0) {
-            this.selectedIndex = this.selectedIndex - 1;
-        }
-    }
-    /**
-     * Updates the selected index to match the first selected option.
-     *
-     * @internal
-     */
-    setDefaultSelectedOption() {
-        var _a, _b;
-        this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
-    }
+    this.typeaheadTimeout = -1;
+  }
+  /**
+   * The first selected option.
+   *
+   * @internal
+   */
+  get firstSelectedOption() {
+    return this.selectedOptions[0] ?? null;
+  }
+  /**
+   * Returns true if there is one or more selectable option.
+   *
+   * @internal
+   */
+  get hasSelectableOptions() {
+    return this.options.length > 0 && !this.options.every((o) => o.disabled);
+  }
+  /**
+   * The number of options.
+   *
+   * @public
+   */
+  get length() {
+    return this.options.length;
+  }
+  /**
+   * The list of options.
+   *
+   * @public
+   */
+  get options() {
+    Observable.track(this, "options");
+    return this._options;
+  }
+  set options(value) {
+    this._options = value;
+    Observable.notify(this, "options");
+  }
+  static {
     /**
-     * Sets an option as selected and gives it focus.
+     * A static filter to include only selectable options.
      *
+     * @param n - element to filter
      * @public
      */
-    setSelectedOptions() {
-        var _a, _b, _c;
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
-            this.selectedOptions = [this.options[this.selectedIndex]];
-            this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
-            this.focusAndScrollOptionIntoView();
-        }
-    }
-    /**
-     * Updates the list of options and resets the selected option when the slotted option content changes.
-     *
-     * @param prev - the previous list of slotted options
-     * @param next - the current list of slotted options
-     *
-     * @internal
-     */
-    slottedOptionsChanged(prev, next) {
-        this.options = next.reduce((options, item) => {
-            if (isListboxOption(item)) {
-                options.push(item);
-            }
-            return options;
-        }, []);
-        const setSize = `${this.options.length}`;
-        this.options.forEach((option, index) => {
-            if (!option.id) {
-                option.id = uniqueId("option-");
-            }
-            option.ariaPosInSet = `${index + 1}`;
-            option.ariaSetSize = setSize;
-        });
-        if (this.$fastController.isConnected) {
-            this.setSelectedOptions();
-            this.setDefaultSelectedOption();
-        }
-    }
-    /**
-     * Updates the filtered list of options when the typeahead buffer changes.
-     *
-     * @param prev - the previous typeahead buffer value
-     * @param next - the current typeahead buffer value
-     *
-     * @internal
-     */
-    typeaheadBufferChanged(prev, next) {
-        if (this.$fastController.isConnected) {
-            const typeaheadMatches = this.getTypeaheadMatches();
-            if (typeaheadMatches.length) {
-                const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
-                if (selectedIndex > -1) {
-                    this.selectedIndex = selectedIndex;
-                }
-            }
-            this.typeaheadExpired = false;
-        }
-    }
-};
-/**
- * A static filter to include only selectable options.
- *
- * @param n - element to filter
- * @public
- */
-Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
-/**
- * Typeahead timeout in milliseconds.
- *
- * @internal
- */
-Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
-__decorate([
-    attr({ mode: "boolean" })
-], Listbox$1.prototype, "disabled", void 0);
-__decorate([
-    observable
-], Listbox$1.prototype, "selectedIndex", void 0);
-__decorate([
-    observable
-], Listbox$1.prototype, "selectedOptions", void 0);
-__decorate([
-    observable
-], Listbox$1.prototype, "slottedOptions", void 0);
-__decorate([
-    observable
-], Listbox$1.prototype, "typeaheadBuffer", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA listbox role
- *
- * @public
- */
-class DelegatesARIAListbox {
-}
-__decorate([
-    observable
-], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
-__decorate([
-    observable
-], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
-__decorate([
-    observable
-], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
-__decorate([
-    observable
-], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
-applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-applyMixins(Listbox$1, DelegatesARIAListbox);
-
-/**
- * A Listbox Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
- *
- * @public
- */
-class ListboxElement extends Listbox$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * The index of the most recently checked option.
-         *
-         * @internal
-         * @remarks
-         * Multiple-selection mode only.
-         */
-        this.activeIndex = -1;
-        /**
-         * The start index when checking a range of options.
-         *
-         * @internal
-         */
-        this.rangeStartIndex = -1;
-    }
-    /**
-     * Returns the last checked option.
-     *
-     * @internal
-     */
-    get activeOption() {
-        return this.options[this.activeIndex];
-    }
-    /**
-     * Returns the list of checked options.
-     *
-     * @internal
-     */
-    get checkedOptions() {
-        var _a;
-        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
-    }
-    /**
-     * Returns the index of the first selected option.
-     *
-     * @internal
-     */
-    get firstSelectedOptionIndex() {
-        return this.options.indexOf(this.firstSelectedOption);
-    }
-    /**
-     * Updates the `ariaActiveDescendant` property when the active index changes.
-     *
-     * @param prev - the previous active index
-     * @param next - the next active index
-     *
-     * @internal
-     */
-    activeIndexChanged(prev, next) {
-        var _a, _b;
-        this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
-        this.focusAndScrollOptionIntoView();
-    }
-    /**
-     * Toggles the checked state for the currently active option.
-     *
-     * @remarks
-     * Multiple-selection mode only.
-     *
-     * @internal
-     */
-    checkActiveIndex() {
-        if (!this.multiple) {
-            return;
-        }
-        const activeItem = this.activeOption;
-        if (activeItem) {
-            activeItem.checked = true;
-        }
-    }
-    /**
-     * Sets the active index to the first option and marks it as checked.
-     *
-     * @remarks
-     * Multi-selection mode only.
-     *
-     * @param preserveChecked - mark all options unchecked before changing the active index
-     *
-     * @internal
-     */
-    checkFirstOption(preserveChecked = false) {
-        if (preserveChecked) {
-            if (this.rangeStartIndex === -1) {
-                this.rangeStartIndex = this.activeIndex + 1;
-            }
-            this.options.forEach((o, i) => {
-                o.checked = inRange(i, this.rangeStartIndex);
-            });
-        }
-        else {
-            this.uncheckAllOptions();
-        }
-        this.activeIndex = 0;
-        this.checkActiveIndex();
-    }
-    /**
-     * Decrements the active index and sets the matching option as checked.
-     *
-     * @remarks
-     * Multi-selection mode only.
-     *
-     * @param preserveChecked - mark all options unchecked before changing the active index
-     *
-     * @internal
-     */
-    checkLastOption(preserveChecked = false) {
-        if (preserveChecked) {
-            if (this.rangeStartIndex === -1) {
-                this.rangeStartIndex = this.activeIndex;
-            }
-            this.options.forEach((o, i) => {
-                o.checked = inRange(i, this.rangeStartIndex, this.options.length);
-            });
-        }
-        else {
-            this.uncheckAllOptions();
-        }
-        this.activeIndex = this.options.length - 1;
-        this.checkActiveIndex();
-    }
-    /**
-     * @override
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("focusout", this.focusoutHandler);
-    }
-    /**
-     * @override
-     * @internal
-     */
-    disconnectedCallback() {
-        this.removeEventListener("focusout", this.focusoutHandler);
-        super.disconnectedCallback();
-    }
-    /**
-     * Increments the active index and marks the matching option as checked.
-     *
-     * @remarks
-     * Multiple-selection mode only.
-     *
-     * @param preserveChecked - mark all options unchecked before changing the active index
-     *
-     * @internal
-     */
-    checkNextOption(preserveChecked = false) {
-        if (preserveChecked) {
-            if (this.rangeStartIndex === -1) {
-                this.rangeStartIndex = this.activeIndex;
-            }
-            this.options.forEach((o, i) => {
-                o.checked = inRange(i, this.rangeStartIndex, this.activeIndex + 1);
-            });
-        }
-        else {
-            this.uncheckAllOptions();
-        }
-        this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
-        this.checkActiveIndex();
-    }
-    /**
-     * Decrements the active index and marks the matching option as checked.
-     *
-     * @remarks
-     * Multiple-selection mode only.
-     *
-     * @param preserveChecked - mark all options unchecked before changing the active index
-     *
-     * @internal
-     */
-    checkPreviousOption(preserveChecked = false) {
-        if (preserveChecked) {
-            if (this.rangeStartIndex === -1) {
-                this.rangeStartIndex = this.activeIndex;
-            }
-            if (this.checkedOptions.length === 1) {
-                this.rangeStartIndex += 1;
-            }
-            this.options.forEach((o, i) => {
-                o.checked = inRange(i, this.activeIndex, this.rangeStartIndex);
-            });
-        }
-        else {
-            this.uncheckAllOptions();
-        }
-        this.activeIndex -= this.activeIndex > 0 ? 1 : 0;
-        this.checkActiveIndex();
-    }
-    /**
-     * Handles click events for listbox options.
-     *
-     * @param e - the event object
-     *
-     * @override
-     * @internal
-     */
-    clickHandler(e) {
-        var _a;
-        if (!this.multiple) {
-            return super.clickHandler(e);
-        }
-        const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
-        if (!captured || captured.disabled) {
-            return;
-        }
-        this.uncheckAllOptions();
-        this.activeIndex = this.options.indexOf(captured);
-        this.checkActiveIndex();
-        this.toggleSelectedForAllCheckedOptions();
-        return true;
-    }
-    /**
-     * @override
-     * @internal
-     */
-    focusAndScrollOptionIntoView() {
-        super.focusAndScrollOptionIntoView(this.activeOption);
-    }
-    /**
-     * In multiple-selection mode:
-     * If any options are selected, the first selected option is checked when
-     * the listbox receives focus. If no options are selected, the first
-     * selectable option is checked.
-     *
-     * @override
-     * @internal
-     */
-    focusinHandler(e) {
-        if (!this.multiple) {
-            return super.focusinHandler(e);
-        }
-        if (!this.shouldSkipFocus && e.target === e.currentTarget) {
-            this.uncheckAllOptions();
-            if (this.activeIndex === -1) {
-                this.activeIndex =
-                    this.firstSelectedOptionIndex !== -1
-                        ? this.firstSelectedOptionIndex
-                        : 0;
-            }
-            this.checkActiveIndex();
-            this.setSelectedOptions();
-            this.focusAndScrollOptionIntoView();
-        }
-        this.shouldSkipFocus = false;
-    }
-    /**
-     * Unchecks all options when the listbox loses focus.
-     *
-     * @internal
-     */
-    focusoutHandler(e) {
-        if (this.multiple) {
-            this.uncheckAllOptions();
-        }
-    }
+    this.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+  }
+  static {
     /**
-     * Handles keydown actions for listbox navigation and typeahead
+     * Typeahead timeout in milliseconds.
      *
-     * @override
      * @internal
      */
-    keydownHandler(e) {
-        if (!this.multiple) {
-            return super.keydownHandler(e);
-        }
-        if (this.disabled) {
-            return true;
-        }
-        const { key, shiftKey } = e;
-        this.shouldSkipFocus = false;
-        switch (key) {
-            // Select the first available option
-            case keyHome: {
-                this.checkFirstOption(shiftKey);
-                return;
-            }
-            // Select the next selectable option
-            case keyArrowDown: {
-                this.checkNextOption(shiftKey);
-                return;
-            }
-            // Select the previous selectable option
-            case keyArrowUp: {
-                this.checkPreviousOption(shiftKey);
-                return;
-            }
-            // Select the last available option
-            case keyEnd: {
-                this.checkLastOption(shiftKey);
-                return;
-            }
-            case keyTab: {
-                this.focusAndScrollOptionIntoView();
-                return true;
-            }
-            case keyEscape: {
-                this.uncheckAllOptions();
-                this.checkActiveIndex();
-                return true;
-            }
-            case keySpace: {
-                e.preventDefault();
-                if (this.typeAheadExpired) {
-                    this.toggleSelectedForAllCheckedOptions();
-                    return;
-                }
-            }
-            // Send key to Typeahead handler
-            default: {
-                if (key.length === 1) {
-                    this.handleTypeAhead(`${key}`);
-                }
-                return true;
-            }
-        }
+    this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
+  }
+  /**
+   * Handle click events for listbox options.
+   *
+   * @internal
+   */
+  clickHandler(e) {
+    const captured = e.target.closest(
+      `option,[role=option]`
+    );
+    if (captured && !captured.disabled) {
+      this.selectedIndex = this.options.indexOf(captured);
+      return true;
     }
-    /**
-     * Prevents `focusin` events from firing before `click` events when the
-     * element is unfocused.
-     *
-     * @override
-     * @internal
-     */
-    mousedownHandler(e) {
-        if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
-            return super.mousedownHandler(e);
-        }
+  }
+  /**
+   * Ensures that the provided option is focused and scrolled into view.
+   *
+   * @param optionToFocus - The option to focus
+   * @internal
+   */
+  focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
+    if (this.contains(document.activeElement) && optionToFocus !== null) {
+      optionToFocus.focus();
+      requestAnimationFrame(() => {
+        optionToFocus.scrollIntoView({ block: "nearest" });
+      });
     }
-    /**
-     * Switches between single-selection and multi-selection mode.
-     *
-     * @internal
-     */
-    multipleChanged(prev, next) {
-        var _a;
-        this.ariaMultiSelectable = next ? "true" : null;
-        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
-            o.checked = next ? false : undefined;
-        });
-        this.setSelectedOptions();
+  }
+  /**
+   * Handles `focusin` actions for the component. When the component receives focus,
+   * the list of selected options is refreshed and the first selected option is scrolled
+   * into view.
+   *
+   * @internal
+   */
+  focusinHandler(e) {
+    if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+      this.setSelectedOptions();
+      this.focusAndScrollOptionIntoView();
     }
-    /**
-     * Sets an option as selected and gives it focus.
-     *
-     * @override
-     * @public
-     */
-    setSelectedOptions() {
-        if (!this.multiple) {
-            super.setSelectedOptions();
-            return;
-        }
-        if (this.$fastController.isConnected && this.options) {
-            this.selectedOptions = this.options.filter(o => o.selected);
-            this.focusAndScrollOptionIntoView();
-        }
+    this.shouldSkipFocus = false;
+  }
+  /**
+   * Returns the options which match the current typeahead buffer.
+   *
+   * @internal
+   */
+  getTypeaheadMatches() {
+    const pattern = this.typeaheadBuffer.replace(
+      /[.*+\-?^${}()|[\]\\]/g,
+      "\\$&"
+    );
+    const re = new RegExp(`^${pattern}`, "gi");
+    return this.options.filter((o) => o.text.trim().match(re));
+  }
+  /**
+   * Determines the index of the next option which is selectable, if any.
+   *
+   * @param prev - the previous selected index
+   * @param next - the next index to select
+   *
+   * @internal
+   */
+  getSelectableIndex(prev, next) {
+    const direction = prev > next ? -1 : 1;
+    const potentialDirection = prev + direction;
+    let nextSelectableOption = null;
+    switch (direction) {
+      case -1: {
+        nextSelectableOption = this.options.reduceRight(
+          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption2,
+          nextSelectableOption
+        );
+        break;
+      }
+      case 1: {
+        nextSelectableOption = this.options.reduce(
+          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption2,
+          nextSelectableOption
+        );
+        break;
+      }
     }
-    /**
-     * Ensures the size is a positive integer when the property is updated.
-     *
-     * @param prev - the previous size value
-     * @param next - the current size value
-     *
-     * @internal
-     */
-    sizeChanged(prev, next) {
-        var _a;
-        const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
-        if (size !== next) {
-            DOM.queueUpdate(() => {
-                this.size = size;
-            });
+    return this.options.indexOf(nextSelectableOption);
+  }
+  /**
+   * Handles external changes to child options.
+   *
+   * @param source - the source object
+   * @param propertyName - the property
+   *
+   * @internal
+   */
+  handleChange(source, propertyName) {
+    switch (propertyName) {
+      case "selected": {
+        if (_Listbox.slottedOptionFilter(source)) {
+          this.selectedIndex = this.options.indexOf(source);
         }
-    }
-    /**
-     * Toggles the selected state of the provided options. If any provided items
-     * are in an unselected state, all items are set to selected. If every
-     * provided item is selected, they are all unselected.
-     *
-     * @internal
-     */
-    toggleSelectedForAllCheckedOptions() {
-        const enabledCheckedOptions = this.checkedOptions.filter(o => !o.disabled);
-        const force = !enabledCheckedOptions.every(o => o.selected);
-        enabledCheckedOptions.forEach(o => (o.selected = force));
-        this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
         this.setSelectedOptions();
-    }
-    /**
-     * @override
-     * @internal
-     */
-    typeaheadBufferChanged(prev, next) {
-        if (!this.multiple) {
-            super.typeaheadBufferChanged(prev, next);
-            return;
-        }
-        if (this.$fastController.isConnected) {
-            const typeaheadMatches = this.getTypeaheadMatches();
-            const activeIndex = this.options.indexOf(typeaheadMatches[0]);
-            if (activeIndex > -1) {
-                this.activeIndex = activeIndex;
-                this.uncheckAllOptions();
-                this.checkActiveIndex();
-            }
-            this.typeAheadExpired = false;
-        }
-    }
-    /**
-     * Unchecks all options.
-     *
-     * @remarks
-     * Multiple-selection mode only.
-     *
-     * @param preserveChecked - reset the rangeStartIndex
-     *
-     * @internal
-     */
-    uncheckAllOptions(preserveChecked = false) {
-        this.options.forEach(o => (o.checked = this.multiple ? false : undefined));
-        if (!preserveChecked) {
-            this.rangeStartIndex = -1;
-        }
-    }
-}
-__decorate([
-    observable
-], ListboxElement.prototype, "activeIndex", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], ListboxElement.prototype, "multiple", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], ListboxElement.prototype, "size", void 0);
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Listbox extends ListboxElement {
-  orientationChanged() {
-    if (this.orientation === "horizontal") {
-      this.addEventListener("keydown", this.#horizontalKeydownHandler);
-    } else {
-      this.removeEventListener("keydown", this.#horizontalKeydownHandler);
+        break;
+      }
     }
   }
   /**
-   * Handles `keydown` actions for horizontal listbox navigation and typeahead.
+   * Moves focus to an option whose label matches characters typed by the user.
+   * Consecutive keystrokes are batched into a buffer of search text used
+   * to match against the set of options.  If `TYPE_AHEAD_TIMEOUT_MS` passes
+   * between consecutive keystrokes, the search restarts.
+   *
+   * @param key - the key to be evaluated
    *
    * @internal
    */
-  #horizontalKeydownHandler(e) {
+  handleTypeAhead(key) {
+    if (this.typeaheadTimeout) {
+      window.clearTimeout(this.typeaheadTimeout);
+    }
+    this.typeaheadTimeout = window.setTimeout(
+      () => this.typeaheadExpired = true,
+      _Listbox.TYPE_AHEAD_TIMEOUT_MS
+    );
+    this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
+  }
+  /**
+   * Handles `keydown` actions for listbox navigation and typeahead.
+   *
+   * @internal
+   */
+  keydownHandler(e) {
     if (this.disabled) {
       return true;
     }
+    this.shouldSkipFocus = false;
     const key = e.key;
     switch (key) {
-      case keyArrowRight: {
+      case keyHome: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectFirstOption();
+        }
+        break;
+      }
+      case keyArrowDown: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
         }
         break;
       }
-      case keyArrowLeft: {
+      case keyArrowUp: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
         }
         break;
       }
+      case keyEnd: {
+        e.preventDefault();
+        this.selectLastOption();
+        break;
+      }
+      case keyTab: {
+        this.focusAndScrollOptionIntoView();
+        return true;
+      }
+      case keyEnter:
+      case keyEscape:
+        return true;
+      case keySpace:
+        if (this.typeaheadExpired) {
+          return true;
+        }
+      default: {
+        if (key.length === 1) {
+          this.handleTypeAhead(`${key}`);
+        }
+        return true;
+      }
     }
   }
-  slottedOptionsChanged(prev, next) {
-    super.slottedOptionsChanged(prev, next);
-    this.#disableSlottedChildren();
+  /**
+   * Prevents `focusin` events from firing before `click` events when the
+   * element is unfocused.
+   *
+   * @internal
+   */
+  mousedownHandler(_) {
+    this.shouldSkipFocus = !this.contains(document.activeElement);
+    return true;
+  }
+  /**
+   * Switches between single-selection and multi-selection mode.
+   *
+   * @internal
+   */
+  multipleChanged(_, next) {
+    this.ariaMultiSelectable = next ? "true" : null;
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "disabled") {
-      this.#disableSlottedChildren();
+  /**
+   * Updates the list of selected options when the `selectedIndex` changes.
+   *
+   * @param prev - the previous selected index value
+   * @param next - the current selected index value
+   *
+   * @internal
+   */
+  selectedIndexChanged(prev, next) {
+    if (!this.hasSelectableOptions) {
+      this.selectedIndex = -1;
+      return;
+    }
+    if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
+      const selectableIndex = this.getSelectableIndex(prev, next);
+      const newNext = selectableIndex > -1 ? selectableIndex : prev;
+      this.selectedIndex = newNext;
+      return;
+    }
+    this.setSelectedOptions();
+  }
+  /**
+   * Updates the selectedness of each option when the list of selected options changes.
+   *
+   * @internal
+   */
+  selectedOptionsChanged(_, next) {
+    const filteredNext = next.filter(_Listbox.slottedOptionFilter);
+    this.options.forEach((o) => {
+      const notifier = Observable.getNotifier(o);
+      notifier.unsubscribe(this, "selected");
+      o.selected = filteredNext.includes(o);
+      notifier.subscribe(this, "selected");
+    });
+  }
+  /**
+   * Moves focus to the first selectable option.
+   *
+   * @public
+   */
+  selectFirstOption() {
+    if (!this.disabled) {
+      this.selectedIndex = this.options.findIndex((o) => !o.disabled);
+    }
+  }
+  /**
+   * Moves focus to the last selectable option.
+   *
+   * @internal
+   */
+  selectLastOption() {
+    if (!this.disabled) {
+      this.selectedIndex = findLastIndex(this.options, (o) => !o.disabled);
+    }
+  }
+  /**
+   * Moves focus to the next selectable option.
+   *
+   * @internal
+   */
+  selectNextOption() {
+    if (!this.disabled && this.selectedIndex < this.options.length - 1) {
+      this.selectedIndex += 1;
     }
   }
-  #disableSlottedChildren() {
-    this.options.forEach((optionElement) => {
-      if (!optionElement.disabled) {
-        optionElement.disabled = this.disabled;
+  /**
+   * Moves focus to the previous selectable option.
+   *
+   * @internal
+   */
+  selectPreviousOption() {
+    if (!this.disabled && this.selectedIndex > 0) {
+      this.selectedIndex = this.selectedIndex - 1;
+    }
+  }
+  /**
+   * Updates the selected index to match the first selected option.
+   *
+   * @internal
+   */
+  setDefaultSelectedOption() {
+    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
+  }
+  /**
+   * Sets an option as selected and gives it focus.
+   *
+   * @public
+   */
+  setSelectedOptions() {
+    if (this.options.length) {
+      this.selectedOptions = [this.options[this.selectedIndex]];
+      this.ariaActiveDescendant = this.firstSelectedOption?.id ?? "";
+      this.focusAndScrollOptionIntoView();
+    }
+  }
+  /**
+   * Updates the list of options and resets the selected option when the slotted option content changes.
+   *
+   * @internal
+   */
+  slottedOptionsChanged(_, next) {
+    this.options = next.reduce((options, item) => {
+      if (isListboxOption(item)) {
+        options.push(item);
       }
+      return options;
+    }, []);
+    const setSize = `${this.options.length}`;
+    this.options.forEach((option, index) => {
+      if (!option.id) {
+        option.id = uniqueId("option-");
+      }
+      option.ariaPosInSet = `${index + 1}`;
+      option.ariaSetSize = setSize;
     });
+    if (this.$fastController.isConnected) {
+      this.setSelectedOptions();
+      this.setDefaultSelectedOption();
+    }
   }
+  /**
+   * Updates the filtered list of options when the typeahead buffer changes.
+   *
+   * @internal
+   */
+  typeaheadBufferChanged(_prev, _next) {
+    if (this.$fastController.isConnected) {
+      const typeaheadMatches = this.getTypeaheadMatches();
+      if (typeaheadMatches.length) {
+        const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
+        if (selectedIndex > -1) {
+          this.selectedIndex = selectedIndex;
+        }
+      }
+      this.typeaheadExpired = false;
+    }
+  }
+};
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ mode: "boolean" })
+], _Listbox.prototype, "disabled");
+__decorateClass([
+  observable
+], _Listbox.prototype, "selectedIndex");
+__decorateClass([
+  observable
+], _Listbox.prototype, "selectedOptions");
+__decorateClass([
+  observable
+], _Listbox.prototype, "slottedOptions");
+__decorateClass([
+  observable
+], _Listbox.prototype, "typeaheadBuffer");
+let Listbox = _Listbox;
+class DelegatesARIAListbox {
 }
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListbox.prototype, "ariaActiveDescendant");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], Listbox.prototype, "appearance");
+  observable
+], DelegatesARIAListbox.prototype, "ariaDisabled");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], Listbox.prototype, "orientation");
+  observable
+], DelegatesARIAListbox.prototype, "ariaExpanded");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], Listbox.prototype, "shape");
+  observable
+], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
+applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
+applyMixins(Listbox, DelegatesARIAListbox);
 
-export { DelegatesARIAListbox as D, ListboxElement as L, Listbox as a, Listbox$1 as b };
+export { Listbox as L };