@adia-ai/web-components 0.8.43 → 0.8.45

package/components/table/table.class.js

@@ -45,13 +45,22 @@
  *   .sortState  → [{key, dir}] (read-only)
  *   .exportCSV(filename?)
  *
- * Events:
+ * Events (fired):
  *   sort       — { detail: { key, dir, sortState } }
  *   select     — { detail: { selected: [...indices] } }
  *   page       — { detail: { page } }
  *   resize     — { detail: { key, width } }
  *   cell-click — { detail: { key, row, value, dataIndex } }
  *   row-click  — { detail: { row, dataIndex } }  — row-level companion to cell-click
+ *
+ * Events (listened) — gh#1764/#1780, ADR-0079. table-toolbar-ui dispatches
+ * these directly at its [for]-resolved table-ui target instead of writing
+ * a property or calling a method; any other consumer may dispatch them too:
+ *   toolbar-search       — { detail: { value } }              → this.search =
+ *   toolbar-filter-set   — { detail: { key, value, op } }     → this.setFilter(key, value, op)
+ *   toolbar-filter-clear — { detail: {} }                      → this.clearFilters()
+ *   toolbar-columns-set  — { detail: { columns } }             → this.columns =
+ *   toolbar-paginate     — { detail: { pageSize } }            → this.paginate =
  */
 
 import { UIElement } from '../../core/element.js';
@@ -94,6 +103,117 @@ function csvEscape(val) {
   return str;
 }
 
