@jirawatpyk/aura-react 5.12.0 → 5.13.0

package/dist/esm/DataTable.js

@@ -156,6 +156,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
       if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
@@ -256,9 +257,38 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const pillKey = (vis.filter(function(c, i) {
     return i > 0 && c.pill;
   })[0] || { key: "" }).key;
+  const ownTitle = vis.some(function(c) {
+    return c.card === "title";
+  }), ownPill = vis.some(function(c) {
+    return c.card === "pill";
+  });
+  let autoTitle = -1;
+  if (!ownTitle) {
+    for (let i = 0; i < vis.length; i++)
+      if (!vis[i].card && (i === 0 || !vis[i].actions)) {
+        autoTitle = i;
+        break;
+      }
+  }
   function cardPart(c, i) {
-    return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+    if (c.card) return c.card;
+    if (i === autoTitle) return "title";
+    if (c.key === pillKey && !ownPill) return "pill";
+    return c.actions ? "actions" : "field";
   }
+  const cardRank = {};
+  if (vis.some(function(c) {
+    return c.cardOrder != null;
+  }))
+    vis.map(function(c, i) {
+      return { c, i, o: c.cardOrder != null ? c.cardOrder : i };
+    }).filter(function(x) {
+      return cardPart(x.c, x.i) === "field";
+    }).sort(function(a, b) {
+      return a.o - b.o || a.i - b.i;
+    }).forEach(function(x, n) {
+      cardRank[x.c.key] = n;
+    });
   function cardAttrs(c, i) {
     const part = cardPart(c, i), lv = hideLevel(c);
     return {
@@ -300,6 +330,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       s["--aura-cell-w"] = w + "px";
     }
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
+    if (cardRank[c.key] != null) s["--aura-card-order"] = String(5 + cardRank[c.key]);
     return s;
   }
   const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
@@ -440,9 +471,37 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   function colAt(ci) {
     return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
   }
+  const cardHidden = [];
+  for (let ci = 0; ci < nCols; ci++) {
+    const col = colAt(ci);
+    cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+  }
+  function nearestShown(c, dir, ok) {
+    if (ok(c)) return c;
+    for (let d = 1; d < nCols; d++) {
+      const a = c + d * dir, b = c - d * dir;
+      if (a >= 0 && a < nCols && ok(a)) return a;
+      if (b >= 0 && b < nCols && ok(b)) return b;
+    }
+    return c;
+  }
+  const acShown = nearestShown(ac, 1, function(cc) {
+    return !cardHidden[cc];
+  });
+  const lastFocus = React.useRef(null);
+  React.useEffect(
+    function() {
+      const was = lastFocus.current, g = gridRef.current;
+      if (!stacked || !was || !g || !g.contains(was) || was.getClientRects().length > 0) return;
+      if (document.activeElement && document.activeElement !== document.body && document.activeElement !== was) return;
+      const el = g.querySelector('[data-rc="' + Math.max(1, ar) + ":" + acShown + '"]');
+      if (el && el.getClientRects().length > 0) el.focus();
+    },
+    [stacked]
+  );
   function tabFor(r, c) {
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
-    return r === ar && c === ac ? 0 : -1;
+    return r === ar && c === acShown ? 0 : -1;
   }
   React.useEffect(function() {
     const p = pending.current;
@@ -466,26 +525,17 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       el.focus();
     }
   });
