@vonage/vivid 5.12.0 → 5.15.0

package/data-grid/index.js

@@ -1,32 +1,32 @@
 import { I as N, i as W } from "../bundled/definition2.js";
-import { V as $, h as u, a as f, 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 $, h as u, a as f, o as a, b as A, U as D, O as H, 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 { D as v, a as _, b as g, G as b, c as H } from "../bundled/data-grid.options.js";
-import { R as A } from "../bundled/repeat.js";
+import { D as v, a as _, b as g, G as b, c as O } from "../bundled/data-grid.options.js";
+import { R as L } 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 { d as ee, e as te, f as P, k as M, a as K, g as oe, h as ie, i as le, j as ne, b as ae, c as re, l as se } from "../bundled/key-codes.js";
+import { H as U, a as V } from "../bundled/host-semantics.js";
+import { c as q } from "../bundled/children.js";
+import { s as S, 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 I } from "../bundled/when.js";
-const O = "focus", z = "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(--focus-stroke-color, 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}';
-var me = 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 && me(e, t, l), l;
+const z = "focus", G = "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(--focus-stroke-color, 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)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){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:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}';
+var me = 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 && me(e, t, o), o;
 };
 const fe = u`
 	<template>
-		${(o) => o.rowData === null || o.columnDefinition === null || o.columnDefinition.columnDataKey === null ? null : o.rowData[o.columnDefinition.columnDataKey]}
+		${(i) => i.rowData === null || i.columnDefinition === null || i.columnDefinition.columnDataKey === null ? null : i.rowData[i.columnDefinition.columnDataKey]}
 	</template>
 `, pe = u`
 	<template>
-		${(o) => o.columnDefinition.title === void 0 ? o.columnDefinition.columnDataKey : o.columnDefinition.title}
+		${(i) => i.columnDefinition.title === void 0 ? i.columnDefinition.columnDataKey : i.columnDefinition.title}
 	</template>
 `;