+// ── SSR adopt-in-place (gh#1678) ─────────────────────────────────────────────
+
+/**
+ * Idempotent attribute set — skip the DOM write entirely when the value
+ * already matches. `setAttribute` mutates (and queues a MutationObserver
+ * record) even when the new value is byte-identical to the old one, so a
+ * host/row-level attribute this render path sets on EVERY call (`role`,
+ * `tabindex`, `data-index`, `aria-selected`) must compare-before-write to
+ * let a byte-identical SSR-rendered subtree survive upgrade with zero
+ * subtree mutations (AC-004a-equivalent probe) — bare `setAttribute` cannot
+ * give that guarantee even when the value never actually changes.
+ */
+function setAttrIfChanged(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+
+/** Idempotent attribute removal — same rationale as setAttrIfChanged. */
+function removeAttrIfPresent(el, name) {
+  if (el.hasAttribute(name)) el.removeAttribute(name);
+}
+
+/**
+ * Marks a freshly-built candidate cell as renderer-owned — its content came
+ * from something free to attach an event listener or otherwise stash
+ * runtime state on the node it returns, where `Node.isEqualNode()` (the
+ * adopt-or-diff structural check below) has no way to see the difference
+ * (it compares tag/attributes/text/descendants only). Two, and only two,
+ * sources are marked:
+ *
+ * 1. `col.render()` — arbitrary consumer code. It can do anything to the
+ *    node it hands back, so it's always marked; there's no way to inspect
+ *    an opaque function for safety.
+ * 2. A built-in cell-type renderer (`typeDef.render`) that declares
+ *    `attachesListeners: true` (currently only `cellTypes.actions`, which
+ *    calls `addEventListener()` directly — see cell-types.js).
+ *
+ * Deliberately NOT marked: `col.format()`, the plain-text fallback, and
+ * every OTHER built-in cell-type renderer (text/number/currency/percent/
+ * date/datetime/boolean/badge/avatar/link/markdown/progress) — each of
+ * those only sets attributes on already-declarative custom elements
+ * (badge-ui, avatar-ui, check-ui, progress-ui, …) or plain nodes with no
+ * listeners; their own runtime behavior lives in their OWN
+ * `connectedCallback`, which fires independent of whether table.class.js
+ * discards or adopts the cell that contains them. Marking every
+ * `typeDef.render` cell unconditionally (an earlier draft of this fix) was
+ * tried and reverted — it broke the AC-004a zero-mutation acceptance
+ * criterion for the overwhelmingly common case (plain text/number/date
+ * cells) for no correctness benefit, since none of those renderers ever
+ * attach a listener. A cell that discards without ever being marked here
+ * (and turns out later to have needed it) is exactly the gap
+ * `guard-patterns.md` §4.1 asks a new interactive cell type to close by
+ * declaring `attachesListeners: true` on itself.
+ *
+ * A renderer-owned cell that happens to be structurally identical to the
+ * existing DOM would, without this guard, silently keep the OLD node (and
+ * its stale/missing listener) instead of the fresh one the renderer just
+ * built (gh#1678 CodeRabbit finding, table.class.js `adoptOrDiffChildren`
+ * L141-150 as originally shipped).
+ */
+const RENDERER_OWNED = new WeakSet();
+
+/**
+ * Adopt-or-diff child reconciliation — the core of table-ui's SSR
+ * adopt-in-place fix. `freshChildren` are already-built, detached candidate
+ * nodes (header cells, row cells, …) computed exactly as this file always
+ * computed them. Rather than unconditionally `replaceChild`-ing every
+ * position (the old, SSR-hostile behavior — a byte-identical server-
+ * rendered subtree got fully rebuilt at upgrade regardless), each position
+ * is compared against its EXISTING child with `Node.isEqualNode()` — a
+ * standard, structural + attribute + text deep-equality check present in
+ * every environment this framework runs under (real browsers, happy-dom,
+ * and linkedom under SSR — confirmed directly; unlike the browser-only APIs
+ * `ssr-compatibility`'s guard-patterns.md §1 guards, `isEqualNode` is core
+ * DOM and never absent). A match discards the freshly-built candidate and
+ * leaves the live DOM completely untouched — the "adopt" half. A mismatch
+ * replaces the position wholesale exactly as before — the "fall back to
+ * full rebuild" half. Never a partial/half-adopt: a position either
+ * survives byte-for-byte or gets fully rebuilt, matching the shape
+ * pagination-ui's own first-connect adoption fix (gh#1687) established for
+ * its flat, keyed item list — generalized here to an arbitrary positional
+ * child (header cells, row cells) via a value check instead of a
+ * shape/key check, since these cells have no stable identity key of their
+ * own the way a pagination item does.
+ *
+ * **Renderer-owned exception (gh#1678 CodeRabbit follow-up):** structural
+ * equality is a necessary but not sufficient adoption test — it says
+ * nothing about listeners or other runtime state a renderer attached to the
+ * node it returned. A cell in `RENDERER_OWNED` is therefore ALWAYS replaced
+ * with its fresh candidate, never adopted via the structural-equality path,
+ * even when `isEqualNode()` would have reported a match — correctness over
+ * the zero-mutation optimization for exactly the cells where structural
+ * equality can't prove the node is safe to keep. See
+ * `ssr-compatibility`'s `references/failure-shapes.md` §5.1 and
+ * `references/guard-patterns.md` §4.1 for the general shape.
+ */
+function adoptOrDiffChildren(container, freshChildren) {
+  while (container.children.length > freshChildren.length) container.lastChild.remove();
+  for (let i = 0; i < freshChildren.length; i++) {
+    const existing = container.children[i];
+    const fresh = freshChildren[i];
+    if (!existing) {
+      container.appendChild(fresh);
+    } else if (RENDERER_OWNED.has(fresh) || !existing.isEqualNode(fresh)) {
+      container.replaceChild(fresh, existing);
+    }
+    // else: existing already matches fresh byte-for-byte AND fresh carries
+    // no renderer-owned runtime state — adopt in place, discard the
+    // candidate, touch nothing.
+  }
+}
+
 // ── Component ────────────────────────────────────────────────────────────────
 
 export class UITable extends UIElement {
@@ -125,6 +245,11 @@ export class UITable extends UIElement {
     paginate:   { type: Number,  default: 0,     reflect: true },
     loading:    { type: Boolean, default: false, reflect: true },
     search:     { type: String,  default: '',    reflect: true },
+    // adiav2 zero-overrides purge (gh#1680) deleted an app-side [data-clickable]
+    // cursor rule with no kit-side replacement — row-click is always-emitted
+    // (fires whether or not a listener cares), so cursor can't be inferred
+    // from listener presence; this is an explicit opt-in affordance instead.
+    clickableRows: { type: Boolean, default: false, reflect: true, attribute: 'clickable-rows' },
   };
 
   static template = () => null;
@@ -245,6 +370,52 @@ export class UITable extends UIElement {
 
   get filters() { return Object.fromEntries(this.#filters); }
 
+  // ── table-toolbar-ui command-event listeners (gh#1764/#1780, ADR-0079) ──
+  // Each handler applies the exact call table-toolbar.class.js used to make
+  // directly on this element before the events-only normalization — no
+  // behavior change, only the interaction shape.
+  //
+  // `e.target !== this` guard (code-checker finding, 2026-08-20): these
+  // events are dispatched `bubbles: true` (mirroring the ratified
+  // chart-legend-ui↔chart-ui model), so one fired at an INNER table-ui
+  // (e.g. inside an expanded row — table-ui's own row-expansion API makes
+  // a nested table a real composition) would otherwise also reach and
+  // apply to every ANCESTOR table-ui's listener. The old direct-write code
+  // had no such hazard — it targeted the resolved element precisely. The
+  // ratified model guards this exact case (`chart.class.js`'s
+  // `#onLegendToggle` returns unless the bubbled event's own [for] matches
+  // `this.id`); here the equivalent guard is simpler since these events are
+  // always dispatched directly at their intended table-ui, never through a
+  // [for] filter — `e.target !== this` is the correct, minimal check.
+
+  #onToolbarSearch = (e) => {
+    if (e.target !== this) return;
+    this.search = e.detail?.value ?? '';
+  };
+
+  #onToolbarFilterSet = (e) => {
+    if (e.target !== this) return;
+    const { key, value, op } = e.detail || {};
+    if (!key) return;
+    this.setFilter(key, value, op);
+  };
+
+  #onToolbarFilterClear = (e) => {
+    if (e.target !== this) return;
+    this.clearFilters();
+  };
+
+  #onToolbarColumnsSet = (e) => {
+    if (e.target !== this) return;
+    const columns = e.detail?.columns;
+    if (Array.isArray(columns)) this.columns = columns;
+  };
+
+  #onToolbarPaginate = (e) => {
+    if (e.target !== this) return;
+    this.paginate = Number(e.detail?.pageSize) || 0;
+  };
+
   // ── Public API: expansion ──
 
   toggleExpand(index) {
@@ -364,8 +535,12 @@ export class UITable extends UIElement {
       } catch (_) { /* malformed JSON — leave empty, render() shows empty state */ }
     }
 
