@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition17.cjs → data-grid/definition.cjs}

@@ -1,30 +1,21 @@
 'use strict';
 
-const definition$1 = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition66.cjs');
-const keyCodes = require('./key-codes.cjs');
-const repeat = require('./repeat.cjs');
-const children = require('./children.cjs');
-const slotted = require('./slotted.cjs');
-const localized = require('./localized.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-/**
- * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
- * and should include all non-deprecated and non-experimental Standard events
- */
-const eventFocus = "focus";
-const eventFocusIn = "focusin";
-const eventFocusOut = "focusout";
-const eventKeyDown = "keydown";
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const keyCodes = require('../unbundled/key-codes.cjs');
+const hostSemantics = require('../unbundled/host-semantics.cjs');
+const localized = require('../unbundled/localized.cjs');
 
 const dataGridStyles = ":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}";
 
-const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.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)}";
+const dataGridRowStyles = ".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)}";
 
-const dataGridCellStyles = ":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}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
+const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
 
 const DataGridCellSortStates = {
   none: "none",
@@ -62,17 +53,17 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
   if (result) __defProp$2(target, key, result);
   return result;
 };
-const defaultCellContentsTemplate = vividElement.html`
+const defaultCellContentsTemplate = fastElement.html`
 	<template>
 		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
 	</template>
 `;
-const defaultHeaderCellContentsTemplate = vividElement.html`
+const defaultHeaderCellContentsTemplate = fastElement.html`
 	<template>
 		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
 	</template>
 `;
-class DataGridCell extends localized.Localized(vividElement.VividElement) {
+class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -90,7 +81,21 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
     };
     this._selectable = false;
     this.selected = false;
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated For setting selected state, please use `selected` property instead.
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
+    /**
+     * Indicates the sort status.
+     *
+     * @deprecated To set the sorting visual style please use `sortDirection` property.
+     * @public
+     * HTML Attribute: aria-sort
+     */
     this.ariaSort = null;
   }
   /**
@@ -143,9 +148,9 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener(eventFocusIn, this.handleFocusin);
-    this.addEventListener(eventFocusOut, this.handleFocusout);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
+    this.addEventListener(fastWebUtilities.eventFocusIn, this.handleFocusin);
+    this.addEventListener(fastWebUtilities.eventFocusOut, this.handleFocusout);
+    this.addEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
     this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`;
     this.updateCellView();
     this.updateCellStyle();
@@ -156,12 +161,12 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener(eventFocusIn, this.handleFocusin);
+    this.removeEventListener(fastWebUtilities.eventFocusIn, this.handleFocusin);
     this.removeEventListener(
-      eventFocusOut,
+      fastWebUtilities.eventFocusOut,
       this.handleFocusout
     );
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
+    this.removeEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
     this.disconnectCellView();
   }
   handleFocusin(_) {
@@ -201,8 +206,8 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
       return;
     }
     switch (e.key) {
-      case keyCodes.keyEnter:
-      case keyCodes.keyFunction2:
+      case fastWebUtilities.keyEnter:
+      case fastWebUtilities.keyFunction2:
         if (this.contains(document.activeElement) && document.activeElement !== this) {
           return;
         }
@@ -227,7 +232,7 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
             break;
         }
         break;
-      case keyCodes.keyEscape:
+      case fastWebUtilities.keyEscape:
         if (this.contains(document.activeElement) && document.activeElement !== this) {
           this.focus();
           e.preventDefault();
@@ -280,54 +285,25 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
       this.customCellView = null;
     }
   }
-  /**
-   *
-   * @private
-   */
-  calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
   /**
    * @internal
    */
