@vonage/vivid 3.9.0 → 3.11.0

package/shared/definition21.js

@@ -1,1052 +1,271 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, W as DOM, h as html, b as __metadata, r as registerFactory } from './index.js';
-import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d 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 { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { i as iconRegistries } from './definition3.js';
+import { f as focusRegistries } from './definition4.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.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 { f as focusTemplateFactory } from './focus2.js';
+import './form-elements.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
 /**
- * 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
- */
-const eventFocus = "focus";
-const eventFocusIn = "focusin";
-const eventFocusOut = "focusout";
-const eventKeyDown = "keydown";
-
-/**
- * Enumerates the data grid auto generated header options
- * default option generates a non-sticky header row
- *
- * @public
- */
-const GenerateHeaderOptions = {
-    none: "none",
-    default: "default",
-    sticky: "sticky",
-};
-/**
- * Enumerates possible data grid cell types.
+ * Determines if the element is a {@link (ListboxOption:class)}
  *
+ * @param element - the element to test.
  * @public
  */
-const DataGridCellTypes = {
-    default: "default",
-    columnHeader: "columnheader",
-    rowHeader: "rowheader",
-};
+function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
 /**
- * Enumerates possible data grid row types
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
  *
- * @public
- */
-const DataGridRowTypes = {
-    default: "default",
-    header: "header",
-    stickyHeader: "sticky-header",
-};
-
-/**
- * A Data Grid Row Custom HTML Element.
+ * @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
  *
- * @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
  */
-class DataGridRow$1 extends FoundationElement {
-    constructor() {
-        super(...arguments);
+class ListboxOption$1 extends FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
         /**
-         * The type of row
-         *
+         * The defaultSelected state of the option.
          * @public
-         * @remarks
-         * HTML Attribute: row-type
          */
-        this.rowType = DataGridRowTypes.default;
+        this.defaultSelected = false;
         /**
-         * The base data for this row
-         *
-         * @public
+         * Tracks whether the "selected" property has been changed.
+         * @internal
          */
-        this.rowData = null;
+        this.dirtySelected = false;
         /**
-         * The column definitions of the row
+         * The checked state of the control.
          *
          * @public
          */
-        this.columnDefinitions = null;
+        this.selected = this.defaultSelected;
         /**
-         * Whether focus is on/in a cell within this row.
-         *
-         * @internal
+         * Track whether the value has been changed from the initial value
          */
-        this.isActiveRow = false;
-        this.cellsRepeatBehavior = null;
-        this.cellsPlaceholder = null;
-        /**
-         * @internal
-         */
-        this.focusColumnIndex = 0;
-        this.refocusOnLoad = false;
-        this.updateRowStyle = () => {
-            this.style.gridTemplateColumns = this.gridTemplateColumns;
-        };
-    }
-    gridTemplateColumnsChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateRowStyle();
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
         }
-    }
-    rowTypeChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateItemTemplate();
-        }
-    }
-    rowDataChanged() {
-        if (this.rowData !== null && this.isActiveRow) {
-            this.refocusOnLoad = true;
-            return;
+        if (value) {
+            this.initialValue = value;
         }
-    }
-    cellItemTemplateChanged() {
-        this.updateItemTemplate();
-    }
-    headerCellItemTemplateChanged() {
-        this.updateItemTemplate();
-    }
-    /**
-     * @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]);
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
         }
-        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();
-            }
+        if (selected) {
+            this.selected = selected;
         }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
     }
     /**
-     * @internal
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
      */
-    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);
-    }
-    handleKeydown(e) {
-        if (e.defaultPrevented) {
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
             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.default &&
-                this.cellItemTemplate !== undefined
-                ? this.cellItemTemplate
-                : this.rowType === DataGridRowTypes.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
- */
-class DataGrid$1 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.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;
-        };
+        this.ariaChecked = null;
     }
     /**
-     *  generates a gridTemplateColumns based on columndata array
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @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();
-        }
-    }
-    gridTemplateColumnsChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateRowIndexes();
-        }
-    }
-    rowsDataChanged() {
-        if (this.columnDefinitions === null && this.rowsData.length > 0) {
-            this.columnDefinitions = DataGrid$1.generateColumns(this.rowsData[0]);
-        }
-        if (this.$fastController.isConnected) {
-            this.toggleGeneratedHeader();
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
         }
+        this.$emit("contentchange", null, { bubbles: true });
     }
-    columnDefinitionsChanged() {
-        if (this.columnDefinitions === null) {
-            this.generatedGridTemplateColumns = "";
-            return;
-        }
-        this.generatedGridTemplateColumns = DataGrid$1.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;
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
             }
         }
     }
-    focusRowIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
         }
     }
-    focusColumnIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
         }
     }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.rowItemTemplate === undefined) {
-            this.rowItemTemplate = this.defaultRowItemTemplate;
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
         }
-        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");
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
         }
-        DOM.queueUpdate(this.queueRowIndexUpdate);
-    }
-    /**
-     * @internal
-     */
-    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;
     }
