@vonage/vivid 3.0.0-next.92 → 3.0.0-next.94

package/listbox/index.js

@@ -0,0 +1,1090 @@
+import '../focus/index.js';
+import { i as isListboxOption } from '../shared/index5.js';
+import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter, c as __classPrivateFieldGet, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { A as ARIAGlobalStatesAndProperties } from '../shared/aria-global.js';
+import { a as applyMixins } from '../shared/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 '../shared/key-codes.js';
+import { i as inRange } from '../shared/numbers.js';
+import '../shared/affix.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
+import '../shared/icon.js';
+import { s as slotted } from '../shared/slotted.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/focus.js';
+import '../icon/index.js';
+import '../shared/when.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/dom.js';
+import '../shared/object-keys.js';
+
+/**
+ * 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;
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+/**
+ * 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
+ */
+class Listbox$1 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;
+    }
+    /**
+     * 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() {
+        Observable.track(this, "options");
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        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$1.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$1.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$1.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);
+        }
+    }
+    /**
+     * 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 = 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();
+        }
+    }
+    /**
+     * Handles keydown actions for listbox navigation and typeahead
+     *
+     * @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;
+            }
+        }
+    }
+    /**
+     * 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);
+        }
+    }
+    /**
+     * 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();
+    }
+    /**
+     * 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();
+        }
+    }
+    /**
+     * 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;
+            });
+        }
+    }
+    /**
+     * 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 _Listbox_instances, _Listbox_disableSlottedChildren;
+class Listbox extends ListboxElement {
+  constructor() {
+    super(...arguments);
+    _Listbox_instances.add(this);
+  }
+  slottedOptionsChanged(prev, next) {
+    super.slottedOptionsChanged(prev, next);
+    __classPrivateFieldGet(this, _Listbox_instances, "m", _Listbox_disableSlottedChildren).call(this);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'disabled') {
+      __classPrivateFieldGet(this, _Listbox_instances, "m", _Listbox_disableSlottedChildren).call(this);
+    }
+  }
+}
+_Listbox_instances = new WeakSet(), _Listbox_disableSlottedChildren = function _Listbox_disableSlottedChildren() {
+  this.options.forEach(optionElement => {
+    if (!optionElement.disabled) {
+      optionElement.disabled = this.disabled;
+    }
+  });
+};
+__decorate([attr, __metadata("design:type", String)], Listbox.prototype, "appearance", void 0);
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  appearance,
+  disabled
+}) => classNames('base', ['disabled', disabled], [`appearance-${appearance}`, Boolean(appearance)]);
+const ListboxTemplate = context => {
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+<template
+	aria-activedescendant="${0}"
+	aria-multiselectable="${0}"
+	aria-label="listbox"
+	role="listbox"
+	@click="${0}"
+	@focusin="${0}"
+	@keydown="${0}"
+	@mousedown="${0}"
+	tabindex="${0}"
+>
+	<div
+		class="${0}"
+	>
+		${0}
+
+		<slot
+			${0}
+		></slot>
+	</div>
+</template>
+	`), x => x.ariaActiveDescendant, x => x.ariaMultiSelectable, (x, c) => x.clickHandler(c.event), (x, c) => x.focusinHandler(c.event), (x, c) => x.keydownHandler(c.event), (x, c) => x.mousedownHandler(c.event), x => !x.disabled ? '0' : null, getClasses, () => focusTemplate, slotted({
+    filter: ListboxElement.slottedOptionFilter,
+    flatten: true,
+    property: 'slottedOptions'
+  }));
+};
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 GMT\n */\n:host {\n  display: block;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}";
+
+const vividListbox = Listbox.compose({
+  baseName: 'listbox',
+  template: ListboxTemplate,
+  styles: css_248z
+});
+designSystem.register(vividListbox());
+
+export { vividListbox };