@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition16.js

@@ -1,48 +1,1290 @@
-import { h as html, r as registerFactory } from './index.js';
-import { C as CalendarEvent } from './calendar-event.js';
+import { a as iconRegistries } from './definition24.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, r as registerFactory } from './index.js';
+import { b as keyEnd, c as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, d as keyArrowDown, e as keyArrowUp, f as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes.js';
+import { R as RepeatDirective } from './repeat.js';
+import { e as elements } from './node-observation.js';
+import { c as children } from './children.js';
+import { s as slotted } from './slotted.js';
+import { I as Icon } from './icon.js';
+import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
-
-const getClasses = ({
-  connotation,
-  appearance
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
-const getStyles = ({
-  start,
-  duration,
-  overlapCount
-}) => {
-  const stylesObj = Object.assign(Object.assign(Object.assign({}, overlapCount && {
-    '--vvd-calendar-event--overlap-count': overlapCount
-  }), start && {
-    '--vvd-calendar-event--start': start
-  }), duration && {
-    '--vvd-calendar-event--duration': duration
-  });
-  return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
-};
-const CalendarEventTemplate = () => html`
-<div
-  style="${getStyles}"
-  class="${getClasses}"
-  role="button"
-  tabindex="0"
->
-  ${when(x => x.heading, html`<h2><strong>${x => x.heading}</strong></h2>`)}
-  ${when(x => x.description, html`<p>${x => x.description}</p>`)}
-</div>`;
-
-const calendarEventDefinition = CalendarEvent.compose({
-  baseName: 'calendar-event',
-  template: CalendarEventTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-const calendarEventRegistries = [calendarEventDefinition()];
-const registerCalendarEvent = registerFactory(calendarEventRegistries);
-
-export { calendarEventRegistries as a, calendarEventDefinition as c, registerCalendarEvent as r };
+
+/**
+ * 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";
+
+/**
+ * Enumerates the data grid auto generated header options
+ * default option generates a non-sticky header row
+ *
+ * @public
+ */
+const GenerateHeaderOptions$1 = {
+    none: "none",
+    default: "default",
+    sticky: "sticky",
+};
+/**
+ * Enumerates possible data grid cell types.
+ *
+ * @public
+ */
+const DataGridCellTypes = {
+    default: "default",
+    columnHeader: "columnheader",
+    rowHeader: "rowheader",
+};
+/**
+ * Enumerates possible data grid row types
+ *
+ * @public
+ */
+const DataGridRowTypes$1 = {
+    default: "default",
+    header: "header",
+    stickyHeader: "sticky-header",
+};
+
+/**
+ * A Data Grid Row Custom HTML Element.
+ *
+ * @fires row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+ * @slot - The default slot for custom cell elements
+ * @public
+ */
+let DataGridRow$1 = class DataGridRow extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of row
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: row-type
+         */
+        this.rowType = DataGridRowTypes$1.default;
+        /**
+         * The base data for this row
+         *
+         * @public
+         */
+        this.rowData = null;
+        /**
+         * The column definitions of the row
+         *
+         * @public
+         */
+        this.columnDefinitions = null;
+        /**
+         * Whether focus is on/in a cell within this row.
+         *
+         * @internal
+         */
+        this.isActiveRow = false;
+        this.cellsRepeatBehavior = null;
+        this.cellsPlaceholder = null;
+        /**
+         * @internal
+         */
+        this.focusColumnIndex = 0;
+        this.refocusOnLoad = false;
+        this.updateRowStyle = () => {
+            this.style.gridTemplateColumns = this.gridTemplateColumns;
+        };
+    }
+    gridTemplateColumnsChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateRowStyle();
+        }
+    }
+    rowTypeChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateItemTemplate();
+        }
+    }
+    rowDataChanged() {
+        if (this.rowData !== null && this.isActiveRow) {
+            this.refocusOnLoad = true;
+            return;
+        }
+    }
+    cellItemTemplateChanged() {
+        this.updateItemTemplate();
+    }
+    headerCellItemTemplateChanged() {
+        this.updateItemTemplate();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        // note that row elements can be reused with a different data object
+        // as the parent grid's repeat behavior reacts to changes in the data set.
+        if (this.cellsRepeatBehavior === null) {
+            this.cellsPlaceholder = document.createComment("");
+            this.appendChild(this.cellsPlaceholder);
+            this.updateItemTemplate();
+            this.cellsRepeatBehavior = new RepeatDirective(x => x.columnDefinitions, x => x.activeCellItemTemplate, { positioning: true }).createBehavior(this.cellsPlaceholder);
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
+        }
+        this.addEventListener("cell-focused", this.handleCellFocus);
+        this.addEventListener(eventFocusOut, this.handleFocusout);
+        this.addEventListener(eventKeyDown, this.handleKeydown);
+        this.updateRowStyle();
+        if (this.refocusOnLoad) {
+            // if focus was on the row when data changed try to refocus on same cell
+            this.refocusOnLoad = false;
+            if (this.cellElements.length > this.focusColumnIndex) {
+                this.cellElements[this.focusColumnIndex].focus();
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("cell-focused", this.handleCellFocus);
+        this.removeEventListener(eventFocusOut, this.handleFocusout);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+    }
+    handleFocusout(e) {
+        if (!this.contains(e.target)) {
+            this.isActiveRow = false;
+            this.focusColumnIndex = 0;
+        }
+    }
+    handleCellFocus(e) {
+        this.isActiveRow = true;
+        this.focusColumnIndex = this.cellElements.indexOf(e.target);
+        this.$emit("row-focused", this);
+    }
+    handleKeydown(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        let newFocusColumnIndex = 0;
+        switch (e.key) {
+            case keyArrowLeft:
+                // focus left one cell
+                newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyArrowRight:
+                // focus right one cell
+                newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyHome:
+                if (!e.ctrlKey) {
+                    this.cellElements[0].focus();
+                    e.preventDefault();
+                }
+                break;
+            case keyEnd:
+                if (!e.ctrlKey) {
+                    // focus last cell of the row
+                    this.cellElements[this.cellElements.length - 1].focus();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    updateItemTemplate() {
+        this.activeCellItemTemplate =
+            this.rowType === DataGridRowTypes$1.default &&
+                this.cellItemTemplate !== undefined
+                ? this.cellItemTemplate
+                : this.rowType === DataGridRowTypes$1.default &&
+                    this.cellItemTemplate === undefined
+                    ? this.defaultCellItemTemplate
+                    : this.headerCellItemTemplate !== undefined
+                        ? this.headerCellItemTemplate
+                        : this.defaultHeaderCellItemTemplate;
+    }
+};
+__decorate([
+    attr({ attribute: "grid-template-columns" })
+], DataGridRow$1.prototype, "gridTemplateColumns", void 0);
+__decorate([
+    attr({ attribute: "row-type" })
+], DataGridRow$1.prototype, "rowType", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "cellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "headerCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "rowIndex", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "isActiveRow", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "activeCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "defaultCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "defaultHeaderCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "cellElements", void 0);
+
+/**
+ * A Data Grid Custom HTML Element.
+ *
+ * @slot - The default slot for custom row elements
+ * @public
+ */
+let DataGrid$1 = class DataGrid extends FoundationElement {
+    constructor() {
+        super();
+        /**
+         * When true the component will not add itself to the tab queue.
+         * Default is false.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: no-tabbing
+         */
+        this.noTabbing = false;
+        /**
+         *  Whether the grid should automatically generate a header row and its type
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: generate-header
+         */
+        this.generateHeader = GenerateHeaderOptions$1.default;
+        /**
+         * The data being displayed in the grid
+         *
+         * @public
+         */
+        this.rowsData = [];
+        /**
+         * The column definitions of the grid
+         *
+         * @public
+         */
+        this.columnDefinitions = null;
+        /**
+         * The index of the row that will receive focus the next time the
+         * grid is focused. This value changes as focus moves to different
+         * rows within the grid.  Changing this value when focus is already
+         * within the grid moves focus to the specified row.
+         *
+         * @public
+         */
+        this.focusRowIndex = 0;
+        /**
+         * The index of the column that will receive focus the next time the
+         * grid is focused. This value changes as focus moves to different rows
+         * within the grid.  Changing this value when focus is already within
+         * the grid moves focus to the specified column.
+         *
+         * @public
+         */
+        this.focusColumnIndex = 0;
+        this.rowsPlaceholder = null;
+        this.generatedHeader = null;
+        this.isUpdatingFocus = false;
+        this.pendingFocusUpdate = false;
+        this.rowindexUpdateQueued = false;
+        this.columnDefinitionsStale = true;
+        this.generatedGridTemplateColumns = "";
+        this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
+            if (this.rowElements.length === 0) {
+                this.focusRowIndex = 0;
+                this.focusColumnIndex = 0;
+                return;
+            }
+            const focusRowIndex = Math.max(0, Math.min(this.rowElements.length - 1, rowIndex));
+            const focusRow = this.rowElements[focusRowIndex];
+            const cells = focusRow.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"]');
+            const focusColumnIndex = Math.max(0, Math.min(cells.length - 1, columnIndex));
+            const focusTarget = cells[focusColumnIndex];
+            if (scrollIntoView &&
+                this.scrollHeight !== this.clientHeight &&
+                ((focusRowIndex < this.focusRowIndex && this.scrollTop > 0) ||
+                    (focusRowIndex > this.focusRowIndex &&
+                        this.scrollTop < this.scrollHeight - this.clientHeight))) {
+                focusTarget.scrollIntoView({ block: "center", inline: "center" });
+            }
+            focusTarget.focus();
+        };
+        this.onChildListChange = (mutations, 
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+        observer) => {
+            if (mutations && mutations.length) {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((newNode) => {
+                        if (newNode.nodeType === 1 &&
+                            newNode.getAttribute("role") === "row") {
+                            newNode.columnDefinitions = this.columnDefinitions;
+                        }
+                    });
+                });
+                this.queueRowIndexUpdate();
+            }
+        };
+        this.queueRowIndexUpdate = () => {
+            if (!this.rowindexUpdateQueued) {
+                this.rowindexUpdateQueued = true;
+                DOM.queueUpdate(this.updateRowIndexes);
+            }
+        };
+        this.updateRowIndexes = () => {
+            let newGridTemplateColumns = this.gridTemplateColumns;
+            if (newGridTemplateColumns === undefined) {
+                // try to generate columns based on manual rows
+                if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+                    const firstRow = this.rowElements[0];
+                    this.generatedGridTemplateColumns = new Array(firstRow.cellElements.length)
+                        .fill("1fr")
+                        .join(" ");
+                }
+                newGridTemplateColumns = this.generatedGridTemplateColumns;
+            }
+            this.rowElements.forEach((element, index) => {
+                const thisRow = element;
+                thisRow.rowIndex = index;
+                thisRow.gridTemplateColumns = newGridTemplateColumns;
+                if (this.columnDefinitionsStale) {
+                    thisRow.columnDefinitions = this.columnDefinitions;
+                }
+            });
+            this.rowindexUpdateQueued = false;
+            this.columnDefinitionsStale = false;
+        };
+    }
+    /**
+     *  generates a gridTemplateColumns based on columndata array
+     */
+    static generateTemplateColumns(columnDefinitions) {
+        let templateColumns = "";
+        columnDefinitions.forEach((column) => {
+            templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
+        });
+        return templateColumns;
+    }
+    noTabbingChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.noTabbing) {
+                this.setAttribute("tabIndex", "-1");
+            }
+            else {
+                this.setAttribute("tabIndex", this.contains(document.activeElement) ||
+                    this === document.activeElement
+                    ? "-1"
+                    : "0");
+            }
+        }
+    }
+    generateHeaderChanged() {
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    gridTemplateColumnsChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateRowIndexes();
+        }
+    }
+    rowsDataChanged() {
+        if (this.columnDefinitions === null && this.rowsData.length > 0) {
+            this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
+        }
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    columnDefinitionsChanged() {
+        if (this.columnDefinitions === null) {
+            this.generatedGridTemplateColumns = "";
+            return;
+        }
+        this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
+        if (this.$fastController.isConnected) {
+            this.columnDefinitionsStale = true;
+            this.queueRowIndexUpdate();
+        }
+    }
+    headerCellItemTemplateChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.generatedHeader !== null) {
+                this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+            }
+        }
+    }
+    focusRowIndexChanged() {
+        if (this.$fastController.isConnected) {
+            this.queueFocusUpdate();
+        }
+    }
+    focusColumnIndexChanged() {
+        if (this.$fastController.isConnected) {
+            this.queueFocusUpdate();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.rowItemTemplate === undefined) {
+            this.rowItemTemplate = this.defaultRowItemTemplate;
+        }
+        this.rowsPlaceholder = document.createComment("");
+        this.appendChild(this.rowsPlaceholder);
+        this.toggleGeneratedHeader();
+        this.rowsRepeatBehavior = new RepeatDirective(x => x.rowsData, x => x.rowItemTemplate, { positioning: true }).createBehavior(this.rowsPlaceholder);
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        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.observer = new MutationObserver(this.onChildListChange);
+        // only observe if nodes are added or removed
+        this.observer.observe(this, { childList: true });
+        if (this.noTabbing) {
+            this.setAttribute("tabindex", "-1");
+        }
+        DOM.queueUpdate(this.queueRowIndexUpdate);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("row-focused", this.handleRowFocus);
+        this.removeEventListener(eventFocus, this.handleFocus);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+        this.removeEventListener(eventFocusOut, this.handleFocusOut);
+        // disconnect observer
+        this.observer.disconnect();
+        this.rowsPlaceholder = null;
+        this.generatedHeader = null;
+    }
+    /**
+     * @internal
+     */
+    handleRowFocus(e) {
+        this.isUpdatingFocus = true;
+        const focusRow = e.target;
+        this.focusRowIndex = this.rowElements.indexOf(focusRow);
+        this.focusColumnIndex = focusRow.focusColumnIndex;
+        this.setAttribute("tabIndex", "-1");
+        this.isUpdatingFocus = false;
+    }
+    /**
+     * @internal
+     */
+    handleFocus(e) {
+        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    }
+    /**
+     * @internal
+     */
+    handleFocusOut(e) {
+        if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
+            this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+        }
+    }
+    /**
+     * @internal
+     */
+    handleKeydown(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        let newFocusRowIndex;
+        const maxIndex = this.rowElements.length - 1;
+        const currentGridBottom = this.offsetHeight + this.scrollTop;
+        const lastRow = this.rowElements[maxIndex];
+        switch (e.key) {
+            case keyArrowUp:
+                e.preventDefault();
+                // focus up one row
+                this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
+                break;
+            case keyArrowDown:
+                e.preventDefault();
+                // focus down one row
+                this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
+                break;
+            case keyPageUp:
+                e.preventDefault();
+                if (this.rowElements.length === 0) {
+                    this.focusOnCell(0, 0, false);
+                    break;
+                }
+                if (this.focusRowIndex === 0) {
+                    this.focusOnCell(0, this.focusColumnIndex, false);
+                    return;
+                }
+                newFocusRowIndex = this.focusRowIndex - 1;
+                for (newFocusRowIndex; newFocusRowIndex >= 0; newFocusRowIndex--) {
+                    const thisRow = this.rowElements[newFocusRowIndex];
+                    if (thisRow.offsetTop < this.scrollTop) {
+                        this.scrollTop =
+                            thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
+                        break;
+                    }
+                }
+                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                break;
+            case keyPageDown:
+                e.preventDefault();
+                if (this.rowElements.length === 0) {
+                    this.focusOnCell(0, 0, false);
+                    break;
+                }
+                // focus down one "page"
+                if (this.focusRowIndex >= maxIndex ||
+                    lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
+                    this.focusOnCell(maxIndex, this.focusColumnIndex, false);
+                    return;
+                }
+                newFocusRowIndex = this.focusRowIndex + 1;
+                for (newFocusRowIndex; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
+                    const thisRow = this.rowElements[newFocusRowIndex];
+                    if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
+                        let stickyHeaderOffset = 0;
+                        if (this.generateHeader === GenerateHeaderOptions$1.sticky &&
+                            this.generatedHeader !== null) {
+                            stickyHeaderOffset = this.generatedHeader.clientHeight;
+                        }
+                        this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
+                        break;
+                    }
+                }
+                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                break;
+            case keyHome:
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    // focus first cell of first row
+                    this.focusOnCell(0, 0, true);
+                }
+                break;
+            case keyEnd:
+                if (e.ctrlKey && this.columnDefinitions !== null) {
+                    e.preventDefault();
+                    // focus last cell of last row
+                    this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+                }
+                break;
+        }
+    }
+    queueFocusUpdate() {
+        if (this.isUpdatingFocus &&
+            (this.contains(document.activeElement) || this === document.activeElement)) {
+            return;
+        }
+        if (this.pendingFocusUpdate === false) {
+            this.pendingFocusUpdate = true;
+            DOM.queueUpdate(() => this.updateFocus());
+        }
+    }
+    updateFocus() {
+        this.pendingFocusUpdate = false;
+        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    }
+    toggleGeneratedHeader() {
+        if (this.generatedHeader !== null) {
+            this.removeChild(this.generatedHeader);
+            this.generatedHeader = null;
+        }
+        if (this.generateHeader !== GenerateHeaderOptions$1.none &&
+            this.rowsData.length > 0) {
+            const generatedHeaderElement = document.createElement(this.rowElementTag);
+            this.generatedHeader = generatedHeaderElement;
+            this.generatedHeader.columnDefinitions = this.columnDefinitions;
+            this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
+            this.generatedHeader.rowType =
+                this.generateHeader === GenerateHeaderOptions$1.sticky
+                    ? DataGridRowTypes$1.stickyHeader
+                    : DataGridRowTypes$1.header;
+            if (this.firstChild !== null || this.rowsPlaceholder !== null) {
+                this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
+            }
+            return;
+        }
+    }
+};
+/**
+ *  generates a basic column definition by examining sample row data
+ */
+DataGrid$1.generateColumns = (row) => {
+    return Object.getOwnPropertyNames(row).map((property, index) => {
+        return {
+            columnDataKey: property,
+            gridColumn: `${index}`,
+        };
+    });
+};
+__decorate([
+    attr({ attribute: "no-tabbing", mode: "boolean" })
+], DataGrid$1.prototype, "noTabbing", void 0);
+__decorate([
+    attr({ attribute: "generate-header" })
+], DataGrid$1.prototype, "generateHeader", void 0);
+__decorate([
+    attr({ attribute: "grid-template-columns" })
+], DataGrid$1.prototype, "gridTemplateColumns", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowsData", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "cellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "focusRowIndex", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "focusColumnIndex", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "defaultRowItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowElementTag", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowElements", void 0);
+
+const defaultCellContentsTemplate = html `
+    <template>
+        ${x => x.rowData === null ||
+    x.columnDefinition === null ||
+    x.columnDefinition.columnDataKey === null
+    ? null
+    : x.rowData[x.columnDefinition.columnDataKey]}
+    </template>
+`;
+const defaultHeaderCellContentsTemplate = html `
+    <template>
+        ${x => x.columnDefinition === null
+    ? null
+    : x.columnDefinition.title === undefined
+        ? x.columnDefinition.columnDataKey
+        : x.columnDefinition.title}
+    </template>
+`;
+/**
+ * A Data Grid Cell Custom HTML Element.
+ *
+ * @fires cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+ * @slot - The default slot for cell contents.  The "cell contents template" renders here.
+ * @public
+ */
+let DataGridCell$1 = class DataGridCell extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of cell
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: cell-type
+         */
+        this.cellType = DataGridCellTypes.default;
+        /**
+         * The base data for the parent row
+         *
+         * @public
+         */
+        this.rowData = null;
+        /**
+         * The base data for the column
+         *
+         * @public
+         */
+        this.columnDefinition = null;
+        this.isActiveCell = false;
+        this.customCellView = null;
+        this.updateCellStyle = () => {
+            this.style.gridColumn = this.gridColumn;
+        };
+    }
+    cellTypeChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateCellView();
+        }
+    }
+    gridColumnChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateCellStyle();
+        }
+    }
+    columnDefinitionChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.updateCellView();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.addEventListener(eventFocusIn, this.handleFocusin);
+        this.addEventListener(eventFocusOut, this.handleFocusout);
+        this.addEventListener(eventKeyDown, this.handleKeydown);
+        this.style.gridColumn = `${((_a = this.columnDefinition) === null || _a === void 0 ? void 0 : _a.gridColumn) === undefined
+            ? 0
+            : this.columnDefinition.gridColumn}`;
+        this.updateCellView();
+        this.updateCellStyle();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(eventFocusIn, this.handleFocusin);
+        this.removeEventListener(eventFocusOut, this.handleFocusout);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+        this.disconnectCellView();
+    }
+    handleFocusin(e) {
+        if (this.isActiveCell) {
+            return;
+        }
+        this.isActiveCell = true;
+        switch (this.cellType) {
+            case DataGridCellTypes.columnHeader:
+                if (this.columnDefinition !== null &&
+                    this.columnDefinition.headerCellInternalFocusQueue !== true &&
+                    typeof this.columnDefinition.headerCellFocusTargetCallback ===
+                        "function") {
+                    // move focus to the focus target
+                    const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+                    if (focusTarget !== null) {
+                        focusTarget.focus();
+                    }
+                }
+                break;
+            default:
+                if (this.columnDefinition !== null &&
+                    this.columnDefinition.cellInternalFocusQueue !== true &&
+                    typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+                    // move focus to the focus target
+                    const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+                    if (focusTarget !== null) {
+                        focusTarget.focus();
+                    }
+                }
+                break;
+        }
+        this.$emit("cell-focused", this);
+    }
+    handleFocusout(e) {
+        if (this !== document.activeElement && !this.contains(document.activeElement)) {
+            this.isActiveCell = false;
+        }
+    }
+    handleKeydown(e) {
+        if (e.defaultPrevented ||
+            this.columnDefinition === null ||
+            (this.cellType === DataGridCellTypes.default &&
+                this.columnDefinition.cellInternalFocusQueue !== true) ||
+            (this.cellType === DataGridCellTypes.columnHeader &&
+                this.columnDefinition.headerCellInternalFocusQueue !== true)) {
+            return;
+        }
+        switch (e.key) {
+            case keyEnter:
+            case keyFunction2:
+                if (this.contains(document.activeElement) &&
+                    document.activeElement !== this) {
+                    return;
+                }
+                switch (this.cellType) {
+                    case DataGridCellTypes.columnHeader:
+                        if (this.columnDefinition.headerCellFocusTargetCallback !==
+                            undefined) {
+                            const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+                            if (focusTarget !== null) {
+                                focusTarget.focus();
+                            }
+                            e.preventDefault();
+                        }
+                        break;
+                    default:
+                        if (this.columnDefinition.cellFocusTargetCallback !== undefined) {
+                            const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+                            if (focusTarget !== null) {
+                                focusTarget.focus();
+                            }
+                            e.preventDefault();
+                        }
+                        break;
+                }
+                break;
+            case keyEscape:
+                if (this.contains(document.activeElement) &&
+                    document.activeElement !== this) {
+                    this.focus();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    updateCellView() {
+        this.disconnectCellView();
+        if (this.columnDefinition === null) {
+            return;
+        }
+        switch (this.cellType) {
+            case DataGridCellTypes.columnHeader:
+                if (this.columnDefinition.headerCellTemplate !== undefined) {
+                    this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+                }
+                else {
+                    this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
+                }
+                break;
+            case undefined:
+            case DataGridCellTypes.rowHeader:
+            case DataGridCellTypes.default:
+                if (this.columnDefinition.cellTemplate !== undefined) {
+                    this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+                }
+                else {
+                    this.customCellView = defaultCellContentsTemplate.render(this, this);
+                }
+                break;
+        }
+    }
+    disconnectCellView() {
+        if (this.customCellView !== null) {
+            this.customCellView.dispose();
+            this.customCellView = null;
+        }
+    }
+};
+__decorate([
+    attr({ attribute: "cell-type" })
+], DataGridCell$1.prototype, "cellType", void 0);
+__decorate([
+    attr({ attribute: "grid-column" })
+], DataGridCell$1.prototype, "gridColumn", void 0);
+__decorate([
+    observable
+], DataGridCell$1.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridCell$1.prototype, "columnDefinition", void 0);
+
+const dataGridStyles = ":host {\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-block-size: 400px;\n}\n\n.base {\n  position: relative;\n  overflow: auto;\n  block-size: inherit;\n  inline-size: 100%;\n  max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n  display: none;\n}";
+
+const dataGridRowStyles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
+
+const dataGridCellStyles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-400);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key, result);
+  return result;
+};
+const DataGridSelectionMode = {
+  none: "none",
+  singleRow: "single-row",
+  multiRow: "multi-row",
+  singleCell: "single-cell",
+  multiCell: "multi-cell"
+};
+class DataGrid extends DataGrid$1 {
+  constructor() {
+    super();
+    this.#handleKeypress = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        this.#handleClick(e);
+      }
+    };
+    this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      if (target.getAttribute("role") !== "gridcell")
+        return;
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
+        return;
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
+      }
+    };
+    this.#handleCellSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      const cell = target;
+      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
+        this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
+      } else {
+        const cacheTargetSelection = cell.getAttribute("aria-selected") === "true";
+        this.#resetSelection();
+        this.#setSelectedState(cell, !cacheTargetSelection);
+      }
+    };
+    this.#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      const row = target.parentNode;
+      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
+        this.#setSelectedState(row, !this.#selectedRows.includes(row));
+      } else {
+        const cacheTargetSelection = row.getAttribute("aria-selected") === "true";
+        this.#resetSelection();
+        this.#setSelectedState(row, !cacheTargetSelection);
+      }
+    };
+    this.#setSelectedState = (cell, selectedState) => {
+      cell.setAttribute("aria-selected", selectedState.toString());
+    };
+    this.#resetSelection = () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => this.#setSelectedState(cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.setAttribute("aria-selected", "false"));
+      }
+    };
+    this.#initSelections = () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => !cell.hasAttribute("aria-selected") && this.#setSelectedState(cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => !row.hasAttribute("aria-selected") && row.setAttribute("aria-selected", "false"));
+      }
+    };
+    this.addEventListener("click", this.#handleClick);
+    this.addEventListener("keydown", this.#handleKeypress);
+  }
+  get #selectedRows() {
+    return this.rowElements.filter((row) => row.getAttribute("aria-selected") === "true");
+  }
+  get #selectedCells() {
+    return this.rowElements.reduce((acc, row) => {
+      const rowChildren = Array.from(row.children);
+      const selectedCells = rowChildren.filter((cell) => cell.getAttribute("aria-selected") === "true");
+      return acc.concat(selectedCells);
+    }, []);
+  }
+  selectionModeChanged(oldValue) {
+    if (oldValue === void 0) {
+      DOM.queueUpdate(this.#initSelections);
+      return;
+    }
+    this.#resetSelection();
+  }
+  #handleKeypress;
+  #handleClick;
+  #handleCellSelection;
+  #handleRowSelection;
+  #setSelectedState;
+  #resetSelection;
+  #initSelections;
+  static generateColumns(rowData) {
+    return Object.keys(rowData).map((property, index) => {
+      return {
+        columnDataKey: property,
+        gridColumn: `${index}`
+      };
+    });
+  }
+}
+__decorateClass$2([
+  attr({ attribute: "selection-mode" })
+], DataGrid.prototype, "selectionMode", 2);
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+class DataGridRow extends DataGridRow$1 {
+  constructor() {
+    super(...arguments);
+    this.ariaSelected = null;
+  }
+}
+__decorateClass$1([
+  attr({ attribute: "aria-selected" })
+], DataGridRow.prototype, "ariaSelected", 2);
+
+const DataGridCellSortStates = {
+  none: "none",
+  ascending: "ascending",
+  descending: "descending",
+  other: "other"
+};
+const GenerateHeaderOptions = {
+  none: "none",
+  default: "default",
+  sticky: "sticky"
+};
+const DataGridRowTypes = {
+  default: "default",
+  header: "header",
+  stickyHeader: "sticky-header"
+};
+const DataGridCellRole = {
+  columnheader: "columnheader",
+  rowheader: "rowheader",
+  default: "gridcell"
+};
+
+function createRowItemTemplate(context) {
+  const rowTag = context.tagFor(DataGridRow);
+  return html`
+    <${rowTag}
+        :rowData="${(x) => x}"
+        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
+    ></${rowTag}>
+`;
+}
+function getMultiSelectAriaState(x) {
+  return x.selectionMode === void 0 || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes("multi") ? "true" : "false";
+}
+function setHeaderRow(x) {
+  if (x.columnDefinitions === null) {
+    const headerRow = x.querySelector('[cell-type="columnheader"]')?.parentElement;
+    if (headerRow) {
+      const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : x.generateHeader === GenerateHeaderOptions.default ? DataGridRowTypes.header : "hidden-header";
+      headerRow.setAttribute("row-type", rowType);
+    }
+  }
+}
+function handleColumnSort(_, { event }) {
+  event.stopPropagation();
+}
+const DataGridTemplate = (context) => {
+  const rowItemTemplate = createRowItemTemplate(context);
+  const rowTag = context.tagFor(DataGridRow);
+  return html`
+        <template
+						aria-multiselectable="${getMultiSelectAriaState}"
+            role="grid"
+            tabindex="0"
+						@sort="${handleColumnSort}"
+            :rowElementTag="${() => rowTag}"
+            :defaultRowItemTemplate="${rowItemTemplate}"
+            ${children({
+    property: "rowElements",
+    filter: elements("[role=row]")
+  })}
+        >
+					<div class="base">
+						${setHeaderRow}
+            <slot></slot>
+					</div>
+        </template>
+    `;
+};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class DataGridCell extends DataGridCell$1 {
+  constructor() {
+    super();
+    this.ariaSelected = null;
+    this.ariaSort = null;
+    this.updateCellStyle = () => {
+      if (this.gridColumn && !this.gridColumn.includes("undefined")) {
+        this.style.gridColumn = this.gridColumn;
+      } else {
+        this.style.removeProperty("grid-column");
+      }
+    };
+  }
+  ariaSelectedChanged(_, selectedState) {
+    this.shadowRoot.querySelector(".base")?.classList.toggle("selected", selectedState === "true");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ariaSelectedChanged(null, this.ariaSelected);
+  }
+  handleFocusin(e) {
+    super.handleFocusin(e);
+    this.shadowRoot.querySelector(".base").classList.add("active");
+  }
+  handleFocusout(e) {
+    super.handleFocusout(e);
+    this.shadowRoot.querySelector(".base").classList.remove("active");
+  }
+}
+__decorateClass([
+  attr({ attribute: "aria-selected", mode: "fromView" })
+], DataGridCell.prototype, "ariaSelected", 2);
+__decorateClass([
+  attr({ attribute: "aria-sort" })
+], DataGridCell.prototype, "ariaSort", 2);
+
+function createCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html`
+    <${cellTag}
+        cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
+        grid-column="${(_, c) => c.index + 1}"
+        :rowData="${(_, c) => c.parent.rowData}"
+        :columnDefinition="${(x) => x}"
+				selected="${(_, c) => c.parent.ariaSelected === "true" ? true : null}"
+    ></${cellTag}>
+`;
+}
+function createHeaderCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html`
+    <${cellTag}
+        cell-type="columnheader"
+        grid-column="${(_, c) => c.index + 1}"
+        :columnDefinition="${(x) => x}"
+    ></${cellTag}>
+`;
+}
+const DataGridRowTemplate = (context) => {
+  const cellItemTemplate = createCellItemTemplate(context);
+  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  return html`
+        <template
+            role="row"
+            class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
+            :defaultCellItemTemplate="${cellItemTemplate}"
+            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+            ${children({
+    property: "cellElements",
+    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  })}
+        >
+					<div class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
+							 style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+					>
+            <slot ${slotted("slottedCellElements")}></slot>
+					</div>
+        </template>
+    `;
+};
+
+function shouldShowSortIcons(x) {
+  if (x.columnDefinition) {
+    x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
+  }
+  return x.cellType === "columnheader" && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
+}
+function getSortIcon(x) {
+  return x.ariaSort === DataGridCellSortStates.ascending ? "sort-asc-solid" : x.ariaSort === DataGridCellSortStates.descending ? "sort-desc-solid" : "sort-solid";
+}
+function renderSortIcons(c) {
+  const iconTag = c.tagFor(Icon);
+  return html`
+			${when(shouldShowSortIcons, html`
+				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
+			`)}
+		`;
+}
+function handleClick(x) {
+  if (x.cellType === "columnheader" && x.ariaSort !== null) {
+    x.$emit(
+      "sort",
+      { columnDataKey: x.columnDefinition && x.columnDefinition.columnDataKey ? x.columnDefinition.columnDataKey : x.textContent.trim(), sortDirection: x.ariaSort }
+    );
+  }
+}
+function DataGridCellTemplate(context) {
+  const focusTemplate = focusTemplateFactory(context);
+  return html`
+        <template
+            tabindex="-1"
+            role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+						@click="${handleClick}"
+        >
+					<div class="base">
+							<slot></slot>
+							${() => focusTemplate}
+							${(_) => renderSortIcons(context)}
+					</div>
+
+        </template>
+    `;
+}
+
+const dataGrid = DataGrid.compose({
+  baseName: "data-grid",
+  template: DataGridTemplate,
+  styles: dataGridStyles
+})();
+const dataGridRow = DataGridRow.compose({
+  baseName: "data-grid-row",
+  template: DataGridRowTemplate,
+  styles: dataGridRowStyles
+})();
+const dataGridCell = DataGridCell.compose({
+  baseName: "data-grid-cell",
+  template: DataGridCellTemplate,
+  styles: dataGridCellStyles
+})();
+const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
+const registerDataGrid = registerFactory(dataGridElements);
+
+export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };