@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition17.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition26.cjs');
+const definition = require('./definition27.cjs');
 const index = require('./index.cjs');
 const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
@@ -911,9 +911,9 @@ index.__decorate([
 
 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 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-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_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-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_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)}\n";
 
-const dataGridCellStyles = ":host{min-inline-size:80px}:host(:focus-visible){outline:none}.base{display:flex;box-sizing:border-box;align-items:center;padding:8px 12px;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.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-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-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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_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: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}\n";
 
 const DataGridCellSortStates = {
   none: "none",
@@ -974,7 +974,12 @@ class DataGrid extends DataGrid$1 {
         this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
       }
     };
-    this.#handleCellSelection = ({ 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));
@@ -984,7 +989,12 @@ class DataGrid extends DataGrid$1 {
         this.#setSelectedState(cell, !cacheTargetSelection);
       }
     };
-    this.#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+    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));
@@ -1008,30 +1018,54 @@ class DataGrid extends DataGrid$1 {
     };
     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"));
+        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"));
+        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"));
+        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"));
+        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"));
+        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"));
+        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);
@@ -1069,12 +1103,16 @@ class DataGrid extends DataGrid$1 {
     this.#initSelections();
   }
   get #selectedRows() {
-    return this.rowElements.filter((row) => row.getAttribute("aria-selected") === "true");
+    return this.rowElements.filter(
+      (row) => row.getAttribute("aria-selected") === "true"
+    );
   }
   get #selectedCells() {
     return this.rowElements.reduce((acc, row) => {
       const rowChildren = Array.from(row.children);
-      const selectedCells = rowChildren.filter((cell) => cell.getAttribute("aria-selected") === "true");
+      const selectedCells = rowChildren.filter(
+        (cell) => cell.getAttribute("aria-selected") === "true"
+      );
       return acc.concat(selectedCells);
     }, []);
   }
@@ -1092,11 +1130,17 @@ class DataGrid extends DataGrid$1 {
   #changeHandler;
   connectedCallback() {
     super.connectedCallback();
-    index.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+    index.Observable.getNotifier(this).subscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    index.Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
+    index.Observable.getNotifier(this).unsubscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
   }
   #setSelectedState;
   #resetSelection;
@@ -1153,7 +1197,9 @@ function getMultiSelectAriaState(x) {
 }
 function setHeaderRow(x) {
   if (x.columnDefinitions === null) {
-    const headerRow = x.querySelector('[cell-type="columnheader"]')?.parentElement;
+    const headerRow = x.querySelector(
+      '[cell-type="columnheader"]'
+    )?.parentElement;
     if (headerRow) {
       const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
       headerRow.setAttribute("row-type", rowType);
@@ -1167,24 +1213,24 @@ const DataGridTemplate = (context) => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
   return index.html`
-        <template
-						aria-multiselectable="${getMultiSelectAriaState}"
-            role="grid"
-            tabindex="0"
-						@sort="${handleColumnSort}"
-            :rowElementTag="${() => rowTag}"
-            :defaultRowItemTemplate="${rowItemTemplate}"
-            ${children.children({
+		<template
+			aria-multiselectable="${getMultiSelectAriaState}"
+			role="grid"
+			tabindex="0"
+			@sort="${handleColumnSort}"
+			:rowElementTag="${() => rowTag}"
+			:defaultRowItemTemplate="${rowItemTemplate}"
+			${children.children({
     property: "rowElements",
     filter: slotted.elements("[role=row]")
   })}
-        >
+		>
 			<div class="base">
 				${setHeaderRow}
 				<slot ${slotted.slotted("slottedRowElements")}></slot>
 			</div>
-        </template>
-    `;
+		</template>
+	`;
 };
 
 var __defProp = Object.defineProperty;
@@ -1212,7 +1258,10 @@ class DataGridCell extends DataGridCell$1 {
     };
   }
   ariaSelectedChanged(_, selectedState) {
-    this.shadowRoot.querySelector(".base")?.classList.toggle("selected", selectedState === "true");
+    this.shadowRoot.querySelector(".base")?.classList.toggle(
+      "selected",
+      selectedState === "true"
+    );
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1250,6 +1299,7 @@ class DataGridCell extends DataGridCell$1 {
         columnDataKey: this.#getColumnDataKey()
       });
     }
+    return true;
   }
 }
 __decorateClass([
@@ -1285,23 +1335,26 @@ const DataGridRowTemplate = (context) => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
   return index.html`
-        <template
-            role="row"
-            class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
-            :defaultCellItemTemplate="${cellItemTemplate}"
-            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-            ${children.children({
+		<template
+			role="row"
+			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
+			:defaultCellItemTemplate="${cellItemTemplate}"
+			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+			${children.children({
     property: "cellElements",
-    filter: slotted.elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+    filter: slotted.elements(
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]'
+    )
   })}
-        >
-					<div class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
-							 style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
-					>
-            <slot ${slotted.slotted("slottedCellElements")}></slot>
-					</div>
-        </template>
-    `;
+		>
+			<div
+				class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
+				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+			>
+				<slot ${slotted.slotted("slottedCellElements")}></slot>
+			</div>
+		</template>
+	`;
 };
 
 function shouldShowSortIcons(x) {
@@ -1316,10 +1369,13 @@ function getSortIcon(x) {
 function renderSortIcons(c) {
   const iconTag = c.tagFor(icon.Icon);
   return index.html`
-			${when.when(shouldShowSortIcons, index.html`
+		${when.when(
+    shouldShowSortIcons,
+    index.html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`)}
-		`;
+			`
+  )}
+	`;
 }
 function handleKeyDown(x, e) {
   if (e.key === keyCodes$1.keyEnter || e.key === keyCodes$1.keySpace) {
@@ -1329,19 +1385,18 @@ function handleKeyDown(x, e) {
 }
 function DataGridCellTemplate(context) {
   return index.html`
-        <template
-            tabindex="-1"
-            role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
-						@click="${(x) => x._handleInteraction()}"
-						@keydown="${(x, c) => handleKeyDown(x, c.event)}"
-        >
-					<div class="base">
-							<slot></slot>
-							${(_) => renderSortIcons(context)}
-					</div>
-
-        </template>
-    `;
+		<template
+			tabindex="-1"
+			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			@click="${(x) => x._handleInteraction()}"
+			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
+		>
+			<div class="base">
+				<slot></slot>
+				${(_) => renderSortIcons(context)}
+			</div>
+		</template>
+	`;
 }
 
 const dataGrid = DataGrid.compose({
@@ -1359,7 +1414,12 @@ const dataGridCell = DataGridCell.compose({
   template: DataGridCellTemplate,
   styles: dataGridCellStyles
 })();
-const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...definition.iconRegistries];
+const dataGridElements = [
+  dataGridCell,
+  dataGridRow,
+  dataGrid,
+  ...definition.iconRegistries
+];
 const registerDataGrid = index.registerFactory(dataGridElements);
 
 exports.dataGrid = dataGrid;