@jirawatpyk/aura-react 5.13.0 → 5.14.0

package/README.md

@@ -186,6 +186,19 @@ 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.

package/dist/aura.bundle.js

@@ -674,7 +674,7 @@ 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",
@@ -706,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",
@@ -1194,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",
@@ -1220,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
         },
@@ -6137,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;
@@ -6484,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
@@ -6637,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,
@@ -6648,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
@@ -6977,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

package/dist/cjs/index.cjs

@@ -656,7 +656,7 @@ function badgeElement(props, ref) {
   );
 }
 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",
@@ -688,6 +688,66 @@ function emptyStateElement(props, ref) {
     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",
@@ -1176,6 +1236,8 @@ var Button = React6.forwardRef(
     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",
@@ -1202,8 +1264,8 @@ var Button = React6.forwardRef(
           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
       },
@@ -6119,7 +6181,7 @@ var Tabs = React33.forwardRef(function Tabs2(props, ref) {
             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;
@@ -6466,39 +6528,11 @@ var Breadcrumb = React35.forwardRef(function Breadcrumb2(props, ref) {
 
 // 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
@@ -6619,6 +6653,27 @@ var AppShell = React41.forwardRef(function AppShell2(props, ref) {
     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,
@@ -6630,32 +6685,56 @@ var AppShell = React41.forwardRef(function AppShell2(props, ref) {
     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
@@ -6959,34 +7038,8 @@ var Surface = React46.forwardRef(function Surface2(props, ref) {
 // 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