@jirawatpyk/aura-react 5.62.0 → 5.64.0

package/README.md

@@ -186,6 +186,15 @@ 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.64 — Chamber-OS addendum 80 (#179)
+
+- **Progress `legend` — a key for the reserved part:** `legend={{ value: 'Used', secondary: 'Reserved (in review or scheduled)' }}` draws a key under the bar (above the `hint`): a swatch in the bar's tone for each part (`value` is optional), the second striped like the reserved segment, so it follows `tone="danger"`. It shows only while the reserved segment is drawn and wraps on a phone. It is `aria-hidden`, so while it shows the bar reads both counts ("2 of 6 used, 1 reserved") even when you pass a `valueLabel` — pass `valueText` to word it yourself. In forced colours the bar and the swatches use Highlight in every tone (before 5.64 a toned bar kept its colour). Drop a hand-drawn key that copies the stripe.
+
+## 5.63 — Chamber-OS addendum 79 (#178)
+
+- **A lazy chip still makes `meta` the chip row:** a Server Component's Badge or StatusPill passed through a `'use client'` wrapper can arrive as a lazy node on Next's dev server. PageHeader now looks through a resolved lazy node (a chip makes the row, text keeps the line, as when it arrives resolved), and an unresolved one is neutral — the other children decide — so the layout no longer depends on the build mode. Anything else unresolved (a promise, an iterator) keeps a line.
+- **`metaLayout`:** `"row"` lays `meta` out as the wrapping chip row whatever it holds, `"line"` as a text line; `"auto"` (default) keeps 5.62's guess (elements only → row). Pass `metaLayout="row"` where chips come from a Server Component, so nothing is guessed (an all-lazy meta that hasn't resolved would otherwise be a line). Also from `/server`. Drop the `flex flex-wrap items-center gap-2` stand-in.
+
 ## 5.62 — Chamber-OS addendum 78 (#177)
 
 - **PageHeader `meta` lays chips out as a row:** a `meta` made only of elements (Badges, a StatusPill — through Fragments and arrays) is now a wrapping row, 8px apart and vertically centred, as `eyebrow` — so chips no longer touch when the JSX has no space between them, and they wrap on a phone. Any text in it — a string `meta` ("128 members · updated 3 min ago"), or a sentence with a `<strong>`, `<time>`, a link or `{count}` — keeps it a text line, as before. Also from `/server`. Drop a `flex flex-wrap items-center gap-2` stand-in wrapper.

package/dist/aura.bundle.js