-class p extends ce(K($)) {
+class p extends ce(U($)) {
   constructor() {
     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");
@@ -68,13 +68,13 @@ class p extends ce(K($)) {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(z, 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(G, 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(z, this.handleFocusin), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener(G, this.handleFocusin), this.removeEventListener(
       w,
       this.handleFocusout
     ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
@@ -108,7 +108,7 @@ class p extends ce(K($)) {
   handleKeydown(e) {
     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 L:
+        case P:
         case te:
           if (this.contains(document.activeElement) && document.activeElement !== this)
             return;
@@ -220,12 +220,15 @@ C([
 C([
   f({ attribute: "sort-direction" })
 ], p.prototype, "sortDirection");
-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;
+C([
+  a
+], p.prototype, "_actionItemsSlottedContent");
+var ve = Object.defineProperty, h = (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;
 };
-class c extends K($) {
+class c extends U($) {
   constructor() {
     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;
@@ -261,8 +264,8 @@ class c extends K($) {
   connectedCallback() {
     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(
+    this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new L(
         T((e) => e.columnDefinitions),
         T((e) => e.activeCellItemTemplate),
         { positioning: !0 }
@@ -291,7 +294,7 @@ class c extends K($) {
       return;
     let t = 0;
     switch (e.key) {
-      case le:
+      case ie:
         t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
         break;
       case oe:
@@ -300,10 +303,10 @@ class c extends K($) {
           this.focusColumnIndex + 1
         ), this.cellElements[t].focus(), e.preventDefault();
         break;
-      case M:
+      case K:
         e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
         break;
-      case P:
+      case M:
         e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
         break;
     }
@@ -357,10 +360,10 @@ h([
 h([
   f({ mode: "boolean" })
 ], c.prototype, "selected");
-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;
+var ge = 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 && ge(e, t, o), o;
 };
 const m = {
   none: "none",
@@ -370,26 +373,26 @@ const m = {
   multiCell: "multi-cell"
 }, s = class k 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, i) => {
+    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;
       }
-      const l = Math.max(
+      const o = Math.max(
         0,
         Math.min(this.rowElements.length - 1, e)
-      ), r = this.rowElements[l].querySelectorAll(
+      ), r = this.rowElements[o].querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       ), x = Math.max(
         0,
         Math.min(r.length - 1, t)
-      ), 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();
+      ), R = r[x];
+      l && this.scrollHeight !== this.clientHeight && (o < this.focusRowIndex && this.scrollTop > 0 || o > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && R.scrollIntoView({ block: "center", inline: "center" }), R.focus();
     }, this.onChildListChange = (e, t) => {
       /* 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);
+      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);
         });
       }), this.queueRowIndexUpdate());
     }, this.queueRowIndexUpdate = () => {
@@ -405,28 +408,28 @@ const m = {
         }
         e = this.generatedGridTemplateColumns;
       }
-      this.rowElements.forEach((t, i) => {
-        const l = t;
-        l.rowIndex = i, l.gridTemplateColumns = e, this.columnDefinitionsStale && (l.columnDefinitions = this.columnDefinitions);
+      this.rowElements.forEach((t, l) => {
+        const o = t;
+        o.rowIndex = l, o.gridTemplateColumns = e, this.columnDefinitionsStale && (o.columnDefinitions = this.columnDefinitions);
       }), this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !1;
-    }, this.#l = (e) => {
+    }, this.#i = (e) => {
       (e.key === "Enter" || e.key === " ") && this.#t(e);
-    }, this.#t = ({ target: e, ctrlKey: t, shiftKey: i, metaKey: l }) => {
+    }, this.#t = ({ target: e, ctrlKey: t, shiftKey: l, metaKey: o }) => {
       if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
         if (this.selectionMode === m.singleCell || this.selectionMode === m.multiCell) {
-          this.#i({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
+          this.#l({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
           return;
         }
-        (this.selectionMode === m.singleRow || this.selectionMode === m.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
+        (this.selectionMode === m.singleRow || this.selectionMode === m.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
       }
-    }, this.#i = ({
+    }, this.#l = ({
       target: e,
       ctrlKey: t,
-      shiftKey: i,
-      metaKey: l
+      shiftKey: l,
+      metaKey: o
     }) => {
       const n = e;
-      if (this.selectionMode === m.multiCell && (t || i || l))
+      if (this.selectionMode === m.multiCell && (t || l || o))
         n.selected = !this.#r.includes(n);
       else {
         const r = n.selected;
@@ -435,11 +438,11 @@ const m = {
     }, this.#n = ({
       target: e,
       ctrlKey: t,
-      shiftKey: i,
-      metaKey: l
+      shiftKey: l,
+      metaKey: o
     }) => {
       const n = e.parentNode;
-      if (this.selectionMode === m.multiRow && (t || i || l))
+      if (this.selectionMode === m.multiRow && (t || l || o))
         n.selected = !this.#a.includes(n);
       else {
         const r = n.selected;
@@ -456,32 +459,32 @@ const m = {
     }, this._resetSelection = (e = !1) => {
       const t = Array.from(
         this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
-      ), i = Array.from(
+      ), l = Array.from(
         this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === m.singleCell || this.selectionMode === m.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;
+        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 === m.none)
-        for (const l of [...t, ...i])
-          l._selectable = !1, l.selected = !1;
+        for (const o of [...t, ...l])
+          o._selectable = !1, o.selected = !1;
       if (this.selectionMode === m.singleRow || this.selectionMode === m.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;
+        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;
       }
-    }, this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#l);
+    }, this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#i);
   }
   /**
    *  generates a gridTemplateColumns based on columndata array
    */
   static generateTemplateColumns(e) {
     let t = "";
-    return e.forEach((i) => {
+    return e.forEach((l) => {
       t = `${t}${t === "" ? "" : " "}1fr`;
     }), t;
   }
@@ -572,14 +575,14 @@ const m = {
     /* 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(
+    this.behaviorOrchestrator === null && (this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+      new L(
         T((e) => e.rowsData),
         T((e) => e.rowItemTemplate),
         { positioning: !0 }
       ),
       this.appendChild(document.createComment(""))
-    )), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(O, 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.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(z, 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(), H.getNotifier(this).subscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -588,10 +591,10 @@ const m = {
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(O, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(z, 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(
+    ), this.observer.disconnect(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.generatedHeader = null, H.getNotifier(this).unsubscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -623,7 +626,7 @@ const m = {
     if (e.defaultPrevented)
       return;
     let t;
-    const i = this.rowElements.length - 1, l = this.offsetHeight + this.scrollTop, n = this.rowElements[i];
+    const l = this.rowElements.length - 1, o = this.offsetHeight + this.scrollTop, n = this.rowElements[l];
     switch (e.key) {
       case re:
         e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
@@ -649,18 +652,18 @@ const m = {
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case ie:
+      case le:
         if (e.preventDefault(), this.rowElements.length === 0) {
           this.focusOnCell(0, 0, !1);
           break;
         }
-        if (this.focusRowIndex >= i || n.offsetTop + n.offsetHeight <= l) {
-          this.focusOnCell(i, this.focusColumnIndex, !1);
+        if (this.focusRowIndex >= l || n.offsetTop + n.offsetHeight <= o) {
+          this.focusOnCell(l, this.focusColumnIndex, !1);
           return;
         }
-        for (t = this.focusRowIndex + 1, t; t <= i; t++) {
+        for (t = this.focusRowIndex + 1, t; t <= l; t++) {
           const r = this.rowElements[t];
-          if (r.offsetTop + r.offsetHeight > l) {
+          if (r.offsetTop + r.offsetHeight > o) {
             let x = 0;
             this.generateHeader === b.sticky && this.generatedHeader !== null && (x = this.generatedHeader.clientHeight), this.scrollTop = r.offsetTop - x;
             break;
@@ -668,12 +671,12 @@ const m = {
         }
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
-      case M: {
+      case K: {
         /* v8 ignore else -- @preserve */
         e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
         break;
       }
-      case P: {
+      case M: {
         /* v8 ignore else -- @preserve */
         e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(
           this.rowElements.length - 1,
@@ -714,10 +717,10 @@ const m = {
   }
   get #r() {
     return this.rowElements.reduce((e, t) => {
-      const l = Array.from(t.children).filter(
+      const o = Array.from(t.children).filter(
         (n) => n.selected
       );
-      return e.concat(l);
+      return e.concat(o);
     }, []);
   }
   selectionModeChanged(e) {
@@ -727,15 +730,15 @@ const m = {
     }
     this._resetSelection(!0);
   }
-  #l;
-  #t;
   #i;
+  #t;
+  #l;
   #n;
   #o;
   static generateColumns(e) {
-    return Object.keys(e).map((t, i) => ({
+    return Object.keys(e).map((t, l) => ({
       columnDataKey: t,
-      gridColumn: `${i}`
+      gridColumn: `${l}`
     }));
   }
   /**
@@ -757,12 +760,12 @@ const m = {
       const t = e.querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
-      this.fixedColumnsPositions.forEach((i, l) => {
+      this.fixedColumnsPositions.forEach((l, o) => {
         /* v8 ignore else -- @preserve */
-        if (l < t.length) {
-          const n = t[l];
+        if (o < t.length) {
+          const n = t[o];
           /* v8 ignore else -- @preserve */
-          typeof n.setFixedPosition == "function" && n.setFixedPosition(`${i}px`);
+          typeof n.setFixedPosition == "function" && n.setFixedPosition(`${l}px`);
         }
       });
     });
@@ -777,8 +780,8 @@ const m = {
       '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let t = 0;
-    for (let i = 0; i < Math.min(this.fixedColumns, e.length); i++)
-      this.fixedColumnsPositions.push(t), t += e[i].offsetWidth;
+    for (let l = 0; l < Math.min(this.fixedColumns, e.length); l++)
+      this.fixedColumnsPositions.push(t), t += e[l].offsetWidth;
   }
   /**
    * Clears all fixed columns state and styling
@@ -793,10 +796,10 @@ const m = {
       const t = e.querySelectorAll(
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
-      this.fixedColumnsPositions.forEach((i, l) => {
+      this.fixedColumnsPositions.forEach((l, o) => {
         /* v8 ignore else -- @preserve */
-        if (l < t.length) {
-          const n = t[l];
+        if (o < t.length) {
+          const n = t[o];
           /* v8 ignore else -- @preserve */
           typeof n.setFixedPosition == "function" && n.setFixedPosition(void 0);
         }
@@ -853,37 +856,37 @@ d([
   f({ attribute: "selection-mode" })
 ], s.prototype, "selectionMode");
 let Ce = s;
-function be(o) {
-  const e = o.tagFor(c);
+function be(i) {
+  const e = i.tagFor(c);
   return u`
     <${e}
         :rowData="${(t) => t}"
-        :cellItemTemplate="${(t, i) => i.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(t, i) => i.parent.headerCellItemTemplate}"
+        :cellItemTemplate="${(t, l) => l.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(t, l) => l.parent.headerCellItemTemplate}"
     ></${e}>
 `;
 }
-function we(o) {
-  return o.selectionMode === void 0 || o.selectionMode === m.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
+function we(i) {
+  return i.selectionMode === void 0 || i.selectionMode === m.none ? null : i.selectionMode.includes("multi") ? "true" : "false";
 }
-function ye(o) {
-  if (o.columnDefinitions === null) {
-    const e = o.querySelector(
+function ye(i) {
+  if (i.columnDefinitions === null) {
+    const e = i.querySelector(
       '[cell-type="columnheader"]'
     )?.parentElement;
-    if (o.generateHeader === b.default && (e?.getAttribute("row-type") === g.header || e?.getAttribute("row-type") === g.stickyHeader))
+    if (i.generateHeader === b.default && (e?.getAttribute("row-type") === g.header || e?.getAttribute("row-type") === g.stickyHeader))
       return;
     if (e) {
-      const t = o.generateHeader === b.sticky ? g.stickyHeader : g.header;
+      const t = i.generateHeader === b.sticky ? g.stickyHeader : g.header;
       e.setAttribute("row-type", t);
     }
   }
 }
-function _e(o, { event: e }) {
+function _e(i, { event: e }) {
   e.stopPropagation();
 }
-const xe = (o) => {
-  const e = be(o), t = o.tagFor(c, !0);
+const xe = (i) => {
+  const e = be(i), t = i.tagFor(c, !0);
   return u`
 		<template
 			aria-multiselectable="${we}"
@@ -892,55 +895,55 @@ const xe = (o) => {
 			@sort="${_e}"
 			:rowElementTag="${() => t}"
 			:defaultRowItemTemplate="${e}"
-			${V({
+			${q({
     property: "rowElements",
     filter: Q("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
 				${ye}
-				<slot ${q("slottedRowElements")}></slot>
+				<slot ${S("slottedRowElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function De(o) {
-  return o._selectable && o.selected ? "true" : o._selectable && !o.selected ? "false" : null;
+function De(i) {
+  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
 }
-function Te(o) {
-  const e = o.tagFor(p);
+function Te(i) {
+  const e = i.tagFor(p);
   return u`
     <${e}
         cell-type="${(t) => t.isRowHeader ? "rowheader" : void 0}"
-        grid-column="${(t, i) => i.index + 1}"
-        :rowData="${(t, i) => i.parent.rowData}"
+        grid-column="${(t, l) => l.index + 1}"
+        :rowData="${(t, l) => l.parent.rowData}"
         :columnDefinition="${(t) => t}"
-				selected="${(t, i) => i.parent.ariaSelected === "true" ? !0 : null}"
+				selected="${(t, l) => l.parent.ariaSelected === "true" ? !0 : null}"
     ></${e}>
 `;
 }
-function Ie(o) {
-  const e = o.tagFor(p);
+function Ie(i) {
+  const e = i.tagFor(p);
   return u`
     <${e}
         cell-type="columnheader"
-        grid-column="${(t, i) => i.index + 1}"
+        grid-column="${(t, l) => l.index + 1}"
         :columnDefinition="${(t) => t}"
     ></${e}>
 `;
 }
-const ke = (o) => {
-  const e = Te(o), t = Ie(o), i = (l) => B("base", ["selected", !!l.selected]);
+const ke = (i) => {
+  const e = Te(i), t = Ie(i), l = (o) => B("base", ["selected", !!o.selected]);
   return u`
 		<template
-			${U({
+			${V({
     role: "row",
     ariaSelected: De
   })}
-			class="${(l) => l.rowType !== "default" ? l.rowType : ""}"
+			class="${(o) => o.rowType !== "default" ? o.rowType : ""}"
 			:defaultCellItemTemplate="${e}"
 			:defaultHeaderCellItemTemplate="${t}"
-			${V({
+			${q({
     property: "cellElements",
     filter: Q(
       '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
@@ -948,25 +951,25 @@ const ke = (o) => {
   })}
 		>
 			<div
-				class="${i}"
-				style="grid-template-columns: ${(l) => l.gridTemplateColumns};"
+				class="${l}"
+				style="grid-template-columns: ${(o) => o.gridTemplateColumns};"
 			>
-				<slot ${q("slottedCellElements")}></slot>
+				<slot ${S("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function E(o) {
-  return o.cellType === "columnheader" && o.sortDirection !== void 0 && o.sortDirection !== _.other;
+function E(i) {
+  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== _.other;
 }
-function Ee(o) {
-  return o.sortDirection === _.ascending ? "sort-asc-solid" : o.sortDirection === _.descending ? "sort-desc-solid" : "sort-solid";
+function Ee(i) {
+  return i.sortDirection === _.ascending ? "sort-asc-solid" : i.sortDirection === _.descending ? "sort-desc-solid" : "sort-solid";
 }
-function $e(o) {
-  return o._selectable && o.selected ? "true" : o._selectable && !o.selected ? "false" : null;
+function $e(i) {
+  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
 }
-function Fe(o) {
-  const e = o.tagFor(N);
+function Fe(i) {
+  const e = i.tagFor(N);
   return u`
 		${I(
     E,
@@ -976,59 +979,74 @@ function Fe(o) {
   )}
 	`;
 }
-function Se(o) {
-  return o.cellType === v.columnHeader && o.sortDirection !== void 0;
+function Se(i) {
+  return i.cellType === v.columnHeader && i.sortDirection !== void 0;
 }
-function j(o) {
-  return o.sortDirection ?? _.none;
+function j(i) {
+  return i.sortDirection ?? _.none;
 }
-function Re(o) {
-  const e = j(o);
-  return o.locale.dataGrid.cell.sortStatus?.[e];
+function Re(i) {
+  const e = j(i);
+  return i.locale.dataGrid.cell.sortStatus?.[e];
 }
-function He(o) {
-  const e = j(o);
-  return o.locale.dataGrid.cell.sortInstruction?.[e];
+function He(i) {
+  const e = j(i);
+  return i.locale.dataGrid.cell.sortInstruction?.[e];
 }
-function Oe(o) {
-  return [Re(o), He(o)].filter((e) => !!e).join(" ").trim();
+function Oe(i) {
+  return [Re(i), He(i)].filter((e) => !!e).join(" ").trim();
 }
-function ze(o, e) {
-  return (e.key === L || e.key === se) && o._handleInteraction(), !0;
+function ze(i, e) {
+  if (e.key === P || e.key === se) {
+    if (e.target.closest('[slot="action-items"]')) return !0;
+    i._handleInteraction();
+  }
+  return !0;
+}
+function Ge(i, e) {
+  return e.target.closest('[slot="action-items"]') || i._handleInteraction(), !0;
 }
-const Ge = (o) => {
-  const e = o.tagFor(Y), t = (i) => B("base", ["selected", !!i.selected]);
+const Ae = (i) => {
+  const e = i.tagFor(Y), t = ({
+    selected: l,
+    _actionItemsSlottedContent: o
+  }) => B(
+    "base",
+    ["selected", !!l],
+    ["has-action-items", !!o?.length]
+  );
   return u`
 		<template
 			tabindex="-1"
-			${U({
-    role: (i) => H[i.cellType] ?? H.default,
+			${V({
+    role: (l) => O[l.cellType] ?? O.default,
     ariaSelected: $e,
-    ariaSort: (i) => i.sortDirection ?? null
+    ariaSort: (l) => l.sortDirection ?? null
   })}
-			@click="${(i) => i._handleInteraction()}"
-			@keydown="${(i, l) => ze(i, l.event)}"
+			@click="${(l, o) => Ge(l, o.event)}"
+			@keydown="${(l, o) => ze(l, o.event)}"
 		>
-			<div
-				class="${t}"
-				role="${(i) => E(i) ? "button" : void 0}"
-			>
-				${(i) => i.selected ? u`<${e}
+			<div class="${t}">
+				<div
+					class="content"
+					role="${(l) => E(l) ? "button" : void 0}"
+				>
+					${(l) => l.selected ? u`<${e}
 								data-announcement="selection"
 							>
-								${(l) => l.locale.dataGrid.cell.selected}
+								${(o) => o.locale.dataGrid.cell.selected}
 							</${e}>` : null}
-				<slot></slot>
-				${I(
+					<slot></slot>
+					${I(
     E,
     u`<${e}
 							data-announcement="button-role"
 						>
-							${(i) => i.locale.dataGrid.cell.button}
+							${(l) => l.locale.dataGrid.cell.button}
 						</${e}>
-					`
+						`
   )}
-				${I(
+					${I(
     Se,
     u`<${e}
 							aria-live="polite"
@@ -1037,33 +1055,38 @@ const Ge = (o) => {
 							${Oe}
 						</${e}>`
   )}
-				${(i) => Fe(o)}
+					${(l) => Fe(i)}
+				</div>
+				<slot
+					name="action-items"
+					${S("_actionItemsSlottedContent")}
+				></slot>
 			</div>
 		</template>
 	`;
-}, Ae = F(
+}, Le = F(
   "data-grid-cell",
   p,
-  Ge,
+  Ae,
   [W, Z],
   {
     styles: he
   }
-), Le = F(
+), Pe = F(
   "data-grid-row",
   c,
   ke,
-  [Ae],
+  [Le],
   {
     styles: ue
   }
-), Pe = F(
+), Me = F(
   "data-grid",
   Ce,
   xe,
-  [Le],
+  [Pe],
   {
     styles: de
   }
-), Me = X(Pe);
-Me();
+), Ke = X(Me);
+Ke();