@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition16.js

@@ -1,1138 +1,627 @@
-import { a as iconRegistries } from './definition25.js';
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, r as registerFactory } from './index.js';
-import { d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, b as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes.js';
-import { R as RepeatDirective } from './repeat.js';
-import { e as elements, s as slotted } from './slotted.js';
-import { c as children } from './children.js';
-import { I as Icon } from './icon.js';
+import { D as DOM, O as Observable, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { P as Popup, p as popupRegistries } from './definition60.js';
+import { f as focusRegistries } from './definition58.js';
+import { a as listboxOptionRegistries } from './definition35.js';
+import { s as styles$1 } from './text-field.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { f as formElements } from './index2.js';
+import { b as Listbox, D as DelegatesARIAListbox, a as Listbox$1 } from './listbox.js';
+import { S as StartEnd } from './start-end.js';
+import { S as SelectPosition } from './select.options.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './form-associated.js';
+import { l as limit } from './numbers.js';
+import { u as uniqueId } from './strings.js';
 import { f as focusTemplateFactory } from './focus2.js';
-import { b as keyEnter$1, c as keySpace } from './key-codes2.js';
+import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
+class _Combobox extends Listbox {
+}
 /**
- * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
- * and should include all non-deprecated and non-experimental Standard events
+ * A form-associated base class for the {@link (Combobox:class)} component.
+ *
+ * @internal
  */
-const eventFocus = "focus";
-const eventFocusIn = "focusin";
-const eventFocusOut = "focusout";
-const eventKeyDown = "keydown";
+class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
 
 /**
- * Enumerates the data grid auto generated header options
- * default option generates a non-sticky header row
- *
+ * Autocomplete values for combobox.
  * @public
  */
-const GenerateHeaderOptions$1 = {
+const ComboboxAutocomplete = {
+    inline: "inline",
+    list: "list",
+    both: "both",
     none: "none",
-    default: "default",
-    sticky: "sticky",
-};
-/**
- * Enumerates possible data grid cell types.
- *
- * @public
- */
-const DataGridCellTypes = {
-    default: "default",
-    columnHeader: "columnheader",
-    rowHeader: "rowheader",
-};
-/**
- * Enumerates possible data grid row types
- *
- * @public
- */
-const DataGridRowTypes$1 = {
-    default: "default",
-    header: "header",
-    stickyHeader: "sticky-header",
 };
 
 /**
- * A Data Grid Row Custom HTML Element.
+ * A Combobox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria-practices/#combobox | ARIA combobox }.
+ *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot control - Used to replace the input element representing the combobox
+ * @slot indicator - The visual indicator representing the expanded state
+ * @slot - The default slot for the options
+ * @csspart control - The wrapper element containing the input area, including start and end
+ * @csspart selected-value - The input element representing the selected value
+ * @csspart indicator - The element wrapping the indicator slot
+ * @csspart listbox - The wrapper for the listbox slotted options
+ * @fires change - Fires a custom 'change' event when the value updates
  *
- * @fires row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
- * @slot - The default slot for custom cell elements
  * @public
  */
-let DataGridRow$1 = class DataGridRow extends FoundationElement {
+let Combobox$1 = class Combobox extends FormAssociatedCombobox {
     constructor() {
         super(...arguments);
         /**
-         * The type of row
+         * The internal value property.
          *
-         * @public
-         * @remarks
-         * HTML Attribute: row-type
+         * @internal
          */
-        this.rowType = DataGridRowTypes$1.default;
+        this._value = "";
         /**
-         * The base data for this row
+         * The collection of currently filtered options.
          *
          * @public
          */
-        this.rowData = null;
+        this.filteredOptions = [];
         /**
-         * The column definitions of the row
+         * The current filter value.
          *
-         * @public
+         * @internal
          */
-        this.columnDefinitions = null;
+        this.filter = "";
         /**
-         * Whether focus is on/in a cell within this row.
+         * The initial state of the position attribute.
          *
          * @internal
          */
-        this.isActiveRow = false;
-        this.cellsRepeatBehavior = null;
-        this.cellsPlaceholder = null;
+        this.forcedPosition = false;
         /**
+         * The unique id for the internal listbox element.
+         *
          * @internal
          */
-        this.focusColumnIndex = 0;
-        this.refocusOnLoad = false;
-        this.updateRowStyle = () => {
-            this.style.gridTemplateColumns = this.gridTemplateColumns;
-        };
+        this.listboxId = uniqueId("listbox-");
+        /**
+         * The max height for the listbox when opened.
+         *
+         * @internal
+         */
+        this.maxHeight = 0;
+        /**
+         * The open attribute.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: open
+         */
+        this.open = false;
     }
-    gridTemplateColumnsChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateRowStyle();
-        }
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        super.formResetCallback();
+        this.setDefaultSelectedOption();
+        this.updateValue();
     }
-    rowTypeChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateItemTemplate();
-        }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
     }
-    rowDataChanged() {
-        if (this.rowData !== null && this.isActiveRow) {
-            this.refocusOnLoad = true;
-            return;
-        }
+    get isAutocompleteInline() {
+        return (this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth);
     }
-    cellItemTemplateChanged() {
-        this.updateItemTemplate();
+    get isAutocompleteList() {
+        return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
     }
-    headerCellItemTemplateChanged() {
-        this.updateItemTemplate();
+    get isAutocompleteBoth() {
+        return this.autocomplete === ComboboxAutocomplete.both;
     }
     /**
+     * Sets focus and synchronize ARIA attributes when the open property changes.
+     *
+     * @param prev - the previous open value
+     * @param next - the current open value
+     *
      * @internal
      */
-    connectedCallback() {
-        super.connectedCallback();
-        // note that row elements can be reused with a different data object
-        // as the parent grid's repeat behavior reacts to changes in the data set.
-        if (this.cellsRepeatBehavior === null) {
-            this.cellsPlaceholder = document.createComment("");
-            this.appendChild(this.cellsPlaceholder);
-            this.updateItemTemplate();
-            this.cellsRepeatBehavior = new RepeatDirective(x => x.columnDefinitions, x => x.activeCellItemTemplate, { positioning: true }).createBehavior(this.cellsPlaceholder);
-            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-            this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
-        }
-        this.addEventListener("cell-focused", this.handleCellFocus);
-        this.addEventListener(eventFocusOut, this.handleFocusout);
-        this.addEventListener(eventKeyDown, this.handleKeydown);
-        this.updateRowStyle();
-        if (this.refocusOnLoad) {
-            // if focus was on the row when data changed try to refocus on same cell
-            this.refocusOnLoad = false;
-            if (this.cellElements.length > this.focusColumnIndex) {
-                this.cellElements[this.focusColumnIndex].focus();
-            }
+    openChanged() {
+        if (this.open) {
+            this.ariaControls = this.listboxId;
+            this.ariaExpanded = "true";
+            this.setPositioning();
+            this.focusAndScrollOptionIntoView();
+            // focus is directed to the element when `open` is changed programmatically
+            DOM.queueUpdate(() => this.focus());
+            return;
         }
+        this.ariaControls = "";
+        this.ariaExpanded = "false";
     }
     /**
-     * @internal
+     * The list of options.
+     *
+     * @public
+     * @remarks
+     * Overrides `Listbox.options`.
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("cell-focused", this.handleCellFocus);
-        this.removeEventListener(eventFocusOut, this.handleFocusout);
-        this.removeEventListener(eventKeyDown, this.handleKeydown);
-    }
-    handleFocusout(e) {
-        if (!this.contains(e.target)) {
-            this.isActiveRow = false;
-            this.focusColumnIndex = 0;
-        }
-    }
-    handleCellFocus(e) {
-        this.isActiveRow = true;
-        this.focusColumnIndex = this.cellElements.indexOf(e.target);
-        this.$emit("row-focused", this);
+    get options() {
+        Observable.track(this, "options");
+        return this.filteredOptions.length ? this.filteredOptions : this._options;
     }
-    handleKeydown(e) {
-        if (e.defaultPrevented) {
-            return;
-        }
-        let newFocusColumnIndex = 0;
-        switch (e.key) {
-            case keyArrowLeft:
-                // focus left one cell
-                newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-                this.cellElements[newFocusColumnIndex].focus();
-                e.preventDefault();
-                break;
-            case keyArrowRight:
-                // focus right one cell
-                newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
-                this.cellElements[newFocusColumnIndex].focus();
-                e.preventDefault();
-                break;
-            case keyHome:
-                if (!e.ctrlKey) {
-                    this.cellElements[0].focus();
-                    e.preventDefault();
-                }
-                break;
-            case keyEnd:
-                if (!e.ctrlKey) {
-                    // focus last cell of the row
-                    this.cellElements[this.cellElements.length - 1].focus();
-                    e.preventDefault();
-                }
-                break;
-        }
-    }
-    updateItemTemplate() {
-        this.activeCellItemTemplate =
-            this.rowType === DataGridRowTypes$1.default &&
-                this.cellItemTemplate !== undefined
-                ? this.cellItemTemplate
-                : this.rowType === DataGridRowTypes$1.default &&
-                    this.cellItemTemplate === undefined
-                    ? this.defaultCellItemTemplate
-                    : this.headerCellItemTemplate !== undefined
-                        ? this.headerCellItemTemplate
-                        : this.defaultHeaderCellItemTemplate;
-    }
-};
-__decorate([
-    attr({ attribute: "grid-template-columns" })
-], DataGridRow$1.prototype, "gridTemplateColumns", void 0);
-__decorate([
-    attr({ attribute: "row-type" })
-], DataGridRow$1.prototype, "rowType", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "rowData", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "columnDefinitions", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "cellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "headerCellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "rowIndex", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "isActiveRow", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "activeCellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "defaultCellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "defaultHeaderCellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGridRow$1.prototype, "cellElements", void 0);
-
-/**
- * A Data Grid Custom HTML Element.
- *
- * @slot - The default slot for custom row elements
- * @public
- */
-let DataGrid$1 = class DataGrid extends FoundationElement {
-    constructor() {
-        super();
-        /**
-         * When true the component will not add itself to the tab queue.
-         * Default is false.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: no-tabbing
-         */
-        this.noTabbing = false;
-        /**
-         *  Whether the grid should automatically generate a header row and its type
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: generate-header
-         */
-        this.generateHeader = GenerateHeaderOptions$1.default;
-        /**
-         * The data being displayed in the grid
-         *
-         * @public
-         */
-        this.rowsData = [];
-        /**
-         * The column definitions of the grid
-         *
-         * @public
-         */
-        this.columnDefinitions = null;
-        /**
-         * The index of the row that will receive focus the next time the
-         * grid is focused. This value changes as focus moves to different
-         * rows within the grid.  Changing this value when focus is already
-         * within the grid moves focus to the specified row.
-         *
-         * @public
-         */
-        this.focusRowIndex = 0;
-        /**
-         * The index of the column that will receive focus the next time the
-         * grid is focused. This value changes as focus moves to different rows
-         * within the grid.  Changing this value when focus is already within
-         * the grid moves focus to the specified column.
-         *
-         * @public
-         */
-        this.focusColumnIndex = 0;
-        this.rowsPlaceholder = null;
-        this.generatedHeader = null;
-        this.isUpdatingFocus = false;
-        this.pendingFocusUpdate = false;
-        this.rowindexUpdateQueued = false;
-        this.columnDefinitionsStale = true;
-        this.generatedGridTemplateColumns = "";
-        this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
-            if (this.rowElements.length === 0) {
-                this.focusRowIndex = 0;
-                this.focusColumnIndex = 0;
-                return;
-            }
-            const focusRowIndex = Math.max(0, Math.min(this.rowElements.length - 1, rowIndex));
-            const focusRow = this.rowElements[focusRowIndex];
-            const cells = focusRow.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"]');
-            const focusColumnIndex = Math.max(0, Math.min(cells.length - 1, columnIndex));
-            const focusTarget = cells[focusColumnIndex];
-            if (scrollIntoView &&
-                this.scrollHeight !== this.clientHeight &&
-                ((focusRowIndex < this.focusRowIndex && this.scrollTop > 0) ||
-                    (focusRowIndex > this.focusRowIndex &&
-                        this.scrollTop < this.scrollHeight - this.clientHeight))) {
-                focusTarget.scrollIntoView({ block: "center", inline: "center" });
-            }
-            focusTarget.focus();
-        };
-        this.onChildListChange = (mutations, 
-        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-        observer) => {
-            if (mutations && mutations.length) {
-                mutations.forEach((mutation) => {
-                    mutation.addedNodes.forEach((newNode) => {
-                        if (newNode.nodeType === 1 &&
-                            newNode.getAttribute("role") === "row") {
-                            newNode.columnDefinitions = this.columnDefinitions;
-                        }
-                    });
-                });
-                this.queueRowIndexUpdate();
-            }
-        };
-        this.queueRowIndexUpdate = () => {
-            if (!this.rowindexUpdateQueued) {
-                this.rowindexUpdateQueued = true;
-                DOM.queueUpdate(this.updateRowIndexes);
-            }
-        };
-        this.updateRowIndexes = () => {
-            let newGridTemplateColumns = this.gridTemplateColumns;
-            if (newGridTemplateColumns === undefined) {
-                // try to generate columns based on manual rows
-                if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
-                    const firstRow = this.rowElements[0];
-                    this.generatedGridTemplateColumns = new Array(firstRow.cellElements.length)
-                        .fill("1fr")
-                        .join(" ");
-                }
-                newGridTemplateColumns = this.generatedGridTemplateColumns;
-            }
-            this.rowElements.forEach((element, index) => {
-                const thisRow = element;
-                thisRow.rowIndex = index;
-                thisRow.gridTemplateColumns = newGridTemplateColumns;
-                if (this.columnDefinitionsStale) {
-                    thisRow.columnDefinitions = this.columnDefinitions;
-                }
-            });
-            this.rowindexUpdateQueued = false;
-            this.columnDefinitionsStale = false;
-        };
+    set options(value) {
+        this._options = value;
+        Observable.notify(this, "options");
     }
     /**
-     *  generates a gridTemplateColumns based on columndata array
+     * Updates the placeholder on the proxy element.
+     * @internal
      */
-    static generateTemplateColumns(columnDefinitions) {
-        let templateColumns = "";
-        columnDefinitions.forEach((column) => {
-            templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
-        });
-        return templateColumns;
-    }
-    noTabbingChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.noTabbing) {
-                this.setAttribute("tabIndex", "-1");
-            }
-            else {
-                this.setAttribute("tabIndex", this.contains(document.activeElement) ||
-                    this === document.activeElement
-                    ? "-1"
-                    : "0");
-            }
-        }
-    }
-    generateHeaderChanged() {
-        if (this.$fastController.isConnected) {
-            this.toggleGeneratedHeader();
+    placeholderChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.placeholder = this.placeholder;
         }
     }
-    gridTemplateColumnsChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateRowIndexes();
-        }
+    positionChanged(prev, next) {
+        this.positionAttribute = next;
+        this.setPositioning();
     }
-    rowsDataChanged() {
-        if (this.columnDefinitions === null && this.rowsData.length > 0) {
-            this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
-        }
-        if (this.$fastController.isConnected) {
-            this.toggleGeneratedHeader();
+    /**
+     * The value property.
+     *
+     * @public
+     */
+    get value() {
+        Observable.track(this, "value");
+        return this._value;
+    }
+    set value(next) {
+        var _a, _b, _c;
+        const prev = `${this._value}`;
+        if (this.$fastController.isConnected && this.options) {
+            const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+            const prevSelectedValue = (_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.text;
+            const nextSelectedValue = (_b = this.options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.text;
+            this.selectedIndex =
+                prevSelectedValue !== nextSelectedValue
+                    ? selectedIndex
+                    : this.selectedIndex;
+            next = ((_c = this.firstSelectedOption) === null || _c === void 0 ? void 0 : _c.text) || next;
+        }
+        if (prev !== next) {
+            this._value = next;
+            super.valueChanged(prev, next);
+            Observable.notify(this, "value");
         }
     }
-    columnDefinitionsChanged() {
-        if (this.columnDefinitions === null) {
-            this.generatedGridTemplateColumns = "";
+    /**
+     * Handle opening and closing the listbox when the combobox is clicked.
+     *
+     * @param e - the mouse event
+     * @internal
+     */
+    clickHandler(e) {
+        if (this.disabled) {
             return;
         }
-        this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
-        if (this.$fastController.isConnected) {
-            this.columnDefinitionsStale = true;
-            this.queueRowIndexUpdate();
-        }
-    }
-    headerCellItemTemplateChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.generatedHeader !== null) {
-                this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+        if (this.open) {
+            const captured = e.target.closest(`option,[role=option]`);
+            if (!captured || captured.disabled) {
+                return;
             }
+            this.selectedOptions = [captured];
+            this.control.value = captured.text;
+            this.clearSelectionRange();
+            this.updateValue(true);
         }
-    }
-    focusRowIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
+        this.open = !this.open;
+        if (this.open) {
+            this.control.focus();
         }
+        return true;
     }
-    focusColumnIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
+    connectedCallback() {
+        super.connectedCallback();
+        this.forcedPosition = !!this.positionAttribute;
+        if (this.value) {
+            this.initialValue = this.value;
         }
     }
     /**
+     * Synchronize the `aria-disabled` property when the `disabled` property changes.
+     *
+     * @param prev - The previous disabled value
+     * @param next - The next disabled value
+     *
      * @internal
      */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.rowItemTemplate === undefined) {
-            this.rowItemTemplate = this.defaultRowItemTemplate;
+    disabledChanged(prev, next) {
+        if (super.disabledChanged) {
+            super.disabledChanged(prev, next);
         }
-        this.rowsPlaceholder = document.createComment("");
-        this.appendChild(this.rowsPlaceholder);
-        this.toggleGeneratedHeader();
-        this.rowsRepeatBehavior = new RepeatDirective(x => x.rowsData, x => x.rowItemTemplate, { positioning: true }).createBehavior(this.rowsPlaceholder);
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
-        this.addEventListener("row-focused", this.handleRowFocus);
-        this.addEventListener(eventFocus, this.handleFocus);
-        this.addEventListener(eventKeyDown, this.handleKeydown);
-        this.addEventListener(eventFocusOut, this.handleFocusOut);
-        this.observer = new MutationObserver(this.onChildListChange);
-        // only observe if nodes are added or removed
-        this.observer.observe(this, { childList: true });
-        if (this.noTabbing) {
-            this.setAttribute("tabindex", "-1");
-        }
-        DOM.queueUpdate(this.queueRowIndexUpdate);
+        this.ariaDisabled = this.disabled ? "true" : "false";
     }
     /**
-     * @internal
+     * Filter available options by text value.
+     *
+     * @public
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("row-focused", this.handleRowFocus);
-        this.removeEventListener(eventFocus, this.handleFocus);
-        this.removeEventListener(eventKeyDown, this.handleKeydown);
-        this.removeEventListener(eventFocusOut, this.handleFocusOut);
-        // disconnect observer
-        this.observer.disconnect();
-        this.rowsPlaceholder = null;
-        this.generatedHeader = null;
+    filterOptions() {
+        if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) {
+            this.filter = "";
+        }
+        const filter = this.filter.toLowerCase();
+        this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
+        if (this.isAutocompleteList) {
+            if (!this.filteredOptions.length && !filter) {
+                this.filteredOptions = this._options;
+            }
+            this._options.forEach(o => {
+                o.hidden = !this.filteredOptions.includes(o);
+            });
+        }
     }
     /**
+     * Focus the control and scroll the first selected option into view.
+     *
      * @internal
+     * @remarks
+     * Overrides: `Listbox.focusAndScrollOptionIntoView`
      */
-    handleRowFocus(e) {
-        this.isUpdatingFocus = true;
-        const focusRow = e.target;
-        this.focusRowIndex = this.rowElements.indexOf(focusRow);
-        this.focusColumnIndex = focusRow.focusColumnIndex;
-        this.setAttribute("tabIndex", "-1");
-        this.isUpdatingFocus = false;
+    focusAndScrollOptionIntoView() {
+        if (this.contains(document.activeElement)) {
+            this.control.focus();
+            if (this.firstSelectedOption) {
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest" });
+                });
+            }
+        }
     }
     /**
+     * Handle focus state when the element or its children lose focus.
+     *
+     * @param e - The focus event
      * @internal
      */
-    handleFocus(e) {
-        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    focusoutHandler(e) {
+        this.syncValue();
+        if (!this.open) {
+            return true;
+        }
+        const focusTarget = e.relatedTarget;
+        if (this.isSameNode(focusTarget)) {
+            this.focus();
+            return;
+        }
+        if (!this.options || !this.options.includes(focusTarget)) {
+            this.open = false;
+        }
     }
     /**
+     * Handle content changes on the control input.
+     *
+     * @param e - the input event
      * @internal
      */
-    handleFocusOut(e) {
-        if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
-            this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+    inputHandler(e) {
+        this.filter = this.control.value;
+        this.filterOptions();
+        if (!this.isAutocompleteInline) {
+            this.selectedIndex = this.options
+                .map(option => option.text)
+                .indexOf(this.control.value);
+        }
+        if (e.inputType.includes("deleteContent") || !this.filter.length) {
+            return true;
+        }
+        if (this.isAutocompleteList && !this.open) {
+            this.open = true;
+        }
+        if (this.isAutocompleteInline) {
+            if (this.filteredOptions.length) {
+                this.selectedOptions = [this.filteredOptions[0]];
+                this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+                this.setInlineSelection();
+            }
+            else {
+                this.selectedIndex = -1;
+            }
         }
+        return;
     }
     /**
+     * Handle keydown actions for listbox navigation.
+     *
+     * @param e - the keyboard event
      * @internal
      */
-    handleKeydown(e) {
-        if (e.defaultPrevented) {
-            return;
-        }
-        let newFocusRowIndex;
-        const maxIndex = this.rowElements.length - 1;
-        const currentGridBottom = this.offsetHeight + this.scrollTop;
-        const lastRow = this.rowElements[maxIndex];
-        switch (e.key) {
-            case keyArrowUp:
-                e.preventDefault();
-                // focus up one row
-                this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
-                break;
-            case keyArrowDown:
-                e.preventDefault();
-                // focus down one row
-                this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
-                break;
-            case keyPageUp:
-                e.preventDefault();
-                if (this.rowElements.length === 0) {
-                    this.focusOnCell(0, 0, false);
-                    break;
+    keydownHandler(e) {
+        const key = e.key;
+        if (e.ctrlKey || e.shiftKey) {
+            return true;
+        }
+        switch (key) {
+            case "Enter": {
+                this.syncValue();
+                if (this.isAutocompleteInline) {
+                    this.filter = this.value;
                 }
-                if (this.focusRowIndex === 0) {
-                    this.focusOnCell(0, this.focusColumnIndex, false);
-                    return;
+                this.open = false;
+                this.clearSelectionRange();
+                break;
+            }
+            case "Escape": {
+                if (!this.isAutocompleteInline) {
+                    this.selectedIndex = -1;
                 }
-                newFocusRowIndex = this.focusRowIndex - 1;
-                for (newFocusRowIndex; newFocusRowIndex >= 0; newFocusRowIndex--) {
-                    const thisRow = this.rowElements[newFocusRowIndex];
-                    if (thisRow.offsetTop < this.scrollTop) {
-                        this.scrollTop =
-                            thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
-                        break;
-                    }
+                if (this.open) {
+                    this.open = false;
+                    break;
                 }
-                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                this.value = "";
+                this.control.value = "";
+                this.filter = "";
+                this.filterOptions();
                 break;
-            case keyPageDown:
+            }
+            case "Tab": {
+                this.setInputToSelection();
+                if (!this.open) {
+                    return true;
+                }
                 e.preventDefault();
-                if (this.rowElements.length === 0) {
-                    this.focusOnCell(0, 0, false);
+                this.open = false;
+                break;
+            }
+            case "ArrowUp":
+            case "ArrowDown": {
+                this.filterOptions();
+                if (!this.open) {
+                    this.open = true;
                     break;
                 }
-                // focus down one "page"
-                if (this.focusRowIndex >= maxIndex ||
-                    lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
-                    this.focusOnCell(maxIndex, this.focusColumnIndex, false);
-                    return;
+                if (this.filteredOptions.length > 0) {
+                    super.keydownHandler(e);
                 }
-                newFocusRowIndex = this.focusRowIndex + 1;
-                for (newFocusRowIndex; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
-                    const thisRow = this.rowElements[newFocusRowIndex];
-                    if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
-                        let stickyHeaderOffset = 0;
-                        if (this.generateHeader === GenerateHeaderOptions$1.sticky &&
-                            this.generatedHeader !== null) {
-                            stickyHeaderOffset = this.generatedHeader.clientHeight;
-                        }
-                        this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
-                        break;
-                    }
-                }
-                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-                break;
-            case keyHome:
-                if (e.ctrlKey) {
-                    e.preventDefault();
-                    // focus first cell of first row
-                    this.focusOnCell(0, 0, true);
-                }
-                break;
-            case keyEnd:
-                if (e.ctrlKey && this.columnDefinitions !== null) {
-                    e.preventDefault();
-                    // focus last cell of last row
-                    this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+                if (this.isAutocompleteInline) {
+                    this.setInlineSelection();
                 }
                 break;
+            }
+            default: {
+                return true;
+            }
         }
     }
-    queueFocusUpdate() {
-        if (this.isUpdatingFocus &&
-            (this.contains(document.activeElement) || this === document.activeElement)) {
-            return;
-        }
-        if (this.pendingFocusUpdate === false) {
-            this.pendingFocusUpdate = true;
-            DOM.queueUpdate(() => this.updateFocus());
+    /**
+     * Handle keyup actions for value input and text field manipulations.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keyupHandler(e) {
+        const key = e.key;
+        switch (key) {
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "Backspace":
+            case "Delete":
+            case "Home":
+            case "End": {
+                this.filter = this.control.value;
+                this.selectedIndex = -1;
+                this.filterOptions();
+                break;
+            }
         }
     }
-    updateFocus() {
-        this.pendingFocusUpdate = false;
-        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
-    }
-    toggleGeneratedHeader() {
-        if (this.generatedHeader !== null) {
-            this.removeChild(this.generatedHeader);
-            this.generatedHeader = null;
-        }
-        if (this.generateHeader !== GenerateHeaderOptions$1.none &&
-            this.rowsData.length > 0) {
-            const generatedHeaderElement = document.createElement(this.rowElementTag);
-            this.generatedHeader = generatedHeaderElement;
-            this.generatedHeader.columnDefinitions = this.columnDefinitions;
-            this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
-            this.generatedHeader.rowType =
-                this.generateHeader === GenerateHeaderOptions$1.sticky
-                    ? DataGridRowTypes$1.stickyHeader
-                    : DataGridRowTypes$1.header;
-            if (this.firstChild !== null || this.rowsPlaceholder !== null) {
-                this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
+    /**
+     * Ensure that the selectedIndex is within the current allowable filtered range.
+     *
+     * @param prev - the previous selected index value
+     * @param next - the current selected index value
+     *
+     * @internal
+     */
+    selectedIndexChanged(prev, next) {
+        if (this.$fastController.isConnected) {
+            next = limit(-1, this.options.length - 1, next);
+            // we only want to call the super method when the selectedIndex is in range
+            if (next !== this.selectedIndex) {
+                this.selectedIndex = next;
+                return;
             }
-            return;
+            super.selectedIndexChanged(prev, next);
         }
     }
-};
-/**
- *  generates a basic column definition by examining sample row data
- */
-DataGrid$1.generateColumns = (row) => {
-    return Object.getOwnPropertyNames(row).map((property, index) => {
-        return {
-            columnDataKey: property,
-            gridColumn: `${index}`,
-        };
-    });
-};
-__decorate([
-    attr({ attribute: "no-tabbing", mode: "boolean" })
-], DataGrid$1.prototype, "noTabbing", void 0);
-__decorate([
-    attr({ attribute: "generate-header" })
-], DataGrid$1.prototype, "generateHeader", void 0);
-__decorate([
-    attr({ attribute: "grid-template-columns" })
-], DataGrid$1.prototype, "gridTemplateColumns", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "rowsData", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "columnDefinitions", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "rowItemTemplate", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "cellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "focusRowIndex", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "focusColumnIndex", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "defaultRowItemTemplate", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "rowElementTag", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "rowElements", void 0);
-
-const defaultCellContentsTemplate = html `
-    <template>
-        ${x => x.rowData === null ||
-    x.columnDefinition === null ||
-    x.columnDefinition.columnDataKey === null
-    ? null
-    : x.rowData[x.columnDefinition.columnDataKey]}
-    </template>
-`;
-const defaultHeaderCellContentsTemplate = html `
-    <template>
-        ${x => x.columnDefinition === null
-    ? null
-    : x.columnDefinition.title === undefined
-        ? x.columnDefinition.columnDataKey
-        : x.columnDefinition.title}
-    </template>
-`;
-/**
- * A Data Grid Cell Custom HTML Element.
- *
- * @fires cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
- * @slot - The default slot for cell contents.  The "cell contents template" renders here.
- * @public
- */
-let DataGridCell$1 = class DataGridCell extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The type of cell
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: cell-type
-         */
-        this.cellType = DataGridCellTypes.default;
-        /**
-         * The base data for the parent row
-         *
-         * @public
-         */
-        this.rowData = null;
-        /**
-         * The base data for the column
-         *
-         * @public
-         */
-        this.columnDefinition = null;
-        this.isActiveCell = false;
-        this.customCellView = null;
-        this.updateCellStyle = () => {
-            this.style.gridColumn = this.gridColumn;
-        };
-    }
-    cellTypeChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateCellView();
+    /**
+     * Move focus to the previous selectable option.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.selectPreviousOption`
+     */
+    selectPreviousOption() {
+        if (!this.disabled && this.selectedIndex >= 0) {
+            this.selectedIndex = this.selectedIndex - 1;
         }
     }
-    gridColumnChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateCellStyle();
+    /**
+     * Set the default selected options at initialization or reset.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.setDefaultSelectedOption`
+     */
+    setDefaultSelectedOption() {
+        if (this.$fastController.isConnected && this.options) {
+            const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null || el.selected);
+            this.selectedIndex = selectedIndex;
+            if (!this.dirtyValue && this.firstSelectedOption) {
+                this.value = this.firstSelectedOption.text;
+            }
+            this.setSelectedOptions();
         }
     }
-    columnDefinitionChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.updateCellView();
+    /**
+     * Focus and set the content of the control based on the first selected option.
+     *
+     * @internal
+     */
+    setInputToSelection() {
+        if (this.firstSelectedOption) {
+            this.control.value = this.firstSelectedOption.text;
+            this.control.focus();
         }
     }
     /**
+     * Focus, set and select the content of the control based on the first selected option.
+     *
      * @internal
      */
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        this.addEventListener(eventFocusIn, this.handleFocusin);
-        this.addEventListener(eventFocusOut, this.handleFocusout);
-        this.addEventListener(eventKeyDown, this.handleKeydown);
-        this.style.gridColumn = `${((_a = this.columnDefinition) === null || _a === void 0 ? void 0 : _a.gridColumn) === undefined
-            ? 0
-            : this.columnDefinition.gridColumn}`;
-        this.updateCellView();
-        this.updateCellStyle();
+    setInlineSelection() {
+        if (this.firstSelectedOption) {
+            this.setInputToSelection();
+            this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
+        }
     }
     /**
+     * Determines if a value update should involve emitting a change event, then updates the value.
+     *
      * @internal
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener(eventFocusIn, this.handleFocusin);
-        this.removeEventListener(eventFocusOut, this.handleFocusout);
-        this.removeEventListener(eventKeyDown, this.handleKeydown);
-        this.disconnectCellView();
+    syncValue() {
+        var _a;
+        const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+        this.updateValue(this.value !== newValue);
     }
-    handleFocusin(e) {
-        if (this.isActiveCell) {
-            return;
-        }
-        this.isActiveCell = true;
-        switch (this.cellType) {
-            case DataGridCellTypes.columnHeader:
-                if (this.columnDefinition !== null &&
-                    this.columnDefinition.headerCellInternalFocusQueue !== true &&
-                    typeof this.columnDefinition.headerCellFocusTargetCallback ===
-                        "function") {
-                    // move focus to the focus target
-                    const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-                    if (focusTarget !== null) {
-                        focusTarget.focus();
-                    }
-                }
-                break;
-            default:
-                if (this.columnDefinition !== null &&
-                    this.columnDefinition.cellInternalFocusQueue !== true &&
-                    typeof this.columnDefinition.cellFocusTargetCallback === "function") {
-                    // move focus to the focus target
-                    const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-                    if (focusTarget !== null) {
-                        focusTarget.focus();
-                    }
-                }
-                break;
-        }
-        this.$emit("cell-focused", this);
+    /**
+     * Calculate and apply listbox positioning based on available viewport space.
+     *
+     * @param force - direction to force the listbox to display
+     * @public
+     */
+    setPositioning() {
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const availableBottom = viewportHeight - currentBox.bottom;
+        this.position = this.forcedPosition
+            ? this.positionAttribute
+            : currentBox.top > availableBottom
+                ? SelectPosition.above
+                : SelectPosition.below;
+        this.positionAttribute = this.forcedPosition
+            ? this.positionAttribute
+            : this.position;
+        this.maxHeight =
+            this.position === SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
     }
-    handleFocusout(e) {
-        if (this !== document.activeElement && !this.contains(document.activeElement)) {
-            this.isActiveCell = false;
+    /**
+     * Ensure that the entire list of options is used when setting the selected property.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.selectedOptionsChanged`
+     */
+    selectedOptionsChanged(prev, next) {
+        if (this.$fastController.isConnected) {
+            this._options.forEach(o => {
+                o.selected = next.includes(o);
+            });
         }
     }
-    handleKeydown(e) {
-        if (e.defaultPrevented ||
-            this.columnDefinition === null ||
-            (this.cellType === DataGridCellTypes.default &&
-                this.columnDefinition.cellInternalFocusQueue !== true) ||
-            (this.cellType === DataGridCellTypes.columnHeader &&
-                this.columnDefinition.headerCellInternalFocusQueue !== true)) {
-            return;
-        }
-        switch (e.key) {
-            case keyEnter:
-            case keyFunction2:
-                if (this.contains(document.activeElement) &&
-                    document.activeElement !== this) {
-                    return;
-                }
-                switch (this.cellType) {
-                    case DataGridCellTypes.columnHeader:
-                        if (this.columnDefinition.headerCellFocusTargetCallback !==
-                            undefined) {
-                            const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-                            if (focusTarget !== null) {
-                                focusTarget.focus();
-                            }
-                            e.preventDefault();
-                        }
-                        break;
-                    default:
-                        if (this.columnDefinition.cellFocusTargetCallback !== undefined) {
-                            const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-                            if (focusTarget !== null) {
-                                focusTarget.focus();
-                            }
-                            e.preventDefault();
-                        }
-                        break;
-                }
-                break;
-            case keyEscape:
-                if (this.contains(document.activeElement) &&
-                    document.activeElement !== this) {
-                    this.focus();
-                    e.preventDefault();
-                }
-                break;
-        }
+    /**
+     * Synchronize the form-associated proxy and update the value property of the element.
+     *
+     * @param prev - the previous collection of slotted option elements
+     * @param next - the next collection of slotted option elements
+     *
+     * @internal
+     */
+    slottedOptionsChanged(prev, next) {
+        super.slottedOptionsChanged(prev, next);
+        this.updateValue();
     }
-    updateCellView() {
-        this.disconnectCellView();
-        if (this.columnDefinition === null) {
-            return;
+    /**
+     * Sets the value and to match the first selected option.
+     *
+     * @param shouldEmit - if true, the change event will be emitted
+     *
+     * @internal
+     */
+    updateValue(shouldEmit) {
+        var _a;
+        if (this.$fastController.isConnected) {
+            this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+            this.control.value = this.value;
         }
-        switch (this.cellType) {
-            case DataGridCellTypes.columnHeader:
-                if (this.columnDefinition.headerCellTemplate !== undefined) {
-                    this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
-                }
-                else {
-                    this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
-                }
-                break;
-            case undefined:
-            case DataGridCellTypes.rowHeader:
-            case DataGridCellTypes.default:
-                if (this.columnDefinition.cellTemplate !== undefined) {
-                    this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
-                }
-                else {
-                    this.customCellView = defaultCellContentsTemplate.render(this, this);
-                }
-                break;
+        if (shouldEmit) {
+            this.$emit("change");
         }
     }
-    disconnectCellView() {
-        if (this.customCellView !== null) {
-            this.customCellView.dispose();
-            this.customCellView = null;
-        }
+    /**
+     * @internal
+     */
+    clearSelectionRange() {
+        const controlValueLength = this.control.value.length;
+        this.control.setSelectionRange(controlValueLength, controlValueLength);
     }
 };
 __decorate([
-    attr({ attribute: "cell-type" })
-], DataGridCell$1.prototype, "cellType", void 0);
-__decorate([
-    attr({ attribute: "grid-column" })
-], DataGridCell$1.prototype, "gridColumn", void 0);
+    attr({ attribute: "autocomplete", mode: "fromView" })
+], Combobox$1.prototype, "autocomplete", void 0);
 __decorate([
     observable
-], DataGridCell$1.prototype, "rowData", void 0);
+], Combobox$1.prototype, "maxHeight", void 0);
+__decorate([
+    attr({ attribute: "open", mode: "boolean" })
+], Combobox$1.prototype, "open", void 0);
+__decorate([
+    attr
+], Combobox$1.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: "position" })
+], Combobox$1.prototype, "positionAttribute", void 0);
 __decorate([
     observable
-], DataGridCell$1.prototype, "columnDefinition", void 0);
-
-const dataGridStyles = ":host {\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-block-size: 400px;\n}\n\n.base {\n  position: relative;\n  overflow: auto;\n  block-size: inherit;\n  inline-size: 100%;\n  max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n  display: none;\n}";
-
-const dataGridRowStyles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\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(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type*=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
-
-const dataGridCellStyles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\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(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n:host(:not(:focus)) .base > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$2(target, key, result);
-  return result;
-};
-const DataGridSelectionMode = {
-  none: "none",
-  singleRow: "single-row",
-  multiRow: "multi-row",
-  singleCell: "single-cell",
-  multiCell: "multi-cell"
-};
-class DataGrid extends DataGrid$1 {
-  constructor() {
-    super();
-    this.#handleKeypress = (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        this.#handleClick(e);
-      }
-    };
-    this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell")
-        return;
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
-        return;
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
-      }
-    };
-    this.#handleCellSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      const cell = target;
-      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
-      } else {
-        const cacheTargetSelection = cell.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(cell, !cacheTargetSelection);
-      }
-    };
-    this.#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      const row = target.parentNode;
-      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(row, !this.#selectedRows.includes(row));
-      } else {
-        const cacheTargetSelection = row.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(row, !cacheTargetSelection);
-      }
-    };
-    this.#setSelectedState = (cell, selectedState) => {
-      cell.setAttribute("aria-selected", selectedState.toString());
-    };
-    this.#resetSelection = () => {
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => this.#setSelectedState(cell, false));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
-      }
-      if (this.selectionMode === DataGridSelectionMode.none) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.setAttribute("aria-selected", "false"));
-      }
-    };
-    this.#initSelections = () => {
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => !cell.hasAttribute("aria-selected") && this.#setSelectedState(cell, false));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
-      }
-      if (this.selectionMode === DataGridSelectionMode.none) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
-        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => !row.hasAttribute("aria-selected") && row.setAttribute("aria-selected", "false"));
-      }
-    };
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeypress);
-  }
-  get #selectedRows() {
-    return this.rowElements.filter((row) => row.getAttribute("aria-selected") === "true");
-  }
-  get #selectedCells() {
-    return this.rowElements.reduce((acc, row) => {
-      const rowChildren = Array.from(row.children);
-      const selectedCells = rowChildren.filter((cell) => cell.getAttribute("aria-selected") === "true");
-      return acc.concat(selectedCells);
-    }, []);
-  }
-  selectionModeChanged(oldValue) {
-    if (oldValue === void 0) {
-      DOM.queueUpdate(this.#initSelections);
-      return;
-    }
-    this.#resetSelection();
-  }
-  #handleKeypress;
-  #handleClick;
-  #handleCellSelection;
-  #handleRowSelection;
-  #setSelectedState;
-  #resetSelection;
-  #initSelections;
-  static generateColumns(rowData) {
-    return Object.keys(rowData).map((property, index) => {
-      return {
-        columnDataKey: property,
-        gridColumn: `${index}`
-      };
-    });
-  }
-}
-__decorateClass$2([
-  attr({ attribute: "selection-mode" })
-], DataGrid.prototype, "selectionMode", 2);
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$1(target, key, result);
-  return result;
-};
-class DataGridRow extends DataGridRow$1 {
-  constructor() {
-    super(...arguments);
-    this.ariaSelected = null;
-  }
+], Combobox$1.prototype, "position", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA combobox role.
+ *
+ * @public
+ */
+class DelegatesARIACombobox {
 }
