@vonage/vivid 3.9.0 → 3.11.0

package/shared/definition22.js

@@ -1,237 +1,1053 @@
-import { F as FoundationElement, U as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, a5 as __classPrivateFieldSet, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { B as Button, b as buttonRegistries } from './definition9.js';
-import { E as Elevation, e as elevationRegistries } from './definition16.js';
-import { I as Icon } from './icon.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html, b as __metadata, r as registerFactory } from './index.js';
+import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d 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 { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { f as focusTemplateFactory } from './focus2.js';
 
-var css_248z$1 = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
+/**
+ * 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";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Apr 2023 10:27:51 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
+/**
+ * Enumerates the data grid auto generated header options
+ * default option generates a non-sticky header row
+ *
+ * @public
+ */
+const GenerateHeaderOptions = {
+    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 = {
+    default: "default",
+    header: "header",
+    stickyHeader: "sticky-header",
+};
 
-var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
-let dialogPolyfill;
-(async () => {
-  if (!HTMLDialogElement || !HTMLDialogElement.prototype.showModal) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await import('./dialog-polyfill.esm.js');
-  }
-})();
-class Dialog extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    _Dialog_instances.add(this);
-    this.open = false;
-    this.fullWidthBody = false;
-    this.ariaLabelledBy = null;
-    this.ariaLabel = null;
-    this.ariaDescribedBy = null;
-    _Dialog_modal.set(this, false);
-    _Dialog_dialogElement.set(this, void 0);
-    _Dialog_handleScrimClick.set(this, event => {
-      if (event.target !== __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
-        return;
-      }
-      const rect = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).getBoundingClientRect();
-      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      this.open = clickedInDialog;
-    });
-    _Dialog_handleInternalFormSubmit.set(this, event => {
-      if (event.target.method !== 'dialog') {
-        return;
-      }
-      this.open = false;
-    });
-  }
-  set returnValue(value) {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).returnValue = value;
-  }
-  get returnValue() {
-    var _a;
-    return (_a = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) === null || _a === void 0 ? void 0 : _a.returnValue;
-  }
-  get modal() {
-    return __classPrivateFieldGet(this, _Dialog_modal, "f");
-  }
-  openChanged(oldValue, newValue) {
-    if (oldValue === undefined) {
-      return;
+/**
+ * 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
+ */
+class DataGridRow$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of row
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: row-type
+         */
+        this.rowType = DataGridRowTypes.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;
+        };
     }
-    if (!newValue) {
-      this.close();
-    } else {
-      if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
-        __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open = true;
-      }
+    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.default &&
+                this.cellItemTemplate !== undefined
+                ? this.cellItemTemplate
+                : this.rowType === DataGridRowTypes.default &&
+                    this.cellItemTemplate === undefined
+                    ? this.defaultCellItemTemplate
+                    : this.headerCellItemTemplate !== undefined
+                        ? this.headerCellItemTemplate
+                        : this.defaultHeaderCellItemTemplate;
     }
-  }
-  close() {
-    if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open) {
-      __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).close();
-      this.$emit('close', this.returnValue, {
-        bubbles: false
-      });
-    }
-    this.open = false;
-    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, false);
-  }
-  show() {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).show();
-    this.open = true;
-  }
-  showModal() {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
-    this.open = true;
-    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
-  }
 }