-  ariaSelectedChanged(_, newValue) {
+  ariaSelectedChanged(prevValue, newValue) {
+    super.ariaSelectedChanged(prevValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
   /**
    * @internal
    */
-  ariaSortChanged(_oldValue, newValue) {
+  ariaSortChanged(oldValue, newValue) {
+    super.ariaSortChanged(oldValue, newValue);
     if (newValue === null) {
       this.sortDirection = void 0;
       return;
     }
     this.sortDirection = newValue;
   }
-  /**
-   * @internal
-   */
-  sortDirectionChanged(_oldValue, newValue) {
-    if (newValue === void 0) {
-      this.ariaSort = null;
-      return;
-    }
-    this.ariaSort = newValue;
-  }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
   }
@@ -356,31 +332,25 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass$2([
-  vividElement.attr({ attribute: "cell-type" })
+  fastElement.attr({ attribute: "cell-type" })
 ], DataGridCell.prototype, "cellType");
 __decorateClass$2([
-  vividElement.attr({ attribute: "grid-column" })
+  fastElement.attr({ attribute: "grid-column" })
 ], DataGridCell.prototype, "gridColumn");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], DataGridCell.prototype, "rowData");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], DataGridCell.prototype, "columnDefinition");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], DataGridCell.prototype, "_selectable");
 __decorateClass$2([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DataGridCell.prototype, "selected");
 __decorateClass$2([
-  vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected");
-__decorateClass$2([
-  vividElement.attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
-__decorateClass$2([
-  vividElement.attr({ attribute: "sort-direction" })
+  fastElement.attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
 
 var __defProp$1 = Object.defineProperty;
@@ -392,7 +362,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends vividElement.VividElement {
+class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -408,6 +378,13 @@ class DataGridRow extends vividElement.VividElement {
     this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     };
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
     this._selectable = false;
     this.selected = false;
@@ -449,7 +426,7 @@ class DataGridRow extends vividElement.VividElement {
       this.cellsPlaceholder = document.createComment("");
       this.appendChild(this.cellsPlaceholder);
       this.updateItemTemplate();
-      this.cellsRepeatBehavior = new repeat.RepeatDirective(
+      this.cellsRepeatBehavior = new fastElement.RepeatDirective(
         (x) => x.columnDefinitions,
         (x) => x.activeCellItemTemplate,
         { positioning: true }
@@ -457,8 +434,8 @@ class DataGridRow extends vividElement.VividElement {
       this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
     }
     this.addEventListener("cell-focused", this.handleCellFocus);
-    this.addEventListener(eventFocusOut, this.handleFocusout);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
+    this.addEventListener(fastWebUtilities.eventFocusOut, this.handleFocusout);
+    this.addEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
     this.updateRowStyle();
   }
   /**
@@ -468,10 +445,10 @@ class DataGridRow extends vividElement.VividElement {
     super.disconnectedCallback();
     this.removeEventListener("cell-focused", this.handleCellFocus);
     this.removeEventListener(
-      eventFocusOut,
+      fastWebUtilities.eventFocusOut,
       this.handleFocusout
     );
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
+    this.removeEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
   }
   handleFocusout(_) {
     if (!this.contains(document.activeElement)) {
@@ -501,13 +478,13 @@ class DataGridRow extends vividElement.VividElement {
         this.cellElements[newFocusColumnIndex].focus();
         e.preventDefault();
         break;
-      case keyCodes.keyHome:
+      case fastWebUtilities.keyHome:
         if (!e.ctrlKey) {
           this.cellElements[0].focus();
           e.preventDefault();
         }
         break;
-      case keyCodes.keyEnd:
+      case fastWebUtilities.keyEnd:
         if (!e.ctrlKey) {
           this.cellElements[this.cellElements.length - 1].focus();
           e.preventDefault();
@@ -521,73 +498,51 @@ class DataGridRow extends vividElement.VividElement {
   /**
    * @internal
    */
-  ariaSelectedChanged(_oldValue, newValue) {
+  ariaSelectedChanged(oldValue, newValue) {
+    super.ariaSelectedChanged(oldValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
-  /**
-   * @internal
-   */
-  _calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass$1([
-  vividElement.attr({ attribute: "grid-template-columns" })
+  fastElement.attr({ attribute: "grid-template-columns" })
 ], DataGridRow.prototype, "gridTemplateColumns");
 __decorateClass$1([
-  vividElement.attr({ attribute: "row-type" })
+  fastElement.attr({ attribute: "row-type" })
 ], DataGridRow.prototype, "rowType");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "rowData");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "columnDefinitions");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "cellItemTemplate");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "headerCellItemTemplate");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "rowIndex");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "activeCellItemTemplate");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "defaultCellItemTemplate");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "defaultHeaderCellItemTemplate");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "cellElements");
 __decorateClass$1([
-  vividElement.attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
-__decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], DataGridRow.prototype, "_selectable");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DataGridRow.prototype, "selected");
 
 var __defProp = Object.defineProperty;
@@ -640,7 +595,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -656,7 +611,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
               newNode.columnDefinitions = this.columnDefinitions;
             }
           });
