@jirawatpyk/aura-react 5.85.0 → 5.87.0

package/README.md

@@ -248,6 +248,27 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.87 — Chamber-OS 203–205 (one full-width button shape, DataTable stacked list and headers)
+
+- **Full-width buttons** (#203): one shape wherever they sit — PageHeader's `actionsFullWidthBelow` actions, a `fullWidth` / `fullWidth="below-sm" | "below-md"` Button (in an Alert, a Card, a stacked card's `footer`), a phone sheet's or drawer's footer button. At the default 44px a one-line label is the lozenge; a label that wraps is a rounded box with 22px corners (half the 44px button), not a stretched pill. Before, PageHeader's full-width actions were `--aura-radius-md` boxes even on one line (5.78) while every other full-width button stayed a pill. CSS only (the corners are `min(var(--aura-button-radius), 22px)`, so a theme with square buttons keeps them square); no JS, no flash. Above the breakpoint buttons are pills as before. In the pinned bottom strips (ActionBar `edge`, PageHeader `actionsBarBelow`) buttons share the row or take one each; a label too long even for its own row wraps there too.
+- **DataTable `stackStyle`** (#204): `'cards'` (default, as before) or `'list'` — below `stackBelow` the rows keep the stacked layout (title, pill and actions on the first line, fields two to a line) but are one list divided by `--aura-border-default` rules: no frame, radius or gap per row; the select-all line, totals row and pager are unframed, after a rule. So a DataTable sits inside a framed `Card` (with `bleed`, level with the Card's content) without cards in a card. The grid above `stackBelow` is unchanged; same in the server HTML (a class).
+
+  ```tsx
+  <Card title="Invoices">
+    <DataTable label="Invoices" stackBelow={640} stackStyle="list" bleed columns={cols} rows={rows} />
+  </Card>
+  ```
+
+- **DataTable stacked headers** (#205): while the cards show, the grid's column headers are out of the accessibility tree (`display: none`), card-only `grid: false` columns included; only the select-all line stays (when it shows). Each card field's label is now read with its value ("Amount 12,400.00 THB") instead of being silent generated content beside a hidden header. A column whose `label` is `''` has a header with no name — before, it fell back to the column `key` ("cardSummary"); `actions` columns still read "Actions". A column the grid shows should keep a `label` (axe's best-practice `empty-table-header` flags an unnamed header); `''` is for card-only (`grid: false`) columns. A tab stop left on a header when the table narrows into cards moves to the first card. The cards have no sort or column menu (they were never reachable from the keyboard there); sort them with your own control bound to `sort` / `onSortChange` while stacked.
+- **Long action labels:** a label longer than the phone's row wraps in PageHeader's `actionsFullWidthBelow` actions (with no IconButton beside it), in its `actionsBar` / `actionsBarBelow` strip and in ActionBar's edge strip — inside its button, which becomes the 22px-cornered box (5.87) — instead of pushing the page sideways. Labels that fit still share the row or take one each as before (the share is `min-width: fit-content`, falling back to the old `max-content` in browsers without it). On one line a button keeps its height: a `size="sm"` one in the page, and 44px in a strip on a phone whatever the density (5.54/5.55).
+- **Tests:** the layout-before-hydration pages hold their first paint until the whole server HTML is parsed (`<link rel="expect" blocking="render">`). A half-parsed paint — a card row whose pill (`order: 2`) isn't parsed yet puts a field on its first line — failed the check at random, about one run in four on a slow machine. A negative control (a block added after hydration) checks that shifts are still counted.
+
+## 5.86 — Chamber-OS 199–202 (Card names, DataTable column numbering, EmptyState icons)
+
+- **Card `titleId`** (#199): a titled Card labels its root by its title (`aria-labelledby`) only where the root takes a name — the default `section`, `article`, `aside`, `nav`, `main`, `search`, `form`, `fieldset`, `details`, `dialog`, `figure`, `li`, `ul`, `ol`, `menu`, or any root with a `role` (the first token of a role list; except `generic`, `none`, `presentation` and the other roles that prohibit a name). With `as="div"` and no role the heading keeps its `id` and the root stays unlabelled; before, it carried an `aria-labelledby` that ARIA 1.2 prohibits (axe `aria-prohibited-attr`) and screen readers ignored. A step card in a list of steps can now use `title`. Same from `/server`.
+- **DataTable `aria-colcount` / `aria-colindex` with `grid: false`** (#200, a 5.85 gap): in the grid (and before the first measure) card-only columns are left out of the count and the numbering, so the visible columns read 1…N of N; in the stacked cards every column counts. The hidden cells carry no `aria-colindex`.
+- **EmptyState `icon={false}`** (#201): no icon and no icon circle, for a short placeholder in a table cell or a small panel. **`tone="danger"` defaults to `triangle-alert`** (#202) instead of the inbox, so a failed read doesn't look like "nothing here"; a passed `icon` still wins.
+
 ## 5.85 — Chamber-OS 198 (DataTable columns for the cards only)
 
 - **DataTable column `grid: false`** (#198): the column shows only in the stacked cards (below `stackBelow`), never in the grid — the reverse of `card: 'hide'`. Its place in the card still follows `card` (`'title'`, `'pill'`, a field…), so a grid that puts the status under the number can give the phone card its own title and pill. It spends no width-query level (any `hideBelow` on it is ignored), takes no width in the grid, isn't pinned, isn't in the columns button and is skipped by the arrow keys there. Without `stackBelow` it isn't rendered. Replaces the `hideBelow: 100_000` workaround.
@@ -284,8 +305,8 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 
 ## 5.78 — visual audit, set 2 (phones)
 
-- **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen still overflows, as in PageHeader's strip — keep bar labels short.
-- **PageHeader `actionsFullWidthBelow`:** on a phone its buttons are `--aura-radius-md` boxes, so a label that wraps to two lines is a rounded box, not a lozenge (the ⋯ IconButton stays round) — also the header's own actions beside an `actionsBar` strip. The bottom strip keeps its pill buttons.
+- **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen wraps inside its button (5.87; before, it overflowed).
+- **PageHeader `actionsFullWidthBelow`:** on a phone its buttons are `--aura-radius-md` boxes, so a label that wraps to two lines is a rounded box, not a lozenge (the ⋯ IconButton stays round) — also the header's own actions beside an `actionsBar` strip. The bottom strip keeps its pill buttons (5.87: one shape for full-width buttons — 22px corners, the same lozenge on one line).
 - **A document number in a PageHeader title stays whole:** in a plain-text title, a short token with a digit and a hyphen ("Invoice SC-2026-900001") never breaks at its hyphens; the line breaks before it. The text is unchanged (a `.aura-nowrap` span, a utility you can use too).
 - **DataTable cards with `columnControls`:** the column picker's slot no longer squeezes the card's title (it took 48px of the first line).
 - **StatusTile:** a host or a path in a plain-text title ("api.example.co.th") breaks after a dot or a slash, not in the middle of a label.

package/dist/aura.bundle.js

@@ -843,6 +843,45 @@ window.Aura = (() => {
       close
     );
   }
+  var NAMED_ROOTS = [
+    "section",
+    "article",
+    "aside",
+    "nav",
+    "main",
+    "search",
+    "form",
+    "fieldset",
+    "details",
+    "dialog",
+    "figure",
+    "li",
+    "ul",
+    "ol",
+    "menu"
+  ];
+  var NAMELESS_ROLES = [
+    "generic",
+    "none",
+    "presentation",
+    "paragraph",
+    "caption",
+    "code",
+    "deletion",
+    "emphasis",
+    "insertion",
+    "strong",
+    "subscript",
+    "superscript",
+    "term",
+    "time",
+    "mark"
+  ];
+  function cardTakesName(as, role) {
+    const first = role ? role.trim().split(/\s+/)[0].toLowerCase() : "";
+    if (first) return NAMELESS_ROLES.indexOf(first) < 0;
+    return NAMED_ROOTS.indexOf(as) >= 0;
+  }
   function cardElement(props, ref) {
     const creative = props.variant === "creative";
     const rest = omit(props, [
@@ -872,8 +911,10 @@ window.Aura = (() => {
           props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
           props.className
         ),
-        /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-        "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+        /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). 5.86 (Chamber-OS
+         * 199): only where a name is allowed — a root that takes one (section, article…) or one with a role; a plain
+         * div is generic, where ARIA 1.2 prohibits a name. The title keeps its id either way. */
+        "aria-labelledby": !head && props.title && props.titleId && cardTakesName(props.as || "section", props.role) ? props.titleId : props["aria-labelledby"]
       }),
       head || props.title || props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React4.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
       props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__body" }, props.children) : null,
@@ -973,7 +1014,13 @@ window.Aura = (() => {
           props.className
         )
       },
-      /* @__PURE__ */ React4.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || /* @__PURE__ */ React4.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
+      props.icon === false ? null : /* @__PURE__ */ React4.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React4.createElement(
+        Icon,
+        {
+          name: props.icon || (props.tone === "danger" ? /* @__PURE__ */ React4.createElement(IconTriangleAlert, null) : /* @__PURE__ */ React4.createElement(IconInbox, null)),
+          size: props.size === "sm" ? "md" : "lg"
+        }
+      )),
       /* @__PURE__ */ React4.createElement(HT, { className: "aura-empty__title" }, props.title),
       props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-empty__text" }, props.description) : null,
       props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-empty__action" }, props.action) : null
@@ -6630,6 +6677,12 @@ window.Aura = (() => {
     }
     const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
     const nCols = vis.length + (selectable ? 1 : 0);
+    const ariaIdx = [];
+    let ariaColCount = 0;
+    for (let ci = 0; ci < nCols; ci++) {
+      const col = selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
+      ariaIdx.push(!stacked && col && col.grid === false ? void 0 : ++ariaColCount);
+    }
     const nRows = loading ? 0 : pageRows.length;
     const hasTotal = !!(props.footer && rows.length && !loading), T = nRows + 1, lastR = nRows + (hasTotal ? 1 : 0);
     const active = activeState[0];
@@ -6671,10 +6724,11 @@ window.Aura = (() => {
       },
       [stacked]
     );
+    const tabR = stacked && ar === 0 && nRows > 0 && (!(selectable && acShown === 0) || noCardSel) ? 1 : ar;
     function tabFor(r2, c) {
       if (tabMode) return -1;
       if (!activeRendered) return r2 === 0 && c === ac ? 0 : -1;
-      return r2 === ar && c === acShown ? 0 : -1;
+      return r2 === tabR && c === acShown ? 0 : -1;
     }
     React34.useEffect(function() {
       const p = pending.current;
@@ -7093,7 +7147,7 @@ window.Aura = (() => {
             key: c.key,
             role: "columnheader",
             "aria-sort": ariaSort,
-            "aria-colindex": ci + 1,
+            "aria-colindex": ariaIdx[ci],
             style: cellStyle(c, i),
             "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
             "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
@@ -7158,7 +7212,7 @@ window.Aura = (() => {
                 size: 12
               }
             )
-          ) : /* @__PURE__ */ React34.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React34.createElement(Icon, { name: /* @__PURE__ */ React34.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React34.createElement(
+          ) : /* @__PURE__ */ React34.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : null)), pin ? /* @__PURE__ */ React34.createElement(Icon, { name: /* @__PURE__ */ React34.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React34.createElement(
             "button",
             {
               type: "button",
@@ -7256,7 +7310,7 @@ window.Aura = (() => {
             {
               key: c.key,
               role: "gridcell",
-              "aria-colindex": ci + 1,
+              "aria-colindex": ariaIdx[ci],
               tabIndex: tabFor(ri, ci),
               "data-rc": ri + ":" + ci,
               className: cx(
@@ -7484,7 +7538,7 @@ window.Aura = (() => {
           {
             key: c.key,
             role: "gridcell",
-            "aria-colindex": j + (selectable ? 2 : 1),
+            "aria-colindex": ariaIdx[j + (selectable ? 1 : 0)],
             tabIndex: tabFor(T, ci),
             "data-rc": T + ":" + ci,
             onFocus: function() {
@@ -7534,6 +7588,7 @@ window.Aura = (() => {
           props.bordered === false && "aura-table--borderless",
           stacked && "aura-table--stacked",
           noCardSel && "aura-table--cards-nosel",
+          props.stackStyle === "list" && "aura-table--stack-list",
           scrolledX[0] && "is-scrolled-x",
           edgeState[0] && !stacked && "has-more-x",
           refreshing && "is-refreshing",
@@ -7579,7 +7634,7 @@ window.Aura = (() => {
           "aria-label": props.label,
           "aria-busy": busy || void 0,
           "aria-rowcount": loading || manual && props.totalRows == null && pageSize && rows.length >= pageSize ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
-          "aria-colcount": nCols,
+          "aria-colcount": ariaColCount,
           "aria-multiselectable": selectable || void 0,
           onKeyDown: onGridKey,
           onScroll: function(e) {

package/dist/cjs/index.cjs

@@ -825,6 +825,45 @@ function alertElement(props, ref, close, autoId) {
     close
   );
 }
+var NAMED_ROOTS = [
+  "section",
+  "article",
+  "aside",
+  "nav",
+  "main",
+  "search",
+  "form",
+  "fieldset",
+  "details",
+  "dialog",
+  "figure",
+  "li",
+  "ul",
+  "ol",
+  "menu"
+];
+var NAMELESS_ROLES = [
+  "generic",
+  "none",
+  "presentation",
+  "paragraph",
+  "caption",
+  "code",
+  "deletion",
+  "emphasis",
+  "insertion",
+  "strong",
+  "subscript",
+  "superscript",
+  "term",
+  "time",
+  "mark"
+];
+function cardTakesName(as, role) {
+  const first = role ? role.trim().split(/\s+/)[0].toLowerCase() : "";
+  if (first) return NAMELESS_ROLES.indexOf(first) < 0;
+  return NAMED_ROOTS.indexOf(as) >= 0;
+}
 function cardElement(props, ref) {
   const creative = props.variant === "creative";
   const rest = omit(props, [
@@ -854,8 +893,10 @@ function cardElement(props, ref) {
         props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
-      /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). 5.86 (Chamber-OS
+       * 199): only where a name is allowed — a root that takes one (section, article…) or one with a role; a plain
+       * div is generic, where ARIA 1.2 prohibits a name. The title keeps its id either way. */
+      "aria-labelledby": !head && props.title && props.titleId && cardTakesName(props.as || "section", props.role) ? props.titleId : props["aria-labelledby"]
     }),
     head || props.title || props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React4.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__body" }, props.children) : null,
@@ -955,7 +996,13 @@ function emptyStateElement(props, ref) {
         props.className
       )
     },
-    /* @__PURE__ */ React4.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || /* @__PURE__ */ React4.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
+    props.icon === false ? null : /* @__PURE__ */ React4.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React4.createElement(
+      Icon,
+      {
+        name: props.icon || (props.tone === "danger" ? /* @__PURE__ */ React4.createElement(IconTriangleAlert, null) : /* @__PURE__ */ React4.createElement(IconInbox, null)),
+        size: props.size === "sm" ? "md" : "lg"
+      }
+    )),
     /* @__PURE__ */ React4.createElement(HT, { className: "aura-empty__title" }, props.title),
     props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-empty__text" }, props.description) : null,
     props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-empty__action" }, props.action) : null
@@ -6612,6 +6659,12 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
   }
   const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
   const nCols = vis.length + (selectable ? 1 : 0);
+  const ariaIdx = [];
+  let ariaColCount = 0;
+  for (let ci = 0; ci < nCols; ci++) {
+    const col = selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
+    ariaIdx.push(!stacked && col && col.grid === false ? void 0 : ++ariaColCount);
+  }
   const nRows = loading ? 0 : pageRows.length;
   const hasTotal = !!(props.footer && rows.length && !loading), T = nRows + 1, lastR = nRows + (hasTotal ? 1 : 0);
   const active = activeState[0];
@@ -6653,10 +6706,11 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     },
     [stacked]
   );
+  const tabR = stacked && ar === 0 && nRows > 0 && (!(selectable && acShown === 0) || noCardSel) ? 1 : ar;
   function tabFor(r2, c) {
     if (tabMode) return -1;
     if (!activeRendered) return r2 === 0 && c === ac ? 0 : -1;
-    return r2 === ar && c === acShown ? 0 : -1;
+    return r2 === tabR && c === acShown ? 0 : -1;
   }
   React34.useEffect(function() {
     const p = pending.current;
@@ -7075,7 +7129,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
           key: c.key,
           role: "columnheader",
           "aria-sort": ariaSort,
-          "aria-colindex": ci + 1,
+          "aria-colindex": ariaIdx[ci],
           style: cellStyle(c, i),
           "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
           "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
@@ -7140,7 +7194,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
               size: 12
             }
           )
-        ) : /* @__PURE__ */ React34.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React34.createElement(Icon, { name: /* @__PURE__ */ React34.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React34.createElement(
+        ) : /* @__PURE__ */ React34.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : null)), pin ? /* @__PURE__ */ React34.createElement(Icon, { name: /* @__PURE__ */ React34.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React34.createElement(
           "button",
           {
             type: "button",
@@ -7238,7 +7292,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
           {
             key: c.key,
             role: "gridcell",
-            "aria-colindex": ci + 1,
+            "aria-colindex": ariaIdx[ci],
             tabIndex: tabFor(ri, ci),
             "data-rc": ri + ":" + ci,
             className: cx(
@@ -7466,7 +7520,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
         {
           key: c.key,
           role: "gridcell",
-          "aria-colindex": j + (selectable ? 2 : 1),
+          "aria-colindex": ariaIdx[j + (selectable ? 1 : 0)],
           tabIndex: tabFor(T, ci),
           "data-rc": T + ":" + ci,
           onFocus: function() {
@@ -7516,6 +7570,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
         props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
+        props.stackStyle === "list" && "aura-table--stack-list",
         scrolledX[0] && "is-scrolled-x",
         edgeState[0] && !stacked && "has-more-x",
         refreshing && "is-refreshing",
@@ -7561,7 +7616,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
         "aria-label": props.label,
         "aria-busy": busy || void 0,
         "aria-rowcount": loading || manual && props.totalRows == null && pageSize && rows.length >= pageSize ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
-        "aria-colcount": nCols,
+        "aria-colcount": ariaColCount,
         "aria-multiselectable": selectable || void 0,
         onKeyDown: onGridKey,
         onScroll: function(e) {

package/dist/esm/DataTable.js

@@ -552,6 +552,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }
   const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
   const nCols = vis.length + (selectable ? 1 : 0);
+  const ariaIdx = [];
+  let ariaColCount = 0;
+  for (let ci = 0; ci < nCols; ci++) {
+    const col = selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
+    ariaIdx.push(!stacked && col && col.grid === false ? void 0 : ++ariaColCount);
+  }
   const nRows = loading ? 0 : pageRows.length;
   const hasTotal = !!(props.footer && rows.length && !loading), T = nRows + 1, lastR = nRows + (hasTotal ? 1 : 0);
   const active = activeState[0];
@@ -593,10 +599,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     },
     [stacked]
   );
+  const tabR = stacked && ar === 0 && nRows > 0 && (!(selectable && acShown === 0) || noCardSel) ? 1 : ar;
   function tabFor(r, c) {
     if (tabMode) return -1;
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
-    return r === ar && c === acShown ? 0 : -1;
+    return r === tabR && c === acShown ? 0 : -1;
   }
   React.useEffect(function() {
     const p = pending.current;
@@ -1015,7 +1022,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           key: c.key,
           role: "columnheader",
           "aria-sort": ariaSort,
-          "aria-colindex": ci + 1,
+          "aria-colindex": ariaIdx[ci],
           style: cellStyle(c, i),
           "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
           "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
@@ -1080,7 +1087,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               size: 12
             }
           )
-        ) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React.createElement(
+        ) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : null)), pin ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React.createElement(
           "button",
           {
             type: "button",
@@ -1178,7 +1185,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           {
             key: c.key,
             role: "gridcell",
-            "aria-colindex": ci + 1,
+            "aria-colindex": ariaIdx[ci],
             tabIndex: tabFor(ri, ci),
             "data-rc": ri + ":" + ci,
             className: cx(
@@ -1406,7 +1413,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         {
           key: c.key,
           role: "gridcell",
-          "aria-colindex": j + (selectable ? 2 : 1),
+          "aria-colindex": ariaIdx[j + (selectable ? 1 : 0)],
           tabIndex: tabFor(T, ci),
           "data-rc": T + ":" + ci,
           onFocus: function() {
@@ -1456,6 +1463,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
+        props.stackStyle === "list" && "aura-table--stack-list",
         scrolledX[0] && "is-scrolled-x",
         edgeState[0] && !stacked && "has-more-x",
         refreshing && "is-refreshing",
@@ -1501,7 +1509,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         "aria-label": props.label,
         "aria-busy": busy || void 0,
         "aria-rowcount": loading || manual && props.totalRows == null && pageSize && rows.length >= pageSize ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
-        "aria-colcount": nCols,
+        "aria-colcount": ariaColCount,
         "aria-multiselectable": selectable || void 0,
         onKeyDown: onGridKey,
         onScroll: function(e) {

package/dist/esm/display.js

@@ -57,6 +57,45 @@ function alertElement(props, ref, close, autoId) {
     close
   );
 }
+const NAMED_ROOTS = [
+  "section",
+  "article",
+  "aside",
+  "nav",
+  "main",
+  "search",
+  "form",
+  "fieldset",
+  "details",
+  "dialog",
+  "figure",
+  "li",
+  "ul",
+  "ol",
+  "menu"
+];
+const NAMELESS_ROLES = [
+  "generic",
+  "none",
+  "presentation",
+  "paragraph",
+  "caption",
+  "code",
+  "deletion",
+  "emphasis",
+  "insertion",
+  "strong",
+  "subscript",
+  "superscript",
+  "term",
+  "time",
+  "mark"
+];
+function cardTakesName(as, role) {
+  const first = role ? role.trim().split(/\s+/)[0].toLowerCase() : "";
+  if (first) return NAMELESS_ROLES.indexOf(first) < 0;
+  return NAMED_ROOTS.indexOf(as) >= 0;
+}
 function cardElement(props, ref) {
   const creative = props.variant === "creative";
   const rest = omit(props, [
@@ -86,8 +125,10 @@ function cardElement(props, ref) {
         props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
-      /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). 5.86 (Chamber-OS
+       * 199): only where a name is allowed — a root that takes one (section, article…) or one with a role; a plain
+       * div is generic, where ARIA 1.2 prohibits a name. The title keeps its id either way. */
+      "aria-labelledby": !head && props.title && props.titleId && cardTakesName(props.as || "section", props.role) ? props.titleId : props["aria-labelledby"]
     }),
     head || props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
@@ -187,7 +228,13 @@ function emptyStateElement(props, ref) {
         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" })),
+    props.icon === false ? null : /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: props.icon || (props.tone === "danger" ? /* @__PURE__ */ React.createElement(IconTriangleAlert, null) : /* @__PURE__ */ React.createElement(IconInbox, null)),
+        size: props.size === "sm" ? "md" : "lg"
+      }
+    )),
     /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
     props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-empty__text" }, props.description) : null,
     props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null

package/dist/index.d.cts

@@ -255,6 +255,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	/** 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;
+	/** How the rows look below `stackBelow` (5.87, Chamber-OS 204): `cards` (default) — each row its own framed card,
+	 * 8px apart; `list` — the same layout (title, pill and actions on the first line, fields two to a line) as one list
+	 * divided by `--aura-border-default` rules, with no frame, radius or gap per row, so it sits inside a framed `Card`.
+	 * The grid above `stackBelow` is unchanged. */
+	stackStyle?: "cards" | "list" | 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. */
@@ -878,7 +883,10 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	interactive?: boolean | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
 	className?: string | undefined;
-	/** id for the title element; the card is then labelled by it (aria-labelledby). */
+	/** id for the title element; the card is then labelled by it (aria-labelledby) — when its root takes a name: the
+	 * default `section`, `article`, `aside`, `nav`, `form`, `fieldset`… or any root with a `role` (5.86, Chamber-OS 199).
+	 * With `as="div"` and no role the title keeps its id but the root stays unlabelled (ARIA 1.2 prohibits a name on a
+	 * generic element). */
 	titleId?: string | undefined;
 	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
 	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
@@ -1795,7 +1803,9 @@ export interface SkeletonProps {
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
-	icon?: IconInput | undefined;
+	/** Default `inbox`, or `triangle-alert` with `tone="danger"` (5.86, Chamber-OS 202). `false` (5.86, Chamber-OS 201)
+	 * draws no icon and no circle — a short placeholder in a table cell or a small panel. */
+	icon?: IconInput | false | undefined;
 	/** One or two buttons. */
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;

package/dist/index.d.ts

@@ -255,6 +255,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	/** 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;
+	/** How the rows look below `stackBelow` (5.87, Chamber-OS 204): `cards` (default) — each row its own framed card,
+	 * 8px apart; `list` — the same layout (title, pill and actions on the first line, fields two to a line) as one list
+	 * divided by `--aura-border-default` rules, with no frame, radius or gap per row, so it sits inside a framed `Card`.
+	 * The grid above `stackBelow` is unchanged. */
+	stackStyle?: "cards" | "list" | 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. */
@@ -878,7 +883,10 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	interactive?: boolean | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
 	className?: string | undefined;
-	/** id for the title element; the card is then labelled by it (aria-labelledby). */
+	/** id for the title element; the card is then labelled by it (aria-labelledby) — when its root takes a name: the
+	 * default `section`, `article`, `aside`, `nav`, `form`, `fieldset`… or any root with a `role` (5.86, Chamber-OS 199).
+	 * With `as="div"` and no role the title keeps its id but the root stays unlabelled (ARIA 1.2 prohibits a name on a
+	 * generic element). */
 	titleId?: string | undefined;
 	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
 	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
@@ -1795,7 +1803,9 @@ export interface SkeletonProps {
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
-	icon?: IconInput | undefined;
+	/** Default `inbox`, or `triangle-alert` with `tone="danger"` (5.86, Chamber-OS 202). `false` (5.86, Chamber-OS 201)
+	 * draws no icon and no circle — a short placeholder in a table cell or a small panel. */
+	icon?: IconInput | false | undefined;
 	/** One or two buttons. */
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;