@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition17.cjs

@@ -1,14 +1,12 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const index = require('./index.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const vividElement = require('./vivid-element.cjs');
+const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
 const slotted = require('./slotted.cjs');
 const children = require('./children.cjs');
-const icon = require('./icon.cjs');
 const when = require('./when.cjs');
-const keyCodes$1 = require('./key-codes.cjs');
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
@@ -19,941 +17,532 @@ 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$1 = {
-    none: "none",
-    default: "default",
-    sticky: "sticky",
+const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}";
+
+const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([aria-selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
+
+const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
+
+const DataGridCellSortStates = {
+  none: "none",
+  ascending: "ascending",
+  descending: "descending",
+  other: "other"
+};
+const GenerateHeaderOptions = {
+  none: "none",
+  default: "default",
+  sticky: "sticky"
 };
-/**
- * Enumerates possible data grid cell types.
- *
- * @public
- */
 const DataGridCellTypes = {
-    default: "default",
-    columnHeader: "columnheader",
-    rowHeader: "rowheader",
+  default: "default",
+  columnHeader: "columnheader",
+  rowHeader: "rowheader"
 };
-/**
- * Enumerates possible data grid row types
- *
- * @public
- */
-const DataGridRowTypes$1 = {
-    default: "default",
-    header: "header",
-    stickyHeader: "sticky-header",
+const DataGridRowTypes = {
+  default: "default",
+  header: "header",
+  stickyHeader: "sticky-header"
 };
-
-/**
- * A Data Grid Row Custom HTML Element.
- *
- * @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 index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The type of row
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: row-type
-         */
-        this.rowType = DataGridRowTypes$1.default;
-        /**
-         * The base data for this row
-         *
-         * @public
-         */
-        this.rowData = null;
-        /**
-         * The column definitions of the row
-         *
-         * @public
-         */
-        this.columnDefinitions = null;
-        /**
-         * Whether focus is on/in a cell within this row.
-         *
-         * @internal
-         */
-        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();
-        }
-    }
-    rowTypeChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateItemTemplate();
-        }
-    }
-    rowDataChanged() {
-        if (this.rowData !== null && this.isActiveRow) {
-            this.refocusOnLoad = true;
-            return;
-        }
-    }
-    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 repeat.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();
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    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) {
-            return;
-        }
-        let newFocusColumnIndex = 0;
-        switch (e.key) {
-            case keyCodes.keyArrowLeft:
-                // focus left one cell
-                newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-                this.cellElements[newFocusColumnIndex].focus();
-                e.preventDefault();
-                break;
-            case keyCodes.keyArrowRight:
-                // focus right one cell
-                newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
-                this.cellElements[newFocusColumnIndex].focus();
-                e.preventDefault();
-                break;
-            case keyCodes.keyHome:
-                if (!e.ctrlKey) {
-                    this.cellElements[0].focus();
-                    e.preventDefault();
-                }
-                break;
-            case keyCodes.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;
-    }
+const DataGridCellRole = {
+  columnheader: "columnheader",
+  rowheader: "rowheader",
+  default: "gridcell"
 };
