@jirawatpyk/aura-react 5.13.0 → 5.14.0

package/dist/server/index.d.ts

@@ -81,6 +81,15 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
 }
+export interface AvatarProps {
+	/** Accessible name; also gives the initials and a stable colour. */
+	name: string;
+	src?: string | undefined;
+	/** `sm` 24 · `md` 32 (default) · `lg` 40. */
+	size?: "sm" | "md" | "lg" | undefined;
+	status?: "online" | undefined;
+	className?: string | undefined;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -89,6 +98,35 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+export interface StatChange {
+	/** Shown as written, e.g. "+12%" or "−3". */
+	value: React$1.ReactNode;
+	direction?: "up" | "down" | "flat" | undefined;
+	/** Default: up = positive, down = negative. Set it when a rise is bad (cancellations, wait time). */
+	tone?: "positive" | "negative" | "neutral" | undefined;
+	/** e.g. "vs last month". */
+	label?: React$1.ReactNode | undefined;
+}
+export interface StatProps {
+	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
+	label: React$1.ReactNode;
+	value?: React$1.ReactNode | undefined;
+	/** Small unit after the value ("งาน", "คน", "%"). */
+	unit?: React$1.ReactNode | undefined;
+	change?: StatChange | undefined;
+	caption?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
+	/** Skeleton in place of the value. */
+	loading?: boolean | undefined;
+	/** Makes the whole card a link or a button (drill-down). */
+	href?: string | undefined;
+	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
+}
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	tone?: Tone | undefined;
@@ -107,7 +145,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface ThemeOptions {
@@ -305,6 +345,11 @@ declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
 declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
 declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
+/** Stat for Server Components (5.14): no `onClick` (a button needs the client); `href` renders `linkComponent`, else `<a>`. */
+declare function ServerStat(props: Omit<StatProps, "onClick">): React$1.ReactElement;
+/** Avatar for Server Components (5.14): initials and colour. Falling back to the initials when an image fails needs the
+ * client, so give a server avatar a `src` you know loads, or none. */
+declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
 /** Makes icon names as strings work: `registerIcons(allIcons)` once at startup, with `allIcons` from
  * `@jirawatpyk/aura-react/icons`, or only the icons you use (`registerIcons([IconUsers, IconPlus])`). In 5.x every
  * name already works and this only says you are ready for 6.0 (it silences the notice); in 6.0 it is required. Call it in the module
@@ -315,9 +360,11 @@ export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1
 
 export {
 	ServerAlert as Alert,
+	ServerAvatar as Avatar,
 	ServerBadge as Badge,
 	ServerCard as Card,
 	ServerEmptyState as EmptyState,
+	ServerStat as Stat,
 	ServerStatusPill as StatusPill,
 	scale as brandScale,
 	toneFor as statusTone,

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,7 +1099,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",
@@ -1122,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",
@@ -1147,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; }
@@ -1660,6 +1681,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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); }

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; }
@@ -1662,6 +1683,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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); }

package/package.json

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