@jirawatpyk/aura-react 5.12.0 → 5.14.0

package/README.md

@@ -186,6 +186,34 @@ 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.14 — Chamber-OS addenda 15–16, the small items
+
+- **EmptyState `headingLevel={false}`** (item 86): the title is a `<p>`, so an empty state inside a card or list adds nothing to the page's heading outline. EmptyState has no live-region role unless you pass `role`.
+- **Stat from `/server`, with `headingLevel`** (item 88): `import { Stat } from '@jirawatpyk/aura-react/server'` renders the same HTML as the root Stat (no `onClick` there; `href` renders `linkComponent`, else `<a>`), `loading` included. `headingLevel={2}` makes the label a heading — on a link tile too; with `onClick` it stays a span (a heading can't sit in a button) and a dev notice says so.
+- **Drawer body scroll padding** (item 91): a field scrolled into view in a Drawer (focus, a phone's keyboard) keeps 16px clear of the head and the foot, so its focus ring is never cut (WCAG 2.4.11).
+- **AppShell `contentPadding={false}`** (item 97): `<main>` has no padding, for pages whose containers own the padding and column.
+- **Button keeps a passed `aria-disabled`** (item 102): `<Button aria-disabled>` stays focusable and in the Tab order, is announced as unavailable, looks unavailable (disabled opacity, not-allowed cursor) and ignores clicks and Enter — a gated confirm. Hovering it changes nothing. `loading` still sets it. In tests, click such a button with `{ force: true }`. This is for buttons: a Button with `href` takes `disabled` (it drops the link and sets `aria-disabled` itself), and IconButton is unchanged.
+- **Avatar from `/server`** (item 103): initials and colour, same HTML as the root Avatar. Falling back to initials when an image fails needs the client.
+- **`--aura-shell-bar-height`** (item 104): the top bar's height on `.aura-shell`, for sticky offsets under it — `top: var(--aura-shell-bar-height)`. AppShell measures the bar, so a header that wraps to two lines on a phone gives its real height; the stylesheet's 56px covers the server's HTML until then. It is set inline on the shell, so read it rather than override it. It is 0 when there is no bar (no `header`, no `nav`), and from 1024px when the bar only held the menu button. The bar is now `box-sizing: border-box`, so it is 56px everywhere (it was 57px where no border-box reset applied).
+- **`--aura-fg-warning`** (item 106): warning text on the page — amber-800 in light (7.1:1 on surface, 6.8:1 on canvas), amber-300 in dark (12.3:1, 13.9:1), checked in CI. `--aura-status-*-fg` are only for text on their pill's own fill; the warning one is near-black in dark mode.
+- **DataTable cards start-align every field** (item 108): a column with `align: 'end'` is right-aligned in the grid and starts under its label in the stacked cards, with tabular figures in both. A visible change to cards with amount columns.
+- **Tabs `current="location"`** (item 107): link tabs to sections of the same page mark the current one `aria-current="location"` (default `page`).
+
+## 5.13 — Chamber-OS addendum 13 (board parity)
+
+- **DataTable card options** (item 80): per column, `card: 'hide'` leaves it out of the stacked card (the grid keeps it), `card: 'title' | 'pill' | 'field'` places it (a declared title or pill replaces the automatic one; the automatic title is the first column without a `card` — normally the first column — skipping `actions` columns), and `cardOrder` orders the fields (lowest first; others sort by column index) without touching the grid's order. `hideSelectionInCards` drops the row boxes and the select-all line from the cards only; the selection is kept, and Space doesn't change it while cards show. Screen readers and arrow keys follow the grid's order and skip what the card leaves out (the tab stop too); each remaining field keeps its label; loading skeletons leave out the same columns. With `getRowHref`, the link is the first column's text, so hiding that column in cards leaves the card clickable but without a link to Tab to. All in CSS, so the server HTML is already right.
+  ```tsx
+  <DataTable stackBelow={640} hideSelectionInCards columns={[{ key: 'company', label: 'COMPANY' }, { key: 'flag', label: 'COUNTRY', card: 'hide' }, { key: 'id', label: 'MEMBER NO.', cardOrder: 1 }, …]} />
+  ```
+- **Table `align="middle"` and `bordered={false}`** (item 81): `middle` centres body and footer cells on their row (default `top`); `bordered={false}` drops the frame and the outer cells' side padding, so a table inside a Card lines up with its heading. Stacked rows keep their layout. `Table`'s type no longer accepts the obsolete HTML `align` attribute (`left | center | right`).
+- **EmptyState `tone="danger"`** (item 82): the danger tint, a danger-coloured icon and, with `bordered`, a solid danger frame — for "couldn't load". It stays quiet (no role); pass `role="alert"` to interrupt. EmptyState now passes `id`, `data-*`, `aria-*`, `role` and `style` to its root.
+- **FilterBar search filling the row** (item 83): that is 5.12's `searchGrow`; nothing new was needed.
+- **Td `card="title" | "action"`** (item 84; also on a row header, `Th scope="row"`): in a stacked Table row the title takes the first line without a label, the action sits at the end of that line at its natural size, and the other cells fall two to a line below. A long title wraps before the action. The desktop table is unchanged.
+  ```tsx
+  <Tr><Td card="title">{company} <span className="aura-table__mono">{no}</span></Td><Td>{type}</Td><Td>{date}</Td>
+    <Td card="action"><Button size="sm" variant="secondary">Review</Button></Td></Tr>
+  ```
+
 ## 5.12 — Chamber-OS addendum 12 (compact filters)
 
 - **FilterSelect** (item 79): a filter for `FilterBar` drawn as one small button — "Status All ▾" — as wide as its words, so several filters and a toggle `Tag` share a row, three and a Tag even at 375px. It is Select underneath: it opens the same AURA list (on phones too, as Select does since 5.3), with the same keys (arrows, typing, Enter, Escape), `name` in a form and a real `<select>` before hydration (with JavaScript off a choice still posts with the form, but the face keeps the server's value). `onChange` gets the value, so with react-hook-form use a `Controller` (`render={({ field }) => <FilterSelect label="Plan" {...field} options={plans} />}`), not `register`. `label` is the filter's name and its accessible name; screen readers hear the chosen option as the value. The first option is the "all" choice: `allLabel` is the shorter word its face shows ("All" for "All statuses"). A long value ("Diamond Partnership") shows in full and the button moves to the next row instead of cutting it. Right to left, the list opens from the face's right edge.

package/dist/aura.bundle.js

@@ -674,12 +674,31 @@ window.Aura = (() => {
     );
   }
   function emptyStateElement(props, ref) {
-    const HT = "h" + (props.headingLevel || 3);
+    const HT = props.headingLevel === false ? "p" : "h" + (props.headingLevel || 3);
+    const rest = omit(props, [
+      "title",
+      "description",
+      "icon",
+      "action",
+      "size",
+      "bordered",
+      "headingLevel",
+      "tone",
+      "className",
+      "children"
+    ]);
     return /* @__PURE__ */ React4.createElement(
       "div",
       {
+        ...rest,
         ref,
-        className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+        className: cx(
+          "aura-empty",
+          props.size === "sm" && "is-sm",
+          props.bordered && "is-bordered",
+          props.tone === "danger" && "is-danger",
+          props.className
+        )
       },
       /* @__PURE__ */ 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" })),
       /* @__PURE__ */ React4.createElement(HT, { className: "aura-empty__title" }, props.title),
@@ -687,6 +706,66 @@ window.Aura = (() => {
       props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-empty__action" }, props.action) : null
     );
   }
+  function statElement(props, ref, Link) {
+    const ch = props.change;
+    const dir = ch && (ch.direction || "flat");
+    const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
+    const v = props.value;
+    const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
+    const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
+    const interactive = !!(props.href || props.onClick);
+    if (props.headingLevel && Tag3 === "button")
+      devWarnOnce(
+        "stat-heading-button",
+        "Stat `headingLevel` is ignored with `onClick`: a heading can\u2019t sit in a button. Use `href`, or put the heading outside."
+      );
+    const LabelTag = props.headingLevel && Tag3 !== "button" ? "h" + props.headingLevel : "span";
+    const HeadTag = LabelTag === "span" ? "span" : "div";
+    return /* @__PURE__ */ React4.createElement(
+      Tag3,
+      {
+        ref,
+        className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
+        href: props.href,
+        onClick: props.onClick,
+        type: Tag3 === "button" ? "button" : void 0,
+        "aria-busy": props.loading || void 0
+      },
+      /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon })) : null),
+      props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React4.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+      ch && !props.loading || props.caption ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React4.createElement(
+        Icon,
+        {
+          name: dir === "up" ? /* @__PURE__ */ React4.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React4.createElement(IconTrendingDown, null) : /* @__PURE__ */ React4.createElement(IconMinus, null),
+          size: 14
+        }
+      ), /* @__PURE__ */ React4.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
+    );
+  }
+  var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+  function initials(name) {
+    const parts = String(name || "?").trim().split(/\s+/);
+    return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
+  }
+  function avatarElement(props, ref, broken, onError) {
+    const size = props.size || "md";
+    let hash = 0;
+    String(props.name || "").split("").forEach(function(ch) {
+      hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+    });
+    const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
+    return /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        ref,
+        className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone2, props.className),
+        role: "img",
+        "aria-label": props.name + (props.status ? ", " + props.status : "")
+      },
+      props.src && broken !== props.src ? /* @__PURE__ */ React4.createElement("img", { key: props.src, src: props.src, alt: "", onError }) : /* @__PURE__ */ React4.createElement("span", { "aria-hidden": true }, initials(props.name)),
+      props.status === "online" ? /* @__PURE__ */ React4.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+    );
+  }
   function buttonClass(opts = {}) {
     return cx(
       "aura-btn",
@@ -1175,6 +1254,8 @@ window.Aura = (() => {
       const props = all;
       const variant = props.variant || "primary";
       const loading = !!props.loading;
+      const ad = props["aria-disabled"];
+      const blocked = loading || ad === true || ad === "true";
       const rest = omit(props, [
         "variant",
         "className",
@@ -1201,8 +1282,8 @@ window.Aura = (() => {
             className: props.className
           }),
           "aria-busy": loading || void 0,
-          "aria-disabled": loading || void 0,
-          onClick: loading ? function(e) {
+          "aria-disabled": blocked || void 0,
+          onClick: blocked ? function(e) {
             e.preventDefault();
           } : props.onClick
         },
@@ -4811,6 +4892,7 @@ window.Aura = (() => {
       [measure, levelShape]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+    const noCardSel = !!props.hideSelectionInCards && selectable;
     useIsoLayoutEffect(
       function() {
         if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
@@ -4911,9 +4993,38 @@ window.Aura = (() => {
     const pillKey = (vis.filter(function(c, i) {
       return i > 0 && c.pill;
     })[0] || { key: "" }).key;
-    function cardPart(c, i) {
-      return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+    const ownTitle = vis.some(function(c) {
+      return c.card === "title";
+    }), ownPill = vis.some(function(c) {
+      return c.card === "pill";
+    });
+    let autoTitle = -1;
+    if (!ownTitle) {
+      for (let i = 0; i < vis.length; i++)
+        if (!vis[i].card && (i === 0 || !vis[i].actions)) {
+          autoTitle = i;
+          break;
+        }
     }
+    function cardPart(c, i) {
+      if (c.card) return c.card;
+      if (i === autoTitle) return "title";
+      if (c.key === pillKey && !ownPill) return "pill";
+      return c.actions ? "actions" : "field";
+    }
+    const cardRank = {};
+    if (vis.some(function(c) {
+      return c.cardOrder != null;
+    }))
+      vis.map(function(c, i) {
+        return { c, i, o: c.cardOrder != null ? c.cardOrder : i };
+      }).filter(function(x) {
+        return cardPart(x.c, x.i) === "field";
+      }).sort(function(a, b) {
+        return a.o - b.o || a.i - b.i;
+      }).forEach(function(x, n3) {
+        cardRank[x.c.key] = n3;
+      });
     function cardAttrs(c, i) {
       const part = cardPart(c, i), lv = hideLevel(c);
       return {
@@ -4955,6 +5066,7 @@ window.Aura = (() => {
         s["--aura-cell-w"] = w + "px";
       }
       if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
+      if (cardRank[c.key] != null) s["--aura-card-order"] = String(5 + cardRank[c.key]);
       return s;
     }
     const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
@@ -5095,9 +5207,37 @@ window.Aura = (() => {
     function colAt(ci) {
       return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
     }
+    const cardHidden = [];
+    for (let ci = 0; ci < nCols; ci++) {
+      const col = colAt(ci);
+      cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+    }
+    function nearestShown(c, dir, ok) {
+      if (ok(c)) return c;
+      for (let d = 1; d < nCols; d++) {
+        const a = c + d * dir, b = c - d * dir;
+        if (a >= 0 && a < nCols && ok(a)) return a;
+        if (b >= 0 && b < nCols && ok(b)) return b;
+      }
+      return c;
+    }
+    const acShown = nearestShown(ac, 1, function(cc) {
+      return !cardHidden[cc];
+    });
+    const lastFocus = React31.useRef(null);
+    React31.useEffect(
+      function() {
+        const was = lastFocus.current, g = gridRef.current;
+        if (!stacked || !was || !g || !g.contains(was) || was.getClientRects().length > 0) return;
+        if (document.activeElement && document.activeElement !== document.body && document.activeElement !== was) return;
+        const el = g.querySelector('[data-rc="' + Math.max(1, ar) + ":" + acShown + '"]');
+        if (el && el.getClientRects().length > 0) el.focus();
+      },
+      [stacked]
+    );
     function tabFor(r, c) {
       if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
-      return r === ar && c === ac ? 0 : -1;
+      return r === ar && c === acShown ? 0 : -1;
     }
     React31.useEffect(function() {
       const p = pending.current;
@@ -5121,26 +5261,17 @@ window.Aura = (() => {
         el.focus();
       }
     });
-    function focusCell(r, c) {
+    function focusCell(r, c, dir) {
       r = Math.max(0, Math.min(r, lastR));
       c = Math.max(0, Math.min(c, nCols - 1));
-      if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
-      if (gridRef.current && r === T && hasTotal) {
+      if (stacked && r === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r = 1;
+      if (gridRef.current && (r === T && hasTotal || stacked)) {
         const shown2 = function(cc) {
+          if (cardHidden[cc]) return false;
           const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
           return !!e && e.getClientRects().length > 0;
         };
-        if (!shown2(c))
-          for (let d = 1; d < nCols; d++) {
-            if (c + d < nCols && shown2(c + d)) {
-              c = c + d;
-              break;
-            }
-            if (c - d >= 0 && shown2(c - d)) {
-              c = c - d;
-              break;
-            }
-          }
+        c = nearestShown(c, dir || 1, shown2);
       }
       activeState[1]({ r, c });
       pending.current = { r, c };
@@ -5400,7 +5531,7 @@ window.Aura = (() => {
       } else if (r === 0 && col && (e.altKey && k === "ArrowDown" || k === "ContextMenu" || e.shiftKey && k === "F10") && controls)
         openMenu("col", col.key, target, { r: 0, c });
       else if (k === "ArrowRight") focusCell(r, c + 1);
-      else if (k === "ArrowLeft") focusCell(r, c - 1);
+      else if (k === "ArrowLeft") focusCell(r, c - 1, -1);
       else if (k === "ArrowDown") {
         if (r < lastR) focusCell(r + 1, c);
         else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -5408,7 +5539,7 @@ window.Aura = (() => {
         if (r > 1 || r === 1 && !(pageSize && page > 1)) focusCell(r - 1, c);
         else if (r === 1 && goPage(page - 1, { r: pageSize, c })) activeState[1]({ r: pageSize, c });
       } else if (k === "Home") focusCell(e.ctrlKey ? 1 : r, 0);
-      else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
+      else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1, -1);
       else if (k === "PageDown") {
         if (pageSize) {
           if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -5428,7 +5559,7 @@ window.Aura = (() => {
           if (pageKeys.length) toggleAll();
         } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
         else if (r > 0 && k === " " && selectable) {
-          if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+          if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
         } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
           followRow(target.closest('[role="row"]'), e);
         else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
@@ -5488,6 +5619,7 @@ window.Aura = (() => {
             "aria-colindex": ci + 1,
             style: cellStyle(c, i),
             "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
+            "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
             tabIndex: tabFor(0, ci),
             "data-rc": "0:" + ci,
             className: cx(
@@ -5853,7 +5985,7 @@ window.Aura = (() => {
             ),
             style: cellStyle(c, j),
             ...cardAttrs(c, j),
-            "data-label": j === 0 ? void 0 : c.label || t.totals
+            "data-label": cardPart(c, j) === "title" ? void 0 : c.label || t.totals
           },
           props.footer[c.key]
         );
@@ -5881,6 +6013,7 @@ window.Aura = (() => {
         className: cx(
           "aura-table",
           stacked && "aura-table--stacked",
+          noCardSel && "aura-table--cards-nosel",
           scrolledX[0] && "is-scrolled-x",
           refreshing && "is-refreshing",
           !levels.length && props.className
@@ -5898,8 +6031,16 @@ window.Aura = (() => {
           className: "aura-table__scroll",
           onMouseOver: showFull,
           onMouseLeave: hideFull,
-          onFocus: showFull,
-          onBlur: hideFull,
+          onFocus: function(e) {
+            lastFocus.current = e.target;
+            showFull(e);
+          },
+          onBlur: function(e) {
+            const to = e.relatedTarget;
+            if ((!to || !e.currentTarget.contains(to)) && e.target.getClientRects().length > 0)
+              lastFocus.current = null;
+            hideFull();
+          },
           style: scrollStyle,
           role: "grid",
           "aria-label": props.label,
@@ -6058,7 +6199,7 @@ window.Aura = (() => {
               key: t.id,
               href: t.href,
               className: tabCls(on, own.className),
-              "aria-current": on ? "page" : void 0,
+              "aria-current": on ? props.current || "page" : void 0,
               onClick: function(e) {
                 if (own.onClick) own.onClick(e);
                 if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
@@ -6405,39 +6546,11 @@ window.Aura = (() => {
 
   // src/Avatar.tsx
   var React36 = __toESM(require_react(), 1);
-  var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
-  function initials(name) {
-    const parts = String(name || "?").trim().split(/\s+/);
-    return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
-  }
   var Avatar = React36.forwardRef(function Avatar2(props, ref) {
-    const size = props.size || "md", errState = React36.useState(null);
-    let hash = 0;
-    String(props.name || "").split("").forEach(function(ch) {
-      hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+    const errState = React36.useState(null);
+    return avatarElement(props, ref, errState[0], function() {
+      errState[1](props.src || null);
     });
-    const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
-    return /* @__PURE__ */ React36.createElement(
-      "span",
-      {
-        ref,
-        className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone2, props.className),
-        role: "img",
-        "aria-label": props.name + (props.status ? ", " + props.status : "")
-      },
-      props.src && errState[0] !== props.src ? /* @__PURE__ */ React36.createElement(
-        "img",
-        {
-          key: props.src,
-          src: props.src,
-          alt: "",
-          onError: function() {
-            errState[1](props.src || null);
-          }
-        }
-      ) : /* @__PURE__ */ React36.createElement("span", { "aria-hidden": true }, initials(props.name)),
-      props.status === "online" ? /* @__PURE__ */ React36.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
-    );
   });
 
   // src/Stack.tsx
@@ -6558,6 +6671,27 @@ window.Aura = (() => {
       if (shared) navState[1](id);
       if (navEl && navEl.props.onChange) navEl.props.onChange(id);
     }
+    const rootRef = React41.useRef(null);
+    const barRef = React41.useRef(null);
+    const mergedRef = useMergedRef(ref, rootRef);
+    const hasBar = !!(props.header || props.nav);
+    useIsoLayoutEffect(
+      function() {
+        const root = rootRef.current, bar = barRef.current;
+        if (!root || !bar) return;
+        function sync() {
+          root.style.setProperty("--aura-shell-bar-height", bar.getBoundingClientRect().height + "px");
+        }
+        sync();
+        const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+        if (ro) ro.observe(bar);
+        return function() {
+          if (ro) ro.disconnect();
+          root.style.removeProperty("--aura-shell-bar-height");
+        };
+      },
+      [hasBar]
+    );
     const deskNav = navEl && shared ? React41.cloneElement(navEl, { value: navState[0], onChange: onNav }) : props.nav;
     const drawerNav = navEl ? React41.cloneElement(navEl, {
       value: shared ? navState[0] : navEl.props.value,
@@ -6569,32 +6703,56 @@ window.Aura = (() => {
       collapsed: false,
       collapsible: false
     }) : props.nav;
-    return /* @__PURE__ */ React41.createElement("div", { ref, className: cx("aura-shell", props.bottomNav && "aura-shell--bottomnav", props.className) }, props.nav ? /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__nav" }, deskNav) : null, props.nav ? /* @__PURE__ */ React41.createElement(
-      Drawer,
+    return /* @__PURE__ */ React41.createElement(
+      "div",
       {
-        open,
-        onClose: function() {
-          setOpen(false);
-        },
-        side: "left",
-        size: "nav",
-        "aria-label": props.navLabel || t.navigation,
-        dismissible: true
+        ref: mergedRef,
+        className: cx(
+          "aura-shell",
+          props.bottomNav && "aura-shell--bottomnav",
+          /* 5.14: no top bar at all, or one that only holds the menu button (gone from lg up): the bar-height token is 0. */
+          !props.header && !props.nav && "aura-shell--no-bar",
+          !props.header && props.nav && "aura-shell--menu-bar",
+          props.className
+        )
       },
-      drawerNav
-    ) : null, /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React41.createElement("header", { className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React41.createElement(
-      IconButton,
-      {
-        className: "aura-shell__menu",
-        icon: /* @__PURE__ */ React41.createElement(IconMenu, null),
-        label: props.menuLabel || t.openNav,
-        size: "md",
-        onClick: function() {
-          setOpen(true);
+      props.nav ? /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__nav" }, deskNav) : null,
+      props.nav ? /* @__PURE__ */ React41.createElement(
+        Drawer,
+        {
+          open,
+          onClose: function() {
+            setOpen(false);
+          },
+          side: "left",
+          size: "nav",
+          "aria-label": props.navLabel || t.navigation,
+          dismissible: true
         },
-        "aria-expanded": open
-      }
-    ) : null, /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React41.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
+        drawerNav
+      ) : null,
+      /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React41.createElement("header", { ref: barRef, className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React41.createElement(
+        IconButton,
+        {
+          className: "aura-shell__menu",
+          icon: /* @__PURE__ */ React41.createElement(IconMenu, null),
+          label: props.menuLabel || t.openNav,
+          size: "md",
+          onClick: function() {
+            setOpen(true);
+          },
+          "aria-expanded": open
+        }
+      ) : null, /* @__PURE__ */ React41.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React41.createElement(
+        "main",
+        {
+          className: cx("aura-shell__content", props.contentPadding === false && "is-flush"),
+          id: props.mainId || "main",
+          tabIndex: -1
+        },
+        props.children
+      ), props.bottomNav || null)
+    );
   });
 
   // src/ActionBar.tsx
@@ -6704,7 +6862,7 @@ window.Aura = (() => {
     return out;
   }
   var Table = React44.forwardRef(function Table2(props, ref) {
-    const { caption, captionHidden, density, stackBelow, className, children, ...rest } = props;
+    const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
     const labels = stackBelow ? headerLabels(children) : null;
     if (labels && !labels.length)
       devWarnOnce(
@@ -6732,7 +6890,7 @@ window.Aura = (() => {
       "div",
       {
         ref: wrap,
-        className: cx("aura-tbl-wrap", stackBelow && "is-stackable"),
+        className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
         "data-density": density,
         tabIndex: scrolls ? 0 : void 0,
         role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
@@ -6743,7 +6901,12 @@ window.Aura = (() => {
         "table",
         {
           ref,
-          className: cx("aura-tbl", stackBelow && "aura-tbl--stack-" + stackBelow, className),
+          className: cx(
+            "aura-tbl",
+            stackBelow && "aura-tbl--stack-" + stackBelow,
+            align === "middle" && "aura-tbl--middle",
+            className
+          ),
           role: stackBelow ? "table" : void 0,
           ...rest
         },
@@ -6791,7 +6954,7 @@ window.Aura = (() => {
     );
   }
   var Th = React44.forwardRef(function Th2(props, ref) {
-    const { align, numeric, mono, className, scope, label, ...rest } = props;
+    const { align, numeric, mono, className, scope, label, card, ...rest } = props;
     const stacked = React44.useContext(StackLabels) != null;
     return /* @__PURE__ */ React44.createElement(
       "th",
@@ -6800,14 +6963,16 @@ window.Aura = (() => {
         scope: scope || "col",
         className: cellClass("aura-tbl__th", props),
         role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
+        "data-card": stacked && (card === "title" || card === "action") ? card : void 0,
         ...rest
       }
     );
   });
   var Td = React44.forwardRef(function Td2(props, ref) {
-    const { align, numeric, mono, className, scope, label, ...rest } = props;
+    const { align, numeric, mono, className, scope, label, card, ...rest } = props;
     const labels = React44.useContext(StackLabels), col = React44.useContext(ColumnIndex);
-    const shown = labels ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
+    const slot = labels && (card === "title" || card === "action") ? card : void 0;
+    const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
     return /* @__PURE__ */ React44.createElement(
       "td",
       {
@@ -6815,6 +6980,7 @@ window.Aura = (() => {
         className: cellClass("aura-tbl__td", props),
         role: labels ? "cell" : void 0,
         "data-label": shown || void 0,
+        "data-card": slot,
         ...rest
       }
     );
@@ -6890,34 +7056,8 @@ window.Aura = (() => {
   // src/Stat.tsx
   var React47 = __toESM(require_react(), 1);
   var Stat = React47.forwardRef(function Stat2(props, ref) {
-    const ch = props.change;
-    const dir = ch && (ch.direction || "flat");
-    const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
     const Link = useLinkComponent(props.linkComponent);
-    const v = props.value;
-    const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-    const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
-    const interactive = !!(props.href || props.onClick);
-    return /* @__PURE__ */ React47.createElement(
-      Tag3,
-      {
-        ref,
-        className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-        href: props.href,
-        onClick: props.onClick,
-        type: Tag3 === "button" ? "button" : void 0,
-        "aria-busy": props.loading || void 0
-      },
-      /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React47.createElement(Icon, { name: props.icon })) : null),
-      props.loading ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React47.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React47.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
-      ch && !props.loading || props.caption ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React47.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React47.createElement(
-        Icon,
-        {
-          name: dir === "up" ? /* @__PURE__ */ React47.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React47.createElement(IconTrendingDown, null) : /* @__PURE__ */ React47.createElement(IconMinus, null),
-          size: 14
-        }
-      ), /* @__PURE__ */ React47.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React47.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
-    );
+    return statElement(props, ref, Link);
   });
 
   // src/TimePicker.tsx