@jirawatpyk/aura-react 5.50.0 → 5.52.0

package/dist/esm/DataTable.js

@@ -71,6 +71,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const refreshing = busy && manual && rows.length > 0;
   const loading = busy && !refreshing;
   const selectable = !!props.selectable;
+  const tabMode = props.keyboard === "tab";
+  const tabIdx = tabMode ? void 0 : -1;
   const reorderable = props.reorderable !== false && !!props.columnControls;
   const controls = !!props.columnControls;
   const oneCallback = !!props.onStateChange;
@@ -263,7 +265,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const pending = React.useRef(null);
   const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
-    if (!gridRef.current) return;
+    if (!gridRef.current || tabMode) return;
     const els = gridRef.current.querySelectorAll(
       '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
     );
@@ -347,7 +349,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   });
   let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
-    const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+    const w = widthOf(c) != null ? widthOf(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
   });
@@ -359,13 +361,21 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
     }
   });
+  if (vis.filter(function(c) {
+    return !!c.sortDirection;
+  }).length > 1)
+    devWarnOnce(
+      "datatable-sortdirection-twice",
+      "DataTable: more than one column has sortDirection. The order follows one column; give it to that one."
+    );
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
   const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
   const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
   function cellStyle(c, i) {
     const w = widthOf(c), s = {};
     if (w == null) {
-      s["--aura-cell-flex"] = "1 1 0";
+      const g = typeof c.grow === "number" && c.grow >= 0 && isFinite(c.grow) ? c.grow : 1;
+      s["--aura-cell-flex"] = g + " 1 0";
       s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
     } else {
       s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
@@ -542,6 +552,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [stacked]
   );
   function tabFor(r, c) {
+    if (tabMode) return -1;
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
     return r === ar && c === acShown ? 0 : -1;
   }
@@ -564,7 +575,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
     if (el) {
       pending.current = null;
-      el.focus();
+      (p.menuBtn && el.querySelector(".aura-table__menu-btn") || el).focus();
     }
   });
   function focusCell(r, c, dir) {
@@ -840,7 +851,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const m = menu;
     setMenu(null);
     if (restore && m) {
-      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0 };
+      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0, menuBtn: tabMode };
       else if (m.anchor) m.anchor.focus();
     }
   }
