@vonage/vivid 4.25.0 → 4.27.0

package/shared/definition17.cjs

@@ -3,11 +3,12 @@
 const definition$1 = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition66.cjs');
-const repeat = require('./repeat.cjs');
 const keyCodes = require('./key-codes.cjs');
+const repeat = require('./repeat.cjs');
 const children = require('./children.cjs');
 const slotted = require('./slotted.cjs');
 const localized = require('./localized.cjs');
+const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
 /**
@@ -21,9 +22,9 @@ const eventKeyDown = "keydown";
 
 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-fallback-track-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 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([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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - 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 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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - 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([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",
@@ -52,13 +53,528 @@ const DataGridCellRole = {
   default: "gridcell"
 };
 
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
+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 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 localized.Localized(vividElement.VividElement) {
+  constructor() {
+    super(...arguments);
+    // eslint-disable-next-line @repo/repo/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;
+      } else {
+        this.style.removeProperty("grid-column");
+      }
+    };
+    this._selectable = false;
+    this.selected = false;
+    this.ariaSelected = null;
+    this.ariaSort = null;
+  }
+  /**
+   * @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();
+  }
+  /**
+   * @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(_) {
+    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;
+    }
+    if (!this.columnDefinition?.sortable) {
+      this.sortDirection = void 0;
+    } else if (this.columnDefinition.sortDirection) {
+      this.sortDirection = this.columnDefinition.sortDirection;
+    } else {
+      this.sortDirection = DataGridCellSortStates.none;
+    }
+  }
+  disconnectCellView() {
+    if (this.customCellView !== null) {
+      this.customCellView.dispose();
+      this.customCellView = null;
+    }
+  }
+  /**
+   *
+   * @private
+   */
+  calculateAriaSelectedValue() {
+    if (this._selectable && this.selected) return "true";
+    if (this._selectable && !this.selected) return "false";
+    return null;
+  }
+  /**
+   * @internal
+   */
+  _selectableChanged() {
+    this.ariaSelected = this.calculateAriaSelectedValue();
+  }
+  /**
+   * @internal
+   */
+  selectedChanged() {
+    this.ariaSelected = this.calculateAriaSelectedValue();
+  }
+  /**
+   * @internal
+   */
+  ariaSelectedChanged(_, newValue) {
+    this._selectable = newValue !== null;
+    this.selected = newValue === "true";
+  }
+  /**
+   * @internal
+   */
+  ariaSortChanged(_oldValue, newValue) {
+    if (newValue === null) {
+      this.sortDirection = void 0;
+      return;
+    }
+    this.sortDirection = newValue;
+  }
+  /**
+   * @internal
+   */
+  sortDirectionChanged(_oldValue, newValue) {
+    if (newValue === void 0) {
+      this.ariaSort = null;
+      return;
+    }
+    this.ariaSort = newValue;
+  }
+  #getColumnDataKey() {
+    return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
+  }
+  /**
+   * @internal
+   */
+  _handleInteraction() {
+    const isHeaderCell = this.cellType === "columnheader";
+    const isSortable = isHeaderCell && this.sortDirection !== void 0;
+    if (isSortable) {
+      this.$emit("sort", {
+        columnDataKey: this.#getColumnDataKey(),
+        sortDirection: this.sortDirection
+      });
+    }
+    const hasInternalFocusQueue = isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue;
+    if (!hasInternalFocusQueue) {
+      this.$emit("cell-click", {
+        cell: this,
+        row: this.parentElement,
+        isHeaderCell,
+        columnDataKey: this.#getColumnDataKey()
+      });
+    }
+    return true;
+  }
+}
+__decorateClass$2([
+  vividElement.attr({ attribute: "cell-type" })
+], DataGridCell.prototype, "cellType");
+__decorateClass$2([
+  vividElement.attr({ attribute: "grid-column" })
+], DataGridCell.prototype, "gridColumn");
+__decorateClass$2([
+  vividElement.observable
+], DataGridCell.prototype, "rowData");
+__decorateClass$2([
+  vividElement.observable
+], DataGridCell.prototype, "columnDefinition");
+__decorateClass$2([
+  vividElement.observable
+], DataGridCell.prototype, "_selectable");
+__decorateClass$2([
+  vividElement.attr({ mode: "boolean" })
+], DataGridCell.prototype, "selected");
+__decorateClass$2([
+  vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
+], DataGridCell.prototype, "ariaSelected");
+__decorateClass$2([
+  vividElement.attr({ attribute: "aria-sort" })
+], DataGridCell.prototype, "ariaSort");
+__decorateClass$2([
+  vividElement.attr({ attribute: "sort-direction" })
+], DataGridCell.prototype, "sortDirection");
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (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$1(target, key, result);
+  return result;
+};
+class DataGridRow extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    // eslint-disable-next-line @repo/repo/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;
+    this._selectable = false;
+    this.selected = false;
+  }
+  /**
+   * @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;
+  }
+  /**
+   * @internal
+   */
+  ariaSelectedChanged(_oldValue, newValue) {
+    this._selectable = newValue !== null;
+    this.selected = newValue === "true";
+  }
+  /**
+   * @internal
+   */
+  _calculateAriaSelectedValue() {
+    if (this._selectable && this.selected) return "true";
+    if (this._selectable && !this.selected) return "false";
+    return null;
+  }
+  /**
+   * @internal
+   */
+  _selectableChanged() {
+    this.ariaSelected = this._calculateAriaSelectedValue();
+  }
+  /**
+   * @internal
+   */
+  selectedChanged() {
+    this.ariaSelected = this._calculateAriaSelectedValue();
+  }
+}
+// @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([
+  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");
+__decorateClass$1([
+  vividElement.observable
+], DataGridRow.prototype, "_selectable");
+__decorateClass$1([
+  vividElement.attr({ mode: "boolean" })
+], DataGridRow.prototype, "selected");
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (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);
+  if (result) __defProp(target, key, result);
   return result;
 };
 const DataGridSelectionMode = {
@@ -72,7 +588,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   constructor() {
     super();
     this.noTabbing = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.generateHeader = GenerateHeaderOptions.default;
     this.rowsData = [];
     this.columnDefinitions = null;
@@ -98,7 +614,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -173,11 +689,11 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }) => {
       const cell = target;
       if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
+        cell.selected = !this.#selectedCells.includes(cell);
       } else {
-        const cacheTargetSelection = cell.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(cell, !cacheTargetSelection);
+        const cacheTargetSelection = cell.selected;
+        this._resetSelection(true);
+        cell.selected = !cacheTargetSelection;
       }
     };
     this.#handleRowSelection = ({