-    this.setAttribute('role', 'grid');
-    this.setAttribute('tabindex', '0');
+    // gh#1678 — idempotent: a byte-identical SSR-rendered host already
+    // carries both attributes, and an unconditional setAttribute() here
+    // would still queue a mutation record even though the value never
+    // actually changes.
+    setAttrIfChanged(this, 'role', 'grid');
+    setAttrIfChanged(this, 'tabindex', '0');
 
     // Restore persisted state
     this.#restoreState();
@@ -381,6 +556,18 @@ export class UITable extends UIElement {
       // pen automatically; Playwright's page.mouse.* synthesizes pointer
       // events (not mouse events), so a mousedown-only handler tests dead.
       this.addEventListener('pointerdown', this.#onPointerdown);
+      // gh#1764/#1780 (events-only interaction contract, ADR-0079) — the
+      // `toolbar-*` command events table-toolbar-ui dispatches AT this
+      // element in place of the direct property writes / method calls it
+      // used to make. Each handler applies the exact same public-API call
+      // the toolbar previously made directly, so observable behavior is
+      // unchanged; only the interaction shape moved to events (mirrors
+      // chart-legend-ui↔chart-ui's own bubbling-CustomEvent model).
+      this.addEventListener('toolbar-search', this.#onToolbarSearch);
+      this.addEventListener('toolbar-filter-set', this.#onToolbarFilterSet);
+      this.addEventListener('toolbar-filter-clear', this.#onToolbarFilterClear);
+      this.addEventListener('toolbar-columns-set', this.#onToolbarColumnsSet);
+      this.addEventListener('toolbar-paginate', this.#onToolbarPaginate);
     }
   }
 
@@ -388,6 +575,11 @@ export class UITable extends UIElement {
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKeydown);
     this.removeEventListener('pointerdown', this.#onPointerdown);
+    this.removeEventListener('toolbar-search', this.#onToolbarSearch);
+    this.removeEventListener('toolbar-filter-set', this.#onToolbarFilterSet);
+    this.removeEventListener('toolbar-filter-clear', this.#onToolbarFilterClear);
+    this.removeEventListener('toolbar-columns-set', this.#onToolbarColumnsSet);
+    this.removeEventListener('toolbar-paginate', this.#onToolbarPaginate);
     this.#bound = false;
     this.#cleanupResize();
     if (this.#renderRaf) {
@@ -624,8 +816,13 @@ export class UITable extends UIElement {
 
     const visCols = this.#visibleColumns;
 
-    // Set grid template
-    this.style.gridTemplateColumns = this.#buildGridTemplate();
+    // Set grid template — gh#1678: guard the write, same rationale as the
+    // host attribute sets in connected(). Assigning the identical string
+    // again is still a real style-attribute mutation, not a no-op.
+    const gridTemplate = this.#buildGridTemplate();
+    if (this.style.gridTemplateColumns !== gridTemplate) {
+      this.style.gridTemplateColumns = gridTemplate;
+    }
 
     // ── Header row ──
 
@@ -664,13 +861,12 @@ export class UITable extends UIElement {
       const row = existing || this.#createRow(idx, visCols);
       if (existing) this.#updateRow(existing, idx, visCols);
 
-      // Expand toggle in first cell
-      if (this.#isRowExpandable(idx)) {
-        const isExpanded = this.#expanded.has(idx);
-        if (isExpanded) row.setAttribute('data-expanded', '');
-        else row.removeAttribute('data-expanded');
+      // Expand toggle in first cell — gh#1678: idempotent (see the
+      // module-level helpers' own rationale).
+      if (this.#isRowExpandable(idx) && this.#expanded.has(idx)) {
+        setAttrIfChanged(row, 'data-expanded', '');
       } else {
-        row.removeAttribute('data-expanded');
+        removeAttrIfPresent(row, 'data-expanded');
       }
 
       bodyChildren.push(row);
@@ -735,6 +931,18 @@ export class UITable extends UIElement {
     const allSelected = this.#data.length > 0 && this.#selected.size === this.#data.length;
     const cells = [];
 
+    // Expand column header — an empty placeholder for the reserved
+    // expand-toggle track. Must precede the checkbox header, matching the
+    // grid template and body-row cell order (gh#1654: with no placeholder,
+    // every header label sat one column left of its data).
+    if (this.expandable) {
+      const cell = document.createElement('div');
+      cell.setAttribute('role', 'columnheader');
+      cell.setAttribute('data-expand-col', '');
+      cell.setAttribute('aria-label', 'Expand');
+      cells.push(cell);
+    }
+
     // Checkbox column header
     if (this.selectable) {
       const cell = document.createElement('div');
@@ -813,12 +1021,10 @@ export class UITable extends UIElement {
       cells.push(cell);
     }
 
-    // Reconcile header cells
-    while (header.children.length > cells.length) header.lastChild.remove();
-    for (let i = 0; i < cells.length; i++) {
-      if (header.children[i]) header.replaceChild(cells[i], header.children[i]);
-      else header.appendChild(cells[i]);
-    }
+    // Reconcile header cells — gh#1678: adopt-or-diff instead of an
+    // unconditional replaceChild per position (see the module-level
+    // adoptOrDiffChildren() doc comment for why this is safe under SSR).
+    adoptOrDiffChildren(header, cells);
   }
 
   // ── Row Builders ───────────────────────────────────────────────────────────
@@ -833,12 +1039,16 @@ export class UITable extends UIElement {
   #updateRow(row, dataIndex, visCols) {
     const data = this.#data[dataIndex];
     const isSelected = this.#selected.has(dataIndex);
-    row.dataset.index = dataIndex;
+    // gh#1678 — idempotent: `#updateRow` runs on an ADOPTED (SSR-matched)
+    // row exactly as often as on a freshly-created one, and a plain
+    // `row.dataset.index = …` / `setAttribute` always mutates regardless of
+    // whether the value already matches.
+    setAttrIfChanged(row, 'data-index', String(dataIndex));
 
     if (isSelected) {
-      row.setAttribute('aria-selected', 'true');
+      setAttrIfChanged(row, 'aria-selected', 'true');
     } else {
-      row.removeAttribute('aria-selected');
+      removeAttrIfPresent(row, 'aria-selected');
     }
 
     const cells = [];
@@ -884,6 +1094,12 @@ export class UITable extends UIElement {
       const value = getCellValue(data, col);
 
       // Render priority: column.render > column.format > cellType.render > text
+      // gh#1678 CodeRabbit follow-up: `col.render()` and a cell-type renderer
+      // are free to attach listeners / runtime state to the node they hand
+      // back — mark the cell RENDERER_OWNED so adoptOrDiffChildren() never
+      // adopts it on structural equality alone (see that function's own doc
+      // comment). `col.format()` and the plain-text fallback below build
+      // nothing but a static <span>, so they're never marked.
       if (typeof col.render === 'function') {
         const result = col.render(value, data, cell, dataIndex);
         if (isNode(result)) {
@@ -891,6 +1107,7 @@ export class UITable extends UIElement {
         } else if (typeof result === 'string') {
           cell.innerHTML = result;
         }
+        RENDERER_OWNED.add(cell);
       } else if (typeof col.format === 'function') {
         const t = col.format(value, data);
         cell.appendChild(Object.assign(document.createElement('span'), { textContent: t }));
@@ -899,6 +1116,16 @@ export class UITable extends UIElement {
         const typeDef = cellTypes[col.type || 'text'];
         if (typeDef?.render) {
           typeDef.render(value, data, cell, col.meta);
+          // Most built-in cell-type renderers only set attributes on
+          // custom elements (badge-ui, avatar-ui, check-ui, …) — safe to
+          // adopt structurally, since their own runtime behavior lives in
+          // their own connectedCallback, independent of node identity. Only
+          // a type that declares `attachesListeners` (currently: 'actions',
+          // which calls addEventListener() directly) is marked renderer-
+          // owned; marking every typeDef.render() cell would defeat the
+          // zero-mutation adoption for the overwhelming common case (plain
+          // text/number/date/badge/... cells) for no correctness benefit.
+          if (typeDef.attachesListeners) RENDERER_OWNED.add(cell);
         } else {
           const t = value != null ? String(value) : '';
           cell.appendChild(Object.assign(document.createElement('span'), { textContent: t }));
@@ -932,12 +1159,13 @@ export class UITable extends UIElement {
       cells.push(cell);
     }
 
-    // Reconcile cells in row
-    while (row.children.length > cells.length) row.lastChild.remove();
-    for (let i = 0; i < cells.length; i++) {
-      if (row.children[i]) row.replaceChild(cells[i], row.children[i]);
-      else row.appendChild(cells[i]);
-    }
+    // Reconcile cells in row — gh#1678: adopt-or-diff (see
+    // adoptOrDiffChildren()'s doc comment). This is the fix's main hot
+    // path: `#updateRow` is called on every already-adopted row found by
+    // `data-index` at connect, so this is what stops a byte-identical
+    // SSR-rendered row from having every one of its cells rebuilt at
+    // upgrade.
+    adoptOrDiffChildren(row, cells);
   }
 
   // ── Overlays ───────────────────────────────────────────────────────────────
@@ -1067,10 +1295,14 @@ export class UITable extends UIElement {
           default: result = '';
         }
 
-        // Format using cell type if available
+        // Format using cell type if available. gh#1678 CodeRabbit follow-up:
+        // same attachesListeners-only scoping as the body-row cell path
+        // above — only a cell type that declares it attaches listeners
+        // needs the always-replace guard.
         const typeDef = cellTypes[col.type || 'text'];
         if (typeof result === 'number' && typeDef?.render) {
           typeDef.render(result, {}, cell, col.meta);
+          if (typeDef.attachesListeners) RENDERER_OWNED.add(cell);
         } else {
           cell.textContent = typeof result === 'number' ? result.toLocaleString() : result;
         }
@@ -1079,12 +1311,11 @@ export class UITable extends UIElement {
       cells.push(cell);
     }
 
-    // Reconcile cells
-    while (aggRow.children.length > cells.length) aggRow.lastChild.remove();
-    for (let i = 0; i < cells.length; i++) {
-      if (aggRow.children[i]) aggRow.replaceChild(cells[i], aggRow.children[i]);
-      else aggRow.appendChild(cells[i]);
-    }
+    // Reconcile cells — gh#1678: adopt-or-diff, same helper as the header
+    // and body-row cell reconciliation above (consistency; the aggregation
+    // row is built from the exact same per-cell full-rebuild shape those
+    // had).
+    adoptOrDiffChildren(aggRow, cells);
   }
 
   // ── Pagination ─────────────────────────────────────────────────────────────
@@ -1505,7 +1736,7 @@ export class UITable extends UIElement {
 
   #onKeydown = (e) => {
     const visCols = this.#visibleColumns;
-    const totalCols = visCols.length + (this.selectable ? 1 : 0);
+    const totalCols = visCols.length + (this.expandable ? 1 : 0) + (this.selectable ? 1 : 0);
     const body = this.querySelector(':scope > [data-body]');
     const totalRows = body ? body.children.length : 0;
 

package/components/table/table.css

@@ -303,9 +303,18 @@
 
   /* text-overflow on a flex container doesn't reach text nodes (anonymous
      flex items). Built-in cell types now wrap text in <span>; link type
-     creates <a>; avatar/progress composite types use row-ui > span. */
+     creates <a>; avatar/progress composite types use row-ui > span.
+
+     `[data-truncate]` (gh#1681) extends the identical contract to
+     consumer-rendered `column.render` cells, whose output shape isn't
+     guaranteed to be a bare <span>/<a> — a render() function sets it on
+     whichever element (any tag, including a custom element) should
+     single-line-ellipsis, the same way a column author sets [data-wrap] to
+     opt a built-in cell INTO wrapping. Undocumented before this: `render`
+     cells clipped with no ellipsis and no opt-in path. */
   [data-body] [role="gridcell"] > span,
-  [data-body] [role="gridcell"] > a {
+  [data-body] [role="gridcell"] > a,
+  [data-body] [role="gridcell"] > [data-truncate] {
     min-width: 0;
     flex: 1;
     overflow: hidden;
@@ -351,8 +360,10 @@
 
   :scope[wrap] [data-body] [role="gridcell"] > span,
   :scope[wrap] [data-body] [role="gridcell"] > a,
+  :scope[wrap] [data-body] [role="gridcell"] > [data-truncate],
   [data-body] [role="gridcell"][data-wrap] > span,
-  [data-body] [role="gridcell"][data-wrap] > a {
+  [data-body] [role="gridcell"][data-wrap] > a,
+  [data-body] [role="gridcell"][data-wrap] > [data-truncate] {
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
@@ -417,6 +428,15 @@
     color: var(--table-fg-hover);
   }
 
+  /* Clickable-row affordance (gh#1680) — adiav2's zero-overrides purge
+     deleted an app-side [data-clickable] cursor rule with no kit-side
+     replacement. `row-click` fires unconditionally regardless of whether a
+     listener cares, so cursor can't be inferred from listener presence;
+     `clickable-rows` is an explicit opt-in instead. */
+  :scope[clickable-rows] [data-body] > [role="row"] {
+    cursor: pointer;
+  }
+
   /* Selected row — must out-specify the base row rule `[data-body] >
      [role="row"]` (0,2,0) and the hover rule (0,2,1), or the highlight never
      paints. Scoping to `[data-body] > [role="row"][aria-selected="true"]` lifts
@@ -466,10 +486,13 @@
   /* ═══════ Density ═══════ */
 
   /* No local override (ADR-0054 convergence) — --table-py/-px above already
-     derive from --a-space-* steps, which the ambient global
-     [density="compact"|"spacious"] attribute already scales via
-     --a-density. Do not reintroduce a component-local :scope[density=…]
-     block; that would re-shadow the global grammar (ADR-0053). */
+     derive from --a-space-* steps, which the global [density="compact"|
+     "spacious"] attribute scales via --a-density on ANY host, root or
+     scoped (gh#1771 — api/sizing.css re-declares the --a-space-* formulas
+     at the [density] boundary itself, the gh#570 cure; previously this
+     comment's "already scales" claim only held for root-level [density]).
+     Do not reintroduce a component-local :scope[density=…] block; that
+     would re-shadow the global grammar (ADR-0053). */
 
   /* ═══════ Pinned cells ═══════ */
 
@@ -534,9 +557,14 @@
 
   /* ═══════ Overlays (empty / loading / error) ═══════ */
 
-  [data-overlay],
-  [data-empty],
-  [data-loading] {
+  /* Scoped to the host's direct children — gh#1700, hygiene pass matching
+     the command-ui (gh#1697/#1698) and combobox-ui (gh#1700) fix shape.
+     Single-consumer today (only table.class.js's own `:scope >
+     [data-empty]` / `:scope > [data-loading]` overlay markers), but a bare
+     selector here is one nested consumer away from the same leak. */
+  :scope > [data-overlay],
+  :scope > [data-empty],
+  :scope > [data-loading] {
     grid-column: 1 / -1;
     display: flex;
     flex-direction: column;

package/components/table/table.d.ts

@@ -86,7 +86,9 @@ export interface TableSortEventDetail {
 export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
-  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. */
+  /** Renders body rows with `cursor: pointer`. `row-click` fires unconditionally whether or not a listener is attached, so the cursor can't be inferred from listener presence — set this explicitly when row-click behavior is wired up (master-detail, open-flyout, navigation) so rows read as actionable. */
+  clickableRows: boolean;
+  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. Truncation contract for `render` cells (gh#1681) — a `render(value, row, cell, dataIndex)` function's returned markup isn't guaranteed to be a bare <span>/<a> the way built-in cell types are, so single-line ellipsis truncation isn't automatic; set `data-truncate` on whichever rendered element (any tag, including a custom element) should single-line-ellipsis to opt it into the same contract built-in cells get for free. `[wrap]` (host) / `[data-wrap]` (per-column) override it back to multi-line, matching built-in cells. */
   columns: string;
   /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;

package/components/table/table.examples.md

@@ -12,8 +12,8 @@
 <table-ui id="api-selectable" selectable></table-ui>
 ```
 
-## expandable
+## render cell truncation (data-truncate)
 
 ```html
-<table-ui id="api-expandable" expandable></table-ui>
+<table-ui id="api-render-truncate"></table-ui>
 ```

package/components/table/table.yaml

@@ -20,7 +20,7 @@ composes:
   - badge-ui
 props:
   columns:
-    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.
+    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. Truncation contract for `render` cells (gh#1681) — a `render(value, row, cell, dataIndex)` function's returned markup isn't guaranteed to be a bare <span>/<a> the way built-in cell types are, so single-line ellipsis truncation isn't automatic; set `data-truncate` on whichever rendered element (any tag, including a custom element) should single-line-ellipsis to opt it into the same contract built-in cells get for free. `[wrap]` (host) / `[data-wrap]` (per-column) override it back to multi-line, matching built-in cells.
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
@@ -85,6 +85,14 @@ props:
       range select.
     type: boolean
     default: false
+  clickable-rows:
+    description: >-
+      Renders body rows with `cursor: pointer`. `row-click` fires unconditionally
+      whether or not a listener is attached, so the cursor can't be inferred from
+      listener presence — set this explicitly when row-click behavior is wired up
+      (master-detail, open-flyout, navigation) so rows read as actionable.
+    type: boolean
+    default: false
   sortable:
     description: Enable click-to-sort on column headers. Supports multi-sort via Shift+click.
     type: boolean
@@ -294,7 +302,12 @@ a2ui:
       needs search / filter / sort / columns visibility. Do NOT
       re-implement those affordances in the card header — the toolbar
       auto-wires search/filter/sort/columns changes into the bound
-      table.
+      table via `toolbar-*` CustomEvents (gh#1764/#1780, ADR-0079 —
+      events-only interaction contract; table-ui listens for
+      toolbar-search/toolbar-filter-set/toolbar-filter-clear/
+      toolbar-columns-set/toolbar-paginate on itself). Any consumer, not
+      only table-toolbar-ui, may dispatch these events directly at a
+      table-ui instance.
     - >-
       Cells truncate single-line by default (v0.6.21 §403
       truncate-default). Opt out per-table with [wrap] for whole-table