@vonage/vivid 3.0.0-next.120 → 3.0.0-next.122

package/shared/definition22.js

@@ -1,261 +1,1078 @@
-import { F as FoundationElement, V as Observable, _ as __decorate, N as observable, a as attr, b as __metadata, h as html, r as registerFactorial } from './index.js';
-import { i as iconElements } from './definition3.js';
-import { f as focusElements } from './definition4.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
+import { F as FoundationElement, V as Observable, _ as __decorate, a as attr, N as observable, U as DOM, Z as nullableNumberConverter, Q as __classPrivateFieldGet, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition4.js';
+import { i as isListboxOption, l as listboxOptionRegistries } from './definition23.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { i as isHTMLElement } from './dom.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 { i as inRange } from './numbers.js';
+import './affix.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import './icon.js';
-import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
 /**
- * Determines if the element is a {@link (ListboxOption:class)}
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
  *
- * @param element - the element to test.
- * @public
+ * @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 isListboxOption(el) {
-    return (isHTMLElement(el) &&
-        (el.getAttribute("role") === "option" ||
-            el instanceof HTMLOptionElement));
+function findLastIndex(array, predicate) {
+    let k = array.length;
+    while (k--) {
+        if (predicate(array[k], k, array)) {
+            return k;
+        }
+    }
+    return -1;
 }
+
+let uniqueIdCounter = 0;
 /**
- * An Option Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ * 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 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
+ * @slot - The default slot for the listbox options
  *
  * @public
  */
-class ListboxOption$1 extends FoundationElement {
-    constructor(text, value, defaultSelected, selected) {
-        super();
+class Listbox$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The internal unfiltered list of selectable options.
+         *
+         * @internal
+         */
+        this._options = [];
         /**
-         * The defaultSelected state of the option.
+         * The index of the selected option.
+         *
          * @public
          */
-        this.defaultSelected = false;
+        this.selectedIndex = -1;
         /**
-         * Tracks whether the "selected" property has been changed.
+         * 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.dirtySelected = false;
+        this.shouldSkipFocus = false;
         /**
-         * The checked state of the control.
+         * The current typeahead buffer string.
          *
-         * @public
+         * @internal
          */
-        this.selected = this.defaultSelected;
+        this.typeaheadBuffer = "";
         /**
-         * Track whether the value has been changed from the initial value
+         * Flag for the typeahead timeout expiration.
+         *
+         * @internal
          */
-        this.dirtyValue = false;
-        if (text) {
-            this.textContent = text;
+        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" });
+            });
         }
-        if (value) {
-            this.initialValue = value;
+    }
+    /**
+     * 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();
         }
-        if (defaultSelected) {
-            this.defaultSelected = defaultSelected;
+        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;
+            }
         }
-        if (selected) {
-            this.selected = selected;
+        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;
+            }
         }
-        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.
+     * 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 prev - the previous checked value
-     * @param next - the current checked value
+     * @param key - the key to be evaluated
      *
-     * @public
+     * @internal
      */
-    checkedChanged(prev, next) {
-        if (typeof next === "boolean") {
-            this.ariaChecked = next ? "true" : "false";
+    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.ariaChecked = null;
+        this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
     }
     /**
-     * Updates the proxy's text content when the default slot changes.
-     * @param prev - the previous content value
-     * @param next - the current content value
+     * Handles `keydown` actions for listbox navigation and typeahead.
      *
      * @internal
      */
-    contentChanged(prev, next) {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.textContent = this.textContent;
+    keydownHandler(e) {
+        if (this.disabled) {
+            return true;
         }
-        this.$emit("contentchange", null, { bubbles: true });
-    }
-    defaultSelectedChanged() {
-        if (!this.dirtySelected) {
-            this.selected = this.defaultSelected;
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
+        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;
             }
         }
     }
-    disabledChanged(prev, next) {
-        this.ariaDisabled = this.disabled ? "true" : "false";
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.disabled = this.disabled;
-        }
+    /**
+     * Prevents `focusin` events from firing before `click` events when the
+     * element is unfocused.
+     *
+     * @internal
+     */
+    mousedownHandler(e) {
+        this.shouldSkipFocus = !this.contains(document.activeElement);
+        return true;
     }
-    selectedAttributeChanged() {
-        this.defaultSelected = this.selectedAttribute;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.defaultSelected = this.defaultSelected;
+    /**
+     * 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");
+        });
     }
-    selectedChanged() {
-        this.ariaSelected = this.selected ? "true" : "false";
-        if (!this.dirtySelected) {
-            this.dirtySelected = true;
+    /**
+     * 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;
         }
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.selected = this.selected;
+    }
+    /**
+     * Moves focus to the last selectable option.
+     *
+     * @internal
+     */
+    selectLastOption() {
+        if (!this.disabled) {
+            this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
         }
     }
-    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;
+    /**
+     * Moves focus to the next selectable option.
+     *
+     * @internal
+     */
+    selectNextOption() {
+        if (!this.disabled && this.selectedIndex < this.options.length - 1) {
+            this.selectedIndex += 1;
         }
     }
-    get label() {
-        var _a;
-        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    /**
+     * Moves focus to the previous selectable option.
+     *
+     * @internal
+     */
+    selectPreviousOption() {
+        if (!this.disabled && this.selectedIndex > 0) {
+            this.selectedIndex = this.selectedIndex - 1;
+        }
     }
-    get text() {
+    /**
+     * Updates the selected index to match the first selected option.
+     *
+     * @internal
+     */
+    setDefaultSelectedOption() {
         var _a, _b;
-        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+        this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
     }
-    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;
+    /**
+     * 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();
         }
-        Observable.notify(this, "value");
     }
-    get value() {
-        var _a;
-        Observable.track(this, "value");
-        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    /**
+     * 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();
+        }
     }
-    get form() {
-        return this.proxy ? this.proxy.form : null;
+    /**
+     * 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([
-    observable
-], ListboxOption$1.prototype, "checked", void 0);
+    attr({ mode: "boolean" })
+], Listbox$1.prototype, "disabled", void 0);
 __decorate([
     observable
-], ListboxOption$1.prototype, "content", void 0);
+], Listbox$1.prototype, "selectedIndex", void 0);
 __decorate([
     observable
-], ListboxOption$1.prototype, "defaultSelected", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], ListboxOption$1.prototype, "disabled", void 0);
-__decorate([
-    attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption$1.prototype, "selectedAttribute", void 0);
+], Listbox$1.prototype, "selectedOptions", void 0);
 __decorate([
     observable
-], ListboxOption$1.prototype, "selected", void 0);
+], Listbox$1.prototype, "slottedOptions", void 0);
 __decorate([
-    attr({ attribute: "value", mode: "fromView" })
-], ListboxOption$1.prototype, "initialValue", void 0);
+    observable
+], Listbox$1.prototype, "typeaheadBuffer", void 0);
 /**
- * States and properties relating to the ARIA `option` role.
+ * Includes ARIA states and properties relating to the ARIA listbox role
  *
  * @public
  */
-class DelegatesARIAListboxOption {
+class DelegatesARIAListbox {
 }
 __decorate([
     observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
+__decorate([
+    observable
+], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
 __decorate([
     observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
 __decorate([
     observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+], 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
-], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
+], ListboxElement.prototype, "activeIndex", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], ListboxElement.prototype, "multiple", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], ListboxElement.prototype, "size", void 0);
 
-class ListboxOption extends ListboxOption$1 {
-  set text(value) {
-    this._text = value;
+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);
   }
-  get text() {
-    var _a;
-    return (_a = this._text) !== null && _a !== void 0 ? _a : '';
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'disabled') {
+      __classPrivateFieldGet(this, _Listbox_instances, "m", _Listbox_disableSlottedChildren).call(this);
+    }
   }
 }
-__decorate([attr({
-  attribute: 'text'
-}), __metadata("design:type", String)], ListboxOption.prototype, "_text", void 0);
-applyMixins(ListboxOption, AffixIconWithTrailing);
+_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,
-  _t2;
+  _t;
 const getClasses = ({
-  icon,
-  disabled,
-  selected,
-  checked
-}) => classNames('base', ['disabled', disabled], ['selected', Boolean(selected)], ['active', Boolean(checked)], ['icon', Boolean(icon)]);
-const ListboxOptionTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
+  appearance,
+  disabled
+}) => classNames('base', ['disabled', disabled], [`appearance-${appearance}`, Boolean(appearance)]);
+const ListboxTemplate = context => {
   const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`
-	<template
-		aria-checked="${0}"
-		aria-disabled="${0}"
-		aria-posinset="${0}"
-		aria-selected="${0}"
-		aria-setsize="${0}"
-		role="option">
-		<div class="${0}">
-			${0}
-			${0}
+<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}
-		</div>
-	</template>
-	`), x => x.ariaChecked, x => x.ariaDisabled, x => x.ariaPosInSet, x => x.ariaSelected, x => x.ariaSetSize, getClasses, () => focusTemplate, x => affixIconTemplate(x.icon), when(x => x.text, html(_t2 || (_t2 = _`<div class="text">${0}</div>`), x => x.text)));
+		></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 Wed, 14 Dec 2022 16:38:57 GMT\n */\n.base {\n  position: relative; /* this is needed for the focus */\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-block: 10px;\n  padding-inline: 16px;\n  vertical-align: middle;\n  word-break: break-word;\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-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n.base .text {\n  font: var(--vvd-typography-base);\n}\n\n.icon {\n  font-size: 20px;\n}\n.base:not(.disabled, .selected) .icon {\n  color: var(--vvd-color-neutral-600);\n}\n\n.focus-indicator {\n  --focus-stroke-color: var(--vvd-color-neutral-500);\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not([aria-checked=true])) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 18 Dec 2022 17:21:55 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}\n.base {\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\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-200);\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}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}";
 
-const listboxOption = ListboxOption.compose({
-  baseName: 'option',
-  template: ListboxOptionTemplate,
+const listboxDefinition = Listbox.compose({
+  baseName: 'listbox',
+  template: ListboxTemplate,
   styles: css_248z
-})();
-const listboxOptionElements = [listboxOption, ...iconElements, ...focusElements];
-const registerOption = registerFactorial(listboxOptionElements);
+});
+const listboxRegistries = [listboxDefinition(), ...listboxOptionRegistries, ...focusRegistries];
+const registerListbox = registerFactory(listboxRegistries);
 
-export { listboxOption as a, isListboxOption as i, listboxOptionElements as l, registerOption as r };
+export { listboxRegistries as a, listboxDefinition as l, registerListbox as r };