@vonage/vivid 3.54.0 → 3.55.0

package/shared/definition16.js

@@ -619,7 +619,7 @@ __decorate([
 applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
 applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
-const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0}}\n";
+const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{max-height:var(--combobox-height, 408px);padding:4px;border-radius:8px;contain:paint;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0}}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -633,6 +633,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let Combobox = class extends Combobox$1 {
+  constructor() {
+    super(...arguments);
+    this.fixedDropdown = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     this._popup.anchor = this._anchor;
@@ -641,6 +645,9 @@ let Combobox = class extends Combobox$1 {
 __decorateClass([
   attr
 ], Combobox.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "boolean", attribute: "fixed-dropdown" })
+], Combobox.prototype, "fixedDropdown", 2);
 Combobox = __decorateClass([
   formElements
 ], Combobox);
@@ -657,6 +664,11 @@ const getStateClasses = ({ disabled, placeholder, label }) => classNames(
   ["placeholder", Boolean(placeholder)],
   ["no-label", !label]
 );
+function setFixedDropdownVarWidth(x) {
+  return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
+    x.getBoundingClientRect().width
+  )}px` : null;
+}
 function renderInput(context) {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html` <div class="${getStateClasses}" ${ref("_anchor")}>
@@ -697,9 +709,10 @@ const comboboxTemplate = (context) => {
         >
 			${() => renderInput(context)}
 			<${popupTag} class="popup"
+				style="${setFixedDropdownVarWidth}"
 				?open="${(x) => x.open}"
-				placement="${(x) => x.placement}"
-				strategy="absolute"
+				placement="${(x) => x.placement ?? "bottom-start"}"
+				strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
 				${ref("_popup")}>
 				<div id="${(x) => x.listboxId}"
 					class="listbox"

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);