@unofficialbox/box-open-elements 0.5.0 → 0.7.0

package/dist/components/collections/table.js

@@ -1,6 +1,15 @@
-import { BaseElement } from "../../core/index.js";
+import { BaseElement, resolveRowWindow, sameRowWindow } from "../../core/index.js";
 import { boePanel, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { isSafeHref } from "../../patterns/internal/safe-href.js";
 const DEFAULT_TAG_NAME = "box-table";
+const CELL_TONES = new Set(["neutral", "brand", "success", "warning", "error"]);
+const CELL_ALIGNS = new Set(["start", "end", "center"]);
+/** `align` is author input from a JSON attribute like everything else — an
+ * unvalidated value would close the attribute and inject markup. */
+const alignAttr = (align) => align && CELL_ALIGNS.has(align) ? ` data-align="${align}"` : "";
+const isCellDescriptor = (value) => typeof value === "object" && value !== null && typeof value.text === "string";
+/** Escape a value for use inside a double-quoted attribute selector. */
+const cssAttrValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -47,8 +56,35 @@ const tableStyles = `
   th[part="sortable"] {
     cursor: pointer;
     user-select: none;
+    /* The button carries the padding so its hit area fills the cell. */
+    padding: 0;
   }
   th[part="sortable"]:hover { color: var(--boe-token-text-text, #222222); }
+
+  /* A real button, so sorting is reachable by keyboard: focus, Enter and
+     Space come from the platform instead of a keydown reimplementation. */
+  [part="sort-button"] {
+    appearance: none;
+    display: block;
+    width: 100%;
+    padding: ${boeSpace[2]} ${boeSpace[3]};
+    border: 0;
+    background: transparent;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    text-align: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  th[data-align="end"] [part="sort-button"] { text-align: end; }
+  th[data-align="center"] [part="sort-button"] { text-align: center; }
+
+  [part="sort-button"]:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--boe-token-surface-surface-brand, #0061d5);
+  }
   th[aria-sort] .boe-sort-arrow::after { content: " ↕"; opacity: 0.5; }
   th[aria-sort="ascending"] .boe-sort-arrow::after { content: " ↑"; opacity: 1; }
   th[aria-sort="descending"] .boe-sort-arrow::after { content: " ↓"; opacity: 1; }
@@ -76,7 +112,156 @@ const tableStyles = `
   tbody tr[part="row"]:focus-visible td {
     box-shadow: inset 0 0 0 2px var(--boe-token-surface-surface-brand, #0061d5);
   }
+
+  /* Windowing needs a bounded viewport to scroll within: --boe-table-height is
+     the host's knob, defaulting to a sensible page-sized band. Sticky headers
+     already work inside this scroller. */
+  :host([virtualize]) [part="shell"] {
+    max-block-size: var(--boe-table-height, 26rem);
+    overflow-y: auto;
+  }
+
+  tr[part="spacer"] td {
+    border: 0;
+    padding: 0;
+  }
+
+  [part="cell-badge"] {
+    display: inline-block;
+    padding: 0.08rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.74rem;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--cell-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 76%, black 24%);
+    background: color-mix(in srgb, var(--cell-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 14%, transparent);
+    border: 1px solid color-mix(in srgb, var(--cell-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 30%, transparent);
+  }
+
+  [part="cell-link"] {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    text-decoration: none;
+  }
+
+  [part="cell-link"]:hover {
+    text-decoration: underline;
+  }
+
+  [part="expander"] {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.4rem;
+    block-size: 1.4rem;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    font-size: 0.72rem;
+    cursor: pointer;
+  }
+
+  [part="expander"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="expander"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 1px;
+  }
+
+  [part="expander"]::before {
+    content: "▸";
+    transition: transform 120ms ease;
+  }
+
+  [part="expander"][aria-expanded="true"]::before {
+    transform: rotate(90deg);
+  }
+
+  tr[part="detail-row"] td {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 80%, transparent);
+    font-size: 0.84rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  tr[part="state-row"] td {
+    padding: 1.1rem ${boeSpace[3]};
+    text-align: center;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  tr[part="state-row"][data-state="error"] td {
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 76%, black 24%);
+  }
+
+  [part="state-spinner"] {
+    display: inline-block;
+    vertical-align: -0.15rem;
+    margin-inline-end: 0.45rem;
+    inline-size: 0.95rem;
+    block-size: 0.95rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-table-spin 0.9s linear infinite;
+  }
+
+  @keyframes boe-table-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part="state-spinner"] { animation-duration: 1.6s; }
+  }
+
+  /* Stacked rows: each row becomes a card, each cell states its column via
+     data-label. Roles are explicit on rows and cells, so the grid semantics
+     survive the display change. stacked="always" forces it; stacked="auto"
+     stacks when the host container narrows. */
+  :host {
+    container-type: inline-size;
+  }
+` +
+    (() => {
+        const rules = (scope) => `
+  ${scope} thead { display: none; }
+  ${scope} tr[part="row"] {
+    display: block;
+    padding: ${boeSpace[2]} 0;
+  }
+  ${scope} tbody td {
+    display: grid;
+    grid-template-columns: minmax(7.5rem, 9rem) 1fr;
+    gap: 0.5rem;
+    border-bottom: none;
+    padding-block: 0.18rem;
+    text-align: start;
+  }
+  ${scope} tbody td[data-label]::before {
+    content: attr(data-label);
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    align-self: center;
+  }
+  ${scope} tr[part="row"]:not(:last-child) {
+    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+  }
+  ${scope} tr[part="detail-row"] td,
+  ${scope} tr[part="state-row"] td {
+    display: block;
+  }
 `;
+        return `
+  ${rules(':host([stacked]:not([stacked="auto"]))')}
+  @container (max-width: 560px) {
+    ${rules(':host([stacked="auto"])')}
+  }
+`;
+    })();
 /**
  * A semantic, selectable data table — box-ui-elements `Table` + `makeSelectable`.
  * Rows and columns come from JSON. Selection supports single / Ctrl-click toggle
@@ -87,12 +272,135 @@ const tableStyles = `
 export class Table extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["columns", "rows", "selection-mode", "label", "sort-key", "sort-direction"];
+        return [
+            "columns",
+            "empty-text",
+            "error-text",
+            "label",
+            "loading",
+            "rows",
+            "selection-mode",
+            "sort-direction",
+            "sort-key",
+            "stacked",
+            "virtualize",
+            "row-height",
+        ];
     }
     bodyEl;
     headEl;