@@ -667,7 +622,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.queueRowIndexUpdate = () => {
       if (!this.rowindexUpdateQueued) {
         this.rowindexUpdateQueued = true;
-        vividElement.DOM.queueUpdate(this.updateRowIndexes);
+        fastElement.DOM.queueUpdate(this.updateRowIndexes);
       }
     };
     this.updateRowIndexes = () => {
@@ -698,7 +653,8 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       }
     };
     this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell") return;
+      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
+        return;
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
         return;
@@ -751,10 +707,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
      */
     this._resetSelection = (clear = false) => {
       const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type]')
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
       );
       const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type]')
+        this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         for (const cell of cells) {
@@ -917,22 +873,22 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.rowsPlaceholder = document.createComment("");
     this.appendChild(this.rowsPlaceholder);
     this.toggleGeneratedHeader();
-    this.rowsRepeatBehavior = new repeat.RepeatDirective(
+    this.rowsRepeatBehavior = new fastElement.RepeatDirective(
       (x) => x.rowsData,
       (x) => x.rowItemTemplate,
       { positioning: true }
     ).createBehavior(this.rowsPlaceholder);
     this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
     this.addEventListener("row-focused", this.handleRowFocus);
-    this.addEventListener(eventFocus, this.handleFocus);
-    this.addEventListener(eventKeyDown, this.handleKeydown);
-    this.addEventListener(eventFocusOut, this.handleFocusOut);
+    this.addEventListener(fastWebUtilities.eventFocus, this.handleFocus);
+    this.addEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
+    this.addEventListener(fastWebUtilities.eventFocusOut, this.handleFocusOut);
     this.observer = new MutationObserver(this.onChildListChange);
     this.observer.observe(this, { childList: true });
     this.setupResizeObserver();
-    vividElement.DOM.queueUpdate(this.queueRowIndexUpdate);
+    fastElement.DOM.queueUpdate(this.queueRowIndexUpdate);
     this.#setTabIndex();
-    vividElement.Observable.getNotifier(this).subscribe(
+    fastElement.Observable.getNotifier(this).subscribe(
       this.#changeHandler,
       "columnDefinitions"
     );
@@ -943,10 +899,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("row-focused", this.handleRowFocus);
-    this.removeEventListener(eventFocus, this.handleFocus);
-    this.removeEventListener(eventKeyDown, this.handleKeydown);
+    this.removeEventListener(fastWebUtilities.eventFocus, this.handleFocus);
+    this.removeEventListener(fastWebUtilities.eventKeyDown, this.handleKeydown);
     this.removeEventListener(
-      eventFocusOut,
+      fastWebUtilities.eventFocusOut,
       this.handleFocusOut
     );
     this.observer.disconnect();
@@ -956,7 +912,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }
     this.rowsPlaceholder = null;
     this.generatedHeader = null;
-    vividElement.Observable.getNotifier(this).unsubscribe(
+    fastElement.Observable.getNotifier(this).unsubscribe(
       this.#changeHandler,
       "columnDefinitions"
     );
@@ -998,15 +954,15 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     const currentGridBottom = this.offsetHeight + this.scrollTop;
     const lastRow = this.rowElements[maxIndex];
     switch (e.key) {
-      case keyCodes.keyArrowUp:
+      case fastWebUtilities.keyArrowUp:
         e.preventDefault();
         this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
         break;
-      case keyCodes.keyArrowDown:
+      case fastWebUtilities.keyArrowDown:
         e.preventDefault();
         this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
         break;
-      case keyCodes.keyPageUp:
+      case fastWebUtilities.keyPageUp:
         e.preventDefault();
         if (this.rowElements.length === 0) {
           this.focusOnCell(0, 0, false);
@@ -1026,7 +982,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         }
         this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
         break;
-      case keyCodes.keyPageDown:
+      case fastWebUtilities.keyPageDown:
         e.preventDefault();
         if (this.rowElements.length === 0) {
           this.focusOnCell(0, 0, false);
@@ -1050,13 +1006,13 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
         }
         this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
         break;
-      case keyCodes.keyHome:
+      case fastWebUtilities.keyHome:
         if (e.ctrlKey) {
           e.preventDefault();
           this.focusOnCell(0, 0, true);
         }
         break;
-      case keyCodes.keyEnd:
+      case fastWebUtilities.keyEnd:
         if (e.ctrlKey && this.columnDefinitions !== null) {
           e.preventDefault();
           this.focusOnCell(
@@ -1074,7 +1030,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }
     if (this.pendingFocusUpdate === false) {
       this.pendingFocusUpdate = true;
-      vividElement.DOM.queueUpdate(() => this.updateFocus());
+      fastElement.DOM.queueUpdate(() => this.updateFocus());
     }
   }
   updateFocus() {
@@ -1122,7 +1078,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   }
   selectionModeChanged(oldValue) {
     if (oldValue === void 0) {
-      vividElement.DOM.queueUpdate(this._resetSelection);
+      fastElement.DOM.queueUpdate(this._resetSelection);
       return;
     }
     this._resetSelection(true);
@@ -1158,7 +1114,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   applyFixedColumnStyling() {
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
         if (index < cells.length) {
@@ -1178,7 +1134,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.fixedColumnsPositions = [];
     if (this.rowElements.length === 0) return;
     const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"]'
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let accumulator = 0;
     for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
@@ -1197,7 +1153,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
         if (index < cells.length) {
@@ -1212,59 +1168,59 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   }
 };
 __decorateClass([
-  vividElement.attr({ attribute: "no-tabbing", mode: "boolean" })
+  fastElement.attr({ attribute: "no-tabbing", mode: "boolean" })
 ], _DataGrid.prototype, "noTabbing");
 __decorateClass([
-  vividElement.attr({ attribute: "generate-header" })
+  fastElement.attr({ attribute: "generate-header" })
 ], _DataGrid.prototype, "generateHeader");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ attribute: "grid-template-columns" })
+  fastElement.attr({ attribute: "grid-template-columns" })
 ], _DataGrid.prototype, "gridTemplateColumns");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "rowsData");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "columnDefinitions");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "rowItemTemplate");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "cellItemTemplate");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "headerCellItemTemplate");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "focusRowIndex");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "focusColumnIndex");
 __decorateClass([
-  vividElement.attr({ attribute: "fixed-columns", converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ attribute: "fixed-columns", converter: fastElement.nullableNumberConverter })
 ], _DataGrid.prototype, "fixedColumns");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "defaultRowItemTemplate");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "rowElementTag");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "rowElements");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _DataGrid.prototype, "slottedRowElements");
 __decorateClass([
-  vividElement.attr({ attribute: "selection-mode" })
+  fastElement.attr({ attribute: "selection-mode" })
 ], _DataGrid.prototype, "selectionMode");
 let DataGrid = _DataGrid;
 
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
-  return vividElement.html`
+  return fastElement.html`
     <${rowTag}
         :rowData="${(x) => x}"
         :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