-_Dialog_modal = new WeakMap(), _Dialog_dialogElement = new WeakMap(), _Dialog_handleScrimClick = new WeakMap(), _Dialog_handleInternalFormSubmit = new WeakMap(), _Dialog_instances = new WeakSet(), _Dialog_dialog_get = function _Dialog_dialog_get() {
-  if (!__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
-    __classPrivateFieldSet(this, _Dialog_dialogElement, this.shadowRoot.querySelector('dialog'), "f");
-    if (__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
-      __classPrivateFieldGet(this, _Dialog_dialogElement, "f").open = this.open;
-      if (dialogPolyfill) {
-        dialogPolyfill.registerDialog(__classPrivateFieldGet(this, _Dialog_dialogElement, "f"));
-      }
+__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
+ */
+class DataGrid$1 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.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;
+        };
     }
-  }
-  return __classPrivateFieldGet(this, _Dialog_dialogElement, "f");
-}, _Dialog_handleModal = function _Dialog_handleModal(show) {
-  __classPrivateFieldSet(this, _Dialog_modal, show, "f");
-  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).toggleAttribute('aria-modal', show);
-  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).classList.toggle('modal', show);
+    /**
+     *  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$1.generateColumns(this.rowsData[0]);
+        }
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    columnDefinitionsChanged() {
+        if (this.columnDefinitions === null) {
+            this.generatedGridTemplateColumns = "";
+            return;
+        }
+        this.generatedGridTemplateColumns = DataGrid$1.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.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.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.sticky
+                    ? DataGridRowTypes.stickyHeader
+                    : DataGridRowTypes.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({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Dialog.prototype, "open", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "icon", void 0);
-__decorate([attr({
-  attribute: 'icon-placement'
-}), __metadata("design:type", String)], Dialog.prototype, "iconPlacement", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "subtitle", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "headline", void 0);
-__decorate([attr({
-  attribute: 'full-width-body',
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Dialog.prototype, "fullWidthBody", void 0);
-__decorate([attr({
-  attribute: 'aria-labelledby'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabelledBy", void 0);
-__decorate([attr({
-  attribute: 'aria-label'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabel", void 0);
-__decorate([attr({
-  attribute: 'aria-describedby'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaDescribedBy", void 0);
-__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "bodySlottedContent", void 0);
-__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "footerSlottedContent", void 0);
+__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);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
-const getClasses = ({
-  iconPlacement,
-  bodySlottedContent,
-  footerSlottedContent
-}) => classNames('base', [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)], ['hide-body', !(bodySlottedContent === null || bodySlottedContent === void 0 ? void 0 : bodySlottedContent.length)], ['hide-footer', !(footerSlottedContent === null || footerSlottedContent === void 0 ? void 0 : footerSlottedContent.length)]);
-function icon(iconTag) {
-  return html(_t || (_t = _`
-		<${0} class="icon" name="${0}"></${0}>
-	`), iconTag, x => x.icon, iconTag);
+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
+ */
+class DataGridCell$1 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;
+        }
+    }
 }
-function headline() {
-  return html(_t2 || (_t2 = _`
-	  <div class="headline">
-		  ${0}
-	  </div>
-	`), x => x.headline);
+__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);
+
+var css_248z$2 = ":host {\n  position: relative;\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-height: var(--data-grid-max-height, 200px);\n  overflow-y: auto;\n}";
+
+var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Mon, 08 May 2023 11:40:49 GMT\n */\n:host {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n  position: sticky;\n  z-index: 999;\n  top: 0;\n  background: var(--vvd-color-canvas);\n}";
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 08 May 2023 11:40:49 GMT\n */\n:host {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-100);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n  border-color: currentColor;\n  font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n  display: none;\n}";
+
+class DataGrid extends DataGrid$1 {}
+__decorate([attr({
+  attribute: 'selection-mode'
+}), __metadata("design:type", String)], DataGrid.prototype, "selectionMode", void 0);
+
+class DataGridRow extends DataGridRow$1 {}
+
+let _2$1 = t => t,
+  _t$2,
+  _t2$1;
+function createRowItemTemplate(context) {
+  const rowTag = context.tagFor(DataGridRow);
+  return html(_t$2 || (_t$2 = _2$1`
+    <${0}
+        :rowData="${0}"
+        :cellItemTemplate="${0}"
+        :headerCellItemTemplate="${0}"
+    ></${0}>
+`), rowTag, x => x, (_, c) => c.parent.cellItemTemplate, (_, c) => c.parent.headerCellItemTemplate, rowTag);
 }