@@ -928,10 +939,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         pageKeys.length ? /* @__PURE__ */ React.createElement(
           Checkbox,
           {
+            ref: props.selectAllRef,
             hideLabel: true,
             checked: all,
             indeterminate: nSel > 0 && !all,
-            tabIndex: -1,
+            tabIndex: tabIdx,
             label: all ? t.deselectAllRows : t.selectAllRows,
             onChange: toggleAll
           }
@@ -943,7 +955,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const ci = i + (selectable ? 1 : 0);
     const isSorted = sort && sort.key === c.key;
     const canSort = c.sortable && canSortAny;
-    const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
+    const own = c.sortDirection === "ascending" || c.sortDirection === "descending" ? c.sortDirection : void 0;
+    const ariaSort = sort && canSortAny ? isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0 : own || (canSort ? "none" : void 0);
     const pin = isPinned(c), edge = pin && i === nPinned - 1;
     head.push(
       /* @__PURE__ */ React.createElement(
@@ -1001,7 +1014,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: cx("aura-table__sort", isSorted && "is-active"),
             onClick: function() {
               sortBy(c.key);
@@ -1020,7 +1033,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: "aura-table__menu-btn",
             "aria-label": t.columnOptions(c.label),
             "aria-haspopup": "menu",
@@ -1095,7 +1108,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             {
               hideLabel: true,
               checked: isSel,
-              tabIndex: -1,
+              tabIndex: tabIdx,
               label: selLabel,
               onChange: function(on) {
                 const shift = shiftClick.current;

package/dist/esm/Table.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { cx, devWarnOnce, uid, useIsoLayoutEffect } from "./internal.js";
 import { useDensity } from "./locale.js";
+import { inertProps, skeletonBody, skeletonColgroup } from "./TableSkeleton.js";
 const StackLabels = React.createContext(null);
 const ColumnIndex = React.createContext(-1);
 function flat(children) {
@@ -47,6 +48,33 @@ function headerLabels(children) {
   });
   return out;
 }
+function headerColumns(children) {
+  const out = [];
+  flat(children).forEach(function(c) {
+    if (out.length || !React.isValidElement(c) || c.type !== THead) return;
+    const row = flat(c.props.children).find(function(r) {
+      return React.isValidElement(r);
+    });
+    if (!row) return;
+    flat(row.props.children).forEach(function(cell) {
+      if (!React.isValidElement(cell)) return;
+      const p = cell.props;
+      const t = text(p.children);
+      const style = p.style;
+      const span = Math.max(1, Number(p.colSpan) || 1);
+      for (let i = 0; i < span; i++)
+        out.push({
+          label: p.label != null ? p.label : t != null ? t.replace(/\s+/g, " ").trim() || void 0 : void 0,
+          width: span > 1 ? void 0 : p.skeletonWidth != null ? p.skeletonWidth : p.width != null ? p.width : style && style.width,
+          align: p.align,
+          numeric: p.numeric,
+          card: p.card,
+          skeleton: p.skeleton
+        });
+    });
+  });
+  return out;
+}
 const Table = React.forwardRef(function Table2(props, ref) {
   const {
     caption,
@@ -61,10 +89,24 @@ const Table = React.forwardRef(function Table2(props, ref) {
     maxHeight,
     stackStyle,
     rowHeight,
+    loading,
+    loadingRows,
     className,
     children,
     ...rest
   } = props;
+  const skeletonCols = loading ? headerColumns(children) : null;
+  if (skeletonCols && !skeletonCols.length)
+    devWarnOnce(
+      "tbl-loading-cols",
+      "Table loading: no THead > Tr > Th found among its children, so there are no columns to draw. Put the THead directly inside Table (a function call, not your own component)."
+    );
+  const shownChildren = skeletonCols ? [
+    flat(children).filter(function(c) {
+      return React.isValidElement(c) && c.type === THead;
+    }),
+    skeletonBody(skeletonCols, loadingRows != null ? Math.max(0, loadingRows) : 5, !!stackBelow)
+  ] : children;
   const cards = !!stackBelow && stackStyle === "cards";
   if (maxHeight != null && caption == null && !rest["aria-label"] && !rest["aria-labelledby"])
     devWarnOnce(
@@ -118,10 +160,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
       ),
       style: maxHeight != null ? { maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight } : void 0,
       "data-density": density || pageDensity,
-      tabIndex: scrolls ? 0 : void 0,
-      role: scrolls && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
-      "aria-labelledby": scrolls ? caption != null ? capId : rest["aria-labelledby"] : void 0,
-      "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
+      ...loading ? inertProps() : null,
+      tabIndex: scrolls && !loading ? 0 : void 0,
+      role: scrolls && !loading && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
+      "aria-labelledby": scrolls && !loading ? caption != null ? capId : rest["aria-labelledby"] : void 0,
+      "aria-label": scrolls && !loading && caption == null ? rest["aria-label"] : void 0
     },
     /* @__PURE__ */ React.createElement(
       "table",
@@ -134,13 +177,15 @@ const Table = React.forwardRef(function Table2(props, ref) {
           (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
           rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
+          loading && "aura-tbl--skeleton",
           className
         ),
         role: stackBelow ? "table" : void 0,
         ...rest
       },
       caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null,
-      labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
+      skeletonCols ? skeletonColgroup(skeletonCols) : null,
+      labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, shownChildren) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, shownChildren) : shownChildren
     )
   );
   return cards ? /* @__PURE__ */ React.createElement(
@@ -194,7 +239,7 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -209,7 +254,7 @@ const Th = React.forwardRef(function Th2(props, ref) {
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
   const slot = labels && (card === "title" || card === "action") ? card : void 0;
   const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;

package/dist/esm/TableSkeleton.js

@@ -0,0 +1,170 @@
+'use client';
+import * as React from "react";
+import { cx } from "./classes.js";
+const h = React.createElement;
+function inertProps() {
+  return { inert: parseInt(React.version, 10) >= 19 ? true : "", "aria-hidden": true };
+}
+function widthOf(w) {
+  return w == null || w === "" ? void 0 : typeof w === "number" ? w + "px" : w;
+}
+function skeletonColgroup(cols) {
+  return h(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h(
+      "span",
+      { className: "aura-skel-lines" },
+      h("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h("span", { className: "aura-skel aura-skel--text", style: { width: "80%" } });
+}
+function cellCls(base, c) {
+  const align = c.align || (c.numeric ? "end" : void 0);
+  return cx(base, align === "end" && "is-end", align === "center" && "is-center", c.numeric && "is-numeric");
+}
+function skeletonBody(cols, n, stacked) {
+  const rows = [];
+  for (let r = 0; r < n; r++)
+    rows.push(
+      h(
+        "tr",
+        { key: r, className: "aura-tbl__row aura-tbl__row--skeleton", role: stacked ? "row" : void 0 },
+        cols.map(function(c, i) {
+          const slot = stacked && (c.card === "title" || c.card === "action") ? c.card : void 0;
+          return h(
+            "td",
+            {
+              key: i,
+              className: cellCls("aura-tbl__td", c),
+              role: stacked ? "cell" : void 0,
+              "data-label": stacked && !slot && c.label ? c.label : void 0,
+              "data-card": slot
+            },
+            placeholder(c)
+          );
+        })
+      )
+    );
+  return h(
+    "tbody",
+    { key: "aura-skeleton", className: "aura-tbl__body", role: stacked ? "rowgroup" : void 0 },
+    rows
+  );
+}
+function tableWrapClass(p) {
+  return cx(
+    "aura-tbl-wrap",
+    p.stackBelow && "is-stackable",
+    p.bordered === false && "is-flush",
+    p.bleed && "aura-bleed-frame",
+    p.bleed && !p.cards && "aura-bleed",
+    p.bleed && p.bleedEnd && !p.cards && "aura-bleed-end"
+  );
+}
+function tableClass(p) {
+  return cx(
+    "aura-tbl",
+    p.stackBelow && "aura-tbl--stack-" + p.stackBelow,
+    (p.align === "middle" || p.rowHeight === "density" && p.align !== "top") && "aura-tbl--middle",
+    p.rowHeight === "density" && "aura-tbl--row-density",
+    p.cards && "aura-tbl--cards",
+    p.className
+  );
+}
+function cardsFrame(el, p) {
+  return p.cards ? h(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + p.stackBelow,
+        p.bleed && "aura-bleed",
+        p.bleed && p.bleedEnd && "aura-bleed-end"
+      )
+    },
+    el
+  ) : el;
+}
+function TableSkeleton(props) {
+  const cols = props.columns || [];
+  const n = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h(
+      "table",
+      {
+        className: cx(
+          tableClass({
+            stackBelow: props.stackBelow,
+            align: props.align,
+            rowHeight: props.rowHeight,
+            cards,
+            className: props.className
+          }),
+          "aura-tbl--skeleton"
+        ),
+        role: stacked ? "table" : void 0
+      },
+      skeletonColgroup(cols),
+      head,
+      skeletonBody(cols, n, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+export {
+  TableSkeleton,
+  cardsFrame,
+  inertProps,
+  skeletonBody,
+  skeletonColgroup,
+  tableClass,
+  tableWrapClass
+};

package/dist/esm/display.js

@@ -85,8 +85,17 @@ const PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);

package/dist/esm/index.js

@@ -42,6 +42,7 @@ import { AppShell } from "./AppShell.js";
 import { ActionBar } from "./ActionBar.js";
 import { Separator } from "./Separator.js";
 import { Table, THead, TBody, TFoot, Tr, Th, Td } from "./Table.js";
+import { TableSkeleton } from "./TableSkeleton.js";
 import { BottomNav } from "./BottomNav.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
@@ -125,6 +126,7 @@ export {
   TFoot,
   THead,
   Table,
+  TableSkeleton,
   Tabs,
   Tag,
   Td,

package/dist/index.d.cts

@@ -89,12 +89,22 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	tones?: Record<string, StatusTone> | undefined;
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 157): the order this column is in when the page sets it (from the URL, say), not a header
+	 * button — puts `aria-sort` on the header, with no button, icon or click. Give it to one column. Once the table has
+	 * its own sort (someone used a sortable header, or `sort` is set) that wins and this is ignored, so only one header
+	 * claims the order. */
+	sortDirection?: "ascending" | "descending" | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
 	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
 	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 162): a flexible column's share of the spare width (its cells' flex-grow; default 1) — e.g.
+	 * `grow: 3` lets row actions sit side by side once the table is wide. At the minimum width nothing changes; the row
+	 * minimum ignores it; a fixed `width` column and stacked cards ignore it. `0` keeps the column at its minimum; leave
+	 * at least one flexible column above 0, or the rows won't fill a wide table. */
+	grow?: number | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
 	minWidth?: number | undefined;
 	maxWidth?: number | undefined;
@@ -160,6 +170,15 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 161): how the keyboard moves through the table. `'grid'` (default): the table is one Tab stop,
+	 * the arrows move between cells and Enter or F2 enters a cell's controls (APG grid). `'tab'`: every checkbox, sort
+	 * and column button, row link and row action is an ordinary Tab stop in reading order (Shift+Tab walks back), for a
+	 * list whose rows carry actions people expect to Tab to; the cells are not Tab stops, the arrows still move between
+	 * them once focus is in one (click a cell, or Escape from a control), and the grid's row and column semantics stay. */
+	keyboard?: "grid" | "tab" | undefined;
+	/** 5.51 (Chamber-OS 157): a ref to the select-all checkbox (an `<input>`), e.g. to return focus to it after a bulk
+	 * bar's Clear. Null while the page has no selectable rows. */
+	selectAllRef?: React$1.Ref<HTMLInputElement> | undefined;
 	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
 	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
@@ -307,6 +326,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
@@ -1343,9 +1365,54 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
 	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
 	rowHeight?: "density" | undefined;
+	/** 5.52 (Chamber-OS 164): draw the table while its rows load — the head as given, then `loadingRows` placeholder
+	 * rows in the same columns (and, below `stackBelow`, the same cards). Each column's placeholder follows its header
+	 * cell's `skeleton` hint, width (`skeletonWidth`, else its `width`, else an even share) and `card` role. The whole
+	 * table is `aria-hidden` and `inert` meanwhile: announce the load in your own status line. TBody and TFoot children
+	 * are not rendered. For a Server Component (a route's loading.tsx) use `TableSkeleton` from `/server`. */
+	loading?: boolean | undefined;
+	/** Placeholder rows while `loading` (default 5). */
+	loadingRows?: number | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
 	className?: string | undefined;
 }
@@ -1367,6 +1434,12 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
 	 * two to a line under them. */
 	card?: "title" | "action" | "field" | undefined;
+	/** Th in the head only (5.52, Chamber-OS 164): what this column's placeholder cells look like while the Table is
+	 * `loading`. On a head cell, `card` also gives the placeholder cells their place in a stacked row. */
+	skeleton?: TableSkeletonHint | undefined;
+	/** Th in the head only (5.52): this column's width while loading — a share such as `'22%'` — when the loaded table
+	 * sizes it from its content. Default: the cell's `width`, else an even share. */
+	skeletonWidth?: string | number | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -2146,6 +2219,9 @@ export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React
 export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 /** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
 export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
  * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
  * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */