@vonage/vivid 5.0.0 → 5.2.0

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

@@ -1,31 +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 hostSemantics = require('./host-semantics.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",
@@ -63,12 +53,12 @@ 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>
@@ -158,9 +148,9 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
    */
   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();
@@ -171,12 +161,12 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
    */
   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(_) {
@@ -216,8 +206,8 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
       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;
         }
@@ -242,7 +232,7 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
             break;
         }
         break;
-      case keyCodes.keyEscape:
+      case fastWebUtilities.keyEscape:
         if (this.contains(document.activeElement) && document.activeElement !== this) {
           this.focus();
           e.preventDefault();
@@ -342,25 +332,25 @@ class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vivid
   }
 }
 __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: "sort-direction" })
+  fastElement.attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
 
 var __defProp$1 = Object.defineProperty;
@@ -436,7 +426,7 @@ class DataGridRow extends hostSemantics.HostSemantics(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 }
@@ -444,8 +434,8 @@ class DataGridRow extends hostSemantics.HostSemantics(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();
   }
   /**
@@ -455,10 +445,10 @@ class DataGridRow extends hostSemantics.HostSemantics(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)) {
@@ -488,13 +478,13 @@ class DataGridRow extends hostSemantics.HostSemantics(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();
@@ -516,43 +506,43 @@ class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement)
 }
 // @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.observable
+  fastElement.observable
 ], DataGridRow.prototype, "_selectable");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DataGridRow.prototype, "selected");
 
 var __defProp = Object.defineProperty;
@@ -632,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 = () => {
@@ -883,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"
     );
@@ -909,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();
@@ -922,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"
     );
@@ -964,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);
@@ -992,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);
@@ -1016,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(
@@ -1040,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() {
@@ -1088,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);
@@ -1178,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}"
@@ -1261,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"
@@ -1269,14 +1259,14 @@ const DataGridTemplate = (context) => {
 			@sort="${handleColumnSort}"
 			:rowElementTag="${() => rowTag}"
 			:defaultRowItemTemplate="${rowItemTemplate}"
-			${children.children({
+			${fastElement.children({
     property: "rowElements",
-    filter: slotted.elements("[role=row],[data-vvd-component=data-grid-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>
 	`;
@@ -1289,7 +1279,7 @@ function calculateAriaSelectedValue$1(x) {
 }
 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}"
@@ -1301,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}"
@@ -1312,8 +1302,8 @@ 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
 			${hostSemantics.applyHostSemantics({
     role: "row",
@@ -1322,9 +1312,9 @@ const DataGridRowTemplate = (context) => {
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-			${children.children({
+			${fastElement.children({
     property: "cellElements",
-    filter: slotted.elements(
+    filter: fastElement.elements(
       '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
@@ -1333,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>
 	`;
@@ -1357,26 +1347,26 @@ function calculateAriaSelectedValue(x) {
   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"
 			${hostSemantics.applyHostSemantics({
@@ -1391,11 +1381,11 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.selected ? 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)}
@@ -1408,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
   }
@@ -1433,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;