@@ -7914,6 +7914,7 @@ window.Aura = (() => {
   // src/PageHeader.tsx
   var React43 = __toESM(require_react(), 1);
   var h8 = React43.createElement;
+  var LAZY = Symbol.for("react.lazy");
   function chipsOnly(node) {
     let el = 0;
     const walk = function(n3) {
@@ -7921,6 +7922,16 @@ window.Aura = (() => {
       if (typeof n3 === "string") return n3.trim() === "";
       if (typeof n3 === "number" || typeof n3 === "bigint") return false;
       if (Array.isArray(n3)) return n3.every(walk);
+      if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+        const lazy = n3;
+        let value;
+        try {
+          value = lazy._init(lazy._payload);
+        } catch {
+          return true;
+        }
+        return walk(value);
+      }
       if (React43.isValidElement(n3)) {
         if (n3.type === React43.Fragment) return walk(n3.props.children);
         el++;
@@ -7946,7 +7957,7 @@ window.Aura = (() => {
     const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
     const eyebrow = props.eyebrow;
     const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-    const richMeta = chipsOnly(props.meta);
+    const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
     const heading = h8(
       "h" + level,
       {
@@ -10160,7 +10171,8 @@ window.Aura = (() => {
     const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
     const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
     const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-    const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+    const keyed = !!props.legend && spct > 0;
+    const valueText = props.valueText != null ? props.valueText : keyed ? t.progressReserved(props.value, sec, max) : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
     const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
     return /* @__PURE__ */ React61.createElement(
       "div",
@@ -10195,6 +10207,7 @@ window.Aura = (() => {
           }
         ) : null
       ),
+      keyed ? /* @__PURE__ */ React61.createElement("div", { className: "aura-progress__legend", "aria-hidden": "true" }, props.legend.value != null && props.legend.value !== false ? /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__swatch" }), props.legend.value) : null, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__swatch aura-progress__swatch--reserved" }), props.legend.secondary)) : null,
       props.hint ? /* @__PURE__ */ React61.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
     );
   });

package/dist/cjs/index.cjs

@@ -7896,6 +7896,7 @@ var React44 = __toESM(require("react"), 1);
 // src/PageHeader.tsx
 var React43 = __toESM(require("react"), 1);
 var h8 = React43.createElement;
+var LAZY = Symbol.for("react.lazy");
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -7903,6 +7904,16 @@ function chipsOnly(node) {
     if (typeof n3 === "string") return n3.trim() === "";
     if (typeof n3 === "number" || typeof n3 === "bigint") return false;
     if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
     if (React43.isValidElement(n3)) {
       if (n3.type === React43.Fragment) return walk(n3.props.children);
       el++;
@@ -7928,7 +7939,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const richMeta = chipsOnly(props.meta);
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h8(
     "h" + level,
     {
@@ -10142,7 +10153,8 @@ var Progress = React61.forwardRef(function Progress2(props, ref) {
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
   const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
   const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-  const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const keyed = !!props.legend && spct > 0;
+  const valueText = props.valueText != null ? props.valueText : keyed ? t.progressReserved(props.value, sec, max) : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
   return /* @__PURE__ */ React61.createElement(
     "div",
@@ -10177,6 +10189,7 @@ var Progress = React61.forwardRef(function Progress2(props, ref) {
         }
       ) : null
     ),
+    keyed ? /* @__PURE__ */ React61.createElement("div", { className: "aura-progress__legend", "aria-hidden": "true" }, props.legend.value != null && props.legend.value !== false ? /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__swatch" }), props.legend.value) : null, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React61.createElement("span", { className: "aura-progress__swatch aura-progress__swatch--reserved" }), props.legend.secondary)) : null,
     props.hint ? /* @__PURE__ */ React61.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
   );
 });

package/dist/esm/PageHeader.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
+const LAZY = Symbol.for("react.lazy");
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n) {
@@ -9,6 +10,16 @@ function chipsOnly(node) {
     if (typeof n === "string") return n.trim() === "";
     if (typeof n === "number" || typeof n === "bigint") return false;
     if (Array.isArray(n)) return n.every(walk);
+    if (typeof n === "object" && n.$$typeof === LAZY) {
+      const lazy = n;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
     if (React.isValidElement(n)) {
       if (n.type === React.Fragment) return walk(n.props.children);
       el++;
@@ -34,7 +45,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const richMeta = chipsOnly(props.meta);
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h(
     "h" + level,
     {

package/dist/esm/Progress.js

@@ -9,7 +9,8 @@ const Progress = React.forwardRef(function Progress2(props, ref) {
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
   const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
   const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-  const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const keyed = !!props.legend && spct > 0;
+  const valueText = props.valueText != null ? props.valueText : keyed ? t.progressReserved(props.value, sec, max) : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -44,6 +45,7 @@ const Progress = React.forwardRef(function Progress2(props, ref) {
         }
       ) : null
     ),
+    keyed ? /* @__PURE__ */ React.createElement("div", { className: "aura-progress__legend", "aria-hidden": "true" }, props.legend.value != null && props.legend.value !== false ? /* @__PURE__ */ React.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React.createElement("span", { className: "aura-progress__swatch" }), props.legend.value) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-progress__key" }, /* @__PURE__ */ React.createElement("span", { className: "aura-progress__swatch aura-progress__swatch--reserved" }), props.legend.secondary)) : null,
     props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
   );
 });

package/dist/index.d.cts

@@ -1653,6 +1653,14 @@ export interface ProgressProps {
 	/** A reserved amount drawn after `value` as a striped segment of the same tone — queued sends on a quota
 	 * (5.15, Chamber-OS 89). Both counts are read out ("2 of 6 used, 1 reserved") unless `valueLabel` is given. */
 	secondaryValue?: number | undefined;
+	/** A key under the bar for its two parts (5.64, Chamber-OS 179): `{ value: 'Used', secondary: 'Reserved' }` — a
+	 * swatch in the bar's tone for each (`value` optional), the second striped like the reserved segment. Shown only
+	 * while the reserved segment is drawn; hidden from screen readers — so while it shows, the bar reads both counts
+	 * ("2 of 6 used, 1 reserved") even with a `valueLabel`, unless you pass `valueText`. */
+	legend?: {
+		value?: React$1.ReactNode;
+		secondary: React$1.ReactNode;
+	} | undefined;
 	hint?: React$1.ReactNode | undefined;
 	tone?: Tone | undefined;
 	size?: "sm" | "md" | undefined;
@@ -2075,6 +2083,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
 	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/index.d.ts

@@ -1653,6 +1653,14 @@ export interface ProgressProps {
 	/** A reserved amount drawn after `value` as a striped segment of the same tone — queued sends on a quota
 	 * (5.15, Chamber-OS 89). Both counts are read out ("2 of 6 used, 1 reserved") unless `valueLabel` is given. */
 	secondaryValue?: number | undefined;
+	/** A key under the bar for its two parts (5.64, Chamber-OS 179): `{ value: 'Used', secondary: 'Reserved' }` — a
+	 * swatch in the bar's tone for each (`value` optional), the second striped like the reserved segment. Shown only
+	 * while the reserved segment is drawn; hidden from screen readers — so while it shows, the bar reads both counts
+	 * ("2 of 6 used, 1 reserved") even with a `valueLabel`, unless you pass `valueText`. */
+	legend?: {
+		value?: React$1.ReactNode;
+		secondary: React$1.ReactNode;
+	} | undefined;
 	hint?: React$1.ReactNode | undefined;
 	tone?: Tone | undefined;
 	size?: "sm" | "md" | undefined;
@@ -2075,6 +2083,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
 	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.cjs

@@ -1632,6 +1632,7 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 var React6 = __toESM(require("react"), 1);
 var h5 = React6.createElement;
+var LAZY = Symbol.for("react.lazy");
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1639,6 +1640,16 @@ function chipsOnly(node) {
     if (typeof n3 === "string") return n3.trim() === "";
     if (typeof n3 === "number" || typeof n3 === "bigint") return false;
     if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
     if (React6.isValidElement(n3)) {
       if (n3.type === React6.Fragment) return walk(n3.props.children);
       el++;
@@ -1664,7 +1675,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const richMeta = chipsOnly(props.meta);
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {

package/dist/server/index.d.cts

@@ -585,6 +585,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
 	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.d.ts

@@ -585,6 +585,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
 	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.js

@@ -1566,6 +1566,7 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 import * as React6 from "react";
 var h5 = React6.createElement;
+var LAZY = Symbol.for("react.lazy");
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1573,6 +1574,16 @@ function chipsOnly(node) {
     if (typeof n3 === "string") return n3.trim() === "";
     if (typeof n3 === "number" || typeof n3 === "bigint") return false;
     if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
     if (React6.isValidElement(n3)) {
       if (n3.type === React6.Fragment) return walk(n3.props.children);
       el++;
@@ -1598,7 +1609,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const richMeta = chipsOnly(props.meta);
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {

package/dist/styles.css

@@ -1578,13 +1578,19 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-progress__track { position: relative; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-progress-track); box-shadow: inset 0 0 0 1px var(--aura-progress-track-edge); overflow: hidden; }
 .aura-progress.is-sm .aura-progress__track { height: 4px; }
 .aura-progress__bar { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--aura-fg-accent); transition: width var(--aura-duration-base) var(--aura-ease); }
-.aura-progress--success .aura-progress__bar { background: var(--aura-fg-positive); }
-.aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
-.aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
-.aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
+/* 5.64 (Chamber-OS 179): legend — a swatch per part in the bar's tone, the reserved one striped like its segment. */
+.aura-progress__legend { display: flex; flex-wrap: wrap; gap: var(--aura-space-1) var(--aura-space-4); font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-progress__key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.aura-progress__swatch { flex: none; width: 12px; height: 8px; border-radius: 2px; background: var(--aura-fg-accent); }
+.aura-progress--success :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-positive); }
+.aura-progress--warning :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-alert-warning-fg); }
+.aura-progress--danger :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-danger); }
+.aura-progress--neutral :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-secondary); }
 /* 5.15 (Chamber-OS 89): a reserved amount after the value — the same tone, striped, so it reads without colour. */
 .aura-progress__bar--reserved {
   transition: left var(--aura-duration-base) var(--aura-ease), width var(--aura-duration-base) var(--aura-ease);
+}
+.aura-progress__bar--reserved, .aura-progress__swatch--reserved {
   -webkit-mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
   mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
 }
@@ -2545,7 +2551,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch.is-on:disabled .aura-switch__thumb { background: Canvas; }
   .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
-  .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
+  .aura-progress :is(.aura-progress__bar, .aura-progress__swatch), .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; } /* every tone (5.64) */
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }

package/dist/styles.layer.css

@@ -1580,13 +1580,19 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-progress__track { position: relative; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-progress-track); box-shadow: inset 0 0 0 1px var(--aura-progress-track-edge); overflow: hidden; }
 .aura-progress.is-sm .aura-progress__track { height: 4px; }
 .aura-progress__bar { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--aura-fg-accent); transition: width var(--aura-duration-base) var(--aura-ease); }
-.aura-progress--success .aura-progress__bar { background: var(--aura-fg-positive); }
-.aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
-.aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
-.aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
+/* 5.64 (Chamber-OS 179): legend — a swatch per part in the bar's tone, the reserved one striped like its segment. */
+.aura-progress__legend { display: flex; flex-wrap: wrap; gap: var(--aura-space-1) var(--aura-space-4); font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-progress__key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.aura-progress__swatch { flex: none; width: 12px; height: 8px; border-radius: 2px; background: var(--aura-fg-accent); }
+.aura-progress--success :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-positive); }
+.aura-progress--warning :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-alert-warning-fg); }
+.aura-progress--danger :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-danger); }
+.aura-progress--neutral :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-secondary); }
 /* 5.15 (Chamber-OS 89): a reserved amount after the value — the same tone, striped, so it reads without colour. */
 .aura-progress__bar--reserved {
   transition: left var(--aura-duration-base) var(--aura-ease), width var(--aura-duration-base) var(--aura-ease);
+}
+.aura-progress__bar--reserved, .aura-progress__swatch--reserved {
   -webkit-mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
   mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
 }
@@ -2547,7 +2553,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch.is-on:disabled .aura-switch__thumb { background: Canvas; }
   .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
-  .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
+  .aura-progress :is(.aura-progress__bar, .aura-progress__swatch), .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; } /* every tone (5.64) */
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }

package/package.json

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