+    shellEl;
     selected = new Set();
     anchorIndex = -1;
+    expandedIds = new Set();
+    lastWindow = null;
+    /**
+     * Whether the last render actually windowed. Not the same as `virtualize`:
+     * the flag is suppressed for a collection the fixed-height window cannot
+     * describe (see `update`). Cached at render time so the scroll handler does
+     * not re-parse `rows` on every frame to answer the question.
+     */
+    windowing = false;
+    scrollFrame = 0;
+    measuredRowHeight = 0;
+    measureFrame = 0;
+    /** True while rows are being fetched: the body states "Loading rows…". */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /** What the body says when there are no rows and nothing is loading. */
+    get emptyText() {
+        return this.getAttribute("empty-text") ?? "No rows";
+    }
+    set emptyText(value) {
+        this.setAttribute("empty-text", value);
+    }
+    /** Non-empty puts the table in an error state stating this text. */
+    get errorText() {
+        return this.getAttribute("error-text") ?? "";
+    }
+    set errorText(value) {
+        if (value) {
+            this.setAttribute("error-text", value);
+        }
+        else {
+            this.removeAttribute("error-text");
+        }
+    }
+    /**
+     * Render only the rows near the viewport. Opt-in: a windowed table needs a
+     * bounded height to scroll within, and silently windowing an unbounded table
+     * would render nothing.
+     *
+     * A request, not a guarantee. The window arithmetic is fixed-height, so it is
+     * suppressed for a collection whose rows can change height — today that means
+     * any collection where a row declares `detail`. Read `renderedWindow` to see
+     * whether a render actually windowed.
+     */
+    get virtualize() {
+        return this.hasAttribute("virtualize");
+    }
+    set virtualize(value) {
+        this.toggleAttribute("virtualize", Boolean(value));
+    }
+    /**
+     * Row height in pixels for the window arithmetic — a starting estimate, not
+     * a contract. The real height depends on density, font, and zoom, and a
+     * declared value that is off by a fraction of a pixel makes the scroll range
+     * drift as you scroll (a 10k-row table measured ~55px of wobble at 37px
+     * declared). After the first paint the element measures a rendered row and
+     * uses that instead, so the estimate only has to be close enough to pick a
+     * sane first window.
+     */
+    get rowHeight() {
+        if (this.measuredRowHeight > 0) {
+            return this.measuredRowHeight;
+        }
+        return this.declaredRowHeight;
+    }
+    get declaredRowHeight() {
+        const raw = Number(this.getAttribute("row-height"));
+        return Number.isFinite(raw) && raw > 0 ? raw : 37;
+    }
+    set rowHeight(value) {
+        // A new declaration supersedes the old measurement; the next paint
+        // measures again.
+        this.measuredRowHeight = 0;
+        this.setAttribute("row-height", String(value));
+    }
+    /**
+     * Adopt the real rendered row height, once, when it differs from the value
+     * the last window was computed with. Re-rendering with the measured height
+     * settles immediately: the next measurement matches, so this cannot loop.
+     */
+    measureRowHeight() {
+        if (!this.windowing || this.measureFrame)
+            return;
+        const row = this.bodyEl.querySelector('[part="row"]');
+        const height = row?.getBoundingClientRect().height ?? 0;
+        if (height <= 0 || Math.abs(height - this.rowHeight) < 0.5)
+            return;
+        this.measuredRowHeight = height;
+        this.measureFrame = requestAnimationFrame(() => {
+            this.measureFrame = 0;
+            this.update();
+        });
+    }
+    /**
+     * The window the last render used, or null when it rendered every row — for
+     * tests and hosts. Null despite `virtualize` means the collection is one the
+     * fixed-height window cannot describe and windowing was suppressed.
+     */
+    get renderedWindow() {
+        return this.windowing ? this.lastWindow : null;
+    }
+    /** Ids of the rows whose detail is expanded (host-readable). */
+    get expandedRows() {
+        return [...this.expandedIds];
+    }
     get columns() {
         return this.parseJson("columns", []);
     }
