@vonage/vivid 5.7.0 → 5.9.0

package/data-grid/index.js

@@ -1,6 +1,7 @@
 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 $, 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 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 { 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";
@@ -9,35 +10,14 @@ 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(--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}', _ = {
-  none: "none",
-  ascending: "ascending",
-  descending: "descending",
-  other: "other"
-}, b = {
-  none: "none",
-  default: "default",
-  sticky: "sticky"
-}, v = {
-  default: "default",
-  columnHeader: "columnheader",
-  rowHeader: "rowheader"
-}, g = {
-  default: "default",
-  header: "header",
-  stickyHeader: "sticky-header"
-}, z = {
-  columnheader: "columnheader",
-  rowheader: "rowheader",
-  default: "gridcell"
-};
-var fe = Object.defineProperty, C = (o, e, t, i) => {
+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 && fe(e, t, l), l;
+  return l && me(e, t, l), l;
 };
-const me = u`
+const fe = u`
 	<template>
 		${(o) => o.rowData === null || o.columnDefinition === null || o.columnDefinition.columnDataKey === null ? null : o.rowData[o.columnDefinition.columnDataKey]}
 	</template>
@@ -88,13 +68,13 @@ class p extends ce(K($)) {
    * @internal
    */
   connectedCallback() {
-    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();
+    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();
   }
   /**
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener(O, this.handleFocusin), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener(z, this.handleFocusin), this.removeEventListener(
       w,
       this.handleFocusout
     ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
@@ -175,7 +155,7 @@ class p extends ce(K($)) {
           this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
             this,
             this
-          ) : this.customCellView = me.render(this, this);
+          ) : this.customCellView = fe.render(this, this);
           break;
       }
       this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = _.none : this.sortDirection = void 0;
@@ -220,10 +200,10 @@ class p extends ce(K($)) {
   }
 }
 C([
-  m({ attribute: "cell-type" })
+  f({ attribute: "cell-type" })
 ], p.prototype, "cellType");
 C([
-  m({ attribute: "grid-column" })
+  f({ attribute: "grid-column" })
 ], p.prototype, "gridColumn");
 C([
   a
@@ -235,10 +215,10 @@ C([
   a
 ], p.prototype, "_selectable");
 C([
-  m({ mode: "boolean" })
+  f({ mode: "boolean" })
 ], p.prototype, "selected");
 C([
-  m({ attribute: "sort-direction" })
+  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--)
@@ -339,10 +319,10 @@ class c extends K($) {
   }
 }
 h([
-  m({ attribute: "grid-template-columns" })
+  f({ attribute: "grid-template-columns" })
 ], c.prototype, "gridTemplateColumns");
 h([
-  m({ attribute: "row-type" })
+  f({ attribute: "row-type" })
 ], c.prototype, "rowType");
 h([
   a
@@ -375,20 +355,20 @@ h([
   a
 ], c.prototype, "_selectable");
 h([
-  m({ mode: "boolean" })
+  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;
 };
-const f = {
+const m = {
   none: "none",
   singleRow: "single-row",
   multiRow: "multi-row",
   singleCell: "single-cell",
   multiCell: "multi-cell"
-}, s = class I extends $ {
+}, 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) => {
       if (this.rowElements.length === 0) {
@@ -433,11 +413,11 @@ const f = {
       (e.key === "Enter" || e.key === " ") && this.#t(e);
     }, this.#t = ({ target: e, ctrlKey: t, shiftKey: i, metaKey: l }) => {
       if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
-        if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+        if (this.selectionMode === m.singleCell || this.selectionMode === m.multiCell) {
           this.#i({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
           return;
         }
-        (this.selectionMode === f.singleRow || this.selectionMode === f.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: i, metaKey: l });
       }
     }, this.#i = ({
       target: e,
@@ -446,7 +426,7 @@ const f = {
       metaKey: l
     }) => {
       const n = e;
-      if (this.selectionMode === f.multiCell && (t || i || l))
+      if (this.selectionMode === m.multiCell && (t || i || l))
         n.selected = !this.#r.includes(n);
       else {
         const r = n.selected;
@@ -459,7 +439,7 @@ const f = {
       metaKey: l
     }) => {
       const n = e.parentNode;
-      if (this.selectionMode === f.multiRow && (t || i || l))
+      if (this.selectionMode === m.multiRow && (t || i || l))
         n.selected = !this.#a.includes(n);
       else {
         const r = n.selected;
@@ -479,16 +459,16 @@ const f = {
       ), i = Array.from(
         this.querySelectorAll('[role="row"], [row-type="default"]')
       );
-      if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+      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;
       }
-      if (this.selectionMode === f.none)
+      if (this.selectionMode === m.none)
         for (const l of [...t, ...i])
           l._selectable = !1, l.selected = !1;
-      if (this.selectionMode === f.singleRow || this.selectionMode === f.multiRow) {
+      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)
@@ -534,7 +514,7 @@ const f = {
    * @internal
    */
   rowsDataChanged() {
-    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = I.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = k.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
   }
   /**
    * @internal
@@ -544,7 +524,7 @@ const f = {
       this.generatedGridTemplateColumns = "";
       return;
     }
-    this.generatedGridTemplateColumns = I.generateTemplateColumns(
+    this.generatedGridTemplateColumns = k.generateTemplateColumns(
       this.columnDefinitions
     );
     /* v8 ignore if -- @preserve */
@@ -599,7 +579,7 @@ const f = {
         { positioning: !0 }
       ),
       this.appendChild(document.createComment(""))
-    )), 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.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.#o,
       "columnDefinitions"
     );
