@vonage/vivid 3.54.0 → 3.55.0

package/shared/definition17.js

@@ -907,11 +907,11 @@ __decorate([
     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",
@@ -936,13 +936,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;
 };
@@ -954,144 +953,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;
-      }
-    };
-  }
   /**
    *
    *
@@ -1121,11 +982,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();
     Observable.getNotifier(this).subscribe(
@@ -1140,9 +1079,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 {
@@ -1154,19 +1145,18 @@ class DataGrid extends DataGrid$1 {
 }
 __decorateClass$2([
   observable
-], DataGrid.prototype, "slottedRowElements", 2);
+], DataGrid.prototype, "slottedRowElements");
 __decorateClass$2([
   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;
 };
@@ -1178,7 +1168,7 @@ class DataGridRow extends DataGridRow$1 {
 }
 __decorateClass$1([
   attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected", 2);
+], DataGridRow.prototype, "ariaSelected");
 
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
@@ -1232,13 +1222,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;
 };
@@ -1302,10 +1291,10 @@ class DataGridCell extends DataGridCell$1 {
 }
 __decorateClass([
   attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected", 2);
+], DataGridCell.prototype, "ariaSelected");
 __decorateClass([
   attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort", 2);
+], DataGridCell.prototype, "ariaSort");
 
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);

package/shared/definition19.cjs

@@ -46,7 +46,7 @@ var __accessCheck = (obj, member, msg) => {
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
+  return member.get(obj);
 };
 var __privateAdd = (obj, member, value) => {
   if (member.has(obj))
@@ -55,7 +55,7 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {

package/shared/definition19.js

@@ -44,7 +44,7 @@ var __accessCheck = (obj, member, msg) => {
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
+  return member.get(obj);
 };
 var __privateAdd = (obj, member, value) => {
   if (member.has(obj))
@@ -53,7 +53,7 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {

package/shared/definition2.cjs

@@ -188,7 +188,7 @@ index.__decorate([
     index.observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}\n";
+const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition2.js

@@ -186,7 +186,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}\n";
+const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition20.cjs

@@ -13,16 +13,15 @@ const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 const keyCodes = require('./key-codes2.cjs');
 
-const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-primary: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}\n";
+const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-primary: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 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;
 };
@@ -37,6 +36,7 @@ class DialPad extends index.FoundationElement {
     this.pending = false;
     this.callActive = false;
     this.noCall = false;
+    this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
     /**
@@ -103,37 +103,40 @@ class DialPad extends index.FoundationElement {
 }
 __decorateClass([
   index.attr({ attribute: "helper-text" })
-], DialPad.prototype, "helperText", 2);
+], DialPad.prototype, "helperText");
 __decorateClass([
   index.attr
-], DialPad.prototype, "placeholder", 2);
+], DialPad.prototype, "placeholder");
 __decorateClass([
   index.attr({ mode: "fromView" })
-], DialPad.prototype, "value", 2);
+], DialPad.prototype, "value");
 __decorateClass([
   index.attr({ mode: "fromView" })
-], DialPad.prototype, "pattern", 2);
+], DialPad.prototype, "pattern");
 __decorateClass([
   index.attr({ mode: "boolean" })
-], DialPad.prototype, "disabled", 2);
+], DialPad.prototype, "disabled");
 __decorateClass([
   index.attr({ mode: "boolean" })
-], DialPad.prototype, "pending", 2);
+], DialPad.prototype, "pending");
 __decorateClass([
   index.attr({ attribute: "call-active", mode: "boolean" })
-], DialPad.prototype, "callActive", 2);
+], DialPad.prototype, "callActive");
 __decorateClass([
   index.attr({ mode: "boolean", attribute: "no-call" })
-], DialPad.prototype, "noCall", 2);
+], DialPad.prototype, "noCall");
+__decorateClass([
+  index.attr({ mode: "boolean", attribute: "no-input" })
+], DialPad.prototype, "noInput");
 __decorateClass([
   index.attr({ attribute: "end-call-button-label" })
-], DialPad.prototype, "endCallButtonLabel", 2);
+], DialPad.prototype, "endCallButtonLabel");
 __decorateClass([
   index.attr({ attribute: "call-button-label" })
-], DialPad.prototype, "callButtonLabel", 2);
+], DialPad.prototype, "callButtonLabel");
 applyMixins.applyMixins(DialPad, localized.Localized);
 
-const getClasses = (_) => classNames.classNames("base");
+const getClasses = ({ noInput }) => classNames.classNames("base", ["no-input", Boolean(noInput)]);
 function handleKeyDown(x, e) {
   if (e.key === keyCodes.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
@@ -152,7 +155,7 @@ function handleKeyDown(x, e) {
 function renderTextField(textFieldTag, buttonTag) {
   return index.html`<${textFieldTag} ${ref.ref(
     "_textFieldEl"
-  )} class="phone-field" internal-part
+  )} class="phone-field" internal-part type="tel"
         value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
             ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
@@ -163,7 +166,7 @@ function renderTextField(textFieldTag, buttonTag) {
     (x) => x.value && x.value.length && x.value.length > 0,
     index.html`<${buttonTag}
                 slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-                appearance='ghost' ?disabled="${(x) => x.disabled}" @click="${(x) => x._deleteLastCharacter()}">
+								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;
@@ -225,7 +228,7 @@ const DialPadTemplate = (context) => {
   const iconTag = context.tagFor(icon.Icon);
   const textFieldTag = context.tagFor(definition$1.TextField);
   return index.html` <div class="${getClasses}">
-		${renderTextField(textFieldTag, buttonTag)}
+		${when.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when.when((x) => !x.noCall, renderDialButton(buttonTag))}
 	</div>`;