@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition17.js

@@ -5,7 +5,7 @@ import { R as RepeatDirective } from './repeat.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { c as children } from './children.js';
 import { I as Icon } from './icon.js';
-import { b as keyEnter$1, c as keySpace } from './key-codes2.js';
+import { f as keyEnter$1, g as keySpace } from './key-codes2.js';
 import { w as when } from './when.js';
 
 /**
@@ -909,9 +909,9 @@ __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{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-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:nowrap}.header-icon{margin-inline-start:auto}\n";
 
 const DataGridCellSortStates = {
   none: "none",
@@ -972,7 +972,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));
@@ -982,7 +987,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));
@@ -1006,30 +1016,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);
@@ -1067,12 +1101,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);
     }, []);
   }
@@ -1090,11 +1128,17 @@ class DataGrid extends DataGrid$1 {
   #changeHandler;
   connectedCallback() {
     super.connectedCallback();
-    Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+    Observable.getNotifier(this).subscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
+    Observable.getNotifier(this).unsubscribe(
+      this.#changeHandler,
+      "columnDefinitions"
+    );
   }
   #setSelectedState;
   #resetSelection;
@@ -1151,7 +1195,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);
@@ -1165,24 +1211,24 @@ const DataGridTemplate = (context) => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
   return html`
-        <template
-						aria-multiselectable="${getMultiSelectAriaState}"
-            role="grid"
-            tabindex="0"
-						@sort="${handleColumnSort}"
-            :rowElementTag="${() => rowTag}"
-            :defaultRowItemTemplate="${rowItemTemplate}"
-            ${children({
+		<template
+			aria-multiselectable="${getMultiSelectAriaState}"
+			role="grid"
+			tabindex="0"
+			@sort="${handleColumnSort}"
+			:rowElementTag="${() => rowTag}"
+			:defaultRowItemTemplate="${rowItemTemplate}"
+			${children({
     property: "rowElements",
     filter: elements("[role=row]")
   })}
-        >
+		>
 			<div class="base">
 				${setHeaderRow}
 				<slot ${slotted("slottedRowElements")}></slot>
 			</div>
-        </template>
-    `;
+		</template>
+	`;
 };
 
 var __defProp = Object.defineProperty;
@@ -1210,7 +1256,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();
@@ -1248,6 +1297,7 @@ class DataGridCell extends DataGridCell$1 {
         columnDataKey: this.#getColumnDataKey()
       });
     }
+    return true;
   }
 }
 __decorateClass([
@@ -1283,23 +1333,26 @@ const DataGridRowTemplate = (context) => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
   return html`
-        <template
-            role="row"
-            class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
-            :defaultCellItemTemplate="${cellItemTemplate}"
-            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-            ${children({
+		<template
+			role="row"
+			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
+			:defaultCellItemTemplate="${cellItemTemplate}"
+			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+			${children({
     property: "cellElements",
-    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+    filter: 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("slottedCellElements")}></slot>
-					</div>
-        </template>
-    `;
+		>
+			<div
+				class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
+				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+			>
+				<slot ${slotted("slottedCellElements")}></slot>
+			</div>
+		</template>
+	`;
 };
 
 function shouldShowSortIcons(x) {
@@ -1314,10 +1367,13 @@ function getSortIcon(x) {
 function renderSortIcons(c) {
   const iconTag = c.tagFor(Icon);
   return html`
-			${when(shouldShowSortIcons, html`
+		${when(
+    shouldShowSortIcons,
+    html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`)}
-		`;
+			`
+  )}
+	`;
 }
 function handleKeyDown(x, e) {
   if (e.key === keyEnter$1 || e.key === keySpace) {
@@ -1327,19 +1383,18 @@ function handleKeyDown(x, e) {
 }
 function DataGridCellTemplate(context) {
   return 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({
@@ -1357,7 +1412,12 @@ const dataGridCell = DataGridCell.compose({
   template: DataGridCellTemplate,
   styles: dataGridCellStyles
 })();
-const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
+const dataGridElements = [
+  dataGridCell,
+  dataGridRow,
+  dataGrid,
+  ...iconRegistries
+];
 const registerDataGrid = registerFactory(dataGridElements);
 
 export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };

package/shared/definition18.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$1 = require('./definition60.cjs');
+const definition$1 = require('./definition61.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition53.cjs');
+const definition$2 = require('./definition54.cjs');
 const definition$3 = require('./definition21.cjs');
 const presentationDate = require('./presentationDate.cjs');
 require('./affix.cjs');
@@ -20,9 +20,24 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn;
 let DatePicker = class extends presentationDate.DatePickerBase {
   constructor() {
     super();
+    __privateAdd(this, _updateValueDueToUserInteraction);
     /**
      * @internal
      */