@@ -608,7 +588,7 @@ const f = {
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(H, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(O, 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(
@@ -825,13 +805,13 @@ const f = {
   }
 };
 d([
-  m({ attribute: "no-tabbing", mode: "boolean" })
+  f({ attribute: "no-tabbing", mode: "boolean" })
 ], s.prototype, "noTabbing");
 d([
-  m({ attribute: "generate-header" })
+  f({ attribute: "generate-header" })
 ], s.prototype, "generateHeader");
 d([
-  m({ attribute: "grid-template-columns" })
+  f({ attribute: "grid-template-columns" })
 ], s.prototype, "gridTemplateColumns");
 d([
   a
@@ -855,7 +835,7 @@ d([
   a
 ], s.prototype, "focusColumnIndex");
 d([
-  m({ attribute: "fixed-columns", converter: J })
+  f({ attribute: "fixed-columns", converter: J })
 ], s.prototype, "fixedColumns");
 d([
   a
@@ -870,7 +850,7 @@ d([
   a
 ], s.prototype, "slottedRowElements");
 d([
-  m({ attribute: "selection-mode" })
+  f({ attribute: "selection-mode" })
 ], s.prototype, "selectionMode");
 let Ce = s;
 function be(o) {
@@ -884,7 +864,7 @@ function be(o) {
 `;
 }
 function we(o) {
-  return o.selectionMode === void 0 || o.selectionMode === f.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
+  return o.selectionMode === void 0 || o.selectionMode === m.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
 }
 function ye(o) {
   if (o.columnDefinitions === null) {
@@ -939,7 +919,7 @@ function Te(o) {
     ></${e}>
 `;
 }
-function ke(o) {
+function Ie(o) {
   const e = o.tagFor(p);
   return u`
     <${e}
@@ -949,8 +929,8 @@ function ke(o) {
     ></${e}>
 `;
 }
-const Ie = (o) => {
-  const e = Te(o), t = ke(o), i = (l) => B("base", ["selected", !!l.selected]);
+const ke = (o) => {
+  const e = Te(o), t = Ie(o), i = (l) => B("base", ["selected", !!l.selected]);
   return u`
 		<template
 			${U({
@@ -988,7 +968,7 @@ function $e(o) {
 function Fe(o) {
   const e = o.tagFor(N);
   return u`
-		${k(
+		${I(
     E,
     u`
 				<${e} class="header-icon" name="${Ee}"></${e}>
@@ -1022,7 +1002,7 @@ const Ge = (o) => {
 		<template
 			tabindex="-1"
 			${U({
-    role: (i) => z[i.cellType] ?? z.default,
+    role: (i) => H[i.cellType] ?? H.default,
     ariaSelected: $e,
     ariaSort: (i) => i.sortDirection ?? null
   })}
@@ -1039,7 +1019,7 @@ const Ge = (o) => {
 								${(l) => l.locale.dataGrid.cell.selected}
 							</${e}>` : null}
 				<slot></slot>
-				${k(
+				${I(
     E,
     u`<${e}
 							data-announcement="button-role"
@@ -1048,7 +1028,7 @@ const Ge = (o) => {
 						</${e}>
 					`
   )}
-				${k(
+				${I(
     Se,
     u`<${e}
 							aria-live="polite"
@@ -1072,7 +1052,7 @@ const Ge = (o) => {
 ), Le = F(
   "data-grid-row",
   c,
-  Ie,
+  ke,
   [Ae],
   {
     styles: ue

package/data-table/definition.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const hostSemantics = require('../unbundled/host-semantics.cjs');
+const dataGrid_options = require('../unbundled/data-grid.options.cjs');
+
+const tableStyles = ":host{display:inline-block}.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;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}";
+
+const tableHeadStyles = ":host{display:table-header-group}";
+
+const tableBodyStyles = ":host{display:table-row-group}";
+
+const tableRowStyles = ":host{display:table-row}.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:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}";
+
+const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);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-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{--_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:focus-visible{--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));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
+
+const tableCellStyles = ":host{display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{box-sizing:border-box;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:12px 14px;padding-inline:12px;vertical-align:middle}:host:focus-visible{--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));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
+
+class Table extends vividElement.VividElement {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableTemplate = (context) => {
+  return fastElement.html`
+		<template role="table">
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+
+class TableHead extends vividElement.VividElement {
+}
+
+const TableHeadTemplate = (context) => {
+  return fastElement.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableBody extends vividElement.VividElement {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableBodyTemplate = (context) => {
+  return fastElement.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableRow extends hostSemantics.HostSemantics(vividElement.VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableRowTemplate = (context) => {
+  return fastElement.html`
+		<template
+			${hostSemantics.applyHostSemantics({
+    role: "row"
+  })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+
+class TableHeaderCell extends hostSemantics.HostSemantics(vividElement.VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableHeaderCellTemplate = (context) => {
+  return fastElement.html`
+		<template
+			tabindex="-1"
+			${hostSemantics.applyHostSemantics({
+    role: () => dataGrid_options.DataGridCellRole.columnheader
+  })}
+		>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableCell extends hostSemantics.HostSemantics(vividElement.VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableCellTemplate = (context) => {
+  return fastElement.html`
+		<template
+			tabindex="-1"
+			${hostSemantics.applyHostSemantics({
+    role: () => "cell"
+  })}
+		>
+			<slot></slot>
+		</template>
+	`;
+};
+
+const tableCellDefinition = vividElement.defineVividComponent(
+  "table-cell",
+  TableCell,
+  TableCellTemplate,
+  [],
+  {
+    styles: tableCellStyles
+  }
+);
+const tableHeaderCellDefinition = vividElement.defineVividComponent(
+  "table-header-cell",
+  TableHeaderCell,
+  TableHeaderCellTemplate,
+  [tableCellDefinition],
+  {
+    styles: tableHeaderCellStyles
+  }
+);
+const tableRowDefinition = vividElement.defineVividComponent(
+  "table-row",
+  TableRow,
+  TableRowTemplate,
+  [tableCellDefinition, tableHeaderCellDefinition],
+  {
+    styles: tableRowStyles
+  }
+);
+const tableBodyDefinition = vividElement.defineVividComponent(
+  "table-body",
+  TableBody,
+  TableBodyTemplate,
+  [tableRowDefinition],
+  {
+    styles: tableBodyStyles
+  }
+);
+const tableHeadDefinition = vividElement.defineVividComponent(
+  "table-head",
+  TableHead,
+  TableHeadTemplate,
+  [tableRowDefinition],
+  {
+    styles: tableHeadStyles
+  }
+);
+const tableDefinition = vividElement.defineVividComponent(
+  "table",
+  Table,
+  TableTemplate,
+  [tableHeadDefinition, tableBodyDefinition],
+  {
+    styles: tableStyles
+  }
+);
+const registerDataTable = vividElement.createRegisterFunction(tableDefinition);
+
+exports.VwcTableBodyElement = TableBody;
+exports.VwcTableCellElement = TableCell;
+exports.VwcTableElement = Table;
+exports.VwcTableHeadElement = TableHead;
+exports.VwcTableHeaderCellElement = TableHeaderCell;
+exports.VwcTableRowElement = TableRow;
+exports.registerDataTable = registerDataTable;
+exports.tableBodyDefinition = tableBodyDefinition;
+exports.tableCellDefinition = tableCellDefinition;
+exports.tableDefinition = tableDefinition;
+exports.tableHeadDefinition = tableHeadDefinition;
+exports.tableHeaderCellDefinition = tableHeaderCellDefinition;
+exports.tableRowDefinition = tableRowDefinition;