-    /**
-     * @internal
-     */
-    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;
+    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;
+        }
     }
-    /**
-     * @internal
-     */
-    handleFocus(e) {
-        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
     }
-    /**
-     * @internal
-     */
-    handleFocusOut(e) {
-        if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
-            this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
-        }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
     }
-    /**
-     * @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;
-                }
-                if (this.focusRowIndex === 0) {
-                    this.focusOnCell(0, this.focusColumnIndex, false);
-                    return;
-                }
-                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;
-                    }
-                }
-                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-                break;
-            case keyPageDown:
-                e.preventDefault();
-                if (this.rowElements.length === 0) {
-                    this.focusOnCell(0, 0, false);
-                    break;
-                }
-                // focus down one "page"
-                if (this.focusRowIndex >= maxIndex ||
-                    lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
-                    this.focusOnCell(maxIndex, this.focusColumnIndex, false);
-                    return;
-                }
-                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.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);
-                }
-                break;
+    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;
         }
+        Observable.notify(this, "value");
     }
-    queueFocusUpdate() {
-        if (this.isUpdatingFocus &&
-            (this.contains(document.activeElement) || this === document.activeElement)) {
-            return;
-        }
-        if (this.pendingFocusUpdate === false) {
-            this.pendingFocusUpdate = true;
-            DOM.queueUpdate(() => this.updateFocus());
-        }
+    get value() {
+        var _a;
+        Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
     }
-    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.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.sticky
-                    ? DataGridRowTypes.stickyHeader
-                    : DataGridRowTypes.header;
-            if (this.firstChild !== null || this.rowsPlaceholder !== null) {
-                this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
-            }
-            return;
-        }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
     }
 }
-/**
- *  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);
+], ListboxOption$1.prototype, "checked", void 0);
 __decorate([
     observable
-], DataGrid$1.prototype, "columnDefinitions", void 0);
+], ListboxOption$1.prototype, "content", void 0);
 __decorate([
     observable
-], DataGrid$1.prototype, "rowItemTemplate", void 0);
+], ListboxOption$1.prototype, "defaultSelected", void 0);
 __decorate([
-    observable
-], DataGrid$1.prototype, "cellItemTemplate", void 0);
-__decorate([
-    observable
-], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
+    attr({ mode: "boolean" })
+], ListboxOption$1.prototype, "disabled", void 0);
 __decorate([
-    observable
-], DataGrid$1.prototype, "focusRowIndex", void 0);
+    attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption$1.prototype, "selectedAttribute", void 0);
 __decorate([
     observable
-], DataGrid$1.prototype, "focusColumnIndex", void 0);
+], ListboxOption$1.prototype, "selected", 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>
-`;
+    attr({ attribute: "value", mode: "fromView" })
+], ListboxOption$1.prototype, "initialValue", void 0);
 /**
- * A Data Grid Cell Custom HTML Element.
+ * States and properties relating to the ARIA `option` role.
  *
- * @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
  */
