@vonage/vivid 5.2.0 → 5.4.0

package/data-grid/index.js

@@ -1,15 +1,16 @@
-import { I as B, i as Q } from "../bundled/definition2.js";
-import { V as I, h as f, a as m, o as n, D as x, O as F, n as j, c as N, d as E } from "../bundled/vivid-element.js";
-import { V as W, v as J } from "../bundled/definition12.js";
-import { d as X, e as Y, f as O, k as P, a as z, g as Z, h as ee, i as te, j as oe, b as le, c as ie, l as ae } from "../bundled/key-codes.js";
+import { I as j, i as N } from "../bundled/definition2.js";
+import { V as E, h as f, a as m, o as a, b as z, U as x, O as R, n as W, c as J, d as F } from "../bundled/vivid-element.js";
+import { V as X, v as Y } from "../bundled/definition13.js";
 import { R as G } from "../bundled/repeat.js";
-import { H as A, a as L } from "../bundled/host-semantics.js";
-import { c as M } from "../bundled/children.js";
-import { s as U, e as K } from "../bundled/slotted.js";
-import { L as ne } from "../bundled/localized.js";
-import { c as V } from "../bundled/class-names.js";
-import { w as q } from "../bundled/when.js";
-const R = "focus", S = "focusin", w = "focusout", y = "keydown", re = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", se = ".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}@media (hover: hover){.base: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.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}: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([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", ce = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.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}@media (hover: hover){.base: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.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));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)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}', D = {
+import { n as D } from "../bundled/normalize.js";
+import { d as Z, e as ee, f as A, k as P, a as L, g as te, h as oe, i as le, j as ie, b as ne, c as ae, l as re } from "../bundled/key-codes.js";
+import { H as M, a as U } from "../bundled/host-semantics.js";
+import { c as K } from "../bundled/children.js";
+import { s as V, e as q } from "../bundled/slotted.js";
+import { L as se } from "../bundled/localized.js";
+import { c as Q } from "../bundled/class-names.js";
+import { w as B } from "../bundled/when.js";
+const S = "focus", H = "focusin", w = "focusout", y = "keydown", ce = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", de = ".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}@media (hover: hover){.base: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.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}: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([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", ue = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.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}@media (hover: hover){.base: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.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.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));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)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}', T = {
   none: "none",
   ascending: "ascending",
   descending: "descending",
@@ -26,26 +27,26 @@ const R = "focus", S = "focusin", w = "focusout", y = "keydown", re = ":host{dis
   default: "default",
   header: "header",
   stickyHeader: "sticky-header"
-}, H = {
+}, O = {
   columnheader: "columnheader",
   rowheader: "rowheader",
   default: "gridcell"
 };
-var de = Object.defineProperty, C = (i, e, t, l) => {
-  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
-    (r = i[a]) && (o = r(e, t, o) || o);
-  return o && de(e, t, o), o;
+var he = Object.defineProperty, C = (i, e, t, l) => {
+  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
+    (r = i[n]) && (o = r(e, t, o) || o);
+  return o && he(e, t, o), o;
 };
-const ue = f`
+const fe = f`
 	<template>
 		${(i) => i.rowData === null || i.columnDefinition === null || i.columnDefinition.columnDataKey === null ? null : i.rowData[i.columnDefinition.columnDataKey]}
 	</template>
-`, he = f`
+`, me = f`
 	<template>
 		${(i) => i.columnDefinition.title === void 0 ? i.columnDefinition.columnDataKey : i.columnDefinition.title}
 	</template>
 `;
-class p extends ne(A(I)) {
+class p extends se(M(E)) {
   constructor() {
     super(...arguments), this.cellType = g.default, this.rowData = null, this.columnDefinition = null, this.isActiveCell = !1, this.customCellView = null, this.updateCellStyle = () => {
       this.gridColumn && !this.gridColumn.includes("undefined") ? this.style.gridColumn = this.gridColumn : this.style.removeProperty("grid-column");
@@ -87,13 +88,13 @@ class p extends ne(A(I)) {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(S, this.handleFocusin), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
+    super.connectedCallback(), this.addEventListener(H, this.handleFocusin), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
   }
   /**
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener(S, this.handleFocusin), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener(H, this.handleFocusin), this.removeEventListener(
       w,
       this.handleFocusout
     ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
@@ -123,8 +124,8 @@ class p extends ne(A(I)) {
   handleKeydown(e) {
     if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === g.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === g.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
       switch (e.key) {
-        case O:
-        case Y:
+        case A:
+        case ee:
           if (this.contains(document.activeElement) && document.activeElement !== this)
             return;
           switch (this.cellType) {
@@ -142,7 +143,7 @@ class p extends ne(A(I)) {
               break;
           }
           break;
-        case X:
+        case Z:
           this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
           break;
       }
@@ -154,7 +155,7 @@ class p extends ne(A(I)) {
           this.columnDefinition.headerCellTemplate !== void 0 ? this.customCellView = this.columnDefinition.headerCellTemplate.render(
             this,
             this
-          ) : this.customCellView = he.render(
+          ) : this.customCellView = me.render(
             this,
             this
           );
@@ -164,10 +165,10 @@ class p extends ne(A(I)) {
           this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
             this,
             this
-          ) : this.customCellView = ue.render(this, this);
+          ) : this.customCellView = fe.render(this, this);
           break;
       }
-      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = D.none : this.sortDirection = void 0;
+      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = T.none : this.sortDirection = void 0;
     }
   }
   disconnectCellView() {
@@ -215,13 +216,13 @@ C([
   m({ attribute: "grid-column" })
 ], p.prototype, "gridColumn");
 C([
-  n
+  a
 ], p.prototype, "rowData");
 C([
-  n
+  a
 ], p.prototype, "columnDefinition");
 C([
-  n
+  a
 ], p.prototype, "_selectable");
 C([
   m({ mode: "boolean" })
@@ -229,14 +230,14 @@ C([
 C([
   m({ attribute: "sort-direction" })
 ], p.prototype, "sortDirection");
-var fe = Object.defineProperty, u = (i, e, t, l) => {
-  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
-    (r = i[a]) && (o = r(e, t, o) || o);
-  return o && fe(e, t, o), o;
+var pe = Object.defineProperty, u = (i, e, t, l) => {
+  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
+    (r = i[n]) && (o = r(e, t, o) || o);
+  return o && pe(e, t, o), o;
 };
-class c extends A(I) {
+class c extends M(E) {
   constructor() {
-    super(...arguments), this.rowType = v.default, this.rowData = null, this.columnDefinitions = null, this.cellsRepeatBehavior = null, this.cellsPlaceholder = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
+    super(...arguments), this.rowType = v.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     }, this.ariaSelected = null, this._selectable = !1, this.selected = !1;
   }
@@ -268,11 +269,14 @@ class c extends A(I) {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.cellsRepeatBehavior === null && (this.cellsPlaceholder = document.createComment(""), this.appendChild(this.cellsPlaceholder), this.updateItemTemplate(), this.cellsRepeatBehavior = new G(
-      (e) => e.columnDefinitions,
-      (e) => e.activeCellItemTemplate,
-      { positioning: !0 }
-    ).createBehavior(this.cellsPlaceholder), this.$fastController.addBehaviors([this.cellsRepeatBehavior])), this.addEventListener("cell-focused", this.handleCellFocus), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.updateRowStyle();
+    super.connectedCallback(), this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = z.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new G(
+        D((e) => e.columnDefinitions),
+        D((e) => e.activeCellItemTemplate),
+        { positioning: !0 }
+      ),
+      this.appendChild(document.createComment(""))
+    )), this.addEventListener("cell-focused", this.handleCellFocus), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.updateRowStyle();
   }
   /**
    * @internal
@@ -294,16 +298,16 @@ class c extends A(I) {
       return;
     let t = 0;
     switch (e.key) {
-      case ee:
+      case oe:
         t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
         break;
-      case Z:
+      case te:
         t = Math.min(
           this.cellElements.length - 1,
           this.focusColumnIndex + 1
         ), this.cellElements[t].focus(), e.preventDefault();
         break;
-      case z:
+      case L:
         e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
         break;
       case P:
@@ -328,42 +332,42 @@ u([
   m({ attribute: "row-type" })
 ], c.prototype, "rowType");
 u([
-  n
+  a
 ], c.prototype, "rowData");
 u([
-  n
+  a
 ], c.prototype, "columnDefinitions");
 u([
-  n
+  a
 ], c.prototype, "cellItemTemplate");
 u([
-  n
+  a
 ], c.prototype, "headerCellItemTemplate");
 u([
-  n
+  a
 ], c.prototype, "rowIndex");
 u([
-  n
+  a
 ], c.prototype, "activeCellItemTemplate");
 u([
-  n
+  a
 ], c.prototype, "defaultCellItemTemplate");
 u([
-  n
+  a
 ], c.prototype, "defaultHeaderCellItemTemplate");
 u([
-  n
+  a
 ], c.prototype, "cellElements");
 u([
-  n
+  a
 ], c.prototype, "_selectable");
 u([
   m({ mode: "boolean" })
 ], c.prototype, "selected");
-var me = Object.defineProperty, d = (i, e, t, l) => {
-  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
-    (r = i[a]) && (o = r(e, t, o) || o);
-  return o && me(e, t, o), o;
+var ve = Object.defineProperty, d = (i, e, t, l) => {
+  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
+    (r = i[n]) && (o = r(e, t, o) || o);
+  return o && ve(e, t, o), o;
 };
 const h = {
   none: "none",
@@ -371,9 +375,9 @@ const h = {
   multiRow: "multi-row",
   singleCell: "single-cell",
   multiCell: "multi-cell"
-}, s = class T extends I {
+}, s = class k extends E {
   constructor() {
-    super(), this.noTabbing = !1, this.generateHeader = b.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.rowsRepeatBehavior = null, this.rowsPlaceholder = null, this.generatedHeader = null, this.isUpdatingFocus = !1, this.pendingFocusUpdate = !1, this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !0, this.generatedGridTemplateColumns = "", this.focusOnCell = (e, t, l) => {
+    super(), this.noTabbing = !1, this.generateHeader = b.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.behaviorOrchestrator = null, this.generatedHeader = null, this.isUpdatingFocus = !1, this.pendingFocusUpdate = !1, this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !0, this.generatedGridTemplateColumns = "", this.focusOnCell = (e, t, l) => {
       if (this.rowElements.length === 0) {
         this.focusRowIndex = 0, this.focusColumnIndex = 0;
         return;
@@ -395,7 +399,7 @@ const h = {
         });
       }), this.queueRowIndexUpdate());
     }, this.queueRowIndexUpdate = () => {
-      this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, x.queueUpdate(this.updateRowIndexes));
+      this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, x.enqueue(this.updateRowIndexes));
     }, this.updateRowIndexes = () => {
       let e = this.gridTemplateColumns;
       if (e === void 0) {
@@ -419,7 +423,7 @@ const h = {
           this.#i({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
           return;
         }
-        (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) && this.#a({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
+        (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
       }
     }, this.#i = ({
       target: e,
@@ -427,25 +431,25 @@ const h = {
       shiftKey: l,
       metaKey: o
     }) => {
-      const a = e;
+      const n = e;
       if (this.selectionMode === h.multiCell && (t || l || o))
-        a.selected = !this.#r.includes(a);
+        n.selected = !this.#r.includes(n);
       else {
-        const r = a.selected;
-        this._resetSelection(!0), a.selected = !r;
+        const r = n.selected;
+        this._resetSelection(!0), n.selected = !r;
       }
-    }, this.#a = ({
+    }, this.#n = ({
       target: e,
       ctrlKey: t,
       shiftKey: l,
       metaKey: o
     }) => {
-      const a = e.parentNode;
+      const n = e.parentNode;
       if (this.selectionMode === h.multiRow && (t || l || o))
-        a.selected = !this.#n.includes(a);
+        n.selected = !this.#a.includes(n);
       else {
-        const r = a.selected;
-        this._resetSelection(!0), a.selected = !r;
+        const r = n.selected;
+        this._resetSelection(!0), n.selected = !r;
       }
     }, this.#o = {
       handleChange(e, t) {
@@ -511,7 +515,7 @@ const h = {
    * @internal
    */
   rowsDataChanged() {
-    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = T.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = k.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
   }
   /**
    * @internal
@@ -521,7 +525,7 @@ const h = {
       this.generatedGridTemplateColumns = "";
       return;
     }
-    this.generatedGridTemplateColumns = T.generateTemplateColumns(
+    this.generatedGridTemplateColumns = k.generateTemplateColumns(
       this.columnDefinitions
     ), this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
   }
@@ -561,11 +565,14 @@ const h = {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate), this.rowsPlaceholder = document.createComment(""), this.appendChild(this.rowsPlaceholder), this.toggleGeneratedHeader(), this.rowsRepeatBehavior = new G(
-      (e) => e.rowsData,
-      (e) => e.rowItemTemplate,
-      { positioning: !0 }
-    ).createBehavior(this.rowsPlaceholder), this.$fastController.addBehaviors([this.rowsRepeatBehavior]), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(R, this.handleFocus), this.addEventListener(y, this.handleKeydown), this.addEventListener(w, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), x.queueUpdate(this.queueRowIndexUpdate), this.#e(), F.getNotifier(this).subscribe(
+    super.connectedCallback(), this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate), this.behaviorOrchestrator === null && (this.behaviorOrchestrator = z.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new G(
+        D((e) => e.rowsData),
+        D((e) => e.rowItemTemplate),
+        { positioning: !0 }
+      ),
+      this.appendChild(document.createComment(""))
+    )), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(S, this.handleFocus), this.addEventListener(y, this.handleKeydown), this.addEventListener(w, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), x.enqueue(this.queueRowIndexUpdate), this.#e(), R.getNotifier(this).subscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -574,10 +581,10 @@ const h = {
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(R, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(S, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
       w,
       this.handleFocusOut
-    ), this.observer.disconnect(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.rowsPlaceholder = null, this.generatedHeader = null, F.getNotifier(this).unsubscribe(
+    ), this.observer.disconnect(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.generatedHeader = null, R.getNotifier(this).unsubscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -609,15 +616,15 @@ const h = {
     if (e.defaultPrevented)
       return;
     let t;
-    const l = this.rowElements.length - 1, o = this.offsetHeight + this.scrollTop, a = this.rowElements[l];
+    const l = this.rowElements.length - 1, o = this.offsetHeight + this.scrollTop, n = this.rowElements[l];
     switch (e.key) {
-      case ie:
+      case ae:
         e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
         break;
-      case le:
+      case ne:
         e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
         break;
-      case oe:
+      case ie:
         if (e.preventDefault(), this.rowElements.length === 0) {
           this.focusOnCell(0, 0, !1);
           break;
@@ -635,12 +642,12 @@ const h = {
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case te:
+      case le:
         if (e.preventDefault(), this.rowElements.length === 0) {
           this.focusOnCell(0, 0, !1);
           break;
         }
-        if (this.focusRowIndex >= l || a.offsetTop + a.offsetHeight <= o) {
+        if (this.focusRowIndex >= l || n.offsetTop + n.offsetHeight <= o) {
           this.focusOnCell(l, this.focusColumnIndex, !1);
           return;
         }
@@ -654,7 +661,7 @@ const h = {
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case z:
+      case L:
         e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
         break;
       case P:
@@ -667,7 +674,7 @@ const h = {
     }
   }
   queueFocusUpdate() {
-    this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, x.queueUpdate(() => this.updateFocus()));
+    this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, x.enqueue(() => this.updateFocus()));
   }
   updateFocus() {
     this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
@@ -689,20 +696,20 @@ const h = {
   slottedRowElementsChanged(e, t) {
     this._resetSelection();
   }
-  get #n() {
+  get #a() {
     return this.rowElements.filter((e) => e.selected);
   }
   get #r() {
     return this.rowElements.reduce((e, t) => {
       const o = Array.from(t.children).filter(
-        (a) => a.selected
+        (n) => n.selected
       );
       return e.concat(o);
     }, []);
   }
   selectionModeChanged(e) {
     if (e === void 0) {
-      x.queueUpdate(this._resetSelection);
+      x.enqueue(this._resetSelection);
       return;
     }
     this._resetSelection(!0);
@@ -710,7 +717,7 @@ const h = {
   #l;
   #t;
   #i;
-  #a;
+  #n;
   #o;
   static generateColumns(e) {
     return Object.keys(e).map((t, l) => ({
@@ -739,8 +746,8 @@ const h = {
       );
       this.fixedColumnsPositions.forEach((l, o) => {
         if (o < t.length) {
-          const a = t[o];
-          typeof a.setFixedPosition == "function" && a.setFixedPosition(`${l}px`);
+          const n = t[o];
+          typeof n.setFixedPosition == "function" && n.setFixedPosition(`${l}px`);
         }
       });
     });
@@ -773,8 +780,8 @@ const h = {
       );
       this.fixedColumnsPositions.forEach((l, o) => {
         if (o < t.length) {
-          const a = t[o];
-          typeof a.setFixedPosition == "function" && a.setFixedPosition(void 0);
+          const n = t[o];
+          typeof n.setFixedPosition == "function" && n.setFixedPosition(void 0);
         }
       });
     }), this.fixedColumnsPositions = [];
@@ -790,46 +797,46 @@ d([
   m({ attribute: "grid-template-columns" })
 ], s.prototype, "gridTemplateColumns");
 d([
-  n
+  a
 ], s.prototype, "rowsData");
 d([
-  n
+  a
 ], s.prototype, "columnDefinitions");
 d([
-  n
+  a
 ], s.prototype, "rowItemTemplate");
 d([
-  n
+  a
 ], s.prototype, "cellItemTemplate");
 d([
-  n
+  a
 ], s.prototype, "headerCellItemTemplate");
 d([
-  n
+  a
 ], s.prototype, "focusRowIndex");
 d([
-  n
+  a
 ], s.prototype, "focusColumnIndex");
 d([
-  m({ attribute: "fixed-columns", converter: j })
+  m({ attribute: "fixed-columns", converter: W })
 ], s.prototype, "fixedColumns");
 d([
-  n
+  a
 ], s.prototype, "defaultRowItemTemplate");
 d([
-  n
+  a
 ], s.prototype, "rowElementTag");
 d([
-  n
+  a
 ], s.prototype, "rowElements");
 d([
-  n
+  a
 ], s.prototype, "slottedRowElements");
 d([
   m({ attribute: "selection-mode" })
 ], s.prototype, "selectionMode");
-let pe = s;
-function ve(i) {
+let ge = s;
+function Ce(i) {
   const e = i.tagFor(c);
   return f`
     <${e}
@@ -839,10 +846,10 @@ function ve(i) {
     ></${e}>
 `;
 }
-function ge(i) {
+function be(i) {
   return i.selectionMode === void 0 || i.selectionMode === h.none ? null : i.selectionMode.includes("multi") ? "true" : "false";
 }
-function Ce(i) {
+function we(i) {
   if (i.columnDefinitions === null) {
     const e = i.querySelector(
       '[cell-type="columnheader"]'
@@ -855,35 +862,35 @@ function Ce(i) {
     }
   }
 }
-function be(i, { event: e }) {
+function ye(i, { event: e }) {
   e.stopPropagation();
 }
-const we = (i) => {
-  const e = ve(i), t = i.tagFor(c);
+const _e = (i) => {
+  const e = Ce(i), t = i.tagFor(c, !0);
   return f`
 		<template
-			aria-multiselectable="${ge}"
+			aria-multiselectable="${be}"
 			role="grid"
 			tabindex="0"
-			@sort="${be}"
+			@sort="${ye}"
 			:rowElementTag="${() => t}"
 			:defaultRowItemTemplate="${e}"
-			${M({
+			${K({
     property: "rowElements",
-    filter: K("[role=row],[data-vvd-component=data-grid-row]")
+    filter: q("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
-				${Ce}
-				<slot ${U("slottedRowElements")}></slot>
+				${we}
+				<slot ${V("slottedRowElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function ye(i) {
+function xe(i) {
   return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
 }
-function _e(i) {
+function De(i) {
   const e = i.tagFor(p);
   return f`
     <${e}
@@ -895,7 +902,7 @@ function _e(i) {
     ></${e}>
 `;
 }
-function xe(i) {
+function Te(i) {
   const e = i.tagFor(p);
   return f`
     <${e}
@@ -905,20 +912,20 @@ function xe(i) {
     ></${e}>
 `;
 }
-const De = (i) => {
-  const e = _e(i), t = xe(i), l = (o) => V("base", ["selected", !!o.selected]);
+const ke = (i) => {
+  const e = De(i), t = Te(i), l = (o) => Q("base", ["selected", !!o.selected]);
   return f`
 		<template
-			${L({
+			${U({
     role: "row",
-    ariaSelected: ye
+    ariaSelected: xe
   })}
 			class="${(o) => o.rowType !== "default" ? o.rowType : ""}"
 			:defaultCellItemTemplate="${e}"
 			:defaultHeaderCellItemTemplate="${t}"
-			${M({
+			${K({
     property: "cellElements",
-    filter: K(
+    filter: q(
       '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
@@ -927,85 +934,85 @@ const De = (i) => {
 				class="${l}"
 				style="grid-template-columns: ${(o) => o.gridTemplateColumns};"
 			>
-				<slot ${U("slottedCellElements")}></slot>
+				<slot ${V("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function k(i) {
-  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== D.other;
+function I(i) {
+  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== T.other;
 }
-function Te(i) {
-  return i.sortDirection === D.ascending ? "sort-asc-solid" : i.sortDirection === D.descending ? "sort-desc-solid" : "sort-solid";
+function Ie(i) {
+  return i.sortDirection === T.ascending ? "sort-asc-solid" : i.sortDirection === T.descending ? "sort-desc-solid" : "sort-solid";
 }
-function ke(i) {
+function Ee(i) {
   return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
 }
-function Ie(i) {
-  const e = i.tagFor(B);
+function Fe(i) {
+  const e = i.tagFor(j);
   return f`
-		${q(
-    k,
+		${B(
+    I,
     f`
-				<${e} class="header-icon" name="${Te}"></${e}>
+				<${e} class="header-icon" name="${Ie}"></${e}>
 			`
   )}
 	`;
 }
-function Ee(i, e) {
-  return (e.key === O || e.key === ae) && i._handleInteraction(), !0;
+function $e(i, e) {
+  return (e.key === A || e.key === re) && i._handleInteraction(), !0;
 }
-const $e = (i) => {
-  const e = i.tagFor(W), t = (l) => V("base", ["selected", !!l.selected]);
+const Re = (i) => {
+  const e = i.tagFor(X), t = (l) => Q("base", ["selected", !!l.selected]);
   return f`
 		<template
 			tabindex="-1"
-			${L({
-    role: (l) => H[l.cellType] ?? H.default,
-    ariaSelected: ke,
+			${U({
+    role: (l) => O[l.cellType] ?? O.default,
+    ariaSelected: Ee,
     ariaSort: (l) => l.sortDirection ?? null
   })}
 			@click="${(l) => l._handleInteraction()}"
-			@keydown="${(l, o) => Ee(l, o.event)}"
+			@keydown="${(l, o) => $e(l, o.event)}"
 		>
 			<div
 				class="${t}"
-				role="${(l) => k(l) ? "button" : void 0}"
+				role="${(l) => I(l) ? "button" : void 0}"
 			>
 				${(l) => l.selected ? f`<${e}>${(o) => o.locale.dataGrid.cell.selected}</${e}>` : null}
 				<slot></slot>
-				${q(
-    k,
+				${B(
+    I,
     f`<${e}>${(l) => l.locale.dataGrid.cell.button}</${e}>
 					`
   )}
-				${(l) => Ie(i)}
+				${(l) => Fe(i)}
 			</div>
 		</template>
 	`;
-}, Fe = E(
+}, Se = F(
   "data-grid-cell",
   p,
-  $e,
-  [Q, J],
+  Re,
+  [N, Y],
   {
-    styles: ce
+    styles: ue
   }
-), Re = E(
+), He = F(
   "data-grid-row",
   c,
-  De,
-  [Fe],
+  ke,
+  [Se],
   {
-    styles: se
+    styles: de
   }
-), Se = E(
+), Oe = F(
   "data-grid",
-  pe,
-  we,
-  [Re],
+  ge,
+  _e,
+  [He],
   {
-    styles: re
+    styles: ce
   }
-), He = N(Se);
-He();
+), ze = J(Oe);
+ze();