@jirawatpyk/aura-react 5.50.0 → 5.52.0

package/dist/index.d.ts

@@ -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. */

package/dist/server/index.cjs

@@ -43,6 +43,7 @@ __export(server_exports, {
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
   StatusTile: () => ServerStatusTile,
+  TableSkeleton: () => TableSkeleton,
   TileGrid: () => TileGrid,
   brandScale: () => scale,
   breakpoints: () => breakpoints,
@@ -640,14 +641,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h6 = String(hex).trim().replace("#", "");
-  if (h6.length === 3)
-    h6 = h6.split("").map(function(c) {
+  let h7 = String(hex).trim().replace("#", "");
+  if (h7.length === 3)
+    h7 = h7.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h7)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h6.slice(i, i + 2), 16) / 255;
+    return parseInt(h7.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1240,8 +1241,17 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React3.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
@@ -1430,10 +1440,171 @@ var Container = React4.forwardRef(function Container2(props, ref) {
   );
 });
 
-// src/PageHeader.tsx
+// src/TableSkeleton.tsx
 var React5 = __toESM(require("react"), 1);
 var h4 = React5.createElement;
-var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+function inertProps() {
+  return { inert: parseInt(React5.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 h4(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h4("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h4("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h4("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h4(
+      "span",
+      { className: "aura-skel-lines" },
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h4("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, n3, stacked) {
+  const rows = [];
+  for (let r2 = 0; r2 < n3; r2++)
+    rows.push(
+      h4(
+        "tr",
+        { key: r2, 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 h4(
+            "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 h4(
+    "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 ? h4(
+    "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 n3 = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h4(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h4(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h4(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h4(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h4(
+      "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, n3, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+
+// src/PageHeader.tsx
+var React6 = __toESM(require("react"), 1);
+var h5 = React6.createElement;
+var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
@@ -1449,7 +1620,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const heading = h4(
+  const heading = h5(
     "h" + level,
     {
       className: "aura-page-header__title",
@@ -1461,7 +1632,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   );
   const hasActions = props.actions != null && props.actions !== false;
   const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
-  return h4(
+  return h5(
     "div",
     Object.assign(attrs2, {
       ref,
@@ -1478,32 +1649,32 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       ),
       style: props.style
     }),
-    h4(
+    h5(
       "div",
       { className: "aura-page-header__text" },
-      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
-      shown(props.titleAddon) ? h4(
+      props.breadcrumb != null && props.breadcrumb !== false ? h5("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      shown(eyebrow) ? plainEyebrow ? h5("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h5("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h5(
         "div",
         { className: "aura-page-header__title-row" },
         heading,
-        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+        h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
-      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+      shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
+      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4(
+    props.actions != null && props.actions !== false ? h5(
       "div",
       { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
       props.actions
     ) : null
   );
 });
 
 // src/tiles.tsx
-var React6 = __toESM(require("react"), 1);
-var h5 = React6.createElement;
+var React7 = __toESM(require("react"), 1);
+var h6 = React7.createElement;
 var STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
@@ -1536,7 +1707,7 @@ function attrs(props) {
   });
   return out;
 }
-var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
+var comma = h6("span", { className: "aura-status-tile__sep" }, ",");
 function statusTileElement(props, ref, Link, t, titleRef) {
   const status = STATUS_ICON[props.status] ? props.status : "unknown";
   if (status !== props.status)
@@ -1552,43 +1723,43 @@ function statusTileElement(props, ref, Link, t, titleRef) {
   };
   const hasValue = has(props.value), hasMeta = has(props.meta);
   const Tag = props.href ? Link : "div";
-  return h5(
+  return h6(
     Tag,
     Object.assign(attrs(props), {
       ref,
       href: props.href,
       className: cx("aura-status-tile", "aura-status-tile--" + status, props.href && "is-interactive", props.className)
     }),
-    h5(
+    h6(
       "span",
       { className: "aura-status-tile__head" },
-      h5(Icon, { name: h5(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h5("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
-      h5("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
-      hasValue ? h5(
+      h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h6(
         "span",
         { className: cx("aura-status-tile__value", "is-" + valueTone) },
         props.value,
         hasMeta || markers.length ? comma : null
       ) : null
     ),
-    hasMeta || markers.length ? h5(
+    hasMeta || markers.length ? h6(
       "span",
       { className: "aura-status-tile__foot" },
-      hasMeta ? h5("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
-      markers.length ? h5(
+      hasMeta ? h6("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h6(
         "span",
         { className: "aura-status-tile__markers" },
         markers.map(function(m, i) {
-          return h5(
+          return h6(
             "span",
             {
               key: i,
               className: cx("aura-status-tile__marker", "is-" + (m.tone || "neutral")),
               "data-aura-tip": m.label
             },
-            h5(Icon, { name: m.icon, size: 14 }),
-            h5("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
+            h6(Icon, { name: m.icon, size: 14 }),
+            h6("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
           );
         })
       ) : null
@@ -1598,13 +1769,13 @@ function statusTileElement(props, ref, Link, t, titleRef) {
 function ServerStatusTile(props) {
   return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
 }
-var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
+var TileGrid = React7.forwardRef(function TileGrid2(props, ref) {
   const style = Object.assign(
     {},
     respVars("aura-grid-cols", props.columns == null ? { base: 2, md: 3 } : props.columns),
     props.style
   );
-  return h5(
+  return h6(
     "ul",
     Object.assign(attrs(props), {
       ref,
@@ -1614,16 +1785,16 @@ var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
     }),
     /* toArray drops null and booleans and keys each element; a Fragment's children are items too. */
     flat(props.children).map(function(c, i) {
-      return h5("li", { key: React6.isValidElement(c) && c.key != null ? c.key : i }, c);
+      return h6("li", { key: React7.isValidElement(c) && c.key != null ? c.key : i }, c);
     })
   );
 });
 function flat(children) {
   const out = [];
-  React6.Children.toArray(children).forEach(function(c) {
-    if (React6.isValidElement(c) && c.type === React6.Fragment)
+  React7.Children.toArray(children).forEach(function(c) {
+    if (React7.isValidElement(c) && c.type === React7.Fragment)
       flat(c.props.children).forEach(function(x) {
-        out.push(React6.isValidElement(x) ? React6.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+        out.push(React7.isValidElement(x) ? React7.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
       });
     else if (c !== "") out.push(c);
   });
@@ -1637,7 +1808,7 @@ function r(n3) {
 function num(v) {
   return typeof v === "number" && isFinite(v) ? v : null;
 }
-var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
+var Sparkline = React7.forwardRef(function Sparkline2(props, ref) {
   const wh = SIZES2[props.size || "sm"] || SIZES2.sm;
   const W = wh[0], H = wh[1];
   const data = (props.data || []).map(num);
@@ -1667,7 +1838,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
   data.forEach(function(v, i) {
     if (v == null) return;
     const prev = i > 0 && data[i - 1] != null, next = i < n3 - 1 && data[i + 1] != null;
-    if (!prev && !next) dots.push(h5("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
+    if (!prev && !next) dots.push(h6("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
     else d += (prev ? "L" : "M") + r(x(i)) + " " + r(y(v));
   });
   const mode = props.failures || "none";
@@ -1677,10 +1848,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       if (!props.failed[i]) return;
       if (mode === "band") {
         const w = Math.max(2, step || W), left = Math.max(0, x(i) - w / 2), right = Math.min(W, x(i) + w / 2);
-        fails.push(h5("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
+        fails.push(h6("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
       } else
         fails.push(
-          h5("rect", {
+          h6("rect", {
             key: "f" + i,
             x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
             y: H - 6,
@@ -1690,7 +1861,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
         );
     });
   const named = !!props.label;
-  return h5(
+  return h6(
     "svg",
     Object.assign(attrs(props), {
       ref,
@@ -1703,9 +1874,9 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       "aria-hidden": named ? void 0 : true,
       focusable: "false"
     }),
-    fails.length && mode === "band" ? h5("g", { className: "aura-sparkline__band" }, fails) : null,
-    d ? h5("path", { className: "aura-sparkline__line", d }) : null,
-    dots.length ? h5("g", { className: "aura-sparkline__dots" }, dots) : null,
-    fails.length && mode === "ticks" ? h5("g", { className: "aura-sparkline__ticks" }, fails) : null
+    fails.length && mode === "band" ? h6("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h6("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h6("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h6("g", { className: "aura-sparkline__ticks" }, fails) : null
   );
 });

package/dist/server/index.d.cts

@@ -46,6 +46,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;
@@ -114,6 +117,43 @@ export type DataAttributes = {
 };
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/** 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 StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -484,6 +524,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** 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;
 /** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
  * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
  * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from