@@ -1295,7 +1251,7 @@ function handleColumnSort(_, { event }) {
 const DataGridTemplate = (context) => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
-  return vividElement.html`
+  return fastElement.html`
 		<template
 			aria-multiselectable="${getMultiSelectAriaState}"
 			role="grid"
@@ -1303,22 +1259,27 @@ const DataGridTemplate = (context) => {
 			@sort="${handleColumnSort}"
 			:rowElementTag="${() => rowTag}"
 			:defaultRowItemTemplate="${rowItemTemplate}"
-			${children.children({
+			${fastElement.children({
     property: "rowElements",
-    filter: slotted.elements("[role=row]")
+    filter: fastElement.elements("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
 				${setHeaderRow}
-				<slot ${slotted.slotted("slottedRowElements")}></slot>
+				<slot ${fastElement.slotted("slottedRowElements")}></slot>
 			</div>
 		</template>
 	`;
 };
 
+function calculateAriaSelectedValue$1(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return vividElement.html`
+  return fastElement.html`
     <${cellTag}
         cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
         grid-column="${(_, c) => c.index + 1}"
@@ -1330,7 +1291,7 @@ function createCellItemTemplate(context) {
 }
 function createHeaderCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return vividElement.html`
+  return fastElement.html`
     <${cellTag}
         cell-type="columnheader"
         grid-column="${(_, c) => c.index + 1}"
@@ -1341,17 +1302,20 @@ function createHeaderCellItemTemplate(context) {
 const DataGridRowTemplate = (context) => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
-  return vividElement.html`
+  const getBaseClasses = (x) => fastWebUtilities.classNames("base", ["selected", !!x.selected]);
+  return fastElement.html`
 		<template
-			role="row"
+			${hostSemantics.applyHostSemantics({
+    role: "row",
+    ariaSelected: calculateAriaSelectedValue$1
+  })}
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-			${children.children({
+			${fastElement.children({
     property: "cellElements",
-    filter: slotted.elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
+    filter: fastElement.elements(
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
@@ -1359,7 +1323,7 @@ const DataGridRowTemplate = (context) => {
 				class="${getBaseClasses}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
-				<slot ${slotted.slotted("slottedCellElements")}></slot>
+				<slot ${fastElement.slotted("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
@@ -1377,30 +1341,39 @@ function getSortIcon(x) {
   }
   return "sort-solid";
 }
+function calculateAriaSelectedValue(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function renderSortIcons(c) {
-  const iconTag = c.tagFor(definition$1.Icon);
-  return vividElement.html`
-		${when.when(
+  const iconTag = c.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		${fastElement.when(
     shouldShowSortIcons,
-    vividElement.html`
+    fastElement.html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
 			`
   )}
 	`;
 }
 function handleKeyDown(x, e) {
-  if (e.key === keyCodes.keyEnter || e.key === keyCodes.keySpace) {
+  if (e.key === fastWebUtilities.keyEnter || e.key === fastWebUtilities.keySpace) {
     x._handleInteraction();
   }
   return true;
 }
 const DataGridCellTemplate = (context) => {
-  const visuallyHiddenTagName = context.tagFor(definition.VisuallyHidden);
-  const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
-  return vividElement.html`
+  const visuallyHiddenTagName = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
+  const getBaseClasses = (x) => fastWebUtilities.classNames("base", ["selected", !!x.selected]);
+  return fastElement.html`
 		<template
 			tabindex="-1"
-			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			${hostSemantics.applyHostSemantics({
+    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
+    ariaSelected: calculateAriaSelectedValue,
+    ariaSort: (x) => x.sortDirection ?? null
+  })}
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
@@ -1408,11 +1381,11 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.ariaSelected === "true" ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? fastElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
-				${when.when(
+				${fastElement.when(
     shouldShowSortIcons,
-    vividElement.html`<${visuallyHiddenTagName}>${(x) => x.locale.dataGrid.cell.button}</${visuallyHiddenTagName}>
+    fastElement.html`<${visuallyHiddenTagName}>${(x) => x.locale.dataGrid.cell.button}</${visuallyHiddenTagName}>
 					`
   )}
 				${(_) => renderSortIcons(context)}
@@ -1425,7 +1398,7 @@ const dataGridCellDefinition = vividElement.defineVividComponent(
   "data-grid-cell",
   DataGridCell,
   DataGridCellTemplate,
-  [definition$1.iconDefinition, definition.visuallyHiddenDefinition],
+  [icon_definition.iconDefinition, visuallyHidden_definition.visuallyHiddenDefinition],
   {
     styles: dataGridCellStyles
   }
@@ -1450,9 +1423,9 @@ const dataGridDefinition = vividElement.defineVividComponent(
 );
 const registerDataGrid = vividElement.createRegisterFunction(dataGridDefinition);
 
-exports.DataGrid = DataGrid;
-exports.DataGridCell = DataGridCell;
-exports.DataGridRow = DataGridRow;
+exports.VwcDataGridCellElement = DataGridCell;
+exports.VwcDataGridElement = DataGrid;
+exports.VwcDataGridRowElement = DataGridRow;
 exports.dataGridCellDefinition = dataGridCellDefinition;
 exports.dataGridDefinition = dataGridDefinition;
 exports.dataGridRowDefinition = dataGridRowDefinition;