@vonage/vivid 5.4.0 → 5.6.0

package/data-grid/index.js

@@ -1,16 +1,16 @@
-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 { 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 = {
+import { I as N, i as W } from "../bundled/definition2.js";
+import { V as $, h as u, a as m, o as a, b as G, U as D, O as R, n as J, c as X, d as F } from "../bundled/vivid-element.js";
+import { V as Y, v as Z } from "../bundled/definition14.js";
+import { R as A } from "../bundled/repeat.js";
+import { n as T } from "../bundled/normalize.js";
+import { d as ee, e as te, f as L, k as P, a as M, g as oe, h as le, i as ie, j as ne, b as ae, c as re, l as se } from "../bundled/key-codes.js";
+import { H as K, a as U } from "../bundled/host-semantics.js";
+import { c as V } from "../bundled/children.js";
+import { s as q, e as Q } from "../bundled/slotted.js";
+import { L as ce } from "../bundled/localized.js";
+import { c as B } from "../bundled/class-names.js";
+import { w as k } from "../bundled/when.js";
+const H = "focus", O = "focusin", w = "focusout", y = "keydown", de = ":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}", ue = ".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)}", he = ':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}', _ = {
   none: "none",
   ascending: "ascending",
   descending: "descending",
@@ -19,36 +19,36 @@ const S = "focus", H = "focusin", w = "focusout", y = "keydown", ce = ":host{dis
   none: "none",
   default: "default",
   sticky: "sticky"
-}, g = {
+}, v = {
   default: "default",
   columnHeader: "columnheader",
   rowHeader: "rowheader"
-}, v = {
+}, g = {
   default: "default",
   header: "header",
   stickyHeader: "sticky-header"
-}, O = {
+}, z = {
   columnheader: "columnheader",
   rowheader: "rowheader",
   default: "gridcell"
 };
-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;
+var fe = Object.defineProperty, C = (o, e, t, i) => {
+  for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
+    (r = o[n]) && (l = r(e, t, l) || l);
+  return l && fe(e, t, l), l;
 };
-const fe = f`
+const me = u`
 	<template>
-		${(i) => i.rowData === null || i.columnDefinition === null || i.columnDefinition.columnDataKey === null ? null : i.rowData[i.columnDefinition.columnDataKey]}
+		${(o) => o.rowData === null || o.columnDefinition === null || o.columnDefinition.columnDataKey === null ? null : o.rowData[o.columnDefinition.columnDataKey]}
 	</template>
-`, me = f`
+`, pe = u`
 	<template>
-		${(i) => i.columnDefinition.title === void 0 ? i.columnDefinition.columnDataKey : i.columnDefinition.title}
+		${(o) => o.columnDefinition.title === void 0 ? o.columnDefinition.columnDataKey : o.columnDefinition.title}
 	</template>
 `;
-class p extends se(M(E)) {
+class p extends ce(K($)) {
   constructor() {
-    super(...arguments), this.cellType = g.default, this.rowData = null, this.columnDefinition = null, this.isActiveCell = !1, this.customCellView = null, this.updateCellStyle = () => {
+    super(...arguments), this.cellType = v.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");
     }, this._selectable = !1, this.selected = !1, this.ariaSelected = null, this.ariaSort = null;
   }
@@ -88,13 +88,13 @@ class p extends se(M(E)) {
    * @internal
    */
   connectedCallback() {
-    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();
+    super.connectedCallback(), this.addEventListener(O, 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(H, this.handleFocusin), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener(O, this.handleFocusin), this.removeEventListener(
       w,
       this.handleFocusout
     ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
@@ -102,15 +102,17 @@ class p extends se(M(E)) {
   handleFocusin(e) {
     if (this.shadowRoot.querySelector(".base").classList.add("active"), !this.isActiveCell) {
       switch (this.isActiveCell = !0, this.cellType) {
-        case g.columnHeader:
+        case v.columnHeader:
           if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== !0 && typeof this.columnDefinition.headerCellFocusTargetCallback == "function") {
             const t = this.columnDefinition.headerCellFocusTargetCallback(this);
+            /* v8 ignore else -- @preserve */
             t !== null && t.focus();
           }
           break;
         default:
           if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
             const t = this.columnDefinition.cellFocusTargetCallback(this);
+            /* v8 ignore else -- @preserve */
             t !== null && t.focus();
           }
           break;
@@ -119,56 +121,64 @@ class p extends se(M(E)) {
     }
   }
   handleFocusout(e) {
-    this.shadowRoot.querySelector(".base").classList.remove("active"), this !== document.activeElement && !this.contains(document.activeElement) && (this.isActiveCell = !1);
+    this.shadowRoot.querySelector(".base").classList.remove("active");
+    /* v8 ignore else -- @preserve */
+    this !== document.activeElement && !this.contains(document.activeElement) && (this.isActiveCell = !1);
   }
   handleKeydown(e) {
-    if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === g.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === g.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
+    if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === v.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === v.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
       switch (e.key) {
-        case A:
-        case ee:
+        case L:
+        case te:
           if (this.contains(document.activeElement) && document.activeElement !== this)
             return;
           switch (this.cellType) {
-            case g.columnHeader:
+            case v.columnHeader: {
               if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
                 const t = this.columnDefinition.headerCellFocusTargetCallback(this);
+                /* v8 ignore else -- @preserve */
                 t !== null && t.focus(), e.preventDefault();
               }
               break;
-            default:
+            }
+            default: {
               if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
                 const t = this.columnDefinition.cellFocusTargetCallback(this);
+                /* v8 ignore else -- @preserve */
                 t !== null && t.focus(), e.preventDefault();
               }
               break;
+            }
           }
           break;
-        case Z:
+        case ee: {
+          /* v8 ignore else -- @preserve */
           this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
           break;
+        }
       }
   }
   updateCellView() {
     if (this.disconnectCellView(), this.columnDefinition !== null) {
       switch (this.cellType) {
-        case g.columnHeader:
+        case v.columnHeader:
           this.columnDefinition.headerCellTemplate !== void 0 ? this.customCellView = this.columnDefinition.headerCellTemplate.render(
             this,
             this
-          ) : this.customCellView = me.render(
+          ) : this.customCellView = pe.render(
             this,
             this
           );
           break;
-        case g.rowHeader:
-        case g.default:
+        case v.rowHeader:
+        case v.default:
           this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
             this,
             this
-          ) : this.customCellView = fe.render(this, this);
+          ) : this.customCellView = me.render(this, this);
           break;
       }
-      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = T.none : this.sortDirection = void 0;
+      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = _.none : this.sortDirection = void 0;
     }
   }
   disconnectCellView() {
@@ -230,14 +240,14 @@ C([
 C([
   m({ attribute: "sort-direction" })
 ], p.prototype, "sortDirection");
-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;
+var ve = Object.defineProperty, h = (o, e, t, i) => {
+  for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
+    (r = o[n]) && (l = r(e, t, l) || l);
+  return l && ve(e, t, l), l;
 };
-class c extends M(E) {
+class c extends K($) {
   constructor() {
-    super(...arguments), this.rowType = v.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
+    super(...arguments), this.rowType = g.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;
   }
@@ -269,10 +279,12 @@ class c extends M(E) {
    * @internal
    */
   connectedCallback() {
-    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),
+    super.connectedCallback();
+    /* v8 ignore else -- @preserve */
+    this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = G.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new A(
+        T((e) => e.columnDefinitions),
+        T((e) => e.activeCellItemTemplate),
         { positioning: !0 }
       ),
       this.appendChild(document.createComment(""))
@@ -288,6 +300,7 @@ class c extends M(E) {
     ), this.removeEventListener(y, this.handleKeydown);
   }
   handleFocusout(e) {
+    /* v8 ignore else -- @preserve */
     this.contains(document.activeElement) || (this.focusColumnIndex = 0);
   }
   handleCellFocus(e) {
@@ -298,16 +311,16 @@ class c extends M(E) {
       return;
     let t = 0;
     switch (e.key) {
-      case oe:
+      case le:
         t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
         break;
-      case te:
+      case oe:
         t = Math.min(
           this.cellElements.length - 1,
           this.focusColumnIndex + 1
         ), this.cellElements[t].focus(), e.preventDefault();
         break;
-      case L:
+      case M:
         e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
         break;
       case P:
@@ -316,7 +329,7 @@ class c extends M(E) {
     }
   }
   updateItemTemplate() {
-    this.activeCellItemTemplate = this.rowType === v.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === v.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
+    this.activeCellItemTemplate = this.rowType === g.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === g.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
   }
   /**
    * @internal
@@ -325,81 +338,82 @@ class c extends M(E) {
     super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
   }
 }
-u([
+h([
   m({ attribute: "grid-template-columns" })
 ], c.prototype, "gridTemplateColumns");
-u([
+h([
   m({ attribute: "row-type" })
 ], c.prototype, "rowType");
-u([
+h([
   a
 ], c.prototype, "rowData");
-u([
+h([
   a
 ], c.prototype, "columnDefinitions");
-u([
+h([
   a
 ], c.prototype, "cellItemTemplate");
-u([
+h([
   a
 ], c.prototype, "headerCellItemTemplate");
-u([
+h([
   a
 ], c.prototype, "rowIndex");
-u([
+h([
   a
 ], c.prototype, "activeCellItemTemplate");
-u([
+h([
   a
 ], c.prototype, "defaultCellItemTemplate");
-u([
+h([
   a
 ], c.prototype, "defaultHeaderCellItemTemplate");
-u([
+h([
   a
 ], c.prototype, "cellElements");
-u([
+h([
   a
 ], c.prototype, "_selectable");
-u([
+h([
   m({ mode: "boolean" })
 ], c.prototype, "selected");
-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;
+var ge = Object.defineProperty, d = (o, e, t, i) => {
+  for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
+    (r = o[n]) && (l = r(e, t, l) || l);
+  return l && ge(e, t, l), l;
 };
-const h = {
+const f = {
   none: "none",
   singleRow: "single-row",
   multiRow: "multi-row",
   singleCell: "single-cell",
   multiCell: "multi-cell"
-}, s = class k extends E {
+}, s = class I extends $ {
   constructor() {
-    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) => {
+    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, i) => {
       if (this.rowElements.length === 0) {
         this.focusRowIndex = 0, this.focusColumnIndex = 0;
         return;
       }
-      const o = Math.max(
+      const l = Math.max(
         0,
         Math.min(this.rowElements.length - 1, e)
-      ), r = this.rowElements[o].querySelectorAll(
+      ), r = this.rowElements[l].querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
-      ), _ = Math.max(
+      ), x = Math.max(
         0,
         Math.min(r.length - 1, t)
-      ), $ = r[_];
-      l && this.scrollHeight !== this.clientHeight && (o < this.focusRowIndex && this.scrollTop > 0 || o > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && $.scrollIntoView({ block: "center", inline: "center" }), $.focus();
+      ), S = r[x];
+      i && this.scrollHeight !== this.clientHeight && (l < this.focusRowIndex && this.scrollTop > 0 || l > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && S.scrollIntoView({ block: "center", inline: "center" }), S.focus();
     }, this.onChildListChange = (e, t) => {
-      e && e.length && (e.forEach((l) => {
-        l.addedNodes.forEach((o) => {
-          o.nodeType === 1 && (o.getAttribute("role") === "row" || o.getAttribute("row-type") === "default") && (o.columnDefinitions = this.columnDefinitions);
+      /* v8 ignore else -- @preserve */
+      e && e.length && (e.forEach((i) => {
+        i.addedNodes.forEach((l) => {
+          l.nodeType === 1 && (l.getAttribute("role") === "row" || l.getAttribute("row-type") === "default") && (l.columnDefinitions = this.columnDefinitions);
         });
       }), this.queueRowIndexUpdate());
     }, this.queueRowIndexUpdate = () => {
-      this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, x.enqueue(this.updateRowIndexes));
+      this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, D.enqueue(this.updateRowIndexes));
     }, this.updateRowIndexes = () => {
       let e = this.gridTemplateColumns;
       if (e === void 0) {
@@ -411,28 +425,28 @@ const h = {
         }
         e = this.generatedGridTemplateColumns;
       }
-      this.rowElements.forEach((t, l) => {
-        const o = t;
-        o.rowIndex = l, o.gridTemplateColumns = e, this.columnDefinitionsStale && (o.columnDefinitions = this.columnDefinitions);
+      this.rowElements.forEach((t, i) => {
+        const l = t;
+        l.rowIndex = i, l.gridTemplateColumns = e, this.columnDefinitionsStale && (l.columnDefinitions = this.columnDefinitions);
       }), this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !1;
     }, this.#l = (e) => {
       (e.key === "Enter" || e.key === " ") && this.#t(e);
-    }, this.#t = ({ target: e, ctrlKey: t, shiftKey: l, metaKey: o }) => {
+    }, this.#t = ({ target: e, ctrlKey: t, shiftKey: i, metaKey: l }) => {
       if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
-        if (this.selectionMode === h.singleCell || this.selectionMode === h.multiCell) {
-          this.#i({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
+        if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+          this.#i({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
           return;
         }
-        (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
+        (this.selectionMode === f.singleRow || this.selectionMode === f.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
       }
     }, this.#i = ({
       target: e,
       ctrlKey: t,
-      shiftKey: l,
-      metaKey: o
+      shiftKey: i,
+      metaKey: l
     }) => {
       const n = e;
-      if (this.selectionMode === h.multiCell && (t || l || o))
+      if (this.selectionMode === f.multiCell && (t || i || l))
         n.selected = !this.#r.includes(n);
       else {
         const r = n.selected;
@@ -441,11 +455,11 @@ const h = {
     }, this.#n = ({
       target: e,
       ctrlKey: t,
-      shiftKey: l,
-      metaKey: o
+      shiftKey: i,
+      metaKey: l
     }) => {
       const n = e.parentNode;
-      if (this.selectionMode === h.multiRow && (t || l || o))
+      if (this.selectionMode === f.multiRow && (t || i || l))
         n.selected = !this.#a.includes(n);
       else {
         const r = n.selected;
@@ -453,28 +467,32 @@ const h = {
       }
     }, this.#o = {
       handleChange(e, t) {
-        t === "columnDefinitions" && e.$fastController.isConnected && e.toggleGeneratedHeader();
+        /* v8 ignore else -- @preserve */
+        if (t === "columnDefinitions") {
+          /* v8 ignore else -- @preserve */
+          e.$fastController.isConnected && e.toggleGeneratedHeader();
+        }
       }
     }, this._resetSelection = (e = !1) => {
       const t = Array.from(
         this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
-      ), l = Array.from(
+      ), i = Array.from(
         this.querySelectorAll('[role="row"], [row-type="default"]')
       );
-      if (this.selectionMode === h.singleCell || this.selectionMode === h.multiCell) {
-        for (const o of t)
-          o._selectable = !0, o.selected = e ? !1 : o.selected || !1;
-        for (const o of l)
-          o._selectable = !1, o.selected = !1;
+      if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+        for (const l of t)
+          l._selectable = !0, l.selected = e ? !1 : l.selected || !1;
+        for (const l of i)
+          l._selectable = !1, l.selected = !1;
       }
-      if (this.selectionMode === h.none)
-        for (const o of [...t, ...l])
-          o._selectable = !1, o.selected = !1;
-      if (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) {
-        for (const o of t)
-          o._selectable = !1, o.selected = !1;
-        for (const o of l)
-          o._selectable = !0, o.selected = e ? !1 : o.selected || !1;
+      if (this.selectionMode === f.none)
+        for (const l of [...t, ...i])
+          l._selectable = !1, l.selected = !1;
+      if (this.selectionMode === f.singleRow || this.selectionMode === f.multiRow) {
+        for (const l of t)
+          l._selectable = !1, l.selected = !1;
+        for (const l of i)
+          l._selectable = !0, l.selected = e ? !1 : l.selected || !1;
       }
     }, this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#l);
   }
@@ -483,7 +501,7 @@ const h = {
    */
   static generateTemplateColumns(e) {
     let t = "";
-    return e.forEach((l) => {
+    return e.forEach((i) => {
       t = `${t}${t === "" ? "" : " "}1fr`;
     }), t;
   }
@@ -509,13 +527,14 @@ const h = {
    * @internal
    */
   gridTemplateColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && (this.updateRowIndexes(), this.fixedColumns && this.fixedColumns > 0 && this.applyFixedColumns());
   }
   /**
    * @internal
    */
   rowsDataChanged() {
-    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = k.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = I.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
   }
   /**
    * @internal
@@ -525,14 +544,17 @@ const h = {
       this.generatedGridTemplateColumns = "";
       return;
     }
-    this.generatedGridTemplateColumns = k.generateTemplateColumns(
+    this.generatedGridTemplateColumns = I.generateTemplateColumns(
       this.columnDefinitions
-    ), this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
+    );
+    /* v8 ignore if -- @preserve */
+    this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
   }
   /**
    * @internal
    */
   headerCellItemTemplateChanged() {
+    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && this.generatedHeader !== null && (this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate);
   }
   /**
@@ -551,6 +573,7 @@ const h = {
    * @internal
    */
   fixedColumnsChanged() {
+    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && (this.applyFixedColumns(), this.setupResizeObserver());
   }
   /**
@@ -565,14 +588,18 @@ const h = {
    * @internal
    */
   connectedCallback() {
-    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),
+    super.connectedCallback();
+    /* v8 ignore else -- @preserve */
+    this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate);
+    /* v8 ignore else -- @preserve */
+    this.behaviorOrchestrator === null && (this.behaviorOrchestrator = G.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new A(
+        T((e) => e.rowsData),
+        T((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.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(H, 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(), D.enqueue(this.queueRowIndexUpdate), this.#e(), R.getNotifier(this).subscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -581,7 +608,7 @@ const h = {
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(S, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(H, 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.generatedHeader = null, R.getNotifier(this).unsubscribe(
@@ -616,15 +643,15 @@ const h = {
     if (e.defaultPrevented)
       return;
     let t;
-    const l = this.rowElements.length - 1, o = this.offsetHeight + this.scrollTop, n = this.rowElements[l];
+    const i = this.rowElements.length - 1, l = this.offsetHeight + this.scrollTop, n = this.rowElements[i];
     switch (e.key) {
-      case ae:
+      case re:
         e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
         break;
-      case ne:
+      case ae:
         e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
         break;
-      case ie:
+      case ne:
         if (e.preventDefault(), this.rowElements.length === 0) {
           this.focusOnCell(0, 0, !1);
           break;
@@ -642,39 +669,43 @@ const h = {
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case le:
+      case ie:
         if (e.preventDefault(), this.rowElements.length === 0) {
           this.focusOnCell(0, 0, !1);
           break;
         }
-        if (this.focusRowIndex >= l || n.offsetTop + n.offsetHeight <= o) {
-          this.focusOnCell(l, this.focusColumnIndex, !1);
+        if (this.focusRowIndex >= i || n.offsetTop + n.offsetHeight <= l) {
+          this.focusOnCell(i, this.focusColumnIndex, !1);
           return;
         }
-        for (t = this.focusRowIndex + 1, t; t <= l; t++) {
+        for (t = this.focusRowIndex + 1, t; t <= i; t++) {
           const r = this.rowElements[t];
-          if (r.offsetTop + r.offsetHeight > o) {
-            let _ = 0;
-            this.generateHeader === b.sticky && this.generatedHeader !== null && (_ = this.generatedHeader.clientHeight), this.scrollTop = r.offsetTop - _;
+          if (r.offsetTop + r.offsetHeight > l) {
+            let x = 0;
+            this.generateHeader === b.sticky && this.generatedHeader !== null && (x = this.generatedHeader.clientHeight), this.scrollTop = r.offsetTop - x;
             break;
           }
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case L:
+      case M: {
+        /* v8 ignore else -- @preserve */
         e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
         break;
-      case P:
+      }
+      case P: {
+        /* v8 ignore else -- @preserve */
         e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(
           this.rowElements.length - 1,
           this.columnDefinitions.length - 1,
           !0
         ));
         break;
+      }
     }
   }
   queueFocusUpdate() {
-    this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, x.enqueue(() => this.updateFocus()));
+    this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, D.enqueue(() => this.updateFocus()));
   }
   updateFocus() {
     this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
@@ -684,7 +715,9 @@ const h = {
       const e = document.createElement(
         this.rowElementTag
       );
-      this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === b.sticky ? v.stickyHeader : v.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
+      this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === b.sticky ? g.stickyHeader : g.header;
+      /* v8 ignore else -- @preserve */
+      this.firstChild !== null && this.insertBefore(e, this.firstChild);
       return;
     }
   }
@@ -701,15 +734,15 @@ const h = {
   }
   get #r() {
     return this.rowElements.reduce((e, t) => {
-      const o = Array.from(t.children).filter(
+      const l = Array.from(t.children).filter(
         (n) => n.selected
       );
-      return e.concat(o);
+      return e.concat(l);
     }, []);
   }
   selectionModeChanged(e) {
     if (e === void 0) {
-      x.enqueue(this._resetSelection);
+      D.enqueue(this._resetSelection);
       return;
     }
     this._resetSelection(!0);
@@ -720,9 +753,9 @@ const h = {
   #n;
   #o;
   static generateColumns(e) {
-    return Object.keys(e).map((t, l) => ({
+    return Object.keys(e).map((t, i) => ({
       columnDataKey: t,
-      gridColumn: `${l}`
+      gridColumn: `${i}`
     }));
   }
   /**
@@ -744,10 +777,12 @@ const h = {
       const t = e.querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
-      this.fixedColumnsPositions.forEach((l, o) => {
-        if (o < t.length) {
-          const n = t[o];
-          typeof n.setFixedPosition == "function" && n.setFixedPosition(`${l}px`);
+      this.fixedColumnsPositions.forEach((i, l) => {
+        /* v8 ignore else -- @preserve */
+        if (l < t.length) {
+          const n = t[l];
+          /* v8 ignore else -- @preserve */
+          typeof n.setFixedPosition == "function" && n.setFixedPosition(`${i}px`);
         }
       });
     });
@@ -762,8 +797,8 @@ const h = {
       '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let t = 0;
-    for (let l = 0; l < Math.min(this.fixedColumns, e.length); l++)
-      this.fixedColumnsPositions.push(t), t += e[l].offsetWidth;
+    for (let i = 0; i < Math.min(this.fixedColumns, e.length); i++)
+      this.fixedColumnsPositions.push(t), t += e[i].offsetWidth;
   }
   /**
    * Clears all fixed columns state and styling
@@ -778,9 +813,11 @@ const h = {
       const t = e.querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
-      this.fixedColumnsPositions.forEach((l, o) => {
-        if (o < t.length) {
-          const n = t[o];
+      this.fixedColumnsPositions.forEach((i, l) => {
+        /* v8 ignore else -- @preserve */
+        if (l < t.length) {
+          const n = t[l];
+          /* v8 ignore else -- @preserve */
           typeof n.setFixedPosition == "function" && n.setFixedPosition(void 0);
         }
       });
@@ -818,7 +855,7 @@ d([
   a
 ], s.prototype, "focusColumnIndex");
 d([
-  m({ attribute: "fixed-columns", converter: W })
+  m({ attribute: "fixed-columns", converter: J })
 ], s.prototype, "fixedColumns");
 d([
   a
@@ -835,184 +872,218 @@ d([
 d([
   m({ attribute: "selection-mode" })
 ], s.prototype, "selectionMode");
-let ge = s;
-function Ce(i) {
-  const e = i.tagFor(c);
-  return f`
+let Ce = s;
+function be(o) {
+  const e = o.tagFor(c);
+  return u`
     <${e}
         :rowData="${(t) => t}"
-        :cellItemTemplate="${(t, l) => l.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(t, l) => l.parent.headerCellItemTemplate}"
+        :cellItemTemplate="${(t, i) => i.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(t, i) => i.parent.headerCellItemTemplate}"
     ></${e}>
 `;
 }
-function be(i) {
-  return i.selectionMode === void 0 || i.selectionMode === h.none ? null : i.selectionMode.includes("multi") ? "true" : "false";
+function we(o) {
+  return o.selectionMode === void 0 || o.selectionMode === f.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
 }
-function we(i) {
-  if (i.columnDefinitions === null) {
-    const e = i.querySelector(
+function ye(o) {
+  if (o.columnDefinitions === null) {
+    const e = o.querySelector(
       '[cell-type="columnheader"]'
     )?.parentElement;
-    if (i.generateHeader === b.default && (e?.getAttribute("row-type") === v.header || e?.getAttribute("row-type") === v.stickyHeader))
+    if (o.generateHeader === b.default && (e?.getAttribute("row-type") === g.header || e?.getAttribute("row-type") === g.stickyHeader))
       return;
     if (e) {
-      const t = i.generateHeader === b.sticky ? v.stickyHeader : v.header;
+      const t = o.generateHeader === b.sticky ? g.stickyHeader : g.header;
       e.setAttribute("row-type", t);
     }
   }
 }
-function ye(i, { event: e }) {
+function _e(o, { event: e }) {
   e.stopPropagation();
 }
-const _e = (i) => {
-  const e = Ce(i), t = i.tagFor(c, !0);
-  return f`
+const xe = (o) => {
+  const e = be(o), t = o.tagFor(c, !0);
+  return u`
 		<template
-			aria-multiselectable="${be}"
+			aria-multiselectable="${we}"
 			role="grid"
 			tabindex="0"
-			@sort="${ye}"
+			@sort="${_e}"
 			:rowElementTag="${() => t}"
 			:defaultRowItemTemplate="${e}"
-			${K({
+			${V({
     property: "rowElements",
-    filter: q("[role=row],[data-vvd-component=data-grid-row]")
+    filter: Q("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
-				${we}
-				<slot ${V("slottedRowElements")}></slot>
+				${ye}
+				<slot ${q("slottedRowElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function xe(i) {
-  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+function De(o) {
+  return o._selectable && o.selected ? "true" : o._selectable && !o.selected ? "false" : null;
 }
-function De(i) {
-  const e = i.tagFor(p);
-  return f`
+function Te(o) {
+  const e = o.tagFor(p);
+  return u`
     <${e}
         cell-type="${(t) => t.isRowHeader ? "rowheader" : void 0}"
-        grid-column="${(t, l) => l.index + 1}"
-        :rowData="${(t, l) => l.parent.rowData}"
+        grid-column="${(t, i) => i.index + 1}"
+        :rowData="${(t, i) => i.parent.rowData}"
         :columnDefinition="${(t) => t}"
-				selected="${(t, l) => l.parent.ariaSelected === "true" ? !0 : null}"
+				selected="${(t, i) => i.parent.ariaSelected === "true" ? !0 : null}"
     ></${e}>
 `;
 }
-function Te(i) {
-  const e = i.tagFor(p);
-  return f`
+function ke(o) {
+  const e = o.tagFor(p);
+  return u`
     <${e}
         cell-type="columnheader"
-        grid-column="${(t, l) => l.index + 1}"
+        grid-column="${(t, i) => i.index + 1}"
         :columnDefinition="${(t) => t}"
     ></${e}>
 `;
 }
-const ke = (i) => {
-  const e = De(i), t = Te(i), l = (o) => Q("base", ["selected", !!o.selected]);
-  return f`
+const Ie = (o) => {
+  const e = Te(o), t = ke(o), i = (l) => B("base", ["selected", !!l.selected]);
+  return u`
 		<template
 			${U({
     role: "row",
-    ariaSelected: xe
+    ariaSelected: De
   })}
-			class="${(o) => o.rowType !== "default" ? o.rowType : ""}"
+			class="${(l) => l.rowType !== "default" ? l.rowType : ""}"
 			:defaultCellItemTemplate="${e}"
 			:defaultHeaderCellItemTemplate="${t}"
-			${K({
+			${V({
     property: "cellElements",
-    filter: q(
+    filter: Q(
       '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
 			<div
-				class="${l}"
-				style="grid-template-columns: ${(o) => o.gridTemplateColumns};"
+				class="${i}"
+				style="grid-template-columns: ${(l) => l.gridTemplateColumns};"
 			>
-				<slot ${V("slottedCellElements")}></slot>
+				<slot ${q("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function I(i) {
-  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== T.other;
+function E(o) {
+  return o.cellType === "columnheader" && o.sortDirection !== void 0 && o.sortDirection !== _.other;
 }
-function Ie(i) {
-  return i.sortDirection === T.ascending ? "sort-asc-solid" : i.sortDirection === T.descending ? "sort-desc-solid" : "sort-solid";
+function Ee(o) {
+  return o.sortDirection === _.ascending ? "sort-asc-solid" : o.sortDirection === _.descending ? "sort-desc-solid" : "sort-solid";
 }
-function Ee(i) {
-  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+function $e(o) {
+  return o._selectable && o.selected ? "true" : o._selectable && !o.selected ? "false" : null;
 }
-function Fe(i) {
-  const e = i.tagFor(j);
-  return f`
-		${B(
-    I,
-    f`
-				<${e} class="header-icon" name="${Ie}"></${e}>
+function Fe(o) {
+  const e = o.tagFor(N);
+  return u`
+		${k(
+    E,
+    u`
+				<${e} class="header-icon" name="${Ee}"></${e}>
 			`
   )}
 	`;
 }
-function $e(i, e) {
-  return (e.key === A || e.key === re) && i._handleInteraction(), !0;
+function Se(o) {
+  return o.cellType === v.columnHeader && o.sortDirection !== void 0;
+}
+function j(o) {
+  return o.sortDirection ?? _.none;
+}
+function Re(o) {
+  const e = j(o);
+  return o.locale.dataGrid.cell.sortStatus?.[e];
+}
+function He(o) {
+  const e = j(o);
+  return o.locale.dataGrid.cell.sortInstruction?.[e];
 }
-const Re = (i) => {
-  const e = i.tagFor(X), t = (l) => Q("base", ["selected", !!l.selected]);
-  return f`
+function Oe(o) {
+  return [Re(o), He(o)].filter((e) => !!e).join(" ").trim();
+}
+function ze(o, e) {
+  return (e.key === L || e.key === se) && o._handleInteraction(), !0;
+}
+const Ge = (o) => {
+  const e = o.tagFor(Y), t = (i) => B("base", ["selected", !!i.selected]);
+  return u`
 		<template
 			tabindex="-1"
 			${U({
-    role: (l) => O[l.cellType] ?? O.default,
-    ariaSelected: Ee,
-    ariaSort: (l) => l.sortDirection ?? null
+    role: (i) => z[i.cellType] ?? z.default,
+    ariaSelected: $e,
+    ariaSort: (i) => i.sortDirection ?? null
   })}
-			@click="${(l) => l._handleInteraction()}"
-			@keydown="${(l, o) => $e(l, o.event)}"
+			@click="${(i) => i._handleInteraction()}"
+			@keydown="${(i, l) => ze(i, l.event)}"
 		>
 			<div
 				class="${t}"
-				role="${(l) => I(l) ? "button" : void 0}"
+				role="${(i) => E(i) ? "button" : void 0}"
 			>
-				${(l) => l.selected ? f`<${e}>${(o) => o.locale.dataGrid.cell.selected}</${e}>` : null}
+				${(i) => i.selected ? u`<${e}
+								data-announcement="selection"
+							>
+								${(l) => l.locale.dataGrid.cell.selected}
+							</${e}>` : null}
 				<slot></slot>
-				${B(
-    I,
-    f`<${e}>${(l) => l.locale.dataGrid.cell.button}</${e}>
+				${k(
+    E,
+    u`<${e}
+							data-announcement="button-role"
+						>
+							${(i) => i.locale.dataGrid.cell.button}
+						</${e}>
 					`
   )}
-				${(l) => Fe(i)}
+				${k(
+    Se,
+    u`<${e}
+							aria-live="polite"
+							data-announcement="sort-state"
+						>
+							${Oe}
+						</${e}>`
+  )}
+				${(i) => Fe(o)}
 			</div>
 		</template>
 	`;
-}, Se = F(
+}, Ae = F(
   "data-grid-cell",
   p,
-  Re,
-  [N, Y],
+  Ge,
+  [W, Z],
   {
-    styles: ue
+    styles: he
   }
-), He = F(
+), Le = F(
   "data-grid-row",
   c,
-  ke,
-  [Se],
+  Ie,
+  [Ae],
   {
-    styles: de
+    styles: ue
   }
-), Oe = F(
+), Pe = F(
   "data-grid",
-  ge,
-  _e,
-  [He],
+  Ce,
+  xe,
+  [Le],
   {
-    styles: ce
+    styles: de
   }
-), ze = J(Oe);
-ze();
+), Me = X(Pe);
+Me();