@@ -139,12 +447,35 @@ export class Table extends BaseElement {
             return fallback;
         }
     }
-    cellText(row, column, index) {
+    cellValue(row, column, index) {
         if (Array.isArray(row.cells)) {
             return row.cells[index] ?? "";
         }
         return row.cells[column.key] ?? "";
     }
+    /**
+     * Descriptor rendering. Everything is escaped; a link with a non-http(s)
+     * href renders as plain text; a badge's tone colours a word that already
+     * carries the meaning.
+     */
+    cellMarkup(value) {
+        if (!isCellDescriptor(value)) {
+            return escapeHtml(typeof value === "string" ? value : "");
+        }
+        if (value.kind === "badge") {
+            const tone = value.tone && CELL_TONES.has(value.tone) ? value.tone : "neutral";
+            const toneVar = tone === "neutral"
+                ? "var(--boe-token-text-text-secondary, #6f6f6f)"
+                : tone === "brand"
+                    ? "var(--boe-token-surface-surface-brand, #0061d5)"
+                    : `var(--boe-token-surface-status-surface-${tone}, #6f6f6f)`;
+            return `<span part="cell-badge" style="--cell-tone:${toneVar};">${escapeHtml(value.text)}</span>`;
+        }
+        if (value.kind === "link" && value.href && isSafeHref(value.href)) {
+            return `<a part="cell-link" href="${escapeHtml(value.href)}">${escapeHtml(value.text)}</a>`;
+        }
+        return escapeHtml(value.text);
+    }
     renderTemplate() {
         if (!this.shadowRoot)
             return;
@@ -159,8 +490,23 @@ export class Table extends BaseElement {
     `;
         this.headEl = this.shadowRoot.querySelector('[part="header-row"]');
         this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
+        this.shellEl = this.shadowRoot.querySelector('[part="shell"]');
     }
     setupListeners() {
+        // Scroll fires continuously; coalesce to one re-render per frame, and skip
+        // entirely while the resolved slice is unchanged — most scroll events move
+        // the viewport within the rows already rendered.
+        this.shellEl.addEventListener("scroll", () => {
+            if (!this.windowing || this.scrollFrame)
+                return;
+            this.scrollFrame = requestAnimationFrame(() => {
+                this.scrollFrame = 0;
+                const next = this.currentWindow();
+                if (this.lastWindow && sameRowWindow(this.lastWindow, next))
+                    return;
+                this.update();
+            });
+        }, { passive: true });
         this.headEl.addEventListener("click", event => {
             const th = event.target.closest('th[part="sortable"]');
             if (!th)
@@ -168,6 +514,11 @@ export class Table extends BaseElement {
             this.toggleSort(th.dataset.key ?? "");
         });
         this.bodyEl.addEventListener("click", event => {
+            const expander = event.target.closest('[part="expander"]');
+            if (expander) {
+                this.toggleRowDetail(expander.dataset.rowId ?? "");
+                return; // expanding is not selecting
+            }
             const row = event.target.closest('[part="row"]');
             if (!row)
                 return;
@@ -179,9 +530,34 @@ export class Table extends BaseElement {
     rowElements() {
         return Array.from(this.bodyEl.querySelectorAll('[part="row"]'));
     }
+    toggleRowDetail(rowId) {
+        if (!rowId)
+            return;
+        const expanded = !this.expandedIds.has(rowId);
+        if (expanded) {
+            this.expandedIds.add(rowId);
+        }
+        else {
+            this.expandedIds.delete(rowId);
+        }
+        this.dispatchEvent(new CustomEvent("row-toggled", {
+            bubbles: true,
+            composed: true,
+            detail: { rowId, expanded },
+        }));
+        this.update();
+        // update() rewrote the body, destroying the button that was activated;
+        // put focus on its replacement so a keyboard user is not dropped.
+        this.bodyEl
+            .querySelector(`[part="expander"][data-row-id="${cssAttrValue(rowId)}"]`)
+            ?.focus();
+    }
     onBodyKeydown(event) {
-        const rows = this.rowElements();
-        if (rows.length === 0)
+        // Keys aimed at the expander button (Enter/Space activate it natively)
+        // must not double as row selection.
+        if (event.target.closest('[part="expander"]'))
+            return;
+        if (this.rowElements().length === 0)
             return;
         const currentRow = event.target.closest('[part="row"]');
         const index = currentRow ? Number(currentRow.dataset.index) : -1;
@@ -204,29 +580,55 @@ export class Table extends BaseElement {
             this.activateRow(index, { toggle: this.selectionMode === "multiple" });
             return;
         }
+        // Bounds come from the data, not the DOM: when windowing, the rendered
+        // rows are a slice and `rows.length` would stop End at the bottom of the
+        // window instead of the bottom of the collection.
+        const lastIndex = this.rows.length - 1;
         let nextIndex = index;
         if (event.key === "ArrowDown")
-            nextIndex = Math.min(index + 1, rows.length - 1);
+            nextIndex = Math.min(index + 1, lastIndex);
         else if (event.key === "ArrowUp")
             nextIndex = Math.max(index - 1, 0);
         else if (event.key === "Home")
             nextIndex = 0;
         else if (event.key === "End")
-            nextIndex = rows.length - 1;
+            nextIndex = lastIndex;
         else
             return;
         event.preventDefault();
-        rows[nextIndex]?.focus();
+        this.focusRowByIndex(nextIndex);
         // Shift+Arrow extends the selection from the anchor.
         if (event.shiftKey && this.selectionMode === "multiple") {
             this.selectRange(this.anchorIndex < 0 ? index : this.anchorIndex, nextIndex);
         }
     }
+    /**
+     * Focus a row by its absolute index, bringing it into the window first when
+     * virtualizing — keyboard navigation must be able to reach a row that is not
+     * currently rendered, or Home/End stop at the edge of the window.
+     */
+    focusRowByIndex(index) {
+        const find = () => this.bodyEl.querySelector(`[part="row"][data-index="${String(index)}"]`);
+        let target = find();
+        if (!target && this.windowing && this.shellEl) {
+            // Scroll the row to the top of the viewport, then re-render the window
+            // synchronously: the scroll event's own re-render lands a frame later,
+            // and focus cannot wait for it.
+            this.shellEl.scrollTop = index * this.rowHeight;
+            this.update();
+            target = find();
+        }
+        target?.focus();
+    }
     toggleSort(key) {
         const currentKey = this.getAttribute("sort-key");
         const currentDir = this.getAttribute("sort-direction");
         const direction = currentKey === key && currentDir === "ascending" ? "descending" : "ascending";
-        this.dispatchEvent(new CustomEvent("sort", { bubbles: true, composed: true, detail: { key, direction } }));
+        this.dispatchEvent(new CustomEvent("sort", {
+            bubbles: true,
+            composed: true,
+            detail: { key, direction },
+        }));
     }
     activateRow(index, options = {}) {
         const rows = this.rows;
@@ -276,6 +678,14 @@ export class Table extends BaseElement {
             row.setAttribute("aria-selected", String(this.selected.has(id)));
         }
     }
+    currentWindow() {
+        return resolveRowWindow({
+            totalRows: this.rows.length,
+            rowHeight: this.rowHeight,
+            viewportHeight: this.shellEl?.clientHeight ?? 0,
+            scrollTop: this.shellEl?.scrollTop ?? 0,
+        });
+    }
     update() {
         if (!this.bodyEl || !this.headEl)
             return;
@@ -284,34 +694,127 @@ export class Table extends BaseElement {
         const selectable = this.selectionMode !== "none";
         const sortKey = this.getAttribute("sort-key");
         const sortDir = this.getAttribute("sort-direction");
-        this.shadowRoot?.querySelector('[part="table"]')?.setAttribute("aria-label", this.label);
-        this.shadowRoot?.querySelector('[part="table"]')?.setAttribute("role", selectable ? "grid" : "table");
-        this.headEl.innerHTML = columns
-            .map(column => {
-            const align = column.align ? ` data-align="${column.align}"` : "";
-            if (column.sortable) {
-                const sort = sortKey === column.key ? ` aria-sort="${sortDir === "descending" ? "descending" : "ascending"}"` : ' aria-sort="none"';
-                return `<th part="sortable" scope="col" data-key="${escapeHtml(column.key)}"${align}${sort}>${escapeHtml(column.label)}<span class="boe-sort-arrow" aria-hidden="true"></span></th>`;
-            }
-            return `<th scope="col"${align}>${escapeHtml(column.label)}</th>`;
-        })
-            .join("");
-        this.bodyEl.innerHTML = rows
-            .map((row, index) => {
-            const selected = this.selected.has(row.id);
-            const rowAttrs = selectable
-                ? ` part="row" role="row" tabindex="${index === 0 ? "0" : "-1"}" aria-selected="${selected}"`
-                : ' part="row" role="row"';
-            const cells = columns
-                .map(column => {
-                const align = column.align ? ` data-align="${column.align}"` : "";
-                const role = selectable ? ' role="gridcell"' : ' role="cell"';
-                return `<td${align}${role}>${escapeHtml(this.cellText(row, column, columns.indexOf(column)))}</td>`;
-            })
-                .join("");
-            return `<tr${rowAttrs} data-index="${index}" data-id="${escapeHtml(row.id)}">${cells}</tr>`;
-        })
-            .join("");
+        // A non-string detail is malformed input, not a crash: it gets no expander.
+        const expandable = rows.some(row => typeof row.detail === "string");
+        const columnCount = columns.length + (expandable ? 1 : 0);
+        const tableEl = this.shadowRoot?.querySelector('[part="table"]');
+        tableEl?.setAttribute("aria-label", this.label);
+        tableEl?.setAttribute("role", selectable ? "grid" : "table");
+        if (this.loading) {
+            tableEl?.setAttribute("aria-busy", "true");
+        }
+        else {
+            tableEl?.removeAttribute("aria-busy");
+        }
+        this.headEl.innerHTML =
+            (expandable ? `<th scope="col" aria-label="Row details"></th>` : "") +
+                columns
+                    .map(column => {
+                    const align = alignAttr(column.align);
+                    if (column.sortable) {
+                        const sorted = sortKey === column.key;
+                        const sort = sorted
+                            ? ` aria-sort="${sortDir === "descending" ? "descending" : "ascending"}"`
+                            : ' aria-sort="none"';
+                        // The state, in words as well as the arrow glyph.
+                        const stateLabel = sorted
+                            ? `, sorted ${sortDir === "descending" ? "descending" : "ascending"}`
+                            : ", not sorted";
+                        return `<th part="sortable" scope="col" data-key="${escapeHtml(column.key)}"${align}${sort}><button type="button" part="sort-button" aria-label="Sort by ${escapeHtml(column.label)}${stateLabel}">${escapeHtml(column.label)}<span class="boe-sort-arrow" aria-hidden="true"></span></button></th>`;
+                    }
+                    return `<th scope="col"${align}>${escapeHtml(column.label)}</th>`;
+                })
+                    .join("");
+        // A state row is never windowed. Cleared up front so a table that drops
+        // into loading/error/empty does not leave the previous window's flag
+        // standing — the scroll handler and `renderedWindow` both read it.
+        this.windowing = false;
+        this.lastWindow = null;
+        // Loading, error, and empty are stated in words in the body — a blank
+        // grid reads as broken. Loading wins; a stale error must not outlive a
+        // retry that is visibly in flight.
+        if (this.loading) {
+            this.bodyEl.innerHTML = `<tr part="state-row" data-state="loading" role="row"><td role="${selectable ? "gridcell" : "cell"}" colspan="${String(columnCount)}"><span part="state-spinner" aria-hidden="true"></span>Loading rows…</td></tr>`;
+            return;
+        }
+        if (this.errorText) {
+            this.bodyEl.innerHTML = `<tr part="state-row" data-state="error" role="row"><td role="${selectable ? "gridcell" : "cell"}" colspan="${String(columnCount)}">${escapeHtml(this.errorText)}</td></tr>`;
+            return;
+        }
+        if (rows.length === 0) {
+            this.bodyEl.innerHTML = `<tr part="state-row" data-state="empty" role="row"><td role="${selectable ? "gridcell" : "cell"}" colspan="${String(columnCount)}">${escapeHtml(this.emptyText)}</td></tr>`;
+            return;
+        }
+        // Windowing renders only the rows near the viewport, padded with spacer
+        // rows so the scrollbar still describes the whole collection. Indices stay
+        // ABSOLUTE: selection, shift-range, and activateRow all address `rows`, and
+        // renumbering the slice would select the wrong record.
+        //
+        // `virtualize` is a request, not a guarantee. `resolveRowWindow` derives
+        // the whole scroll range from `rows.length * rowHeight`, so it can only
+        // describe a collection of uniform, fixed-height rows. An expanded row
+        // renders a second `<tr part="detail-row">` the arithmetic knows nothing
+        // about: the real content grows taller than the spacers claim, the scroll
+        // range no longer matches the scrollbar, and scrollTop stops mapping to the
+        // right absolute index — so a windowed table with expandable rows would
+        // scroll to the wrong record. Variable heights are a different algorithm (a
+        // cumulative offset index), not a flag on this one, so windowing is
+        // suppressed rather than approximated.
+        //
+        // The test is `expandable`, not "is anything expanded right now": deciding
+        // from transient UI state would flip windowing on and off mid-scroll, which
+        // jumps the viewport under the pointer. A collection that can expand never
+        // windows; `renderedWindow` returns null so a host can see that it didn't.
+        const virtualizing = this.virtualize && !expandable;
+        const rowWindow = virtualizing ? this.currentWindow() : null;
+        this.windowing = virtualizing;
+        this.lastWindow = rowWindow;
+        const visibleRows = rowWindow
+            ? rows.slice(rowWindow.startIndex, rowWindow.endIndex)
+            : rows;
+        const indexOffset = rowWindow?.startIndex ?? 0;
+        // The tab stop belongs to the first row that is actually rendered; row 0
+        // may be scrolled far out of the window.
+        const tabbableIndex = indexOffset;
+        const spacer = (height, position) => height > 0
+            ? `<tr part="spacer" data-position="${position}" aria-hidden="true"><td colspan="${String(columnCount)}" style="height:${String(height)}px;padding:0;border:0;"></td></tr>`
+            : "";
+        this.bodyEl.innerHTML =
+            (rowWindow ? spacer(rowWindow.paddingTop, "top") : "") +
+                visibleRows
+                    .map((row, offset) => {
+                    const index = offset + indexOffset;
+                    const selected = this.selected.has(row.id);
+                    const cellRole = selectable ? ' role="gridcell"' : ' role="cell"';
+                    const rowAttrs = selectable
+                        ? ` part="row" role="row" tabindex="${index === tabbableIndex ? "0" : "-1"}" aria-selected="${selected}"`
+                        : ' part="row" role="row"';
+                    const expanded = this.expandedIds.has(row.id);
+                    const expanderCell = expandable
+                        ? `<td${cellRole} part="expander-cell">${typeof row.detail === "string"
+                            ? `<button type="button" part="expander" data-row-id="${escapeHtml(row.id)}" aria-expanded="${String(expanded)}" aria-label="${expanded ? "Hide" : "Show"} details for row ${escapeHtml(row.id)}"></button>`
+                            : ""}</td>`
+                        : "";
+                    const cells = columns
+                        .map((column, columnIndex) => {
+                        const align = alignAttr(column.align);
+                        const value = this.cellValue(row, column, columnIndex);
+                        return `<td${align}${cellRole} data-label="${escapeHtml(column.label)}">${this.cellMarkup(value)}</td>`;
+                    })
+                        .join("");
+                    const rowMarkup = `<tr${rowAttrs} data-index="${index}" data-id="${escapeHtml(row.id)}">${expanderCell}${cells}</tr>`;
+                    // The detail row renders only while expanded, keeping the roving
+                    // tabindex and shift-range math on visible [part="row"] rows only.
+                    const detailRow = typeof row.detail === "string" && expanded
+                        ? `<tr part="detail-row" role="row" data-for="${escapeHtml(row.id)}"><td${cellRole} colspan="${String(columnCount)}">${escapeHtml(row.detail)}<slot name="detail-${escapeHtml(row.id)}"></slot></td></tr>`
+                        : "";
+                    return rowMarkup + detailRow;
+                })
+                    .join("") +
+                (rowWindow ? spacer(rowWindow.paddingBottom, "bottom") : "");
+        if (virtualizing) {
+            this.measureRowHeight();
+        }
     }
 }
 Table.register();