@@ -188,11 +704,11 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }) => {
       const row = target.parentNode;
       if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(row, !this.#selectedRows.includes(row));
+        row.selected = !this.#selectedRows.includes(row);
       } else {
-        const cacheTargetSelection = row.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(row, !cacheTargetSelection);
+        const cacheTargetSelection = row.selected;
+        this._resetSelection(true);
+        row.selected = !cacheTargetSelection;
       }
     };
     this.#changeHandler = {
@@ -204,59 +720,41 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         }
       }
     };
-    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 = () => {
+    /**
+     * @internal
+     */
+    this._resetSelection = (clear = false) => {
+      const cells = Array.from(
+        this.querySelectorAll('[role="gridcell"], [cell-type]')
+      );
+      const rows = Array.from(
+        this.querySelectorAll('[role="row"], [row-type]')
+      );
       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")
-        );
+        for (const cell of cells) {
+          cell._selectable = true;
+          cell.selected = clear ? false : cell.selected || false;
+        }
+        for (const row of rows) {
+          row._selectable = false;
+          row.selected = false;
+        }
       }
       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")
-        );
+        for (const element of [...cells, ...rows]) {
+          element._selectable = false;
+          element.selected = false;
+        }
       }
       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")
-        );
+        for (const cell of cells) {
+          cell._selectable = false;
+          cell.selected = false;
+        }
+        for (const row of rows) {
+          row._selectable = true;
+          row.selected = clear ? false : row.selected || false;
+        }
       }
     };
     this.addEventListener("click", this.#handleClick);
@@ -550,37 +1048,32 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    * @internal
    */
   slottedRowElementsChanged(_oldValue, _newValue) {
-    this.#initSelections();
+    this._resetSelection();
   }
   get #selectedRows() {
-    return this.rowElements.filter(
-      (row) => row.getAttribute("aria-selected") === "true"
-    );
+    return this.rowElements.filter((row) => row.selected);
   }
   get #selectedCells() {
     return this.rowElements.reduce((acc, row) => {
       const rowChildren = Array.from(row.children);
       const selectedCells = rowChildren.filter(
-        (cell) => cell.getAttribute("aria-selected") === "true"
+        (cell) => cell.selected
       );
       return acc.concat(selectedCells);
     }, []);
   }
   selectionModeChanged(oldValue) {
     if (oldValue === void 0) {
-      vividElement.DOM.queueUpdate(this.#initSelections);
+      vividElement.DOM.queueUpdate(this._resetSelection);
       return;
     }
-    this.#resetSelection();
+    this._resetSelection(true);
   }
   #handleKeypress;
   #handleClick;
   #handleCellSelection;
   #handleRowSelection;
   #changeHandler;
-  #setSelectedState;
-  #resetSelection;
-  #initSelections;
   static generateColumns(rowData) {
     return Object.keys(rowData).map((property, index) => {
       return {
@@ -590,225 +1083,53 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     });
   }
 };
-__decorateClass$2([
+__decorateClass([
   vividElement.attr({ attribute: "no-tabbing", mode: "boolean" })
 ], _DataGrid.prototype, "noTabbing");
-__decorateClass$2([
+__decorateClass([
   vividElement.attr({ attribute: "generate-header" })
 ], _DataGrid.prototype, "generateHeader");
 // @ts-expect-error Type is incorrectly non-optional
-__decorateClass$2([
+__decorateClass([
   vividElement.attr({ attribute: "grid-template-columns" })
 ], _DataGrid.prototype, "gridTemplateColumns");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "rowsData");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "columnDefinitions");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "rowItemTemplate");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "cellItemTemplate");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "headerCellItemTemplate");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "focusRowIndex");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "focusColumnIndex");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "defaultRowItemTemplate");
