@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/cjs/calcite-table-row.cjs.entry.js

@@ -0,0 +1,235 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0-next.21
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f069ceeb.js');
+const dom = require('./dom-11f55de1.js');
+const key = require('./key-077d0b58.js');
+const interactive = require('./interactive-b0753ca2.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./browser-c1005bdf.js');
+
+const tableRowCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-row-background:var(--calcite-table-row-background, var(--calcite-ui-foreground-1));--calcite-internal-table-row-border-color:var(--calcite-table-row-border-color, transparent);display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}tr{border-block-end:1px solid var(--calcite-internal-table-row-border-color);background-color:var(--calcite-internal-table-row-background)}";
+
+const TableRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteTableRowSelect = index.createEvent(this, "calciteTableRowSelect", 6);
+    this.calciteInternalTableRowFocusRequest = index.createEvent(this, "calciteInternalTableRowFocusRequest", 6);
+    this.rowCells = [];
+    this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
+      this.calciteInternalTableRowFocusRequest.emit({
+        cellPosition,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    };
+    this.updateCells = () => {
+      const slottedCells = this.tableRowSlotEl
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
+      const renderedCells = Array.from(this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell"))?.filter((el) => el.numberCell || el.selectionCell);
+      const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+      if (cells.length > 0) {
+        cells?.forEach((cell, index) => {
+          cell.positionInRow = index + 1;
+          cell.parentRowType = this.rowType;
+          cell.scale = this.scale;
+          if (cell.nodeName === "CALCITE-TABLE-CELL") {
+            cell.readCellContentsToAT = this.readCellContentsToAT;
+            cell.disabled = this.disabled;
+            cell.parentRowIsSelected = this.selected;
+          }
+        });
+      }
+      this.rowCells =
+        cells || [];
+      this.cellCount = cells?.length;
+    };
+    this.handleSelectionOfRow = () => {
+      this.calciteTableRowSelect.emit();
+    };
+    this.handleKeyboardSelection = (event) => {
+      if (key.isActivationKey(event.key)) {
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        this.handleSelectionOfRow();
+      }
+    };
+    this.disabled = false;
+    this.selected = false;
+    this.cellCount = undefined;
+    this.rowType = undefined;
+    this.numbered = false;
+    this.positionSection = undefined;
+    this.positionSectionLocalized = undefined;
+    this.positionAll = undefined;
+    this.readCellContentsToAT = undefined;
+    this.scale = undefined;
+    this.selectionMode = "none";
+    this.selectedRowCount = undefined;
+    this.selectedRowCountLocalized = undefined;
+    this.bodyRowCount = undefined;
+    this.effectiveLocale = "";
+  }
+  handleCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  handleDelayedCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      requestAnimationFrame(() => this.updateCells());
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  connectedCallback() {
+    interactive.connectInteractive(this);
+  }
+  componentDidRender() {
+    interactive.updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    interactive.disconnectInteractive(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalTableRowFocusChangeHandler(event) {
+    if (event.target.contains(this.el)) {
+      const position = event.detail.cellPosition;
+      const rowPosition = event.detail.rowPosition;
+      const destination = event.detail.destination;
+      const lastCell = event.detail.lastCell;
+      if (rowPosition === this.positionAll) {
+        if (this.disabled) {
+          const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination;
+          this.emitTableRowFocusRequest(position, this.positionAll, deflectDirection);
+          return;
+        }
+        const cellPosition = lastCell
+          ? this.rowCells[this.rowCells.length - 1]
+          : this.rowCells?.find((_, index) => index + 1 === position);
+        if (cellPosition) {
+          cellPosition.setFocus();
+        }
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(event) {
+    const el = event.target;
+    const key = event.key;
+    const isControl = event.ctrlKey;
+    const cells = this.rowCells;
+    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+      switch (key) {
+        case "ArrowUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
+          event.preventDefault();
+          break;
+        case "ArrowDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "next");
+          event.preventDefault();
+          break;
+        case "PageUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "first");
+          event.preventDefault();
+          break;
+        case "PageDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "last");
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+          dom.focusElementInGroup(cells, el, "previous", false);
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+          dom.focusElementInGroup(cells, el, "next", false);
+          event.preventDefault();
+          break;
+        case "Home":
+          if (isControl) {
+            this.emitTableRowFocusRequest(1, this.positionAll, "first");
+            event.preventDefault();
+          }
+          else {
+            dom.focusElementInGroup(cells, el, "first", false);
+            event.preventDefault();
+          }
+          break;
+        case "End":
+          if (isControl) {
+            this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last", true);
+            event.preventDefault();
+          }
+          else {
+            dom.focusElementInGroup(cells, el, "last", false);
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderSelectionIcon() {
+    const icon = this.selectionMode === "multiple" && this.selected
+      ? "check-square-f"
+      : this.selectionMode === "multiple"
+        ? "square"
+        : this.selected
+          ? "circle-f"
+          : "circle";
+    return index.h("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" });
+  }
+  renderSelectableCell() {
+    return this.rowType === "head" ? (index.h("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (index.h("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (index.h("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
+  }
+  renderNumberedCell() {
+    return this.rowType === "head" ? (index.h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true })) : this.rowType === "body" ? (index.h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true }, this.positionSectionLocalized)) : (index.h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true }));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("tr", { "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, onKeyDown: (event) => this.keyDownHandler(event),
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), index.h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) }))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "bodyRowCount": ["handleCellChanges"],
+    "scale": ["handleCellChanges"],
+    "selected": ["handleCellChanges"],
+    "selectedRowCount": ["handleCellChanges"],
+    "numbered": ["handleDelayedCellChanges"],
+    "selectionMode": ["handleDelayedCellChanges"]
+  }; }
+};
+TableRow.style = tableRowCss;
+
+exports.calcite_table_row = TableRow;

package/dist/cjs/calcite-table.cjs.entry.js

@@ -0,0 +1,299 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0-next.21
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f069ceeb.js');
+const loadable = require('./loadable-e8d10de1.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const locale = require('./locale-7b1e0816.js');
+const browser = require('./browser-c1005bdf.js');
+require('./dom-11f55de1.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./key-077d0b58.js');
+require('./observers-48bb741a.js');
+
+const CSS = {
+  bordered: "bordered",
+  zebra: "zebra",
+  selectionArea: "selection-area",
+  paginationArea: "pagination-area",
+  container: "container",
+  tableContainer: "table-container",
+  tableFixed: "table--fixed",
+  assistiveText: "assistive-text",
+  selectionActions: "selection-actions",
+};
+const SLOTS = {
+  selectionActions: "selection-actions",
+  tableHeader: "table-header",
+  tableFooter: "table-footer",
+};
+
+const tableCss = ":host([scale=s]){--calcite-internal-table-cell-padding:0.25rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding:0.5rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-table-cell-padding:1rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--1)}:host{display:table}.container{max-inline-size:100vw;inline-size:100%}.table-container{overflow-x:scroll;white-space:nowrap}.table-container:not(.bordered){border-block-end:1px solid var(--calcite-ui-border-3)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}table{inline-size:100%;border-collapse:collapse;overflow-x:scroll;border-block-start:1px solid var(--calcite-ui-border-3);border-inline-start:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3)}tbody{border-block-end:1px solid var(--calcite-ui-border-3)}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color:var(--calcite-ui-border-3)}.zebra ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background:var(--calcite-ui-foreground-2)}.selection-actions{display:flex;flex-direction:row;margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:0.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:0.5rem}.selection-area calcite-button{margin-inline-end:1rem}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Table = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteTableSelect = index.createEvent(this, "calciteTableSelect", 6);
+    this.calciteTablePageChange = index.createEvent(this, "calciteTablePageChange", 6);
+    this.calciteInternalTableRowFocusChange = index.createEvent(this, "calciteInternalTableRowFocusChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getSlottedRows = (el) => {
+      return el
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el?.matches("calcite-table-row"));
+    };
+    this.updateRows = () => {
+      const headRows = this.getSlottedRows(this.tableHeadSlotEl) || [];
+      const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || [];
+      const footRows = this.getSlottedRows(this.tableFootSlotEl) || [];
+      const allRows = [...headRows, ...bodyRows, ...footRows];
+      headRows?.forEach((row) => {
+        const position = headRows?.indexOf(row);
+        row.rowType = "head";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      bodyRows?.forEach((row) => {
+        const position = bodyRows?.indexOf(row);
+        row.rowType = "body";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      footRows?.forEach((row) => {
+        const position = footRows?.indexOf(row);
+        row.rowType = "foot";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      allRows?.forEach((row) => {
+        row.selectionMode = this.selectionMode;
+        row.bodyRowCount = bodyRows?.length;
+        row.positionAll = allRows?.indexOf(row);
+        row.numbered = this.numbered;
+        row.scale = this.scale;
+        row.readCellContentsToAT = this.readCellContentsToAT;
+      });
+      const colCount = headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length;
+      this.colCount = colCount;
+      this.headRows = headRows;
+      this.bodyRows = bodyRows;
+      this.footRows = footRows;
+      this.allRows = allRows;
+      this.updateSelectedItems();
+      this.paginateRows();
+    };
+    this.handlePaginationChange = () => {
+      const requestedItem = this.paginationEl?.startItem;
+      this.pageStartRow = requestedItem || 1;
+      this.calciteTablePageChange.emit();
+      this.updateRows();
+    };
+    this.paginateRows = () => {
+      this.bodyRows?.forEach((row) => {
+        const rowPos = row.positionSection + 1;
+        const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize;
+        row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row);
+      });
+    };
+    this.updateSelectedItems = (emit) => {
+      const selectedItems = this.bodyRows?.filter((el) => el.selected);
+      this.selectedItems = selectedItems;
+      this.selectedCount = selectedItems?.length;
+      this.allRows?.forEach((row) => {
+        row.selectedRowCount = this.selectedCount;
+        row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount);
+      });
+      if (emit) {
+        this.calciteTableSelect.emit();
+      }
+    };
+    this.handleDeselectAllRows = () => {
+      this.bodyRows?.forEach((row) => {
+        row.selected = false;
+      });
+      this.updateSelectedItems(true);
+    };
+    this.setSelectedItems = (elToMatch) => {
+      this.bodyRows?.forEach((el) => {
+        if (elToMatch?.rowType === "head") {
+          el.selected = this.selectedCount !== this.bodyRows?.length;
+        }
+        else {
+          el.selected =
+            elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+        }
+      });
+      this.updateSelectedItems(true);
+    };
+    this.localizeNumber = (value) => {
+      locale.numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator,
+      };
+      return locale.numberStringFormatter.localize(value.toString());
+    };
+    this.bordered = false;
+    this.caption = undefined;
+    this.groupSeparator = false;
+    this.layout = "auto";
+    this.numbered = false;
+    this.numberingSystem = undefined;
+    this.pageSize = 0;
+    this.scale = "m";
+    this.selectionMode = "none";
+    this.zebra = false;
+    this.selectedItems = [];
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.colCount = 0;
+    this.pageStartRow = 1;
+    this.selectedCount = 0;
+    this.readCellContentsToAT = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  handleNumberedChange() {
+    this.updateRows();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+    await t9n.setUpMessages(this);
+    this.readCellContentsToAT = /safari/i.test(browser.getUserAgentString());
+    this.updateRows();
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
+  connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
+  }
+  disconnectedCallback() {
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteChipSelectListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.setSelectedItems(event.target);
+    }
+  }
+  calciteInternalTableRowFocusEvent(event) {
+    const cellPosition = event["detail"].cellPosition;
+    const rowPos = event["detail"].rowPosition;
+    const destination = event["detail"].destination;
+    const lastCell = event["detail"].lastCell;
+    const visibleBody = this.bodyRows?.filter((row) => !row.hidden);
+    const visibleAll = this.allRows?.filter((row) => !row.hidden);
+    const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll;
+    const firstBodyRow = visibleBody[0]?.positionAll;
+    const lastBodyRow = visibleBody[visibleBody.length - 1]?.positionAll;
+    const firstFootRow = this.footRows[0]?.positionAll;
+    const lastTableRow = visibleAll[visibleAll.length - 1]?.positionAll;
+    const leavingHeader = destination === "next" && rowPos === lastHeadRow;
+    const leavingFooter = destination === "previous" && rowPos === firstFootRow;
+    const enteringHeader = destination === "previous" && rowPos === firstBodyRow;
+    const enteringFooter = destination === "next" && rowPos === lastBodyRow;
+    let rowPosition;
+    switch (destination) {
+      case "first":
+        rowPosition = 0;
+        break;
+      case "last":
+        rowPosition = lastTableRow;
+        break;
+      case "next":
+        rowPosition = leavingHeader ? firstBodyRow : enteringFooter ? firstFootRow : rowPos + 1;
+        break;
+      case "previous":
+        rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1;
+        break;
+    }
+    const destinationCount = this.allRows?.find((row) => row.positionAll === rowPosition)?.cellCount;
+    const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition;
+    if (rowPosition !== undefined) {
+      this.calciteInternalTableRowFocusChange.emit({
+        cellPosition: adjustedPos,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderSelectionArea() {
+    const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length;
+    const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString());
+    const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString());
+    const selectionText = `${localizedSelectedCount} ${this.messages.selected}`;
+    const outOfView = `${localizedOutOfView} ${this.messages.hiddenSelected}`;
+    return (index.h("div", { class: CSS.selectionArea }, index.h("calcite-chip", { kind: this.selectedCount > 0 ? "brand" : "neutral", scale: this.scale, value: selectionText }, selectionText), outOfViewCount > 0 && (index.h("calcite-chip", { icon: "hide-empty", scale: this.scale, title: outOfView, value: outOfView }, localizedOutOfView)), this.selectedCount > 0 && (index.h("calcite-button", { "icon-start": "x", kind: "neutral", onClick: this.handleDeselectAllRows, round: true, scale: this.scale, title: `${this.messages.clear} ${selectionText} ${this.messages.row}` }, this.messages.clear)), index.h("div", { class: CSS.selectionActions }, index.h("slot", { name: SLOTS.selectionActions }))));
+  }
+  renderPaginationArea() {
+    return (index.h("div", { class: CSS.paginationArea }, index.h("calcite-pagination", { groupSeparator: this.groupSeparator, numberingSystem: this.numberingSystem, onCalcitePaginationChange: this.handlePaginationChange, pageSize: this.pageSize, scale: this.scale, startItem: 1, totalItems: this.bodyRows?.length,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.paginationEl = el) })));
+  }
+  renderTHead() {
+    return (index.h("thead", null, index.h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+  }
+  renderTBody() {
+    return (index.h("tbody", null, index.h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+  }
+  renderTFoot() {
+    return (index.h("tfoot", null, index.h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), index.h("div", { class: {
+        [CSS.bordered]: this.bordered,
+        [CSS.zebra]: this.zebra,
+        [CSS.tableContainer]: true,
+      } }, index.h("table", { "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-readonly": true, "aria-rowcount": this.allRows?.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: "grid" }, index.h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "groupSeparator": ["handleNumberedChange"],
+    "numbered": ["handleNumberedChange"],
+    "numberingSystem": ["handleNumberedChange"],
+    "pageSize": ["handleNumberedChange"],
+    "scale": ["handleNumberedChange"],
+    "selectionMode": ["handleNumberedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
+Table.style = tableCss;
+
+exports.calcite_table = Table;

package/dist/cjs/calcite-text-area.cjs.entry.js

@@ -1,26 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const form = require('./form-efb81018.js');
-const label = require('./label-822b0770.js');
-const dom = require('./dom-a6b1b2d0.js');
-const locale = require('./locale-e320d64c.js');
-const observers = require('./observers-42ec2f3d.js');
-const loadable = require('./loadable-11abb55e.js');
-const t9n = require('./t9n-9d761c44.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const guid = require('./guid-537c824b.js');
-const throttle = require('./throttle-37938891.js');
-require('./resources-a528d8de.js');
-require('./key-31549e1f.js');
-require('./debounce-2d82837f.js');
+const index = require('./index-f069ceeb.js');
+const form = require('./form-b4605d58.js');
+const label = require('./label-b5a50c64.js');
+const dom = require('./dom-11f55de1.js');
+const locale = require('./locale-7b1e0816.js');
+const observers = require('./observers-48bb741a.js');
+const loadable = require('./loadable-e8d10de1.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const interactive = require('./interactive-b0753ca2.js');
+const guid = require('./guid-b02b4fb9.js');
+const throttle = require('./throttle-3867815a.js');
+require('./resources-f4b8e837.js');
+require('./key-077d0b58.js');
+require('./browser-c1005bdf.js');
+require('./debounce-f0968b7d.js');
 
 const CSS = {
   assistiveText: "assistive-text",

package/dist/cjs/calcite-tile-select_2.cjs.entry.js

@@ -1,16 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const guid = require('./guid-537c824b.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const loadable = require('./loadable-11abb55e.js');
+const index = require('./index-f069ceeb.js');
+const guid = require('./guid-b02b4fb9.js');
+const interactive = require('./interactive-b0753ca2.js');
+const loadable = require('./loadable-e8d10de1.js');
+require('./browser-c1005bdf.js');
 
 const CSS = {
   checked: "checked",

package/dist/cjs/calcite-tile.cjs.entry.js

@@ -1,19 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const conditionalSlot = require('./conditionalSlot-b7752012.js');
-const dom = require('./dom-a6b1b2d0.js');
-const interactive = require('./interactive-34d4b6bc.js');
-require('./observers-42ec2f3d.js');
-require('./guid-537c824b.js');
-require('./resources-a528d8de.js');
+const index = require('./index-f069ceeb.js');
+const conditionalSlot = require('./conditionalSlot-6113a82c.js');
+const dom = require('./dom-11f55de1.js');
+const interactive = require('./interactive-b0753ca2.js');
+require('./observers-48bb741a.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./browser-c1005bdf.js');
 
 const SLOTS = {
   contentStart: "content-start",

package/dist/cjs/calcite-tip_3.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const conditionalSlot = require('./conditionalSlot-b7752012.js');
-const dom = require('./dom-a6b1b2d0.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-const Heading = require('./Heading-963c98c4.js');
-const observers = require('./observers-42ec2f3d.js');
-require('./guid-537c824b.js');
-require('./resources-a528d8de.js');
-require('./key-31549e1f.js');
+const index = require('./index-f069ceeb.js');
+const conditionalSlot = require('./conditionalSlot-6113a82c.js');
+const dom = require('./dom-11f55de1.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const Heading = require('./Heading-6aecec3d.js');
+const observers = require('./observers-48bb741a.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./key-077d0b58.js');
 
 const CSS$1 = {
   container: "container",