-index.__decorate([
-    index.attr({ attribute: "grid-template-columns" })
-], DataGridRow$1.prototype, "gridTemplateColumns", void 0);
-index.__decorate([
-    index.attr({ attribute: "row-type" })
-], DataGridRow$1.prototype, "rowType", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "rowData", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "columnDefinitions", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "cellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "headerCellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "rowIndex", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "isActiveRow", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "activeCellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "defaultCellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGridRow$1.prototype, "defaultHeaderCellItemTemplate", void 0);
-index.__decorate([
-    index.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 index.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
-         */
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
+};
+const DataGridSelectionMode = {
+  none: "none",
+  singleRow: "single-row",
+  multiRow: "multi-row",
+  singleCell: "single-cell",
+  multiCell: "multi-cell"
+};
+const _DataGrid = class _DataGrid extends vividElement.VividElement {
+  constructor() {
+    super();
+    this.noTabbing = false;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.generateHeader = GenerateHeaderOptions.default;
+    this.rowsData = [];
+    this.columnDefinitions = null;
+    this.focusRowIndex = 0;
+    this.focusColumnIndex = 0;
+    this.rowsRepeatBehavior = null;
+    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;
-        /**
-         * 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;
-                index.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;
+        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, _) => {
+      if (mutations && mutations.length) {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((newNode) => {
+            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+              newNode.columnDefinitions = this.columnDefinitions;
             }
-            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;
-        };
-    }
-    /**
-     *  generates a gridTemplateColumns based on columndata array
-     */
-    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();
+        this.queueRowIndexUpdate();
+      }
+    };
+    this.queueRowIndexUpdate = () => {
+      if (!this.rowindexUpdateQueued) {
+        this.rowindexUpdateQueued = true;
+        vividElement.DOM.queueUpdate(this.updateRowIndexes);
+      }
+    };
+    this.updateRowIndexes = () => {
+      let newGridTemplateColumns = this.gridTemplateColumns;
+      if (newGridTemplateColumns === void 0) {
+        if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+          const firstRow = this.rowElements[0];
+          this.generatedGridTemplateColumns = new Array(
+            firstRow.cellElements.length
+          ).fill("1fr").join(" ");
         }
-    }
-    rowsDataChanged() {
-        if (this.columnDefinitions === null && this.rowsData.length > 0) {
-            this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
+        newGridTemplateColumns = this.generatedGridTemplateColumns;
+      }
+      this.rowElements.forEach((element, index) => {
+        const thisRow = element;
+        thisRow.rowIndex = index;
+        thisRow.gridTemplateColumns = newGridTemplateColumns;
+        if (this.columnDefinitionsStale) {
+          thisRow.columnDefinitions = this.columnDefinitions;
         }
-        if (this.$fastController.isConnected) {
-            this.toggleGeneratedHeader();
+      });
+      this.rowindexUpdateQueued = false;
+      this.columnDefinitionsStale = false;
+    };
+    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.#changeHandler = {
+      handleChange(dataGrid, propertyName) {
+        if (propertyName === "columnDefinitions") {
+          if (dataGrid.$fastController.isConnected) {
+            dataGrid.toggleGeneratedHeader();
+          }
         }
+      }
+    };
+    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);
+  }
+  /**
+   *  generates a gridTemplateColumns based on columndata array
+   */
+  static generateTemplateColumns(columnDefinitions) {
+    let templateColumns = "";
+    columnDefinitions.forEach((_) => {
+      templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
+    });
+    return templateColumns;
+  }
+  /**
+   * @internal
+   */
+  noTabbingChanged() {
+    if (this.noTabbing) {
+      this.setAttribute("tabIndex", "-1");
+    } else {
+      this.setAttribute(
+        "tabIndex",
+        this.contains(document.activeElement) ? "-1" : "0"
+      );
     }
-    columnDefinitionsChanged() {
-        if (this.columnDefinitions === null) {
-            this.generatedGridTemplateColumns = "";
-            return;
-        }
-        this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
-        if (this.$fastController.isConnected) {
-            this.columnDefinitionsStale = true;
-            this.queueRowIndexUpdate();
-        }
+  }
+  /**
+   * @internal
+   */
+  generateHeaderChanged() {
+    if (this.$fastController.isConnected) {
+      this.toggleGeneratedHeader();
     }
-    headerCellItemTemplateChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.generatedHeader !== null) {
-                this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
-            }
-        }
+  }
+  /**
+   * @internal
+   */
+  gridTemplateColumnsChanged() {
+    if (this.$fastController.isConnected) {
+      this.updateRowIndexes();
     }
-    focusRowIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
-        }
+  }
+  /**
+   * @internal
+   */
+  rowsDataChanged() {
+    if (this.columnDefinitions === null && this.rowsData.length > 0) {
+      this.columnDefinitions = _DataGrid.generateColumns(this.rowsData[0]);
     }
-    focusColumnIndexChanged() {
-        if (this.$fastController.isConnected) {
-            this.queueFocusUpdate();
-        }
+    if (this.$fastController.isConnected) {
+      this.toggleGeneratedHeader();
     }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.rowItemTemplate === undefined) {
-            this.rowItemTemplate = this.defaultRowItemTemplate;
-        }
-        this.rowsPlaceholder = document.createComment("");
-        this.appendChild(this.rowsPlaceholder);
-        this.toggleGeneratedHeader();
-        this.rowsRepeatBehavior = new repeat.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");
-        }
-        index.DOM.queueUpdate(this.queueRowIndexUpdate);
+  }
+  /**
+   * @internal
+   */
+  columnDefinitionsChanged() {
+    if (this.columnDefinitions === null) {
+      this.generatedGridTemplateColumns = "";
+      return;
     }
-    /**
-     * @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;
+    this.generatedGridTemplateColumns = _DataGrid.generateTemplateColumns(
+      this.columnDefinitions
+    );
+    if (this.$fastController.isConnected) {
+      this.columnDefinitionsStale = true;
+      this.queueRowIndexUpdate();
     }
-    /**
-     * @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;
+  }
+  /**
+   * @internal
+   */
+  headerCellItemTemplateChanged() {
+    if (this.$fastController.isConnected) {
+      if (this.generatedHeader !== null) {
+        this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+      }
     }
-    /**
-     * @internal
-     */
-    handleFocus(e) {
-        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+  }
+  /**
+   * @internal
+   */
+  focusRowIndexChanged() {
+    if (this.$fastController.isConnected) {
+      this.queueFocusUpdate();
     }
-    /**
-     * @internal
-     */
-    handleFocusOut(e) {
-        if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
-            this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
-        }
+  }
+  /**
+   * @internal
+   */
+  focusColumnIndexChanged() {
+    if (this.$fastController.isConnected) {
+      this.queueFocusUpdate();
     }
-    /**
-     * @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 keyCodes.keyArrowUp:
-                e.preventDefault();
-                // focus up one row
-                this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
-                break;
-            case keyCodes.keyArrowDown:
-                e.preventDefault();
-                // focus down one row
-                this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
-                break;
-            case keyCodes.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 keyCodes.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$1.sticky &&
-                            this.generatedHeader !== null) {
-                            stickyHeaderOffset = this.generatedHeader.clientHeight;
-                        }
-                        this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
-                        break;
-                    }
-                }
-                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-                break;
-            case keyCodes.keyHome:
-                if (e.ctrlKey) {
-                    e.preventDefault();
-                    // focus first cell of first row
-                    this.focusOnCell(0, 0, true);
-                }
-                break;
-            case keyCodes.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;
-        }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.rowItemTemplate === void 0) {
+      this.rowItemTemplate = this.defaultRowItemTemplate;
     }
-    queueFocusUpdate() {
-        if (this.isUpdatingFocus &&
-            (this.contains(document.activeElement) || this === document.activeElement)) {
-            return;
-        }
-        if (this.pendingFocusUpdate === false) {
-            this.pendingFocusUpdate = true;
-            index.DOM.queueUpdate(() => this.updateFocus());
-        }
+    this.rowsPlaceholder = document.createComment("");
+    this.appendChild(this.rowsPlaceholder);
+    this.toggleGeneratedHeader();
+    this.rowsRepeatBehavior = new repeat.RepeatDirective(
+      (x) => x.rowsData,
+      (x) => x.rowItemTemplate,
+      { positioning: true }
+    ).createBehavior(this.rowsPlaceholder);
+    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);
+    this.observer.observe(this, { childList: true });
+    vividElement.DOM.queueUpdate(this.queueRowIndexUpdate);
+    vividElement.Observable.getNotifier(this).subscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
+  }
+  /**
+   * @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
+    );
+    this.observer.disconnect();
+    this.rowsPlaceholder = null;
+    this.generatedHeader = null;
+    vividElement.Observable.getNotifier(this).unsubscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
+  }
+  /**
+   * @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;
+  }
+  /**
+   * @internal
+   */
+  handleFocus(_) {
+    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+  }
+  /**
+   * @internal
+   */
+  handleFocusOut(e) {
+    if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
+      this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
     }
-    updateFocus() {
-        this.pendingFocusUpdate = false;
-        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+  }
+  /**
+   * @internal
+   */
+  handleKeydown(e) {
+    if (e.defaultPrevented) {
+      return;
     }
-    toggleGeneratedHeader() {
-        if (this.generatedHeader !== null) {
-            this.removeChild(this.generatedHeader);
-            this.generatedHeader = null;
+    let newFocusRowIndex;
+    const maxIndex = this.rowElements.length - 1;
+    const currentGridBottom = this.offsetHeight + this.scrollTop;
+    const lastRow = this.rowElements[maxIndex];
+    switch (e.key) {
+      case keyCodes.keyArrowUp:
+        e.preventDefault();
+        this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
+        break;
+      case keyCodes.keyArrowDown:
+        e.preventDefault();
+        this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
+        break;
+      case keyCodes.keyPageUp:
+        e.preventDefault();
+        if (this.rowElements.length === 0) {
+          this.focusOnCell(0, 0, false);
+          break;
         }
-        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);
-            }
-            return;
+        if (this.focusRowIndex === 0) {
+          this.focusOnCell(0, this.focusColumnIndex, false);
+          return;
         }
-    }
-};
-/**
- *  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}`,
-        };
-    });
-};
-index.__decorate([
-    index.attr({ attribute: "no-tabbing", mode: "boolean" })
-], DataGrid$1.prototype, "noTabbing", void 0);
-index.__decorate([
-    index.attr({ attribute: "generate-header" })
-], DataGrid$1.prototype, "generateHeader", void 0);
-index.__decorate([
-    index.attr({ attribute: "grid-template-columns" })
-], DataGrid$1.prototype, "gridTemplateColumns", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "rowsData", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "columnDefinitions", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "rowItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "cellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "focusRowIndex", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "focusColumnIndex", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "defaultRowItemTemplate", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "rowElementTag", void 0);
-index.__decorate([
-    index.observable
-], DataGrid$1.prototype, "rowElements", void 0);
-
-const defaultCellContentsTemplate = index.html `
-    <template>
-        ${x => x.rowData === null ||
-    x.columnDefinition === null ||
-    x.columnDefinition.columnDataKey === null
-    ? null
-    : x.rowData[x.columnDefinition.columnDataKey]}
-    </template>
-`;
-const defaultHeaderCellContentsTemplate = index.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 index.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();
+        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;
+          }
         }
-    }
-    gridColumnChanged() {
-        if (this.$fastController.isConnected) {
-            this.updateCellStyle();
+        this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+        break;
+      case keyCodes.keyPageDown:
+        e.preventDefault();
+        if (this.rowElements.length === 0) {
+          this.focusOnCell(0, 0, false);
+          break;
         }
-    }
-    columnDefinitionChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected) {
-            this.updateCellView();
+        if (this.focusRowIndex >= maxIndex || lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
+          this.focusOnCell(maxIndex, this.focusColumnIndex, false);
+          return;
         }
-    }
-    /**
-     * @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;
+        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.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.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+        break;
+      case keyCodes.keyHome:
+        if (e.ctrlKey) {
+          e.preventDefault();
+          this.focusOnCell(0, 0, true);
         }
-        this.$emit("cell-focused", this);
-    }
-    handleFocusout(e) {
-        if (this !== document.activeElement && !this.contains(document.activeElement)) {
-            this.isActiveCell = false;
+        break;
+      case keyCodes.keyEnd:
+        if (e.ctrlKey && this.columnDefinitions !== null) {
+          e.preventDefault();
+          this.focusOnCell(
+            this.rowElements.length - 1,
+            this.columnDefinitions.length - 1,
+            true
+          );
         }
+        break;
     }
-    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 keyCodes.keyEnter:
-            case keyCodes.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 keyCodes.keyEscape:
-                if (this.contains(document.activeElement) &&
-                    document.activeElement !== this) {
-                    this.focus();
-                    e.preventDefault();
-                }
-                break;
-        }
+  }
+  queueFocusUpdate() {
+    if (this.isUpdatingFocus && this.contains(document.activeElement)) {
+      return;
     }
-    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;
-        }
+    if (this.pendingFocusUpdate === false) {
+      this.pendingFocusUpdate = true;
+      vividElement.DOM.queueUpdate(() => this.updateFocus());
     }
-    disconnectCellView() {
-        if (this.customCellView !== null) {
-            this.customCellView.dispose();
-            this.customCellView = null;
-        }
+  }
+  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.columnDefinitions !== null) {
+      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;
     }
-};
-index.__decorate([
-    index.attr({ attribute: "cell-type" })
-], DataGridCell$1.prototype, "cellType", void 0);
-index.__decorate([
-    index.attr({ attribute: "grid-column" })
-], DataGridCell$1.prototype, "gridColumn", void 0);
-index.__decorate([
-    index.observable
-], DataGridCell$1.prototype, "rowData", void 0);
-index.__decorate([
-    index.observable
-], DataGridCell$1.prototype, "columnDefinition", void 0);
-
-const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}";
-
-const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([aria-selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
-
-const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
-
-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"
-};
-
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$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 {
+  }
   /**
    *
    *
@@ -978,162 +567,19 @@ class DataGrid extends DataGrid$1 {
   }
   selectionModeChanged(oldValue) {
     if (oldValue === void 0) {
-      index.DOM.queueUpdate(this.#initSelections);
+      vividElement.DOM.queueUpdate(this.#initSelections);
       return;
     }
     this.#resetSelection();
   }
-  #handleKeypress = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      this.#handleClick(e);
-    }
-  };
-  #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 });
-    }
-  };
-  #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);
-    }
-  };
-  #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);
-    }
-  };
-  constructor() {
-    super();
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeypress);
-    const privates = this;
-    privates.toggleGeneratedHeader = () => {
-      if (privates.generatedHeader !== null) {
-        this.removeChild(privates.generatedHeader);
-        privates.generatedHeader = null;
-      }
-      if (this.generateHeader !== GenerateHeaderOptions.none && this.columnDefinitions !== null) {
-        const generatedHeaderElement = document.createElement(
-          this.rowElementTag
-        );
-        privates.generatedHeader = generatedHeaderElement;
-        privates.generatedHeader.columnDefinitions = this.columnDefinitions;
-        privates.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
-        privates.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
-        if (this.firstChild !== null || privates.rowsPlaceholder !== null) {
-          this.insertBefore(
-            generatedHeaderElement,
-            this.firstChild !== null ? this.firstChild : privates.rowsPlaceholder
-          );
-        }
-        return;
-      }
-    };
-  }
-  #changeHandler = {
-    handleChange(dataGrid, propertyName) {
-      if (propertyName === "columnDefinitions") {
-        if (dataGrid.$fastController.isConnected) {
-          dataGrid.toggleGeneratedHeader();
-        }
-      }
-    }
-  };
-  connectedCallback() {
-    super.connectedCallback();
-    index.Observable.getNotifier(this).subscribe(
-      this.#changeHandler,
-      "columnDefinitions"
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    index.Observable.getNotifier(this).unsubscribe(
-      this.#changeHandler,
-      "columnDefinitions"
-    );
-  }
-  #setSelectedState = (cell, selectedState) => {
-    cell.setAttribute("aria-selected", selectedState.toString());
-  };
-  #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")
-      );
-    }
-  };
-  #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")
-      );
-    }
-  };
+  #handleKeypress;
+  #handleClick;
+  #handleCellSelection;
+  #handleRowSelection;
+  #changeHandler;
+  #setSelectedState;
+  #resetSelection;
+  #initSelections;
   static generateColumns(rowData) {
     return Object.keys(rowData).map((property, index) => {
       return {
@@ -1142,13 +588,54 @@ class DataGrid extends DataGrid$1 {
       };
     });
   }
-}
+};
+__decorateClass$2([
+  vividElement.attr({ attribute: "no-tabbing", mode: "boolean" })
+], _DataGrid.prototype, "noTabbing");
+__decorateClass$2([
+  vividElement.attr({ attribute: "generate-header" })
+], _DataGrid.prototype, "generateHeader");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  vividElement.attr({ attribute: "grid-template-columns" })
+], _DataGrid.prototype, "gridTemplateColumns");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "rowsData");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "columnDefinitions");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "rowItemTemplate");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "cellItemTemplate");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "headerCellItemTemplate");
 __decorateClass$2([
-  index.observable
-], DataGrid.prototype, "slottedRowElements");
+  vividElement.observable
+], _DataGrid.prototype, "focusRowIndex");
 __decorateClass$2([
-  index.attr({ attribute: "selection-mode" })
-], DataGrid.prototype, "selectionMode");
+  vividElement.observable
+], _DataGrid.prototype, "focusColumnIndex");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "defaultRowItemTemplate");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "rowElementTag");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "rowElements");
+__decorateClass$2([
+  vividElement.observable
+], _DataGrid.prototype, "slottedRowElements");
+__decorateClass$2([
+  vividElement.attr({ attribute: "selection-mode" })
+], _DataGrid.prototype, "selectionMode");
+let DataGrid = _DataGrid;
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -1159,19 +646,172 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends DataGridRow$1 {
+class DataGridRow extends vividElement.VividElement {
   constructor() {
     super(...arguments);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.rowType = DataGridRowTypes.default;
+    this.rowData = null;
+    this.columnDefinitions = null;
+    this.cellsRepeatBehavior = null;
+    this.cellsPlaceholder = null;
+    /**
+     * @internal
+     */
+    this.focusColumnIndex = 0;
+    this.updateRowStyle = () => {
+      this.style.gridTemplateColumns = this.gridTemplateColumns;
+    };
     this.ariaSelected = null;
   }
+  /**
+   * @internal
+   */
+  gridTemplateColumnsChanged() {
+    if (this.$fastController.isConnected) {
+      this.updateRowStyle();
+    }
+  }
+  /**
+   * @internal
+   */
+  rowTypeChanged() {
+    if (this.$fastController.isConnected) {
+      this.updateItemTemplate();
+    }
+  }
+  /**
+   * @internal
+   */
+  cellItemTemplateChanged() {
+    this.updateItemTemplate();
+  }
+  /**
+   * @internal
+   */
+  headerCellItemTemplateChanged() {
+    this.updateItemTemplate();
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.cellsRepeatBehavior === null) {
+      this.cellsPlaceholder = document.createComment("");
+      this.appendChild(this.cellsPlaceholder);
+      this.updateItemTemplate();
+      this.cellsRepeatBehavior = new repeat.RepeatDirective(
+        (x) => x.columnDefinitions,
+        (x) => x.activeCellItemTemplate,
+        { positioning: true }
+      ).createBehavior(this.cellsPlaceholder);
+      this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
+    }
+    this.addEventListener("cell-focused", this.handleCellFocus);
+    this.addEventListener(eventFocusOut, this.handleFocusout);
+    this.addEventListener(eventKeyDown, this.handleKeydown);
+    this.updateRowStyle();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("cell-focused", this.handleCellFocus);
+    this.removeEventListener(
+      eventFocusOut,
+      this.handleFocusout
+    );
+    this.removeEventListener(eventKeyDown, this.handleKeydown);
+  }
+  handleFocusout(_) {
+    if (!this.contains(document.activeElement)) {
+      this.focusColumnIndex = 0;
+    }
+  }
+  handleCellFocus(e) {
+    this.focusColumnIndex = this.cellElements.indexOf(e.target);
+    this.$emit("row-focused", this);
+  }
+  handleKeydown(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    let newFocusColumnIndex = 0;
+    switch (e.key) {
+      case keyCodes.keyArrowLeft:
+        newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+        this.cellElements[newFocusColumnIndex].focus();
+        e.preventDefault();
+        break;
+      case keyCodes.keyArrowRight:
+        newFocusColumnIndex = Math.min(
+          this.cellElements.length - 1,
+          this.focusColumnIndex + 1
+        );
+        this.cellElements[newFocusColumnIndex].focus();
+        e.preventDefault();
+        break;
+      case keyCodes.keyHome:
+        if (!e.ctrlKey) {
+          this.cellElements[0].focus();
+          e.preventDefault();
+        }
+        break;
+      case keyCodes.keyEnd:
+        if (!e.ctrlKey) {
+          this.cellElements[this.cellElements.length - 1].focus();
+          e.preventDefault();
+        }
+        break;
+    }
+  }
+  updateItemTemplate() {
+    this.activeCellItemTemplate = this.rowType === DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
+  }
 }
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  vividElement.attr({ attribute: "grid-template-columns" })
+], DataGridRow.prototype, "gridTemplateColumns");
+__decorateClass$1([
+  vividElement.attr({ attribute: "row-type" })
+], DataGridRow.prototype, "rowType");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "rowData");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "columnDefinitions");
 __decorateClass$1([
-  index.attr({ attribute: "aria-selected" })
+  vividElement.observable
+], DataGridRow.prototype, "cellItemTemplate");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "headerCellItemTemplate");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "rowIndex");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "activeCellItemTemplate");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "defaultCellItemTemplate");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "defaultHeaderCellItemTemplate");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "cellElements");
+__decorateClass$1([
+  vividElement.attr({ attribute: "aria-selected" })
 ], DataGridRow.prototype, "ariaSelected");
 
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
-  return index.html`
+  return vividElement.html`
     <${rowTag}
         :rowData="${(x) => x}"
         :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
