@jirawatpyk/aura-react 5.85.0 → 5.86.0

package/README.md

@@ -248,6 +248,12 @@ 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.

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];
@@ -7093,7 +7146,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,
@@ -7256,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(
@@ -7484,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() {
@@ -7579,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
@@ -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];
@@ -7075,7 +7128,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,
@@ -7238,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(
@@ -7466,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() {
@@ -7561,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

@@ -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];
@@ -1015,7 +1021,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,
@@ -1178,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(
@@ -1406,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() {
@@ -1501,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

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

@@ -878,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. */
@@ -1795,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.85.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",