-__decorateClass$2([
+__decorateClass([
   vividElement.observable
 ], _DataGrid.prototype, "rowElementTag");
-__decorateClass$2([
+__decorateClass([
   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) => {
-  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$1(target, key, result);
-  return result;
-};
-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([
-  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([
+__decorateClass([
   vividElement.observable
-], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  vividElement.attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
+], _DataGrid.prototype, "slottedRowElements");
+__decorateClass([
+  vividElement.attr({ attribute: "selection-mode" })
+], _DataGrid.prototype, "selectionMode");
+let DataGrid = _DataGrid;
 
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
@@ -828,6 +1149,9 @@ function setHeaderRow(x) {
     const headerRow = x.querySelector(
       '[cell-type="columnheader"]'
     )?.parentElement;
+    if (x.generateHeader === GenerateHeaderOptions.default && (headerRow?.getAttribute("row-type") === DataGridRowTypes.header || headerRow?.getAttribute("row-type") === DataGridRowTypes.stickyHeader)) {
+      return;
+    }
     if (headerRow) {
       const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
       headerRow.setAttribute("row-type", rowType);
@@ -861,255 +1185,6 @@ const DataGridTemplate = (context) => {
 	`;
 };
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (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(target, key, result);
-  return result;
-};
-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 localized.Localized(vividElement.VividElement) {
-  constructor() {
-    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;
-      } else {
-        this.style.removeProperty("grid-column");
-      }
-    };
-    this.ariaSelected = null;
-    this.ariaSort = null;
-  }
-  /**
-   * @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);
-  }
-  /**
-   * @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(_) {
-    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();
-  }
-  /**
-   * @internal
-   */
-  _handleInteraction() {
-    const isHeaderCell = this.cellType === "columnheader";
-    const isSortable = isHeaderCell && this.ariaSort !== null;
-    if (isSortable) {
-      this.$emit("sort", {
-        columnDataKey: this.#getColumnDataKey(),
-        sortDirection: this.ariaSort
-      });
-    }
-    const hasInternalFocusQueue = isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue;
-    if (!hasInternalFocusQueue) {
-      this.$emit("cell-click", {
-        cell: this,
-        row: this.parentElement,
-        isHeaderCell,
-        columnDataKey: this.#getColumnDataKey()
-      });
-    }
-    return true;
-  }
-}
-__decorateClass([
-  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([
-  vividElement.attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
-
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
   return vividElement.html`
@@ -1135,6 +1210,7 @@ function createHeaderCellItemTemplate(context) {
 const DataGridRowTemplate = (context) => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
   return vividElement.html`
 		<template
 			role="row"
@@ -1144,12 +1220,12 @@ const DataGridRowTemplate = (context) => {
 			${children.children({
     property: "cellElements",
     filter: slotted.elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]'
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
     )
   })}
 		>
 			<div
-				class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
+				class="${getBaseClasses}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
 				<slot ${slotted.slotted("slottedCellElements")}></slot>
@@ -1159,13 +1235,16 @@ const DataGridRowTemplate = (context) => {
 };
 
 function shouldShowSortIcons(x) {
-  if (x.columnDefinition) {
-    x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
-  }
-  return x.cellType === "columnheader" && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
+  return x.cellType === "columnheader" && x.sortDirection !== void 0 && x.sortDirection !== DataGridCellSortStates.other;
 }
 function getSortIcon(x) {
-  return x.ariaSort === DataGridCellSortStates.ascending ? "sort-asc-solid" : x.ariaSort === DataGridCellSortStates.descending ? "sort-desc-solid" : "sort-solid";
+  if (x.sortDirection === DataGridCellSortStates.ascending) {
+    return "sort-asc-solid";
+  }
+  if (x.sortDirection === DataGridCellSortStates.descending) {
+    return "sort-desc-solid";
+  }
+  return "sort-solid";
 }
 function renderSortIcons(c) {
   const iconTag = c.tagFor(definition$1.Icon);
@@ -1186,6 +1265,7 @@ function handleKeyDown(x, e) {
 }
 const DataGridCellTemplate = (context) => {
   const visuallyHiddenTagName = context.tagFor(definition.VisuallyHidden);
+  const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
   return vividElement.html`
 		<template
 			tabindex="-1"
@@ -1194,7 +1274,7 @@ const DataGridCellTemplate = (context) => {
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
 			<div
-				class="base"
+				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
 				${(x) => x.ariaSelected === "true" ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}