@@ -1199,7 +839,7 @@ function handleColumnSort(_, { event }) {
 const DataGridTemplate = (context) => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
-  return index.html`
+  return vividElement.html`
 		<template
 			aria-multiselectable="${getMultiSelectAriaState}"
 			role="grid"
@@ -1229,11 +869,25 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class DataGridCell extends DataGridCell$1 {
+const defaultCellContentsTemplate = vividElement.html`
+	<template>
+		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
+	</template>
+`;
+const defaultHeaderCellContentsTemplate = vividElement.html`
+	<template>
+		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
+	</template>
+`;
+class DataGridCell extends vividElement.VividElement {
   constructor() {
-    super();
-    this.ariaSelected = null;
-    this.ariaSort = null;
+    super(...arguments);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.cellType = DataGridCellTypes.default;
+    this.rowData = null;
+    this.columnDefinition = null;
+    this.isActiveCell = false;
+    this.customCellView = null;
     this.updateCellStyle = () => {
       if (this.gridColumn && !this.gridColumn.includes("undefined")) {
         this.style.gridColumn = this.gridColumn;
@@ -1241,24 +895,173 @@ class DataGridCell extends DataGridCell$1 {
         this.style.removeProperty("grid-column");
       }
     };
+    this.ariaSelected = null;
+    this.ariaSort = null;
   }
-  ariaSelectedChanged(_, selectedState) {
-    this.shadowRoot.querySelector(".base")?.classList.toggle(
-      "selected",
-      selectedState === "true"
-    );
+  /**
+   * @internal
+   */
+  cellTypeChanged() {
+    if (this.$fastController.isConnected) {
+      this.updateCellView();
+    }
   }
+  /**
+   * @internal
+   */
+  gridColumnChanged() {
+    if (this.$fastController.isConnected) {
+      this.updateCellStyle();
+    }
+  }
+  /**
+   * @internal
+   */
+  columnDefinitionChanged(_oldValue, _newValue) {
+    if (this.$fastController.isConnected) {
+      this.updateCellView();
+    }
+  }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
+    this.addEventListener(eventFocusIn, this.handleFocusin);
+    this.addEventListener(eventFocusOut, this.handleFocusout);
+    this.addEventListener(eventKeyDown, this.handleKeydown);
+    this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`;
+    this.updateCellView();
+    this.updateCellStyle();
     this.ariaSelectedChanged(null, this.ariaSelected);
   }
-  handleFocusin(e) {
-    super.handleFocusin(e);
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(eventFocusIn, this.handleFocusin);
+    this.removeEventListener(
+      eventFocusOut,
+      this.handleFocusout
+    );
+    this.removeEventListener(eventKeyDown, this.handleKeydown);
+    this.disconnectCellView();
+  }
+  handleFocusin(_) {
     this.shadowRoot.querySelector(".base").classList.add("active");
+    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") {
+          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") {
+          const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+          if (focusTarget !== null) {
+            focusTarget.focus();
+          }
+        }
+        break;
+    }
+    this.$emit("cell-focused", this);
   }
-  handleFocusout(e) {
-    super.handleFocusout(e);
+  handleFocusout(_) {
     this.shadowRoot.querySelector(".base").classList.remove("active");
+    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 keyCodes.keyEnter:
+      case keyCodes.keyFunction2:
+        if (this.contains(document.activeElement) && document.activeElement !== this) {
+          return;
+        }
+        switch (this.cellType) {
+          case DataGridCellTypes.columnHeader:
+            if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
+              const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+              if (focusTarget !== null) {
+                focusTarget.focus();
+              }
+              e.preventDefault();
+            }
+            break;
+          default:
+            if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+              const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+              if (focusTarget !== null) {
+                focusTarget.focus();
+              }
+              e.preventDefault();
+            }
+            break;
+        }
+        break;
+      case keyCodes.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 !== void 0) {
+          this.customCellView = this.columnDefinition.headerCellTemplate.render(
+            this,
+            this
+          );
+        } else {
+          this.customCellView = defaultHeaderCellContentsTemplate.render(
+            this,
+            this
+          );
+        }
+        break;
+      case DataGridCellTypes.rowHeader:
+      case DataGridCellTypes.default:
+        if (this.columnDefinition.cellTemplate !== void 0) {
+          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;
+    }
+  }
+  ariaSelectedChanged(_, selectedState) {
+    this.shadowRoot.querySelector(".base")?.classList.toggle(
+      "selected",
+      selectedState === "true"
+    );
   }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
@@ -1288,15 +1091,27 @@ class DataGridCell extends DataGridCell$1 {
   }
 }
 __decorateClass([
-  index.attr({ attribute: "aria-selected", mode: "fromView" })
+  vividElement.attr({ attribute: "cell-type" })
+], DataGridCell.prototype, "cellType");
+__decorateClass([
+  vividElement.attr({ attribute: "grid-column" })
+], DataGridCell.prototype, "gridColumn");
+__decorateClass([
+  vividElement.observable
+], DataGridCell.prototype, "rowData");
+__decorateClass([
+  vividElement.observable
+], DataGridCell.prototype, "columnDefinition");
+__decorateClass([
+  vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
 ], DataGridCell.prototype, "ariaSelected");
 __decorateClass([
-  index.attr({ attribute: "aria-sort" })
+  vividElement.attr({ attribute: "aria-sort" })
 ], DataGridCell.prototype, "ariaSort");
 
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return index.html`
+  return vividElement.html`
     <${cellTag}
         cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
         grid-column="${(_, c) => c.index + 1}"
@@ -1308,7 +1123,7 @@ function createCellItemTemplate(context) {
 }
 function createHeaderCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return index.html`
+  return vividElement.html`
     <${cellTag}
         cell-type="columnheader"
         grid-column="${(_, c) => c.index + 1}"
@@ -1319,7 +1134,7 @@ function createHeaderCellItemTemplate(context) {
 const DataGridRowTemplate = (context) => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  return index.html`
+  return vividElement.html`
 		<template
 			role="row"
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
@@ -1352,24 +1167,24 @@ 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.Icon);
-  return index.html`
+  const iconTag = c.tagFor(definition.Icon);
+  return vividElement.html`
 		${when.when(
     shouldShowSortIcons,
-    index.html`
+    vividElement.html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
 			`
   )}
 	`;
 }
 function handleKeyDown(x, e) {
-  if (e.key === keyCodes$1.keyEnter || e.key === keyCodes$1.keySpace) {
+  if (e.key === keyCodes.keyEnter || e.key === keyCodes.keySpace) {
     x._handleInteraction();
   }
   return true;
 }
-function DataGridCellTemplate(context) {
-  return index.html`
+const DataGridCellTemplate = (context) => {
+  return vividElement.html`
 		<template
 			tabindex="-1"
 			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
@@ -1382,33 +1197,38 @@ function DataGridCellTemplate(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,
-  ...definition.iconRegistries
-];
-const registerDataGrid = index.registerFactory(dataGridElements);
+const dataGridCellDefinition = vividElement.defineVividComponent(
+  "data-grid-cell",
+  DataGridCell,
+  DataGridCellTemplate,
+  [definition.iconDefinition],
+  {
+    styles: dataGridCellStyles
+  }
+);
+const dataGridRowDefinition = vividElement.defineVividComponent(
+  "data-grid-row",
+  DataGridRow,
+  DataGridRowTemplate,
+  [dataGridCellDefinition],
+  {
+    styles: dataGridRowStyles
+  }
+);
+const dataGridDefinition = vividElement.defineVividComponent(
+  "data-grid",
+  DataGrid,
+  DataGridTemplate,
+  [dataGridRowDefinition],
+  {
+    styles: dataGridStyles
+  }
+);
+const registerDataGrid = vividElement.createRegisterFunction(dataGridDefinition);
 
-exports.dataGrid = dataGrid;
-exports.dataGridCell = dataGridCell;
-exports.dataGridElements = dataGridElements;
-exports.dataGridRow = dataGridRow;
+exports.dataGridCellDefinition = dataGridCellDefinition;
+exports.dataGridDefinition = dataGridDefinition;
+exports.dataGridRowDefinition = dataGridRowDefinition;
 exports.registerDataGrid = registerDataGrid;