@esri/calcite-components 5.2.0-next.14 → 5.2.0-next.16

package/dist/components/calcite-table/customElement.js

@@ -6,6 +6,7 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isHidden } from "../../chunks/component.js";
+import { c as createObserver } from "../../chunks/observers.js";
 function getUserAgentData() {
   return navigator.userAgentData;
 }
@@ -23,6 +24,7 @@ const CSS = {
   paginationArea: "pagination-area",
   container: "container",
   tableContainer: "table-container",
+  tableContainerOverflow: "table-container--overflow",
   tableFixed: "table--fixed",
   assistiveText: "assistive-text",
   selectionActions: "selection-actions",
@@ -40,7 +42,7 @@ const ICONS = {
   hideEmpty: "hide-empty",
   clear: "x"
 };
-const styles = css`@charset "UTF-8";:host([scale=s]){--calcite-internal-table-cell-padding: .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: .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(:is([scale=s],[scale=m])){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xs);--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:flex}.container{display:flex;flex-direction:column;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-container-size-content-fluid)}.table-container{overflow:auto;white-space:nowrap;line-height:var(--calcite-font-line-height-relative-tight);border:var(--calcite-border-width-sm) solid var(--calcite-table-border-color, var(--calcite-color-border-2));border-radius:var(--calcite-table-corner-radius, var(--calcite-corner-radius-sharp));box-shadow:var(--calcite-table-shadow, var(--calcite-shadow-none))}.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{border-collapse:collapse;overflow-x:scroll;inline-size:var(--calcite-container-size-content-fluid)}@-moz-document url-prefix(){table{border-collapse:separate;border-spacing:0}}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-2))}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background-color: var( --calcite-table-row-background-color-striped, var(--calcite-color-foreground-2) )}.selection-actions{display:flex;flex-direction:row;gap:var(--calcite-internal-table-selection-action-spacing);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:.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:.5rem}.selection-area calcite-button{margin-inline-end:1rem}.selection-chip{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color)}.selection-chip.selection-chip--active{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color-selected);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color-selected);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color-selected)}.selection-chip--out-of-view{--calcite-chip-background-color: var(--calcite-table-selection-out-of-view-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-out-of-view-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-out-of-view-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-out-of-view-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-out-of-view-chip-text-color);--calcite-chip-icon-color: var(--calcite-table-selection-out-of-view-chip-icon-color)}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center;--calcite-pagination-color: var(--calcite-table-pagination-color);--calcite-pagination-color-hover: var(--calcite-table-pagination-color-hover);--calcite-pagination-color-border-hover: var(--calcite-table-pagination-color-border-hover);--calcite-pagination-color-border-active: var(--calcite-table-pagination-color-border-active);--calcite-pagination-background-color: var(--calcite-table-pagination-background-color);--calcite-pagination-icon-color-background-hover: var(--calcite-table-pagination-icon-color-background-hover)}.dismiss-button{margin-inline-end:1rem;--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color);--calcite-button-corner-radius: var(--calcite-table-selection-dismiss-button-corner-radius);--calcite-button-shadow: var(--calcite-table-selection-dismiss-button-shadow);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color)}.dismiss-button:hover{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-hover);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-hover);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-hover)}.dismiss-button:active{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-active);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-active);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-active)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`@charset "UTF-8";:host{display:flex;--calcite-internal-table-border-collapse: collapse}:host([scale=s]){--calcite-internal-table-cell-padding: .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: .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(:is([scale=s],[scale=m])){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xs);--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([sticky-header]){--calcite-internal-table-border-collapse: separate;--calcite-internal-table-header-border-block-end-width: 0;--calcite-internal-table-sticky-header-border-shadow: inset 0 calc(-1 * var(--calcite-border-width-sm)) 0 0 var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}:host([sticky-header]) .table-container{position:relative}.container{display:flex;flex-direction:column;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-container-size-content-fluid)}.table-container{white-space:nowrap;line-height:var(--calcite-font-line-height-relative-tight);border:var(--calcite-border-width-sm) solid var(--calcite-table-border-color, var(--calcite-color-border-2));border-radius:var(--calcite-table-corner-radius, var(--calcite-corner-radius-sharp));box-shadow:var(--calcite-table-shadow, var(--calcite-shadow-none));overflow:auto}.table-container--overflow{overscroll-behavior-y:none}.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{border-collapse:var(--calcite-internal-table-border-collapse);border-spacing:0;inline-size:var(--calcite-container-size-content-fluid)}@-moz-document url-prefix(){table{border-collapse:separate;border-spacing:0}}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-2))}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background-color: var( --calcite-table-row-background-color-striped, var(--calcite-color-foreground-2) )}.selection-actions{display:flex;flex-direction:row;gap:var(--calcite-internal-table-selection-action-spacing);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:.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:.5rem}.selection-area calcite-button{margin-inline-end:1rem}.selection-chip{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color)}.selection-chip.selection-chip--active{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color-selected);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color-selected);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color-selected)}.selection-chip--out-of-view{--calcite-chip-background-color: var(--calcite-table-selection-out-of-view-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-out-of-view-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-out-of-view-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-out-of-view-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-out-of-view-chip-text-color);--calcite-chip-icon-color: var(--calcite-table-selection-out-of-view-chip-icon-color)}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center;--calcite-pagination-color: var(--calcite-table-pagination-color);--calcite-pagination-color-hover: var(--calcite-table-pagination-color-hover);--calcite-pagination-color-border-hover: var(--calcite-table-pagination-color-border-hover);--calcite-pagination-color-border-active: var(--calcite-table-pagination-color-border-active);--calcite-pagination-background-color: var(--calcite-table-pagination-background-color);--calcite-pagination-icon-color-background-hover: var(--calcite-table-pagination-icon-color-background-hover)}.dismiss-button{margin-inline-end:1rem;--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color);--calcite-button-corner-radius: var(--calcite-table-selection-dismiss-button-corner-radius);--calcite-button-shadow: var(--calcite-table-selection-dismiss-button-shadow);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color)}.dismiss-button:hover{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-hover);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-hover);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-hover)}.dismiss-button:active{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-active);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-active);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-active)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Table extends LitElement {
   constructor() {
     super();
@@ -49,14 +51,19 @@ class Table extends LitElement {
     this.footRows = [];
     this.headRows = [];
     this.paginationRef = createRef();
+    this.tableContainerRef = createRef();
+    this.tableEl = null;
     this.tableBodySlotRef = createRef();
     this.tableFootSlotRef = createRef();
     this.tableHeadSlotRef = createRef();
+    this.tableContainerOverflowAnimationFrame = null;
+    this.tableContainerResizeObserver = createObserver("resize", () => this.scheduleTableContainerOverflowUpdate());
     this.messages = useT9n({ blocking: true });
     this.colCount = 0;
     this.pageStartRow = 1;
     this.readCellContentsToAT = false;
     this.selectedCount = 0;
+    this.tableContainerHasOverflow = false;
     this._selectedItems = [];
     this.bordered = false;
     this.currentPage = 0;
@@ -69,6 +76,7 @@ class Table extends LitElement {
     this.selectionDisplay = "top";
     this.selectionMode = "none";
     this.striped = false;
+    this.stickyHeader = false;
     this.calciteInternalTableRowFocusChange = createEvent({ cancelable: false });
     this.calciteTablePageChange = createEvent({ cancelable: false });
     this.calciteTableSelect = createEvent({ cancelable: false });
@@ -77,7 +85,7 @@ class Table extends LitElement {
     this.listen("calciteInternalTableRowFocusRequest", this.calciteInternalTableRowFocusEvent);
   }
   static {
-    this.properties = { colCount: [16, {}, { state: true }], pageStartRow: [16, {}, { state: true }], readCellContentsToAT: [16, {}, { state: true }], selectedCount: [16, {}, { state: true }], _selectedItems: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], caption: 1, currentPage: [11, {}, { reflect: true, type: Number }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numbered: [7, {}, { reflect: true, type: Boolean }], numberingSystem: [3, {}, { reflect: true }], pageSize: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], selectedItems: [32, {}, { attribute: false, readOnly: true }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], striped: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { colCount: [16, {}, { state: true }], pageStartRow: [16, {}, { state: true }], readCellContentsToAT: [16, {}, { state: true }], selectedCount: [16, {}, { state: true }], tableContainerHasOverflow: [16, {}, { state: true }], _selectedItems: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], caption: 1, currentPage: [11, {}, { reflect: true, type: Number }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numbered: [7, {}, { reflect: true, type: Boolean }], numberingSystem: [3, {}, { reflect: true }], pageSize: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], selectedItems: [32, {}, { attribute: false, readOnly: true }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], striped: [7, {}, { reflect: true, type: Boolean }], stickyHeader: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -89,14 +97,42 @@ class Table extends LitElement {
     this.readCellContentsToAT = /safari/i.test(getUserAgentString());
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.tableContainerOverflowAnimationFrame !== null) {
+      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
+      this.tableContainerOverflowAnimationFrame = null;
+    }
+    this.tableContainerResizeObserver?.disconnect();
+  }
   willUpdate(changes) {
     if (changes.has("groupSeparator") && (this.hasUpdated || this.groupSeparator !== false) || changes.has("interactionMode") && (this.hasUpdated || this.interactionMode !== "interactive") || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("numberingSystem") || changes.has("pageSize") && (this.hasUpdated || this.pageSize !== 0) || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || changes.has("currentPage") && (this.hasUpdated || this.currentPage > 1) && this.pageSize > 0) {
       this.updateRows();
     }
+    if (changes.has("stickyHeader") && (this.hasUpdated || this.stickyHeader !== false)) {
+      this.allRows?.forEach((row) => {
+        row.stickyHeaderEnabled = this.stickyHeader;
+      });
+      if (this.stickyHeader) {
+        this.applyHeaderRowPositionStyles();
+      } else {
+        this.resetStickyHeaderState();
+      }
+    }
   }
   handleSlotChange() {
     this.updateRows();
   }
+  clearStickyHeaderRowStyles() {
+    this.headRows?.forEach((row) => {
+      row.style.removeProperty("--calcite-internal-table-header-offset");
+      row.style.removeProperty("--calcite-internal-table-header-z-index");
+      row.style.removeProperty("--calcite-internal-table-header-row-position");
+    });
+  }
+  resetStickyHeaderState() {
+    this.clearStickyHeaderRowStyles();
+  }
   calciteTableRowSelectListener(event) {
     if (event.composedPath().includes(this.el)) {
       this.setSelectedItems(event.target);
@@ -157,6 +193,40 @@ class Table extends LitElement {
     }
     return el.assignedElements({ flatten: true }).filter((el2) => el2.matches("calcite-table-row"));
   }
+  observeTableContainer() {
+    this.tableContainerResizeObserver?.disconnect();
+    const tableContainer = this.tableContainerRef.value;
+    const table = this.tableEl;
+    if (tableContainer) {
+      this.tableContainerResizeObserver?.observe(tableContainer);
+    }
+    if (table) {
+      this.tableContainerResizeObserver?.observe(table);
+    }
+  }
+  scheduleTableContainerOverflowUpdate() {
+    if (this.tableContainerOverflowAnimationFrame !== null) {
+      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
+    }
+    this.tableContainerOverflowAnimationFrame = requestAnimationFrame(() => {
+      this.tableContainerOverflowAnimationFrame = null;
+      this.updateTableContainerOverflow();
+    });
+  }
+  applyHeaderRowPositionStyles() {
+    this.clearStickyHeaderRowStyles();
+    const firstHeadRow = this.headRows?.[0];
+    if (!firstHeadRow) {
+      return;
+    }
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-offset", "0");
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-z-index", "2");
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-row-position", this.stickyHeader ? "sticky" : "static");
+  }
+  updateTableContainerOverflow() {
+    const tableContainer = this.tableContainerRef.value;
+    this.tableContainerHasOverflow = !!tableContainer && (tableContainer.scrollHeight > tableContainer.clientHeight || tableContainer.scrollWidth > tableContainer.clientWidth);
+  }
   updateRows() {
     const headRows = this.getSlottedRows(this.tableHeadSlotRef.value);
     const bodyRows = this.getSlottedRows(this.tableBodySlotRef.value);
@@ -190,12 +260,15 @@ class Table extends LitElement {
       row.readCellContentsToAT = this.readCellContentsToAT;
       row.lastVisibleRow = allRows?.indexOf(row) === allRows.length - 1;
     });
-    const colCount = headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length;
+    const colCount = headRows[0]?.cellCount || 0;
     this.colCount = colCount;
     this.headRows = headRows;
     this.bodyRows = bodyRows;
     this.footRows = footRows;
     this.allRows = allRows;
+    this.applyHeaderRowPositionStyles();
+    this.observeTableContainer();
+    this.scheduleTableContainerOverflowUpdate();
     this.handleCurrentPageRange();
     this.updateSelectedItems();
   }
@@ -288,12 +361,14 @@ class Table extends LitElement {
     return html`<div class=${safeClassMap(CSS.container)}>${this.selectionMode !== "none" && this.selectionDisplay !== "none" && this.renderSelectionArea() || ""}<div class=${safeClassMap({
       [CSS.bordered]: this.bordered,
       [CSS.striped]: this.striped,
-      [CSS.tableContainer]: true
-    })}><table .ariaColCount=${this.colCount} .ariaMultiSelectable=${/* workaround to ensure the attr gets removed; we should be able to avoid the ternary when fixed */
+      [CSS.tableContainer]: true,
+      [CSS.tableContainerOverflow]: this.tableContainerHasOverflow
+    })} ${ref(this.tableContainerRef)}><table .ariaColCount=${this.colCount} .ariaMultiSelectable=${/* workaround to ensure the attr gets removed; we should be able to avoid the ternary when fixed */
     this.selectionMode === "multiple" ? "true" : void 0} .ariaRowCount=${this.allRows?.length} class=${safeClassMap({ [CSS.tableFixed]: this.layout === "fixed" })} .role=${this.interactionMode === "interactive" ? "grid" : "table"} ${ref((el) => {
       if (!el) {
         return;
       }
+      this.tableEl = el;
       render(html`<caption class=${safeClassMap(CSS.assistiveText)}>${this.caption}</caption>${this.renderTHead()}${this.renderTBody()}${this.renderTFoot()}`, el);
     })}></table></div>${this.pageSize > 0 && this.renderPaginationArea() || ""}</div>`;
   }

package/dist/components/calcite-table-cell/customElement.js

@@ -17,7 +17,7 @@ const CSS = {
   lastCell: "last-cell",
   staticCell: "static-cell"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([alignment=center]) td:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){text-align:end}.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}td{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-internal-table-cell-background-color, var(--calcite-table-cell-background-color, transparent));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding:var(--calcite-internal-table-cell-padding)}td:not(.static-cell){outline-color:transparent}td:not(.static-cell):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}td.last-cell{border-inline-end:0}.footer-cell{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-cell-background-color, var(--calcite-table-cell-background, var(--calcite-color-background)));border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}.number-cell,.selection-cell{text-align:center;border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));inline-size:2rem;min-inline-size:2rem}.number-cell{color:var(--calcite-table-number-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-number-cell-background-color, var(--calcite-color-foreground-2))}.number-cell.footer-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selection-cell{color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3))}.selection-cell:not(.footer-cell){cursor:pointer;background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, transparent))}.selection-cell.footer-cell{background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selected-cell:not(.number-cell):not(.footer-cell){background-color:var(--calcite-table-cell-background-color-selected, var(--calcite-table-row-background-color-selected, var(--calcite-color-surface-highlight)))}.selection-cell.selected-cell{box-shadow:inset 0 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand));color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -.25rem 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand))}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([alignment=center]) td:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){text-align:end}.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}td{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-internal-table-cell-background-color, var(--calcite-table-cell-background-color, transparent));font-size:var(--calcite-internal-table-cell-font-size);border-block-end:var(--calcite-internal-table-row-border-block-end-width, 0) solid var(--calcite-internal-table-row-border-block-end-color, transparent);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding:var(--calcite-internal-table-cell-padding)}td:not(.static-cell){outline-color:transparent}td:not(.static-cell):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}td.last-cell{border-inline-end:0}:host([reaches-body-end]) td{border-block-end:0}.footer-cell{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-cell-background-color, var(--calcite-table-cell-background, var(--calcite-color-background)));border-block-end:0;border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}.number-cell,.selection-cell{text-align:center;border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));inline-size:2rem;min-inline-size:2rem}.number-cell{color:var(--calcite-table-number-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-number-cell-background-color, var(--calcite-color-foreground-2))}.number-cell.footer-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selection-cell{color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3))}.selection-cell:not(.footer-cell){cursor:pointer;background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, transparent))}.selection-cell.footer-cell{background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selected-cell:not(.number-cell):not(.footer-cell){background-color:var(--calcite-table-cell-background-color-selected, var(--calcite-table-row-background-color-selected, var(--calcite-color-surface-highlight)))}.selection-cell.selected-cell{box-shadow:inset 0 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand));color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -.25rem 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand))}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class TableCell extends LitElement {
   constructor() {
     super(...arguments);
@@ -34,6 +34,7 @@ class TableCell extends LitElement {
     this.interactionMode = "interactive";
     this.lastCell = false;
     this.numberCell = false;
+    this.reachesBodyEnd = false;
     this.parentRowAlignment = "start";
     this.parentRowIsSelected = false;
     this.readCellContentsToAT = false;
@@ -41,7 +42,7 @@ class TableCell extends LitElement {
     this.selectionCell = false;
   }
   static {
-    this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };
+    this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], reachesBodyEnd: [7, {}, { reflect: true, type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-table-header/customElement.js

@@ -26,7 +26,7 @@ const ICONS = {
   indeterminate: "minus-square-f",
   unchecked: "square"
 };
-const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.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}th{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
+const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.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}th{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}th:not(.body-row):not(.footer-row){border-block-end-width:var(--calcite-internal-table-header-border-block-end-width, var(--calcite-border-width-sm));box-shadow:var(--calcite-internal-table-sticky-header-border-shadow, 0 0 0 0 transparent)}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
 class TableHeader extends LitElement {
   constructor() {
     super(...arguments);

package/dist/components/calcite-table-row/customElement.js

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, render } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup } from "../../chunks/dom.js";
+import { f as focusElementInGroup, D as getSlotAssignedElements } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -17,12 +17,16 @@ const ICONS = {
   circleF: "circle-f",
   circle: "circle"
 };
-const styles = css`@charset "UTF-8";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([slot=table-header]) tr{position:var(--calcite-internal-table-header-row-position);inset-block-start:var(--calcite-internal-table-header-offset, 0);z-index:var(--calcite-internal-table-header-z-index, calc(var(--calcite-z-index) + 1))}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{--calcite-internal-table-row-border-block-end-width: var(--calcite-border-width-sm);--calcite-internal-table-row-border-block-end-color: var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{--calcite-internal-table-row-border-block-end-width: 0;--calcite-internal-table-row-border-block-end-color: transparent}:host([item-hidden]){display:none}`;
 class TableRow extends LitElement {
   constructor() {
     super();
+    this.numberedCellRef = createRef();
+    this.numberedHeaderRef = createRef();
     this.rowCells = [];
-    this.tableRowSlotRef = createRef();
+    this.rowSlotRef = createRef();
+    this.selectionCellRef = createRef();
+    this.selectionHeaderRef = createRef();
     this.userTriggered = false;
     this._selected = false;
     this.clickHandler = () => {
@@ -42,6 +46,7 @@ class TableRow extends LitElement {
     this.interactionMode = "interactive";
     this.lastVisibleRow = false;
     this.numbered = false;
+    this.stickyHeaderEnabled = false;
     this.selectionMode = "none";
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
     this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
@@ -49,7 +54,7 @@ class TableRow extends LitElement {
     this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
   }
   static {
-    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
+    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, stickyHeaderEnabled: [5, {}, { type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
   }
   static {
     this.styles = styles;
@@ -79,7 +84,7 @@ class TableRow extends LitElement {
     }
   }
   loaded() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
@@ -87,12 +92,12 @@ class TableRow extends LitElement {
     this.updateCells();
   }
   handleCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
   handleDelayedCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       requestAnimationFrame(() => this.updateCells());
     }
   }
@@ -180,10 +185,14 @@ class TableRow extends LitElement {
   }
   updateCells() {
     const alignment = this.alignment ? this.alignment : this.rowType !== "head" ? "center" : "start";
-    const slottedCells = this.tableRowSlotRef.value?.assignedElements({ flatten: true })?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header")) ?? [];
-    const tableRowEls = this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell");
-    const renderedCells = tableRowEls ? Array.from(tableRowEls).filter((el) => el.numberCell || el.selectionCell) : void 0;
-    const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+    const slottedCells = this.rowSlotRef.value ? getSlotAssignedElements(this.rowSlotRef.value, "calcite-table-cell, calcite-table-header") : [];
+    const renderedCells = [
+      this.numberedCellRef.value,
+      this.numberedHeaderRef.value,
+      this.selectionCellRef.value,
+      this.selectionHeaderRef.value
+    ].filter((cell) => cell != null);
+    const cells = renderedCells.concat(slottedCells);
     if (cells.length > 0) {
       cells?.forEach((cell, index) => {
         cell.interactionMode = this.interactionMode;
@@ -194,8 +203,11 @@ class TableRow extends LitElement {
         cell.positionInRow = index + 1;
         cell.scale = this.scale;
         if (cell.nodeName === "CALCITE-TABLE-CELL") {
+          const rowSpan = cell.rowSpan || 1;
+          const reachesBodyEnd = this.rowType === "body" && rowSpan > 1 && this.positionSection + rowSpan >= this.bodyRowCount;
           cell.readCellContentsToAT = this.readCellContentsToAT;
           cell.disabled = this.disabled;
+          cell.reachesBodyEnd = reachesBodyEnd;
         }
       });
     }
@@ -215,18 +227,17 @@ class TableRow extends LitElement {
     return html`<calcite-icon .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
   }
   renderSelectableCell() {
-    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode} ${ref(this.selectionHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true} ${ref(this.selectionCellRef)}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true} ${ref(this.selectionCellRef)}></calcite-table-cell>`);
   }
   renderNumberedCell() {
-    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}></calcite-table-cell>`);
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<tr .ariaRowIndex=${this.positionAll + 1} .ariaSelected=${this.selected} class=${safeClassMap({ [CSS.lastVisibleRow]: this.lastVisibleRow })} @keydown=${this.keyDownHandler} ${ref((el) => {
       if (!el) {
         return;
       }
-      this.tableRowEl = el;
-      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.tableRowSlotRef)}></slot>`, el);
+      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.rowSlotRef)}></slot>`, el);
     })}></tr>` });
   }
 }