-class DataGridCell$1 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();
-        }
-    }
-    gridColumnChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateCellStyle();
-        }
-    }
-    columnDefinitionChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.updateCellView();
-        }
-    }
-    /**
-     * @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();
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener(eventFocusIn, this.handleFocusin);
-        this.removeEventListener(eventFocusOut, this.handleFocusout);
-        this.removeEventListener(eventKeyDown, this.handleKeydown);
-        this.disconnectCellView();
-    }
-    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);
-    }
-    handleFocusout(e) {
-        if (this !== document.activeElement && !this.contains(document.activeElement)) {
-            this.isActiveCell = false;
-        }
-    }
-    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;
-        }
-    }
-    updateCellView() {
-        this.disconnectCellView();
-        if (this.columnDefinition === null) {
-            return;
-        }
-        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;
-        }
-    }
-    disconnectCellView() {
-        if (this.customCellView !== null) {
-            this.customCellView.dispose();
-            this.customCellView = null;
-        }
-    }
+class DelegatesARIAListboxOption {
 }
 __decorate([
-    attr({ attribute: "cell-type" })
-], DataGridCell$1.prototype, "cellType", void 0);
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
 __decorate([
-    attr({ attribute: "grid-column" })
-], DataGridCell$1.prototype, "gridColumn", void 0);
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
 __decorate([
     observable
-], DataGridCell$1.prototype, "rowData", void 0);
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
 __decorate([
     observable
-], DataGridCell$1.prototype, "columnDefinition", void 0);
-
-var css_248z$2 = ":host {\n  position: relative;\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-height: var(--data-grid-max-height, 200px);\n  overflow-y: auto;\n}";
-
-var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Mon, 24 Apr 2023 10:27:51 GMT\n */\n:host {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n  position: sticky;\n  z-index: 999;\n  top: 0;\n  background: var(--vvd-color-canvas);\n}";
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Apr 2023 10:27:51 GMT\n */\n:host {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-100);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n  border-color: currentColor;\n  font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n  display: none;\n}";
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
 