-__decorateClass$1([
-  attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected", 2);
-
-const DataGridCellSortStates = {
-  none: "none",
-  ascending: "ascending",
-  descending: "descending",
-  other: "other"
-};
-const GenerateHeaderOptions = {
-  none: "none",
-  default: "default",
-  sticky: "sticky"
-};
-const DataGridRowTypes = {
-  default: "default",
-  header: "header",
-  stickyHeader: "sticky-header"
-};
-const DataGridCellRole = {
-  columnheader: "columnheader",
-  rowheader: "rowheader",
-  default: "gridcell"
-};
+__decorate([
+    observable
+], DelegatesARIACombobox.prototype, "ariaAutoComplete", void 0);
+__decorate([
+    observable
+], DelegatesARIACombobox.prototype, "ariaControls", void 0);
+applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
+applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
-function createRowItemTemplate(context) {
-  const rowTag = context.tagFor(DataGridRow);
-  return html`
-    <${rowTag}
-        :rowData="${(x) => x}"
-        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
-    ></${rowTag}>
-`;
-}
-function getMultiSelectAriaState(x) {
-  return x.selectionMode === void 0 || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes("multi") ? "true" : "false";
-}
-function setHeaderRow(x) {
-  if (x.columnDefinitions === null) {
-    const headerRow = x.querySelector('[cell-type="columnheader"]')?.parentElement;
-    if (headerRow) {
-      const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : x.generateHeader === GenerateHeaderOptions.default ? DataGridRowTypes.header : "hidden-header";
-      headerRow.setAttribute("row-type", rowType);
-    }
-  }
-}
-function handleColumnSort(_, { event }) {
-  event.stopPropagation();
-}
-const DataGridTemplate = (context) => {
-  const rowItemTemplate = createRowItemTemplate(context);
-  const rowTag = context.tagFor(DataGridRow);
-  return html`
-        <template
-						aria-multiselectable="${getMultiSelectAriaState}"
-            role="grid"
-            tabindex="0"
-						@sort="${handleColumnSort}"
-            :rowElementTag="${() => rowTag}"
-            :defaultRowItemTemplate="${rowItemTemplate}"
-            ${children({
-    property: "rowElements",
-    filter: elements("[role=row]")
-  })}
-        >
-					<div class="base">
-						${setHeaderRow}
-            <slot></slot>
-					</div>
-        </template>
-    `;
-};
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  position: relative;\n}\n\n.control {\n  display: flex;\n  padding-inline-end: 44px !important;\n}\n\n.icon {\n  inset-inline-end: 16px;\n  inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n  cursor: pointer;\n}\n.disabled .icon {\n  cursor: not-allowed;\n}\n\n.listbox {\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.listbox {\n  /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\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.listbox.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.listbox:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.listbox:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n::part(popup-base) {\n  inline-size: 100%;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1145,159 +634,109 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class DataGridCell extends DataGridCell$1 {
-  constructor() {
-    super();
-    this.ariaSelected = null;
-    this.ariaSort = null;
-    this.updateCellStyle = () => {
-      if (this.gridColumn && !this.gridColumn.includes("undefined")) {
-        this.style.gridColumn = this.gridColumn;
-      } else {
-        this.style.removeProperty("grid-column");
-      }
-    };
-  }
-  ariaSelectedChanged(_, selectedState) {
-    this.shadowRoot.querySelector(".base")?.classList.toggle("selected", selectedState === "true");
-  }
+let Combobox = class extends Combobox$1 {
   connectedCallback() {
     super.connectedCallback();
-    this.ariaSelectedChanged(null, this.ariaSelected);
+    this._popup.anchor = this._anchor;
   }
-  handleFocusin(e) {
-    super.handleFocusin(e);
-    this.shadowRoot.querySelector(".base").classList.add("active");
-  }
-  handleFocusout(e) {
-    super.handleFocusout(e);
-    this.shadowRoot.querySelector(".base").classList.remove("active");
-  }
-}
-__decorateClass([
-  attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected", 2);
+};
 __decorateClass([
-  attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort", 2);
+  attr
+], Combobox.prototype, "placement", 2);
+Combobox = __decorateClass([
+  formElements
+], Combobox);
+applyMixins(Combobox, AffixIcon);
 
-function createCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
+function renderLabel() {
   return html`
-    <${cellTag}
-        cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
-        grid-column="${(_, c) => c.index + 1}"
-        :rowData="${(_, c) => c.parent.rowData}"
-        :columnDefinition="${(x) => x}"
-				selected="${(_, c) => c.parent.ariaSelected === "true" ? true : null}"
-    ></${cellTag}>
-`;
+	  <label for="control" class="label">
+		  ${(x) => x.label}
+	  </label>`;
 }
-function createHeaderCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
+const getStateClasses = ({
+  disabled,
+  placeholder,
+  label
+}) => classNames(
+  "base",
+  ["disabled", disabled],
+  ["placeholder", Boolean(placeholder)],
+  ["no-label", !label]
+);
+function renderInput(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html`
-    <${cellTag}
-        cell-type="columnheader"
-        grid-column="${(_, c) => c.index + 1}"
-        :columnDefinition="${(x) => x}"
-    ></${cellTag}>
-`;
+		<div class="${getStateClasses}" ${ref("_anchor")}>
+			${when((x) => x.label, renderLabel())}
+			<div class="fieldset">
+				<input
+					id="control"
+					class="control"
+					aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
+					aria-autocomplete="${(x) => x.ariaAutoComplete}"
+					aria-controls="${(x) => x.ariaControls}"
+					aria-disabled="${(x) => x.ariaDisabled}"
+					aria-expanded="${(x) => x.ariaExpanded}"
+					aria-haspopup="listbox"
+					placeholder="${(x) => x.placeholder}"
+					role="combobox"
+					type="text"
+					?disabled="${(x) => x.disabled}"
+					:value="${(x) => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					@keyup="${(x, c) => x.keyupHandler(c.event)}"
+					${ref("control")}
+				/>
+				${() => affixIconTemplate("chevron-down-line")}
+				${() => focusTemplate}
+			</div>
+		</div>`;
 }
-const DataGridRowTemplate = (context) => {
-  const cellItemTemplate = createCellItemTemplate(context);
-  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+const comboboxTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
   return html`
         <template
-            role="row"
-            class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
-            :defaultCellItemTemplate="${cellItemTemplate}"
-            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-            ${children({
-    property: "cellElements",
-    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
-  })}
+            aria-disabled="${(x) => x.ariaDisabled}"
+            autocomplete="${(x) => x.autocomplete}"
+            tabindex="${(x) => !x.disabled ? "0" : null}"
+            @click="${(x, c) => x.clickHandler(c.event)}"
+            @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+            @keydown="${(x, c) => x.keydownHandler(c.event)}"
         >
-					<div class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
-							 style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
-					>
-            <slot ${slotted("slottedCellElements")}></slot>
-					</div>
+			${() => renderInput(context)}
+			<${popupTag} class="popup"
+				?open="${(x) => x.open}"
+				placement="${(x) => x.placement}"
+				strategy="absolute"
+				${ref("_popup")}>
+				<div id="${(x) => x.listboxId}"
+					class="listbox"
+					role="listbox"
+					?disabled="${(x) => x.disabled}"
+					${ref("listbox")}>
+					<slot ${slotted({
+    filter: Listbox$1.slottedOptionFilter,
+    flatten: true,
+    property: "slottedOptions"
+  })}>
+					</slot>
+				</div>
+			</${popupTag}>
         </template>
-    `;
+		`;
 };
 
-function shouldShowSortIcons(x) {
-  if (x.columnDefinition) {
-    x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
+const combobox = Combobox.compose({
+  baseName: "combobox",
+  template: comboboxTemplate,
+  styles: [styles$1, styles],
+  shadowOptions: {
+    delegatesFocus: true
   }
-  return x.cellType === "columnheader" && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
-}
-function getSortIcon(x) {
-  return x.ariaSort === DataGridCellSortStates.ascending ? "sort-asc-solid" : x.ariaSort === DataGridCellSortStates.descending ? "sort-desc-solid" : "sort-solid";
-}
-function renderSortIcons(c) {
-  const iconTag = c.tagFor(Icon);
-  return html`
-			${when(shouldShowSortIcons, html`
-				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`)}
-		`;
-}
-function isSortable(x) {
-  return x.cellType === "columnheader" && x.ariaSort !== null;
-}
-function emitSortEvent(x) {
-  x.$emit(
-    "sort",
-    { columnDataKey: x.columnDefinition && x.columnDefinition.columnDataKey ? x.columnDefinition.columnDataKey : x.textContent.trim(), sortDirection: x.ariaSort }
-  );
-}
-function handleClick(x) {
-  if (isSortable(x)) {
-    emitSortEvent(x);
-  }
-}
-function handleKeyDown(x, e) {
-  if (isSortable(x) && (e.key === keyEnter$1 || e.key === keySpace)) {
-    emitSortEvent(x);
-  }
-  return true;
-}
-function DataGridCellTemplate(context) {
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-        <template
-            tabindex="-1"
-            role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
-						@click="${handleClick}"
-						@keydown="${(x, c) => handleKeyDown(x, c.event)}"
-        >
-					<div class="base">
-							<slot></slot>
-							${() => focusTemplate}
-							${(_) => renderSortIcons(context)}
-					</div>
-
-        </template>
-    `;
-}
-
-const dataGrid = DataGrid.compose({
-  baseName: "data-grid",
-  template: DataGridTemplate,
-  styles: dataGridStyles
-})();
-const dataGridRow = DataGridRow.compose({
-  baseName: "data-grid-row",
-  template: DataGridRowTemplate,
-  styles: dataGridRowStyles
-})();
-const dataGridCell = DataGridCell.compose({
-  baseName: "data-grid-cell",
-  template: DataGridCellTemplate,
-  styles: dataGridCellStyles
 })();
-const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
-const registerDataGrid = registerFactory(dataGridElements);
+const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...focusRegistries, ...listboxOptionRegistries];
+const registerCombobox = registerFactory(comboboxRegistries);
 
-export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };
+export { comboboxRegistries as a, combobox as c, registerCombobox as r };