@@ -48,14 +63,11 @@ let DatePicker = class extends presentationDate.DatePickerBase {
       this._presentationValue = "";
     }
   }
-  #updateValueDueToUserInteraction(newValue) {
-    this.value = newValue;
-    this.$emit("change");
-    this.$emit("input");
-  }
   get _calendarButtonLabel() {
     if (this.value) {
-      return this.locale.datePicker.changeDateLabel(presentationDate.formatPresentationDate(this.value, this.locale.datePicker));
+      return this.locale.datePicker.changeDateLabel(
+        presentationDate.formatPresentationDate(this.value, this.locale.datePicker)
+      );
     } else {
       return this.locale.datePicker.chooseDateLabel;
     }
@@ -71,13 +83,11 @@ let DatePicker = class extends presentationDate.DatePickerBase {
    */
   _onTextFieldChange() {
     if (this._presentationValue === "") {
-      this.#updateValueDueToUserInteraction("");
+      __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, "");
       return;
     }
     try {
-      this.#updateValueDueToUserInteraction(
-        presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker)
-      );
+      __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker));
     } catch (_) {
       return;
     }
@@ -87,7 +97,7 @@ let DatePicker = class extends presentationDate.DatePickerBase {
    * @internal
    */
   _onDateClick(date) {
-    this.#updateValueDueToUserInteraction(date);
+    __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, date);
     this._closePopup();
   }
   /**
@@ -139,10 +149,16 @@ let DatePicker = class extends presentationDate.DatePickerBase {
    * @internal
    */
   _onClearClick() {
-    this.#updateValueDueToUserInteraction("");
+    __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, "");
     super._onClearClick();
   }
 };
+_updateValueDueToUserInteraction = new WeakSet();
+updateValueDueToUserInteraction_fn = function(newValue) {
+  this.value = newValue;
+  this.$emit("change");
+  this.$emit("input");
+};
 __decorateClass([
   index.volatile
 ], DatePicker.prototype, "_calendarButtonLabel", 1);

package/shared/definition18.js

@@ -1,7 +1,7 @@
 import { v as volatile, r as registerFactory } from './index.js';
-import { p as popupRegistries } from './definition60.js';
+import { p as popupRegistries } from './definition61.js';
 import { a as buttonRegistries } from './definition11.js';
-import { a as textFieldRegistries } from './definition53.js';
+import { a as textFieldRegistries } from './definition54.js';
 import { a as dividerRegistries } from './definition21.js';
 import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
 import './affix.js';
@@ -18,9 +18,24 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn;
 let DatePicker = class extends DatePickerBase {
   constructor() {
     super();
+    __privateAdd(this, _updateValueDueToUserInteraction);
     /**
      * @internal
      */
@@ -46,14 +61,11 @@ let DatePicker = class extends DatePickerBase {
       this._presentationValue = "";
     }
   }
-  #updateValueDueToUserInteraction(newValue) {
-    this.value = newValue;
-    this.$emit("change");
-    this.$emit("input");
-  }
   get _calendarButtonLabel() {
     if (this.value) {
-      return this.locale.datePicker.changeDateLabel(formatPresentationDate(this.value, this.locale.datePicker));
+      return this.locale.datePicker.changeDateLabel(
+        formatPresentationDate(this.value, this.locale.datePicker)
+      );
     } else {
       return this.locale.datePicker.chooseDateLabel;
     }
@@ -69,13 +81,11 @@ let DatePicker = class extends DatePickerBase {
    */
   _onTextFieldChange() {
     if (this._presentationValue === "") {
-      this.#updateValueDueToUserInteraction("");
+      __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, "");
       return;
     }
     try {
-      this.#updateValueDueToUserInteraction(
-        parsePresentationDate(this._presentationValue, this.locale.datePicker)
-      );
+      __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, parsePresentationDate(this._presentationValue, this.locale.datePicker));
     } catch (_) {
       return;
     }
@@ -85,7 +95,7 @@ let DatePicker = class extends DatePickerBase {
    * @internal
    */
   _onDateClick(date) {
-    this.#updateValueDueToUserInteraction(date);
+    __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, date);
     this._closePopup();
   }
   /**
@@ -137,10 +147,16 @@ let DatePicker = class extends DatePickerBase {
    * @internal
    */
   _onClearClick() {
-    this.#updateValueDueToUserInteraction("");
+    __privateMethod(this, _updateValueDueToUserInteraction, updateValueDueToUserInteraction_fn).call(this, "");
     super._onClearClick();
   }
 };
+_updateValueDueToUserInteraction = new WeakSet();
+updateValueDueToUserInteraction_fn = function(newValue) {
+  this.value = newValue;
+  this.$emit("change");
+  this.$emit("input");
+};
 __decorateClass([
   volatile
 ], DatePicker.prototype, "_calendarButtonLabel", 1);