-  function focusCell(r, c) {
+  function focusCell(r, c, dir) {
     r = Math.max(0, Math.min(r, lastR));
     c = Math.max(0, Math.min(c, nCols - 1));
-    if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
-    if (gridRef.current && r === T && hasTotal) {
+    if (stacked && r === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r = 1;
+    if (gridRef.current && (r === T && hasTotal || stacked)) {
       const shown2 = function(cc) {
+        if (cardHidden[cc]) return false;
         const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
         return !!e && e.getClientRects().length > 0;
       };
-      if (!shown2(c))
-        for (let d = 1; d < nCols; d++) {
-          if (c + d < nCols && shown2(c + d)) {
-            c = c + d;
-            break;
-          }
-          if (c - d >= 0 && shown2(c - d)) {
-            c = c - d;
-            break;
-          }
-        }
+      c = nearestShown(c, dir || 1, shown2);
     }
     activeState[1]({ r, c });
     pending.current = { r, c };
@@ -745,7 +795,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     } else if (r === 0 && col && (e.altKey && k === "ArrowDown" || k === "ContextMenu" || e.shiftKey && k === "F10") && controls)
       openMenu("col", col.key, target, { r: 0, c });
     else if (k === "ArrowRight") focusCell(r, c + 1);
-    else if (k === "ArrowLeft") focusCell(r, c - 1);
+    else if (k === "ArrowLeft") focusCell(r, c - 1, -1);
     else if (k === "ArrowDown") {
       if (r < lastR) focusCell(r + 1, c);
       else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -753,7 +803,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       if (r > 1 || r === 1 && !(pageSize && page > 1)) focusCell(r - 1, c);
       else if (r === 1 && goPage(page - 1, { r: pageSize, c })) activeState[1]({ r: pageSize, c });
     } else if (k === "Home") focusCell(e.ctrlKey ? 1 : r, 0);
-    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
+    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1, -1);
     else if (k === "PageDown") {
       if (pageSize) {
         if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -773,7 +823,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         if (pageKeys.length) toggleAll();
       } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
       else if (r > 0 && k === " " && selectable) {
-        if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
       } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
         followRow(target.closest('[role="row"]'), e);
       else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
@@ -833,6 +883,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "aria-colindex": ci + 1,
           style: cellStyle(c, i),
           "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
+          "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -1198,7 +1249,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           ),
           style: cellStyle(c, j),
           ...cardAttrs(c, j),
-          "data-label": j === 0 ? void 0 : c.label || t.totals
+          "data-label": cardPart(c, j) === "title" ? void 0 : c.label || t.totals
         },
         props.footer[c.key]
       );
@@ -1226,6 +1277,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       className: cx(
         "aura-table",
         stacked && "aura-table--stacked",
+        noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
         refreshing && "is-refreshing",
         !levels.length && props.className
@@ -1243,8 +1295,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         className: "aura-table__scroll",
         onMouseOver: showFull,
         onMouseLeave: hideFull,
-        onFocus: showFull,
-        onBlur: hideFull,
+        onFocus: function(e) {
+          lastFocus.current = e.target;
+          showFull(e);
+        },
+        onBlur: function(e) {
+          const to = e.relatedTarget;
+          if ((!to || !e.currentTarget.contains(to)) && e.target.getClientRects().length > 0)
+            lastFocus.current = null;
+          hideFull();
+        },
         style: scrollStyle,
         role: "grid",
         "aria-label": props.label,

package/dist/esm/Table.js

@@ -47,7 +47,7 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, className, children, ...rest } = props;
+  const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -75,7 +75,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: cx("aura-tbl-wrap", stackBelow && "is-stackable"),
+      className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
       "data-density": density,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
@@ -86,7 +86,12 @@ const Table = React.forwardRef(function Table2(props, ref) {
       "table",
       {
         ref,
-        className: cx("aura-tbl", stackBelow && "aura-tbl--stack-" + stackBelow, className),
+        className: cx(
+          "aura-tbl",
+          stackBelow && "aura-tbl--stack-" + stackBelow,
+          align === "middle" && "aura-tbl--middle",
+          className
+        ),
         role: stackBelow ? "table" : void 0,
         ...rest
       },
@@ -134,7 +139,7 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -143,14 +148,16 @@ const Th = React.forwardRef(function Th2(props, ref) {
       scope: scope || "col",
       className: cellClass("aura-tbl__th", props),
       role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
+      "data-card": stacked && (card === "title" || card === "action") ? card : void 0,
       ...rest
     }
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
-  const shown = labels ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
+  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;
   return /* @__PURE__ */ React.createElement(
     "td",
     {
@@ -158,6 +165,7 @@ const Td = React.forwardRef(function Td2(props, ref) {
       className: cellClass("aura-tbl__td", props),
       role: labels ? "cell" : void 0,
       "data-label": shown || void 0,
+      "data-card": slot,
       ...rest
     }
   );

package/dist/esm/display.js

@@ -102,11 +102,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/index.d.cts

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -996,7 +1007,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -1006,6 +1017,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
+	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1026,6 +1042,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * 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;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1201,7 +1221,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1209,6 +1229,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
+	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
+	tone?: "neutral" | "danger" | undefined;
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }

package/dist/index.d.ts

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -996,7 +1007,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -1006,6 +1017,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
+	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1026,6 +1042,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * 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;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1201,7 +1221,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1209,6 +1229,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
+	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
+	tone?: "neutral" | "danger" | undefined;
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.cjs

@@ -1148,11 +1148,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || /* @__PURE__ */ React3.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/server/index.d.cts

@@ -96,7 +96,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,6 +104,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
+	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
+	tone?: "neutral" | "danger" | undefined;
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.d.ts

@@ -96,7 +96,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,6 +104,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
+	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
+	tone?: "neutral" | "danger" | undefined;
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.js

@@ -1091,11 +1091,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || /* @__PURE__ */ React3.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/styles.css

@@ -1083,6 +1083,10 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
 .aura-empty__action { margin-top: var(--aura-space-3); display: flex; gap: var(--aura-space-3); flex-wrap: wrap; justify-content: center; }
+/* 5.13 (Chamber-OS 82): tone="danger" — a load failure. */
+.aura-empty.is-danger { background: var(--aura-alert-danger-bg); border-radius: var(--aura-radius-lg); }
+.aura-empty.is-danger.is-bordered { border: 1px solid var(--aura-border-danger); }
+.aura-empty.is-danger .aura-empty__icon { background: var(--aura-bg-surface); color: var(--aura-fg-danger); }
 
 /* ---------- Pagination ---------- */
 .aura-pagination { display: flex; align-items: center; gap: var(--aura-space-1); font-family: var(--font-sans); font-size: 13px; }
@@ -1548,6 +1552,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
+ * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
+.aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+.aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > .aura-tbl__caption { padding-inline: 0; }
 /* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
  * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
  * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
@@ -1562,6 +1573,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-md > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1577,6 +1596,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-sm > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1629,6 +1656,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
+  .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
+  .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
+  .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* hideSelectionInCards: no row boxes, no select-all line. */
+  .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
+  .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
   /* 5.11: rowHeight="auto" leaves cards as they are. */
   .aura-table__td--auto { display: block; white-space: nowrap; }
   .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }