@jirawatpyk/aura-react 5.12.0 → 5.14.0

package/dist/server/index.js

@@ -958,6 +958,7 @@ var Icon = React2.forwardRef(function Icon2(props, ref) {
 var iconNames = Object.keys(map);
 
 // src/icons.ts
+var IconMinus = /* @__PURE__ */ defineIcon("minus", [["path", { d: "M5 12h14" }]]);
 var IconCircleAlert = /* @__PURE__ */ defineIcon("circle-alert", [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
@@ -1000,6 +1001,14 @@ var IconInbox = /* @__PURE__ */ defineIcon("inbox", [
     { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }
   ]
 ]);
+var IconTrendingUp = /* @__PURE__ */ defineIcon("trending-up", [
+  ["path", { d: "M16 7h6v6" }],
+  ["path", { d: "m22 7-8.5 8.5-5-5L2 17" }]
+]);
+var IconTrendingDown = /* @__PURE__ */ defineIcon("trending-down", [
+  ["path", { d: "M16 17h6v-6" }],
+  ["path", { d: "m22 17-8.5-8.5-5 5L2 7" }]
+]);
 
 // src/display.tsx
 var h2 = React3.createElement;
@@ -1090,12 +1099,31 @@ 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",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React3.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__ */ 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" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),
@@ -1103,6 +1131,66 @@ function emptyStateElement(props, ref) {
     props.action ? /* @__PURE__ */ React3.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 Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const interactive = !!(props.href || props.onClick);
+  if (props.headingLevel && Tag === "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 && Tag !== "button" ? "h" + props.headingLevel : "span";
+  const HeadTag = LabelTag === "span" ? "span" : "div";
+  return /* @__PURE__ */ React3.createElement(
+    Tag,
+    {
+      ref,
+      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
+      href: props.href,
+      onClick: props.onClick,
+      type: Tag === "button" ? "button" : void 0,
+      "aria-busy": props.loading || void 0
+    },
+    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React3.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React3.createElement(
+      Icon,
+      {
+        name: dir === "up" ? /* @__PURE__ */ React3.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React3.createElement(IconTrendingDown, null) : /* @__PURE__ */ React3.createElement(IconMinus, null),
+        size: 14
+      }
+    ), /* @__PURE__ */ React3.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement("img", { key: props.src, src: props.src, alt: "", onError }) : /* @__PURE__ */ React3.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React3.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+}
 function buttonClass(opts = {}) {
   return cx(
     "aura-btn",
@@ -1128,13 +1216,21 @@ function ServerBadge(props) {
 function ServerEmptyState(props) {
   return emptyStateElement(props, void 0);
 }
+function ServerStat(props) {
+  return statElement(omit(props, ["onClick"]), void 0, props.linkComponent || "a");
+}
+function ServerAvatar(props) {
+  return avatarElement(props, void 0, null, void 0);
+}
 export {
   ServerAlert as Alert,
+  ServerAvatar as Avatar,
   ServerBadge as Badge,
   ServerCard as Card,
   ServerEmptyState as EmptyState,
   Icon,
   STRINGS,
+  ServerStat as Stat,
   ServerStatusPill as StatusPill,
   scale as brandScale,
   breakpoints,

package/dist/styles.css

@@ -34,6 +34,16 @@ a.aura-btn { text-decoration: none; }
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
 .aura-btn.is-loading { cursor: progress; }
+/* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
+ * not-allowed cursor and a tooltip still work). */
+button.aura-btn[aria-disabled='true']:not(.is-loading) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+button.aura-btn[aria-disabled='true']:active { transform: none; }
+/* …and hovering it changes nothing: each variant keeps its resting look (the hover rules below are overridden). */
+button.aura-btn--primary[aria-disabled='true']:hover { background: var(--aura-button-primary-bg); }
+button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[aria-disabled='true']:hover,
+button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
+button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
+button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -868,7 +878,11 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
-.aura-drawer__body { flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7; }
+.aura-drawer__body {
+  flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7;
+  /* 5.14 (Chamber-OS 91): a field scrolled into view (focus, the phone keyboard) keeps clear of the head and foot. */
+  scroll-padding-block: var(--aura-space-4);
+}
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
@@ -913,12 +927,18 @@ a.aura-tab { text-decoration: none; }
 .aura-grid-layout.is-auto { grid-template-columns: unset; }
 
 /* ---------- AppShell ---------- */
-.aura-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-shell {
+  display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
+}
+.aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+@media (min-width: 1024px) { .aura-shell--menu-bar { --aura-shell-bar-height: 0px; } }
 .aura-shell__nav { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; }
 .aura-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-shell__bar {
   position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
-  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
+  box-sizing: border-box; min-height: 56px;
+  padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
 }
 /* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
  * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
@@ -935,10 +955,11 @@ a.aura-tab { text-decoration: none; }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
+.aura-shell__content.is-flush { padding: 0; } /* 5.14 (Chamber-OS 97): contentPadding={false} */
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
-.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
+.aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 .aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
@@ -958,7 +979,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat.is-interactive:hover { border-color: var(--aura-border-strong); }
 .aura-stat.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
-.aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
+.aura-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); } /* 5.14: may be a heading */
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
 .aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
 .aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
@@ -1083,6 +1104,10 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
 .aura-empty__action { margin-top: var(--aura-space-3); display: flex; gap: var(--aura-space-3); flex-wrap: wrap; justify-content: center; }
+/* 5.13 (Chamber-OS 82): tone="danger" — a load failure. */
+.aura-empty.is-danger { background: var(--aura-alert-danger-bg); border-radius: var(--aura-radius-lg); }
+.aura-empty.is-danger.is-bordered { border: 1px solid var(--aura-border-danger); }
+.aura-empty.is-danger .aura-empty__icon { background: var(--aura-bg-surface); color: var(--aura-fg-danger); }
 
 /* ---------- Pagination ---------- */
 .aura-pagination { display: flex; align-items: center; gap: var(--aura-space-1); font-family: var(--font-sans); font-size: 13px; }
@@ -1548,6 +1573,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
+ * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
+.aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+.aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > .aura-tbl__caption { padding-inline: 0; }
 /* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
  * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
  * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
@@ -1562,6 +1594,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-md > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1577,6 +1617,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-sm > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1629,6 +1677,17 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
+  .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
+  .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
+  .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* 5.14 (Chamber-OS 108): in a card every field starts under its label; align: 'end' is for the grid (figures stay tabular). */
+  .aura-table__td.is-end { text-align: start; }
+  .aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-start; }
+  /* hideSelectionInCards: no row boxes, no select-all line. */
+  .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
+  .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
   /* 5.11: rowHeight="auto" leaves cards as they are. */
   .aura-table__td--auto { display: block; white-space: nowrap; }
   .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }

package/dist/styles.layer.css

@@ -36,6 +36,16 @@ a.aura-btn { text-decoration: none; }
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
 .aura-btn.is-loading { cursor: progress; }
+/* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
+ * not-allowed cursor and a tooltip still work). */
+button.aura-btn[aria-disabled='true']:not(.is-loading) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+button.aura-btn[aria-disabled='true']:active { transform: none; }
+/* …and hovering it changes nothing: each variant keeps its resting look (the hover rules below are overridden). */
+button.aura-btn--primary[aria-disabled='true']:hover { background: var(--aura-button-primary-bg); }
+button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[aria-disabled='true']:hover,
+button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
+button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
+button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -870,7 +880,11 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
-.aura-drawer__body { flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7; }
+.aura-drawer__body {
+  flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7;
+  /* 5.14 (Chamber-OS 91): a field scrolled into view (focus, the phone keyboard) keeps clear of the head and foot. */
+  scroll-padding-block: var(--aura-space-4);
+}
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
@@ -915,12 +929,18 @@ a.aura-tab { text-decoration: none; }
 .aura-grid-layout.is-auto { grid-template-columns: unset; }
 
 /* ---------- AppShell ---------- */
-.aura-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-shell {
+  display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
+}
+.aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+@media (min-width: 1024px) { .aura-shell--menu-bar { --aura-shell-bar-height: 0px; } }
 .aura-shell__nav { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; }
 .aura-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-shell__bar {
   position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
-  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
+  box-sizing: border-box; min-height: 56px;
+  padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
 }
 /* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
  * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
@@ -937,10 +957,11 @@ a.aura-tab { text-decoration: none; }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
+.aura-shell__content.is-flush { padding: 0; } /* 5.14 (Chamber-OS 97): contentPadding={false} */
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
-.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
+.aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 .aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
@@ -960,7 +981,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat.is-interactive:hover { border-color: var(--aura-border-strong); }
 .aura-stat.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
-.aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
+.aura-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); } /* 5.14: may be a heading */
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
 .aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
 .aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
@@ -1085,6 +1106,10 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
 .aura-empty__action { margin-top: var(--aura-space-3); display: flex; gap: var(--aura-space-3); flex-wrap: wrap; justify-content: center; }
+/* 5.13 (Chamber-OS 82): tone="danger" — a load failure. */
+.aura-empty.is-danger { background: var(--aura-alert-danger-bg); border-radius: var(--aura-radius-lg); }
+.aura-empty.is-danger.is-bordered { border: 1px solid var(--aura-border-danger); }
+.aura-empty.is-danger .aura-empty__icon { background: var(--aura-bg-surface); color: var(--aura-fg-danger); }
 
 /* ---------- Pagination ---------- */
 .aura-pagination { display: flex; align-items: center; gap: var(--aura-space-1); font-family: var(--font-sans); font-size: 13px; }
@@ -1550,6 +1575,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
+ * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
+.aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+.aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > .aura-tbl__caption { padding-inline: 0; }
 /* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
  * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
  * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
@@ -1564,6 +1596,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-md > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1579,6 +1619,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-sm > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1631,6 +1679,17 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
+  .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
+  .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
+  .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* 5.14 (Chamber-OS 108): in a card every field starts under its label; align: 'end' is for the grid (figures stay tabular). */
+  .aura-table__td.is-end { text-align: start; }
+  .aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-start; }
+  /* hideSelectionInCards: no row boxes, no select-all line. */
+  .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
+  .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
   /* 5.11: rowHeight="auto" leaves cards as they are. */
   .aura-table__td--auto { display: block; white-space: nowrap; }
   .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }

package/package.json

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