-class DataGrid extends DataGrid$1 {}
-__decorate([attr({
-  attribute: 'selection-mode'
-}), __metadata("design:type", String)], DataGrid.prototype, "selectionMode", void 0);
-
-class DataGridRow extends DataGridRow$1 {}
-
-let _2$1 = t => t,
-  _t$2,
-  _t2$1;
-function createRowItemTemplate(context) {
-  const rowTag = context.tagFor(DataGridRow);
-  return html(_t$2 || (_t$2 = _2$1`
-    <${0}
-        :rowData="${0}"
-        :cellItemTemplate="${0}"
-        :headerCellItemTemplate="${0}"
-    ></${0}>
-`), rowTag, x => x, (_, c) => c.parent.cellItemTemplate, (_, c) => c.parent.headerCellItemTemplate, rowTag);
-}
-const DataGridTemplate = context => {
-  const rowItemTemplate = createRowItemTemplate(context);
-  const rowTag = context.tagFor(DataGridRow);
-  return html(_t2$1 || (_t2$1 = _2$1`
-        <template
-            role="grid"
-            tabindex="0"
-            :rowElementTag="${0}"
-            :defaultRowItemTemplate="${0}"
-            ${0}
-        >
-            <slot></slot>
-        </template>
-    `), () => rowTag, rowItemTemplate, children({
-    property: 'rowElements',
-    filter: elements('[role=row]')
-  }));
-};
-
-class DataGridCell extends DataGridCell$1 {
-  handleFocusin(e) {
-    super.handleFocusin(e);
-    this.shadowRoot.getElementById('focus-wrapper').classList.add('active');
+class ListboxOption extends ListboxOption$1 {
+  set text(value) {
+    this._text = value;
   }
-  handleFocusout(e) {
-    super.handleFocusout(e);
-    this.shadowRoot.getElementById('focus-wrapper').classList.remove('active');
+  get text() {
+    var _a;
+    return (_a = this._text) !== null && _a !== void 0 ? _a : '';
+  }
+  get label() {
+    var _a;
+    return (_a = this._label) !== null && _a !== void 0 ? _a : this.text;
+  }
+  set label(value) {
+    this._label = value;
   }
 }
-
-let _2 = t => t,
-  _t$1,
-  _t2,
-  _t3;
-function createCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
-  return html(_t$1 || (_t$1 = _2`
-    <${0}
-        cell-type="${0}"
-        grid-column="${0}"
-        :rowData="${0}"
-        :columnDefinition="${0}"
-    ></${0}>
-`), cellTag, x => x.isRowHeader ? 'rowheader' : undefined, (_, c) => c.index + 1, (_, c) => c.parent.rowData, x => x, cellTag);
-}
-function createHeaderCellItemTemplate(context) {
-  const cellTag = context.tagFor(DataGridCell);
-  return html(_t2 || (_t2 = _2`
-    <${0}
-        cell-type="columnheader"
-        grid-column="${0}"
-        :columnDefinition="${0}"
-    ></${0}>
-`), cellTag, (_, c) => c.index + 1, x => x, cellTag);
-}
-const DataGridRowTemplate = context => {
-  const cellItemTemplate = createCellItemTemplate(context);
-  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  return html(_t3 || (_t3 = _2`
-        <template
-            role="row"
-            class="${0}"
-            :defaultCellItemTemplate="${0}"
-            :defaultHeaderCellItemTemplate="${0}"
-            ${0}
-        >
-            <slot ${0}></slot>
-        </template>
-    `), x => x.rowType !== 'default' ? x.rowType : '', cellItemTemplate, headerCellItemTemplate, children({
-    property: 'cellElements',
-    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
-  }), slotted('slottedCellElements'));
-};
-
-const DataGridCellRole = {
-  columnheader: 'columnheader',
-  rowheader: 'rowheader',
-  default: 'gridcell'
-};
+__decorate([attr({
+  attribute: 'text'
+}), __metadata("design:type", String)], ListboxOption.prototype, "_text", void 0);
+__decorate([attr({
+  attribute: 'label'
+}), __metadata("design:type", String)], ListboxOption.prototype, "_label", void 0);
+applyMixins(ListboxOption, AffixIconWithTrailing);
 
 let _ = t => t,
-  _t;
-function DataGridCellTemplate(context) {
+  _t,
+  _t2;
+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);
   const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`
-        <template
-            tabindex="-1"
-            role="${0}"
-        >
-					<div id="focus-wrapper">
-							<slot></slot>
-					${0}
-					</div>
+	<template
+		aria-checked="${0}"
+		aria-disabled="${0}"
+		aria-posinset="${0}"
+		aria-selected="${0}"
+		aria-setsize="${0}"
+		role="option">
+		<div class="${0}">
+			${0}
+			${0}
+			${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)));
+};
 
-        </template>
-    `), x => {
-    var _a;
-    return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
-  }, () => focusTemplate);
-}
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 08 May 2023 11:40:49 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(--_option-appearance-color-text, 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-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  --_connotation-color-pale: var(--vvd-color-neutral-300);\n  --_connotation-color-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(: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);\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@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  pointer-events: none;\n}\n.base .text {\n  font: var(--vvd-typography-base);\n}\n\n.icon {\n  font-size: 20px;\n  line-height: 1;\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}";
 
-const dataGrid = DataGrid.compose({
-  baseName: 'data-grid',
-  template: DataGridTemplate,
-  styles: css_248z$2
-})();
-const dataGridRow = DataGridRow.compose({
-  baseName: 'data-grid-row',
-  template: DataGridRowTemplate,
-  styles: css_248z$1
-})();
-const dataGridCell = DataGridCell.compose({
-  baseName: 'data-grid-cell',
-  template: DataGridCellTemplate,
+const listboxOptionDefinition = ListboxOption.compose({
+  baseName: 'option',
+  template: ListboxOptionTemplate,
   styles: css_248z
-})();
-const dataGridElements = [dataGridCell, dataGridRow, dataGrid];
-const registerDataGrid = registerFactory(dataGridElements);
+});
+const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries, ...focusRegistries];
+const registerOption = registerFactory(listboxOptionRegistries);
 
-export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };
+export { listboxOptionDefinition as a, isListboxOption as i, listboxOptionRegistries as l, registerOption as r };