@vonage/vivid 3.53.0 → 3.55.0

package/shared/definition17.cjs

@@ -909,11 +909,11 @@ index.__decorate([
     index.observable
 ], DataGridCell$1.prototype, "columnDefinition", void 0);
 
-const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}\n";
+const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}";
 
-const dataGridRowStyles = ".base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}.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}: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)}\n";
+const dataGridRowStyles = ".base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}.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}: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{display:flex;box-sizing:border-box;align-items:center;padding:14px 12px;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))));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)))}.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}: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)}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, nowrap)}.header-icon{margin-inline-start:auto}\n";
+const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}.base{display:flex;box-sizing:border-box;align-items:center;padding:14px 12px;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) );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)))}.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}: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)}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, nowrap)}.header-icon{margin-inline-start:auto}";
 
 const DataGridCellSortStates = {
   none: "none",
@@ -938,13 +938,12 @@ const DataGridCellRole = {
 };
 
 var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp$2(target, key, result);
   return result;
 };
@@ -956,144 +955,6 @@ const DataGridSelectionMode = {
   multiCell: "multi-cell"
 };
 class DataGrid extends DataGrid$1 {
-  constructor() {
-    super();
-    this.#handleKeypress = (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        this.#handleClick(e);
-      }
-    };
-    this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell")
-        return;
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
-        return;
-      }
-      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-        this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
-      }
-    };
-    this.#handleCellSelection = ({
-      target,
-      ctrlKey,
-      shiftKey,
-      metaKey
-    }) => {
-      const cell = target;
-      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
-      } else {
-        const cacheTargetSelection = cell.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(cell, !cacheTargetSelection);
-      }
-    };
-    this.#handleRowSelection = ({
-      target,
-      ctrlKey,
-      shiftKey,
-      metaKey
-    }) => {
-      const row = target.parentNode;
-      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
-        this.#setSelectedState(row, !this.#selectedRows.includes(row));
-      } else {
-        const cacheTargetSelection = row.getAttribute("aria-selected") === "true";
-        this.#resetSelection();
-        this.#setSelectedState(row, !cacheTargetSelection);
-      }
-    };
-    this.#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);
-    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;
-      }
-    };
-  }
   /**
    *
    *
@@ -1123,11 +984,89 @@ class DataGrid extends DataGrid$1 {
     }
     this.#resetSelection();
   }
-  #handleKeypress;
-  #handleClick;
-  #handleCellSelection;
-  #handleRowSelection;
-  #changeHandler;
+  #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(
@@ -1142,9 +1081,61 @@ class DataGrid extends DataGrid$1 {
       "columnDefinitions"
     );
   }
-  #setSelectedState;
-  #resetSelection;
-  #initSelections;
+  #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")
+      );
+    }
+  };
   static generateColumns(rowData) {
     return Object.keys(rowData).map((property, index) => {
       return {
@@ -1156,19 +1147,18 @@ class DataGrid extends DataGrid$1 {
 }
 __decorateClass$2([
   index.observable
-], DataGrid.prototype, "slottedRowElements", 2);
+], DataGrid.prototype, "slottedRowElements");
 __decorateClass$2([
   index.attr({ attribute: "selection-mode" })
-], DataGrid.prototype, "selectionMode", 2);
+], DataGrid.prototype, "selectionMode");
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp$1(target, key, result);
   return result;
 };
@@ -1180,7 +1170,7 @@ class DataGridRow extends DataGridRow$1 {
 }
 __decorateClass$1([
   index.attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected", 2);
+], DataGridRow.prototype, "ariaSelected");
 
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
@@ -1234,13 +1224,12 @@ const DataGridTemplate = (context) => {
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -1304,10 +1293,10 @@ class DataGridCell extends DataGridCell$1 {
 }
 __decorateClass([
   index.attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected", 2);
+], DataGridCell.prototype, "ariaSelected");
 __decorateClass([
   index.attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort", 2);
+], DataGridCell.prototype, "ariaSort");
 
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);