-function subtitle() {
-  return html(_t3 || (_t3 = _`
-	  <div class="subtitle">
-		  ${0}
-	  </div>
-	`), x => x.subtitle);
+const DataGridTemplate = context => {
+  const rowItemTemplate = createRowItemTemplate(context);
+  const rowTag = context.tagFor(DataGridRow);
+  return html(_t2$1 || (_t2$1 = _2$1`
+        <template
+            role="grid"
+            tabindex="0"
+            :rowElementTag="${0}"
+            :defaultRowItemTemplate="${0}"
+            ${0}
+        >
+            <slot></slot>
+        </template>
+    `), () => rowTag, rowItemTemplate, children({
+    property: 'rowElements',
+    filter: elements('[role=row]')
+  }));
+};
+
+class DataGridCell extends DataGridCell$1 {
+  handleFocusin(e) {
+    super.handleFocusin(e);
+    this.shadowRoot.getElementById('focus-wrapper').classList.add('active');
+  }
+  handleFocusout(e) {
+    super.handleFocusout(e);
+    this.shadowRoot.getElementById('focus-wrapper').classList.remove('active');
+  }
 }
-function renderDismissButton(buttonTag) {
-  return html(_t4 || (_t4 = _`
-	  <${0}
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${0}">
-	  </${0}>`), buttonTag, x => {
-    x.open = false;
-  }, buttonTag);
+
+let _2 = t => t,
+  _t$1,
+  _t2,
+  _t3;
+function createCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html(_t$1 || (_t$1 = _2`
+    <${0}
+        cell-type="${0}"
+        grid-column="${0}"
+        :rowData="${0}"
+        :columnDefinition="${0}"
+    ></${0}>
+`), cellTag, x => x.isRowHeader ? 'rowheader' : undefined, (_, c) => c.index + 1, (_, c) => c.parent.rowData, x => x, cellTag);
 }
-function handleEscapeKey(dialog, event) {
-  if (event.key === 'Escape' && dialog.modal) {
-    dialog.open = false;
-  }
-  return true;
+function createHeaderCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html(_t2 || (_t2 = _2`
+    <${0}
+        cell-type="columnheader"
+        grid-column="${0}"
+        :columnDefinition="${0}"
+    ></${0}>
+`), cellTag, (_, c) => c.index + 1, x => x, cellTag);
 }
-const DialogTemplate = context => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
-  return html(_t5 || (_t5 = _`
-	<${0} dp="12">
-		<dialog class="${0}"
-				@keydown="${0}"
-				returnValue="${0}"
-				aria-labelledby="${0}"
-				aria-label="${0}"
-				aria-describedby="${0}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header ${0}">
-							<slot name="graphic">
-								${0}
-							</slot>
-							${0}
-							${0}
-							${0}
-					</div>
-					<div class="body ${0} ${0}" >
-						<slot name="body" ${0}></slot>
-					</div>
-					<div class="footer ${0}">
-						<slot name="footer" ${0}></slot>
+const DataGridRowTemplate = context => {
+  const cellItemTemplate = createCellItemTemplate(context);
+  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  return html(_t3 || (_t3 = _2`
+        <template
+            role="row"
+            class="${0}"
+            :defaultCellItemTemplate="${0}"
+            :defaultHeaderCellItemTemplate="${0}"
+            ${0}
+        >
+            <slot ${0}></slot>
+        </template>
+    `), x => x.rowType !== 'default' ? x.rowType : '', cellItemTemplate, headerCellItemTemplate, children({
+    property: 'cellElements',
+    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  }), slotted('slottedCellElements'));
+};
+
+const DataGridCellRole = {
+  columnheader: 'columnheader',
+  rowheader: 'rowheader',
+  default: 'gridcell'
+};
+
+let _ = t => t,
+  _t;
+function DataGridCellTemplate(context) {
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+        <template
+            tabindex="-1"
+            role="${0}"
+        >
+					<div id="focus-wrapper">
+							<slot></slot>
+					${0}
 					</div>
-				</div>
-			</slot>
-		</dialog>
-	</${0}>`), elevationTag, getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, x => x.subtitle ? 'border' : '', when(x => x.icon, icon(iconTag)), when(x => x.headline, headline()), when(x => x.subtitle, subtitle()), renderDismissButton(buttonTag), x => {
-    var _a;
-    return ((_a = x.bodySlottedContent) === null || _a === void 0 ? void 0 : _a.length) ? '' : 'hide';
-  }, x => x.fullWidthBody ? 'full-width' : '', slotted('bodySlottedContent'), x => {
+
+        </template>
+    `), x => {
     var _a;
-    return ((_a = x.footerSlottedContent) === null || _a === void 0 ? void 0 : _a.length) ? '' : 'hide';
-  }, slotted('footerSlottedContent'), elevationTag);
-};
+    return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
+  }, () => focusTemplate);
+}
 
-const dialogDefinition = Dialog.compose({
-  baseName: 'dialog',
-  template: DialogTemplate,
-  styles: [css_248z, css_248z$1]
-});
-const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
-const registerDialog = registerFactory(dialogRegistries);
+const dataGrid = DataGrid.compose({
+  baseName: 'data-grid',
+  template: DataGridTemplate,
+  styles: css_248z$2
+})();
+const dataGridRow = DataGridRow.compose({
+  baseName: 'data-grid-row',
+  template: DataGridRowTemplate,
+  styles: css_248z$1
+})();
+const dataGridCell = DataGridCell.compose({
+  baseName: 'data-grid-cell',
+  template: DataGridCellTemplate,
+  styles: css_248z
+})();
+const dataGridElements = [dataGridCell, dataGridRow, dataGrid];
+const registerDataGrid = registerFactory(dataGridElements);
 
-export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };
+export { dataGridRow as a, dataGridCell as b, dataGridElements as c, dataGrid as d, registerDataGrid as r };