@jirawatpyk/aura-react 5.84.0 → 5.86.0

package/README.md

@@ -248,6 +248,16 @@ 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.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.
+
 ## 5.84 — Chamber-OS 197 (cursor Pagination without Previous)
 
 - **Pagination `mode="cursor"` `showPrevious`** (#197): default `true`; `false` leaves Previous out entirely, as `showFirst={false}` does First — for a list that only goes forward (keyset, newest first), where a disabled Previous could never become live. The nav then holds Next (and First when shown) and the `status`.

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
@@ -6135,7 +6182,7 @@ window.Aura = (() => {
     return w < threshold * (1 - 0.5 / Q);
   }
   function hidePx(c) {
-    if (c.hideBelow == null) return void 0;
+    if (c.hideBelow == null || c.grid === false) return void 0;
     const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
     return px != null && px > 0 ? px : void 0;
   }
@@ -6390,10 +6437,16 @@ window.Aura = (() => {
     }).map(function(k) {
       return byKey[k];
     }).filter(function(c) {
-      return !tooNarrow(c);
+      return !tooNarrow(c) && (c.grid !== false || !!props.stackBelow);
     });
+    const hasCardOnly = shown.some(function(c) {
+      return c.grid === false;
+    });
+    const gridShown = shown.filter(function(c) {
+      return c.grid !== false;
+    }).length;
     function isPinned(c) {
-      return pinnedKeys.indexOf(c.key) >= 0 && c.width != null;
+      return pinnedKeys.indexOf(c.key) >= 0 && c.width != null && c.grid !== false;
     }
     const vis = shown.filter(isPinned).concat(
       shown.filter(function(c) {
@@ -6441,7 +6494,8 @@ window.Aura = (() => {
       return {
         "data-card": part,
         "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
-        "data-hide": lv ? String(lv) : void 0
+        "data-hide": lv ? String(lv) : void 0,
+        "data-grid": c.grid === false ? "off" : void 0
       };
     }
     const hasFields = vis.some(function(c, i) {
@@ -6449,10 +6503,13 @@ window.Aura = (() => {
       return p === "field" || p === "wide";
     });
     const hasFlex = vis.some(function(c) {
-      return widthOf2(c) == null;
+      return widthOf2(c) == null && c.grid !== false;
     });
+    let lastGridCol = vis.length - 1;
+    while (lastGridCol > 0 && vis[lastGridCol].grid === false) lastGridCol--;
     let fixedSum = 0, hideTerms = "";
     vis.forEach(function(c) {
+      if (c.grid === false) return;
       const w = widthOf2(c) != null ? widthOf2(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
       if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
       else fixedSum += w;
@@ -6482,7 +6539,7 @@ window.Aura = (() => {
         s["--aura-cell-flex"] = g + " 1 0";
         s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
       } else {
-        s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
+        s["--aura-cell-flex"] = !hasFlex && i === lastGridCol ? "1 0 auto" : "none";
         s["--aura-cell-w"] = w + "px";
       }
       if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
@@ -6620,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];
@@ -6631,7 +6694,12 @@ window.Aura = (() => {
     const cardHidden = [];
     for (let ci = 0; ci < nCols; ci++) {
       const col = colAt(ci);
-      cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+      cardHidden.push(
+        stacked ? col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel : (
+          /* before the first measure the layout is CSS's: the DOM check below decides */
+          boxWidth[0] != null && !!col && col.grid === false
+        )
+      );
     }
     function nearestShown(c, dir, ok) {
       if (ok(c)) return c;
@@ -6692,7 +6760,7 @@ window.Aura = (() => {
       r2 = Math.max(0, Math.min(r2, lastR));
       c = Math.max(0, Math.min(c, nCols - 1));
       if (stacked && r2 === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r2 = 1;
-      if (gridRef.current && (r2 === T && hasTotal || stacked)) {
+      if (gridRef.current && (r2 === T && hasTotal || stacked || hasCardOnly)) {
         const shown2 = function(cc) {
           if (cardHidden[cc]) return false;
           const e = gridRef.current.querySelector('[data-rc="' + r2 + ":" + cc + '"]');
@@ -6819,8 +6887,9 @@ window.Aura = (() => {
       window.addEventListener("pointerup", up2);
     }
     function moveCol(key, delta) {
+      if (byKey[key] && byKey[key].grid === false) return false;
       const c = byKey[key], group = vis.filter(function(x) {
-        return isPinned(x) === isPinned(c);
+        return isPinned(x) === isPinned(c) && x.grid !== false;
       });
       const gi = group.indexOf(c), target = group[gi + delta];
       if (!target) return false;
@@ -6879,7 +6948,7 @@ window.Aura = (() => {
     }
     function columnMenuItems(c) {
       const group = vis.filter(function(x) {
-        return isPinned(x) === isPinned(c);
+        return isPinned(x) === isPinned(c) && x.grid !== false;
       }), gi = group.indexOf(c);
       const items2 = [];
       if (c.sortable)
@@ -6932,7 +7001,7 @@ window.Aura = (() => {
         {
           label: t.hideColumn,
           icon: /* @__PURE__ */ React34.createElement(IconEyeOff, null),
-          disabled: shown.length <= 1,
+          disabled: gridShown <= 1,
           onSelect: function() {
             setHidden(c.key, true);
           }
@@ -6941,13 +7010,15 @@ window.Aura = (() => {
       return items2;
     }
     function pickerItems() {
-      return order.map(function(k) {
+      return order.filter(function(k) {
+        return byKey[k].grid !== false;
+      }).map(function(k) {
         const c = byKey[k], on = hidden.indexOf(k) < 0;
         return {
           label: c.label || (c.actions ? t.actions : c.key),
           checked: on,
           keepOpen: true,
-          disabled: on && shown.length <= 1,
+          disabled: on && gridShown <= 1,
           onSelect: function() {
             setHidden(k, on);
           }
@@ -7075,10 +7146,11 @@ 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,
+            "data-grid": c.grid === false ? "off" : void 0,
             tabIndex: tabFor(0, ci),
             "data-rc": "0:" + ci,
             className: cx(
@@ -7237,7 +7309,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(
@@ -7465,7 +7537,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() {
@@ -7560,7 +7632,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
@@ -6117,7 +6164,7 @@ function below(w, threshold) {
   return w < threshold * (1 - 0.5 / Q);
 }
 function hidePx(c) {
-  if (c.hideBelow == null) return void 0;
+  if (c.hideBelow == null || c.grid === false) return void 0;
   const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
   return px != null && px > 0 ? px : void 0;
 }
@@ -6372,10 +6419,16 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
   }).map(function(k) {
     return byKey[k];
   }).filter(function(c) {
-    return !tooNarrow(c);
+    return !tooNarrow(c) && (c.grid !== false || !!props.stackBelow);
   });
+  const hasCardOnly = shown.some(function(c) {
+    return c.grid === false;
+  });
+  const gridShown = shown.filter(function(c) {
+    return c.grid !== false;
+  }).length;
   function isPinned(c) {
-    return pinnedKeys.indexOf(c.key) >= 0 && c.width != null;
+    return pinnedKeys.indexOf(c.key) >= 0 && c.width != null && c.grid !== false;
   }
   const vis = shown.filter(isPinned).concat(
     shown.filter(function(c) {
@@ -6423,7 +6476,8 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     return {
       "data-card": part,
       "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
-      "data-hide": lv ? String(lv) : void 0
+      "data-hide": lv ? String(lv) : void 0,
+      "data-grid": c.grid === false ? "off" : void 0
     };
   }
   const hasFields = vis.some(function(c, i) {
@@ -6431,10 +6485,13 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     return p === "field" || p === "wide";
   });
   const hasFlex = vis.some(function(c) {
-    return widthOf2(c) == null;
+    return widthOf2(c) == null && c.grid !== false;
   });
+  let lastGridCol = vis.length - 1;
+  while (lastGridCol > 0 && vis[lastGridCol].grid === false) lastGridCol--;
   let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
+    if (c.grid === false) return;
     const w = widthOf2(c) != null ? widthOf2(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
@@ -6464,7 +6521,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
       s["--aura-cell-flex"] = g + " 1 0";
       s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
     } else {
-      s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
+      s["--aura-cell-flex"] = !hasFlex && i === lastGridCol ? "1 0 auto" : "none";
       s["--aura-cell-w"] = w + "px";
     }
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
@@ -6602,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];
@@ -6613,7 +6676,12 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
   const cardHidden = [];
   for (let ci = 0; ci < nCols; ci++) {
     const col = colAt(ci);
-    cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+    cardHidden.push(
+      stacked ? col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel : (
+        /* before the first measure the layout is CSS's: the DOM check below decides */
+        boxWidth[0] != null && !!col && col.grid === false
+      )
+    );
   }
   function nearestShown(c, dir, ok) {
     if (ok(c)) return c;
@@ -6674,7 +6742,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     r2 = Math.max(0, Math.min(r2, lastR));
     c = Math.max(0, Math.min(c, nCols - 1));
     if (stacked && r2 === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r2 = 1;
-    if (gridRef.current && (r2 === T && hasTotal || stacked)) {
+    if (gridRef.current && (r2 === T && hasTotal || stacked || hasCardOnly)) {
       const shown2 = function(cc) {
         if (cardHidden[cc]) return false;
         const e = gridRef.current.querySelector('[data-rc="' + r2 + ":" + cc + '"]');
@@ -6801,8 +6869,9 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     window.addEventListener("pointerup", up2);
   }
   function moveCol(key, delta) {
+    if (byKey[key] && byKey[key].grid === false) return false;
     const c = byKey[key], group = vis.filter(function(x) {
-      return isPinned(x) === isPinned(c);
+      return isPinned(x) === isPinned(c) && x.grid !== false;
     });
     const gi = group.indexOf(c), target = group[gi + delta];
     if (!target) return false;
@@ -6861,7 +6930,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
   }
   function columnMenuItems(c) {
     const group = vis.filter(function(x) {
-      return isPinned(x) === isPinned(c);
+      return isPinned(x) === isPinned(c) && x.grid !== false;
     }), gi = group.indexOf(c);
     const items2 = [];
     if (c.sortable)
@@ -6914,7 +6983,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
       {
         label: t.hideColumn,
         icon: /* @__PURE__ */ React34.createElement(IconEyeOff, null),
-        disabled: shown.length <= 1,
+        disabled: gridShown <= 1,
         onSelect: function() {
           setHidden(c.key, true);
         }
@@ -6923,13 +6992,15 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     return items2;
   }
   function pickerItems() {
-    return order.map(function(k) {
+    return order.filter(function(k) {
+      return byKey[k].grid !== false;
+    }).map(function(k) {
       const c = byKey[k], on = hidden.indexOf(k) < 0;
       return {
         label: c.label || (c.actions ? t.actions : c.key),
         checked: on,
         keepOpen: true,
-        disabled: on && shown.length <= 1,
+        disabled: on && gridShown <= 1,
         onSelect: function() {
           setHidden(k, on);
         }
@@ -7057,10 +7128,11 @@ 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,
+          "data-grid": c.grid === false ? "off" : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -7219,7 +7291,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(
@@ -7447,7 +7519,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() {
@@ -7542,7 +7614,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

@@ -59,7 +59,7 @@ function below(w, threshold) {
   return w < threshold * (1 - 0.5 / Q);
 }
 function hidePx(c) {
-  if (c.hideBelow == null) return void 0;
+  if (c.hideBelow == null || c.grid === false) return void 0;
   const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
   return px != null && px > 0 ? px : void 0;
 }
@@ -312,10 +312,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }).map(function(k) {
     return byKey[k];
   }).filter(function(c) {
-    return !tooNarrow(c);
+    return !tooNarrow(c) && (c.grid !== false || !!props.stackBelow);
   });
+  const hasCardOnly = shown.some(function(c) {
+    return c.grid === false;
+  });
+  const gridShown = shown.filter(function(c) {
+    return c.grid !== false;
+  }).length;
   function isPinned(c) {
-    return pinnedKeys.indexOf(c.key) >= 0 && c.width != null;
+    return pinnedKeys.indexOf(c.key) >= 0 && c.width != null && c.grid !== false;
   }
   const vis = shown.filter(isPinned).concat(
     shown.filter(function(c) {
@@ -363,7 +369,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return {
       "data-card": part,
       "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
-      "data-hide": lv ? String(lv) : void 0
+      "data-hide": lv ? String(lv) : void 0,
+      "data-grid": c.grid === false ? "off" : void 0
     };
   }
   const hasFields = vis.some(function(c, i) {
@@ -371,10 +378,13 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return p === "field" || p === "wide";
   });
   const hasFlex = vis.some(function(c) {
-    return widthOf(c) == null;
+    return widthOf(c) == null && c.grid !== false;
   });
+  let lastGridCol = vis.length - 1;
+  while (lastGridCol > 0 && vis[lastGridCol].grid === false) lastGridCol--;
   let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
+    if (c.grid === false) return;
     const w = widthOf(c) != null ? widthOf(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
@@ -404,7 +414,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       s["--aura-cell-flex"] = g + " 1 0";
       s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
     } else {
-      s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
+      s["--aura-cell-flex"] = !hasFlex && i === lastGridCol ? "1 0 auto" : "none";
       s["--aura-cell-w"] = w + "px";
     }
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
@@ -542,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];
@@ -553,7 +569,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const cardHidden = [];
   for (let ci = 0; ci < nCols; ci++) {
     const col = colAt(ci);
-    cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+    cardHidden.push(
+      stacked ? col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel : (
+        /* before the first measure the layout is CSS's: the DOM check below decides */
+        boxWidth[0] != null && !!col && col.grid === false
+      )
+    );
   }
   function nearestShown(c, dir, ok) {
     if (ok(c)) return c;
@@ -614,7 +635,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     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) || noCardSel)) r = 1;
-    if (gridRef.current && (r === T && hasTotal || stacked)) {
+    if (gridRef.current && (r === T && hasTotal || stacked || hasCardOnly)) {
       const shown2 = function(cc) {
         if (cardHidden[cc]) return false;
         const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
@@ -741,8 +762,9 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     window.addEventListener("pointerup", up);
   }
   function moveCol(key, delta) {
+    if (byKey[key] && byKey[key].grid === false) return false;
     const c = byKey[key], group = vis.filter(function(x) {
-      return isPinned(x) === isPinned(c);
+      return isPinned(x) === isPinned(c) && x.grid !== false;
     });
     const gi = group.indexOf(c), target = group[gi + delta];
     if (!target) return false;
@@ -801,7 +823,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }
   function columnMenuItems(c) {
     const group = vis.filter(function(x) {
-      return isPinned(x) === isPinned(c);
+      return isPinned(x) === isPinned(c) && x.grid !== false;
     }), gi = group.indexOf(c);
     const items = [];
     if (c.sortable)
@@ -854,7 +876,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       {
         label: t.hideColumn,
         icon: /* @__PURE__ */ React.createElement(IconEyeOff, null),
-        disabled: shown.length <= 1,
+        disabled: gridShown <= 1,
         onSelect: function() {
           setHidden(c.key, true);
         }
@@ -863,13 +885,15 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return items;
   }
   function pickerItems() {
-    return order.map(function(k) {
+    return order.filter(function(k) {
+      return byKey[k].grid !== false;
+    }).map(function(k) {
       const c = byKey[k], on = hidden.indexOf(k) < 0;
       return {
         label: c.label || (c.actions ? t.actions : c.key),
         checked: on,
         keepOpen: true,
-        disabled: on && shown.length <= 1,
+        disabled: on && gridShown <= 1,
         onSelect: function() {
           setHidden(k, on);
         }
@@ -997,10 +1021,11 @@ 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,
+          "data-grid": c.grid === false ? "off" : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -1159,7 +1184,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(
@@ -1387,7 +1412,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() {
@@ -1482,7 +1507,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

@@ -127,6 +127,12 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** 5.85 (Chamber-OS 198): `false` — the column shows only in stacked cards (below `stackBelow`), never in the grid,
+	 * the reverse of `card: 'hide'`. Its place in the card still follows `card`. It spends no width-query level, takes no
+	 * width in the grid, isn't pinned and isn't in the columns button; `hideBelow` is ignored. Needs `stackBelow` (without
+	 * it the column isn't rendered). Its header isn't in the grid, so it can't be sorted, moved or hidden from the UI —
+	 * sort by it through `sort`; a controlled `hidden` that lists it hides it in the cards too. Default true. */
+	grid?: boolean | undefined;
 	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
 	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
 	 * most 10; ignored on a `pill` column. */
@@ -872,7 +878,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. */
@@ -1789,7 +1798,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

@@ -127,6 +127,12 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** 5.85 (Chamber-OS 198): `false` — the column shows only in stacked cards (below `stackBelow`), never in the grid,
+	 * the reverse of `card: 'hide'`. Its place in the card still follows `card`. It spends no width-query level, takes no
+	 * width in the grid, isn't pinned and isn't in the columns button; `hideBelow` is ignored. Needs `stackBelow` (without
+	 * it the column isn't rendered). Its header isn't in the grid, so it can't be sorted, moved or hidden from the UI —
+	 * sort by it through `sort`; a controlled `hidden` that lists it hides it in the cards too. Default true. */
+	grid?: boolean | undefined;
 	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
 	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
 	 * most 10; ignored on a `pill` column. */
@@ -872,7 +878,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. */
@@ -1789,7 +1798,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/server/index.cjs

@@ -1228,6 +1228,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, [
@@ -1257,8 +1296,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__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.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__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
@@ -1358,7 +1399,13 @@ function emptyStateElement(props, ref) {
         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" })),
+    props.icon === false ? null : /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(
+      Icon,
+      {
+        name: props.icon || (props.tone === "danger" ? /* @__PURE__ */ React3.createElement(IconTriangleAlert, null) : /* @__PURE__ */ React3.createElement(IconInbox, null)),
+        size: props.size === "sm" ? "md" : "lg"
+      }
+    )),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),
     props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-empty__text" }, props.description) : null,
     props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-empty__action" }, props.action) : null

package/dist/server/index.d.cts

@@ -114,7 +114,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. */
@@ -233,7 +236,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 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/server/index.d.ts

@@ -114,7 +114,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. */
@@ -233,7 +236,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 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/server/index.js

@@ -1161,6 +1161,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, [
@@ -1190,8 +1229,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__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.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__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
@@ -1291,7 +1332,13 @@ function emptyStateElement(props, ref) {
         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" })),
+    props.icon === false ? null : /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(
+      Icon,
+      {
+        name: props.icon || (props.tone === "danger" ? /* @__PURE__ */ React3.createElement(IconTriangleAlert, null) : /* @__PURE__ */ React3.createElement(IconInbox, null)),
+        size: props.size === "sm" ? "md" : "lg"
+      }
+    )),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),
     props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-empty__text" }, props.description) : null,
     props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-empty__action" }, props.action) : null

package/dist/styles.css

@@ -2659,6 +2659,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-h1 (width < 9999.5px) { .aura-table { --aura-h1-on: 0; } .aura-table [data-hide='1'] { display: none; } }
 @container aura-h2 (width < 9999.5px) { .aura-table { --aura-h2-on: 0; } .aura-table [data-hide='2'] { display: none; } }
 @container aura-h3 (width < 9999.5px) { .aura-table { --aura-h3-on: 0; } .aura-table [data-hide='3'] { display: none; } }
+/* 5.85 (Chamber-OS 198): grid: false — in the cards only. Hidden while the table is at or above stackBelow (the grid);
+ * DataTable doesn't render such a column without stackBelow. */
+@container aura-stack (width >= 9999.5px) { .aura-table [data-grid='off'] { display: none; } }
 
 /* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
  * beside it, `actions` columns go top-right, the rest are label/value fields two to a line. Column headers stay for

package/dist/styles.layer.css

@@ -2661,6 +2661,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-h1 (width < 9999.5px) { .aura-table { --aura-h1-on: 0; } .aura-table [data-hide='1'] { display: none; } }
 @container aura-h2 (width < 9999.5px) { .aura-table { --aura-h2-on: 0; } .aura-table [data-hide='2'] { display: none; } }
 @container aura-h3 (width < 9999.5px) { .aura-table { --aura-h3-on: 0; } .aura-table [data-hide='3'] { display: none; } }
+/* 5.85 (Chamber-OS 198): grid: false — in the cards only. Hidden while the table is at or above stackBelow (the grid);
+ * DataTable doesn't render such a column without stackBelow. */
+@container aura-stack (width >= 9999.5px) { .aura-table [data-grid='off'] { display: none; } }
 
 /* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
  * beside it, `actions` columns go top-right, the rest are label/value fields two to a line. Column headers stay for

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.84.0",
+  "version": "5.86.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",