@vonage/vivid 4.13.0 → 4.14.0

package/shared/listbox.cjs

@@ -1,1264 +1,497 @@
 'use strict';
 
-const keyCodes$1 = require('./key-codes.cjs');
-const index = require('./index.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const dom = require('./dom.cjs');
-const keyCodes = require('./key-codes2.cjs');
-const strings = require('./strings.cjs');
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-    let k = array.length;
-    while (k--) {
-        if (predicate(array[k], k, array)) {
-            return k;
-        }
-    }
-    return -1;
-}
-
-/**
- * Determines if the element is a {@link (ListboxOption:class)}
- *
- * @param element - the element to test.
- * @public
- */
-function isListboxOption(el) {
-    return (dom.isHTMLElement(el) &&
-        (el.getAttribute("role") === "option" ||
-            el instanceof HTMLOptionElement));
-}
-/**
- * An Option Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
- *
- * @slot start - Content which can be provided before the listbox option content
- * @slot end - Content which can be provided after the listbox option content
- * @slot - The default slot for listbox option content
- * @csspart content - Wraps the listbox option content
- *
- * @public
- */
-class ListboxOption extends index.FoundationElement {
-    constructor(text, value, defaultSelected, selected) {
-        super();
-        /**
-         * The defaultSelected state of the option.
-         * @public
-         */
-        this.defaultSelected = false;
-        /**
-         * Tracks whether the "selected" property has been changed.
-         * @internal
-         */
-        this.dirtySelected = false;
-        /**
-         * The checked state of the control.
-         *
-         * @public
-         */
-        this.selected = this.defaultSelected;
-        /**
-         * Track whether the value has been changed from the initial value
-         */
-        this.dirtyValue = false;
-        if (text) {
-            this.textContent = text;
-        }
-        if (value) {
-            this.initialValue = value;
-        }
-        if (defaultSelected) {
-            this.defaultSelected = defaultSelected;
-        }
-        if (selected) {
-            this.selected = selected;
-        }
-        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
-        this.proxy.disabled = this.disabled;
-    }
-    /**
-     * Updates the ariaChecked property when the checked property changes.
-     *
-     * @param prev - the previous checked value
-     * @param next - the current checked value
-     *
-     * @public
-     */
-    checkedChanged(prev, next) {
-        if (typeof next === "boolean") {
-            this.ariaChecked = next ? "true" : "false";
-            return;
-        }
-        this.ariaChecked = null;
-    }
-    /**
-     * Updates the proxy's text content when the default slot changes.
-     * @param prev - the previous content value
-     * @param next - the current content value
-     *
-     * @internal
-     */
-    contentChanged(prev, next) {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.textContent = this.textContent;
-        }
-        this.$emit("contentchange", null, { bubbles: true });
-    }
-    defaultSelectedChanged() {
-        if (!this.dirtySelected) {
-            this.selected = this.defaultSelected;
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
-            }
-        }
-    }
-    disabledChanged(prev, next) {
-        this.ariaDisabled = this.disabled ? "true" : "false";
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.disabled = this.disabled;
-        }
-    }
-    selectedAttributeChanged() {
-        this.defaultSelected = this.selectedAttribute;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.defaultSelected = this.defaultSelected;
-        }
-    }
-    selectedChanged() {
-        this.ariaSelected = this.selected ? "true" : "false";
-        if (!this.dirtySelected) {
-            this.dirtySelected = true;
-        }
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.selected = this.selected;
-        }
-    }
-    initialValueChanged(previous, next) {
-        // If the value is clean and the component is connected to the DOM
-        // then set value equal to the attribute value.
-        if (!this.dirtyValue) {
-            this.value = this.initialValue;
-            this.dirtyValue = false;
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get text() {
-        var _a, _b;
-        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
-    }
-    set value(next) {
-        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
-        this._value = newValue;
-        this.dirtyValue = true;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.value = newValue;
-        }
-        index.Observable.notify(this, "value");
-    }
-    get value() {
-        var _a;
-        index.Observable.track(this, "value");
-        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get form() {
-        return this.proxy ? this.proxy.form : null;
-    }
-}
-index.__decorate([
-    index.observable
-], ListboxOption.prototype, "checked", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption.prototype, "content", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption.prototype, "defaultSelected", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled", void 0);
-index.__decorate([
-    index.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption.prototype, "selected", void 0);
-index.__decorate([
-    index.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue", void 0);
-/**
- * States and properties relating to the ARIA `option` role.
- *
- * @public
- */
-class DelegatesARIAListboxOption {
-}
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption, startEnd.StartEnd, DelegatesARIAListboxOption);
-
-/**
- * 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 index.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;
-    }
-    /**
-     * The first selected option.
-     *
-     * @internal
-     */
-    get firstSelectedOption() {
-        var _a;
-        return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : 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() {
-        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() {
-        index.Observable.track(this, "options");
-        return this._options;
-    }
-    set options(value) {
-        this._options = value;
-        index.Observable.notify(this, "options");
-    }
-    /**
-     * 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 keyCodes.keyHome: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectFirstOption();
-                }
-                break;
-            }
-            // Select the next selectable option
-            case keyCodes.keyArrowDown: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectNextOption();
-                }
-                break;
-            }
-            // Select the previous selectable option
-            case keyCodes.keyArrowUp: {
-                if (!e.shiftKey) {
-                    e.preventDefault();
-                    this.selectPreviousOption();
-                }
-                break;
-            }
-            // Select the last available option
-            case keyCodes.keyEnd: {
-                e.preventDefault();
-                this.selectLastOption();
-                break;
-            }
-            case keyCodes.keyTab: {
-                this.focusAndScrollOptionIntoView();
-                return true;
-            }
-            case keyCodes.keyEnter:
-            case keyCodes.keyEscape: {
-                return true;
-            }
-            case keyCodes.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 = index.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);
-        }
-    }
-    /**
-     * Moves focus to the next selectable option.
-     *
-     * @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;
-    }
-    /**
-     * Sets an option as selected and gives it focus.
-     *
-     * @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 = strings.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;
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Listbox$1.prototype, "disabled", void 0);
-index.__decorate([
-    index.observable
-], Listbox$1.prototype, "selectedIndex", void 0);
-index.__decorate([
-    index.observable
-], Listbox$1.prototype, "selectedOptions", void 0);
-index.__decorate([
-    index.observable
-], Listbox$1.prototype, "slottedOptions", void 0);
-index.__decorate([
-    index.observable
-], Listbox$1.prototype, "typeaheadBuffer", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA listbox role
- *
- * @public
- */
-class DelegatesARIAListbox {
-}
-index.__decorate([
-    index.observable
-], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
-applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.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 = strings.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 = strings.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 = strings.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 = strings.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();
+const definition = require('./definition35.cjs');
+const vividElement = require('./vivid-element.cjs');
+const keyCodes = require('./key-codes.cjs');
+const strings = require('./strings.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const applyMixins = require('./apply-mixins2.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+
+/**
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+ *
+ * @param array - the array to test
+ * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+ */
+function findLastIndex(array, predicate) {
+    let k = array.length;
+    while (k--) {
+        if (predicate(array[k], k, array)) {
+            return k;
         }
-        this.shouldSkipFocus = false;
     }
+    return -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.VividElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Unchecks all options when the listbox loses focus.
+     * The internal unfiltered list of selectable options.
      *
      * @internal
      */
-    focusoutHandler(e) {
-        if (this.multiple) {
-            this.uncheckAllOptions();
-        }
-    }
+    this._options = [];
+    this.selectedIndex = -1;
+    this.selectedOptions = [];
     /**
-     * Handles keydown actions for listbox navigation and typeahead
+     * A standard `click` event creates a `focus` event before firing, so a
+     * `mousedown` event is used to skip that initial focus.
      *
-     * @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 keyCodes.keyHome: {
-                this.checkFirstOption(shiftKey);
-                return;
-            }
-            // Select the next selectable option
-            case keyCodes.keyArrowDown: {
-                this.checkNextOption(shiftKey);
-                return;
-            }
-            // Select the previous selectable option
-            case keyCodes.keyArrowUp: {
-                this.checkPreviousOption(shiftKey);
-                return;
-            }
-            // Select the last available option
-            case keyCodes.keyEnd: {
-                this.checkLastOption(shiftKey);
-                return;
-            }
-            case keyCodes.keyTab: {
-                this.focusAndScrollOptionIntoView();
-                return true;
-            }
-            case keyCodes.keyEscape: {
-                this.uncheckAllOptions();
-                this.checkActiveIndex();
-                return true;
-            }
-            case keyCodes.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.shouldSkipFocus = false;
+    this.typeaheadBuffer = "";
     /**
-     * Prevents `focusin` events from firing before `click` events when the
-     * element is unfocused.
+     * Flag for the typeahead timeout expiration.
      *
-     * @override
      * @internal
      */
-    mousedownHandler(e) {
-        if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
-            return super.mousedownHandler(e);
-        }
-    }
+    this.typeaheadExpired = true;
     /**
-     * Switches between single-selection and multi-selection mode.
+     * The timeout ID for the typeahead handler.
      *
      * @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();
-    }
+    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() {
+    defineVividComponent.Observable.track(this, "options");
+    return this._options;
+  }
+  set options(value) {
+    this._options = value;
+    defineVividComponent.Observable.notify(this, "options");
+  }
+  static {
     /**
-     * Sets an option as selected and gives it focus.
+     * A static filter to include only selectable options.
      *
-     * @override
+     * @param n - element to filter
      * @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.slottedOptionFilter = (n) => definition.isListboxOption(n) && !n.hidden;
+  }
+  static {
     /**
-     * Ensures the size is a positive integer when the property is updated.
-     *
-     * @param prev - the previous size value
-     * @param next - the current size value
+     * Typeahead timeout in milliseconds.
      *
      * @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) {
-            index.DOM.queueUpdate(() => {
-                this.size = size;
-            });
-        }
+    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;
     }
-    /**
-     * 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();
+  }
+  /**
+   * 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" });
+      });
     }
-    /**
-     * @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;
-        }
+  }
+  /**
+   * 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();
     }
-    /**
-     * 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;
-        }
+    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;
+      }
     }
-}
-index.__decorate([
-    index.observable
-], ListboxElement.prototype, "activeIndex", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], ListboxElement.prototype, "multiple", void 0);
-index.__decorate([
-    index.attr({ converter: index.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);
+    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;
+      }
     }
   }
   /**
-   * 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
+   */
+  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
    */
-  #horizontalKeydownHandler(e) {
+  keydownHandler(e) {
     if (this.disabled) {
       return true;
     }
+    this.shouldSkipFocus = false;
     const key = e.key;
     switch (key) {
-      case keyCodes$1.keyArrowRight: {
+      case keyCodes.keyHome: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectFirstOption();
+        }
+        break;
+      }
+      case keyCodes.keyArrowDown: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
         }
         break;
       }
-      case keyCodes$1.keyArrowLeft: {
+      case keyCodes.keyArrowUp: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
         }
         break;
       }
+      case keyCodes.keyEnd: {
+        e.preventDefault();
+        this.selectLastOption();
+        break;
+      }
+      case keyCodes.keyTab: {
+        this.focusAndScrollOptionIntoView();
+        return true;
+      }
+      case keyCodes.keyEnter:
+      case keyCodes.keyEscape:
+        return true;
+      case keyCodes.keySpace:
+        if (this.typeaheadExpired) {
+          return true;
+        }
+      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(_) {
+    this.shouldSkipFocus = !this.contains(document.activeElement);
+    return true;
+  }
+  /**
+   * Switches between single-selection and multi-selection mode.
+   *
+   * @internal
+   */
+  multipleChanged(_, 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) {
+    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 = defineVividComponent.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;
+    }
+  }
+  /**
+   * Moves focus to the previous selectable option.
+   *
+   * @internal
+   */
+  selectPreviousOption() {
+    if (!this.disabled && this.selectedIndex > 0) {
+      this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  slottedOptionsChanged(prev, next) {
-    super.slottedOptionsChanged(prev, next);
-    this.#disableSlottedChildren();
+  /**
+   * Updates the selected index to match the first selected option.
+   *
+   * @internal
+   */
+  setDefaultSelectedOption() {
+    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "disabled") {
-      this.#disableSlottedChildren();
+  /**
+   * 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();
     }
   }
-  #disableSlottedChildren() {
-    this.options.forEach((optionElement) => {
-      if (!optionElement.disabled) {
-        optionElement.disabled = this.disabled;
+  /**
+   * 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 (definition.isListboxOption(item)) {
+        options.push(item);
+      }
+      return options;
+    }, []);
+    const setSize = `${this.options.length}`;
+    this.options.forEach((option, index) => {
+      if (!option.id) {
+        option.id = strings.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([
+  defineVividComponent.attr({ mode: "boolean" })
+], _Listbox.prototype, "disabled");
+__decorateClass([
+  defineVividComponent.observable
+], _Listbox.prototype, "selectedIndex");
+__decorateClass([
+  defineVividComponent.observable
+], _Listbox.prototype, "selectedOptions");
+__decorateClass([
+  defineVividComponent.observable
+], _Listbox.prototype, "slottedOptions");
+__decorateClass([
+  defineVividComponent.observable
+], _Listbox.prototype, "typeaheadBuffer");
+let Listbox = _Listbox;
+class DelegatesARIAListbox {
 }
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  index.attr
-], Listbox.prototype, "appearance");
+  defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaActiveDescendant");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  index.attr
-], Listbox.prototype, "orientation");
+  defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaDisabled");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  index.attr
-], Listbox.prototype, "shape");
+  defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaExpanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
+applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Listbox, DelegatesARIAListbox);
 
-exports.DelegatesARIAListbox = DelegatesARIAListbox;
 exports.Listbox = Listbox;
-exports.Listbox$1 = Listbox$1;
-exports.ListboxElement = ListboxElement;