@jirawatpyk/aura-react 5.16.1 → 5.18.0

package/README.md

@@ -186,6 +186,18 @@ 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.18 — Chamber-OS addendum 19
+
+- **Stepper step errors** (item 112): a step can take `status: 'error'` — say, Save found errors on it. It keeps its place in the order and its state (a completed step is still a button with `onStepClick`, the current one keeps `aria-current="step"`), shows the danger tone with an alert icon instead of the check or number (outlined when it is the current step), and its accessible name ends ", has errors" instead of ", completed". On a phone the line reads "Step 2 of 4 — has errors" when the current step has errors; the markers, error ones included, stay visible. Steps without `status` look the same as before.
+- **Stepper step names without the stray space**: a clickable step with a text label now has `aria-label` "Basics, completed" / "Fees, has errors" — from its content Chrome read "Basics , completed" (it puts a space before an absolutely positioned visually hidden span). Its `description` moves from the name to `aria-describedby`. The markup inside is unchanged; a label that is an element keeps the name from its content.
+- New string `stepError` in every locale ("has errors", "มีข้อผิดพลาด", "har fel"); a pack you wrote yourself should add it (the built-in one for the locale is used otherwise, and the 6.0 notice for Thai and Swedish shows until it does).
+
+## 5.17 — Chamber-OS addendum 18
+
+- **Stat attributes, status line and a link on the label** (item 110): `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root, from the root package and `/server` — a `data-testid`, or `aria-hidden` on a loading placeholder. `status` is a line under the value ("Active · renews 1 Jan" with its tone icon), hidden while loading. With `href`, `linkArea="label"` puts the link on the label (inside the heading when there is one) and stretches its hit area over the tile: a click anywhere follows it, the tile shows the focus ring and hover edge, and other controls in the tile (links, buttons, fields, anything focusable) stay clickable above it. `aria-label`, `aria-labelledby`, `aria-describedby` and `aria-current` then go on the link, and an `onClick` too. Text in such a tile can't be selected by dragging (the click belongs to the link). The default (`tile`) is unchanged. Only the documented attributes reach the root; anything else passed is dropped, as before.
+- **Progress `valueText`** (item 111): what screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` — show "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6".
+- The CSS budget is 26 kB (was 25).
+
 ## 5.16.1 — Select ground (Chamber-OS 109)
 
 - **A custom Select keeps the input ground.** The read-only rule for text fields matched the Select's trigger button too (`:read-only` matches anything not editable), so every custom Select showed the disabled ground and looked disabled. It now applies to a read-only `input` only; a read-only TextField still takes the disabled ground, and a read-only Textarea now does too.

package/dist/aura.bundle.js

@@ -717,8 +717,17 @@ window.Aura = (() => {
     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 labelLink = !!props.href && props.linkArea === "label";
+    const Tag3 = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
     const interactive = !!(props.href || props.onClick);
+    const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+    const root = {}, toLink = {};
+    Object.keys(props).forEach(function(k) {
+      const v2 = props[k];
+      if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+      else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+    });
+    const busy = props.loading || props["aria-busy"] || void 0;
     if (props.headingLevel && Tag3 === "button")
       devWarnOnce(
         "stat-heading-button",
@@ -729,15 +738,23 @@ window.Aura = (() => {
     return /* @__PURE__ */ React4.createElement(
       Tag3,
       {
+        ...root,
         ref,
-        className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-        href: props.href,
-        onClick: props.onClick,
+        className: cx(
+          "aura-stat",
+          interactive && "is-interactive",
+          labelLink && "aura-stat--label-link",
+          props.loading && "is-loading",
+          props.className
+        ),
+        href: labelLink ? void 0 : props.href,
+        onClick: labelLink ? void 0 : props.onClick,
         type: Tag3 === "button" ? "button" : void 0,
-        "aria-busy": props.loading || void 0
+        "aria-busy": busy
       },
-      /* @__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),
+      /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React4.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.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),
+      props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__status" }, props.status) : 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,
         {
@@ -911,6 +928,7 @@ window.Aura = (() => {
       return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
     },
     breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+    stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
@@ -1041,6 +1059,7 @@ window.Aura = (() => {
       return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
     },
     breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+    stepError: "har fel",
     accepts: function(list, max) {
       return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
     }
@@ -1172,6 +1191,7 @@ window.Aura = (() => {
         return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
       },
       breadcrumbMore: "Show the full path",
+      stepError: "has errors",
       accepts: function(list, max) {
         return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
       }
@@ -8344,7 +8364,7 @@ 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.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+    const valueText = props.valueText != null ? props.valueText : 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__ */ React53.createElement(
       "div",
@@ -8895,6 +8915,7 @@ window.Aura = (() => {
   var React60 = __toESM(require_react(), 1);
   var Stepper = React60.forwardRef(function Stepper2(props, ref) {
     const t = useStrings();
+    const idBase = uid();
     const steps = props.steps || [];
     let at = -1;
     steps.forEach(function(s, i) {
@@ -8912,14 +8933,18 @@ window.Aura = (() => {
       },
       /* @__PURE__ */ React60.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
         const state = i < at ? "done" : i === at ? "current" : "upcoming";
-        const marker = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCheck, null) }) : i + 1);
-        const text2 = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React60.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+        const error = s.status === "error";
+        const marker = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, error ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCircleAlert, null) }) : state === "done" ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCheck, null) }) : i + 1);
+        const note = error ? t.stepError : state === "done" ? t.stepDone : "";
         const clickable = state === "done" && !!props.onStepClick;
+        const named = clickable && (typeof s.label === "string" || typeof s.label === "number") && String(s.label).trim() !== "";
+        const descId = idBase + "-step-" + i;
+        const text2 = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__label" }, s.label, note ? /* @__PURE__ */ React60.createElement("span", { className: "aura-sr-only" }, ", " + note) : null), s.description ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__desc", id: named ? descId : void 0 }, s.description) : null);
         return /* @__PURE__ */ React60.createElement(
           "li",
           {
             key: s.id,
-            className: cx("aura-stepper__item", "is-" + state),
+            className: cx("aura-stepper__item", "is-" + state, error && "is-error"),
             "aria-current": state === "current" ? "step" : void 0
           },
           clickable ? /* @__PURE__ */ React60.createElement(
@@ -8927,6 +8952,8 @@ window.Aura = (() => {
             {
               type: "button",
               className: "aura-stepper__step aura-focusable",
+              "aria-label": named ? String(s.label) + (note ? ", " + note : "") : void 0,
+              "aria-describedby": named && s.description ? descId : void 0,
               onClick: function() {
                 props.onStepClick(s.id);
               }
@@ -8936,7 +8963,7 @@ window.Aura = (() => {
           ) : /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__step" }, marker, text2)
         );
       })),
-      !vertical && cur ? /* @__PURE__ */ React60.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+      !vertical && cur ? /* @__PURE__ */ React60.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length), cur.status === "error" ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count-error" }, " \u2014 " + t.stepError) : null), /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
     );
   });
 

package/dist/cjs/index.cjs

@@ -699,8 +699,17 @@ function statElement(props, ref, Link) {
   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 labelLink = !!props.href && props.linkArea === "label";
+  const Tag3 = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag3 === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -711,15 +720,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React4.createElement(
     Tag3,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag3 === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__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),
+    /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React4.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.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),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__status" }, props.status) : 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,
       {
@@ -893,6 +910,7 @@ var th = {
     return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -1023,6 +1041,7 @@ var sv = {
     return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+  stepError: "har fel",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -1154,6 +1173,7 @@ var STRINGS = {
       return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
     },
     breadcrumbMore: "Show the full path",
+    stepError: "has errors",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -8326,7 +8346,7 @@ var Progress = React53.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.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const valueText = props.valueText != null ? props.valueText : 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__ */ React53.createElement(
     "div",
@@ -8877,6 +8897,7 @@ var NumberField = React59.forwardRef(function NumberField2(props, ref) {
 var React60 = __toESM(require("react"), 1);
 var Stepper = React60.forwardRef(function Stepper2(props, ref) {
   const t = useStrings();
+  const idBase = uid();
   const steps = props.steps || [];
   let at = -1;
   steps.forEach(function(s, i) {
@@ -8894,14 +8915,18 @@ var Stepper = React60.forwardRef(function Stepper2(props, ref) {
     },
     /* @__PURE__ */ React60.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
       const state = i < at ? "done" : i === at ? "current" : "upcoming";
-      const marker = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCheck, null) }) : i + 1);
-      const text2 = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React60.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const error = s.status === "error";
+      const marker = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, error ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCircleAlert, null) }) : state === "done" ? /* @__PURE__ */ React60.createElement(Icon, { name: /* @__PURE__ */ React60.createElement(IconCheck, null) }) : i + 1);
+      const note = error ? t.stepError : state === "done" ? t.stepDone : "";
       const clickable = state === "done" && !!props.onStepClick;
+      const named = clickable && (typeof s.label === "string" || typeof s.label === "number") && String(s.label).trim() !== "";
+      const descId = idBase + "-step-" + i;
+      const text2 = /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__label" }, s.label, note ? /* @__PURE__ */ React60.createElement("span", { className: "aura-sr-only" }, ", " + note) : null), s.description ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__desc", id: named ? descId : void 0 }, s.description) : null);
       return /* @__PURE__ */ React60.createElement(
         "li",
         {
           key: s.id,
-          className: cx("aura-stepper__item", "is-" + state),
+          className: cx("aura-stepper__item", "is-" + state, error && "is-error"),
           "aria-current": state === "current" ? "step" : void 0
         },
         clickable ? /* @__PURE__ */ React60.createElement(
@@ -8909,6 +8934,8 @@ var Stepper = React60.forwardRef(function Stepper2(props, ref) {
           {
             type: "button",
             className: "aura-stepper__step aura-focusable",
+            "aria-label": named ? String(s.label) + (note ? ", " + note : "") : void 0,
+            "aria-describedby": named && s.description ? descId : void 0,
             onClick: function() {
               props.onStepClick(s.id);
             }
@@ -8918,7 +8945,7 @@ var Stepper = React60.forwardRef(function Stepper2(props, ref) {
         ) : /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__step" }, marker, text2)
       );
     })),
-    !vertical && cur ? /* @__PURE__ */ React60.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+    !vertical && cur ? /* @__PURE__ */ React60.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length), cur.status === "error" ? /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__count-error" }, " \u2014 " + t.stepError) : null), /* @__PURE__ */ React60.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
   );
 });
 

package/dist/esm/Progress.js

@@ -9,7 +9,7 @@ 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.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const valueText = props.valueText != null ? props.valueText : 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",

package/dist/esm/Stepper.js

@@ -1,11 +1,12 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx } from "./internal.js";
+import { cx, uid } from "./internal.js";
 import { useStrings } from "./locale.js";
-import { IconCheck } from "./icons.js";
+import { IconCheck, IconCircleAlert } from "./icons.js";
 const Stepper = React.forwardRef(function Stepper2(props, ref) {
   const t = useStrings();
+  const idBase = uid();
   const steps = props.steps || [];
   let at = -1;
   steps.forEach(function(s, i) {
@@ -23,14 +24,18 @@ const Stepper = React.forwardRef(function Stepper2(props, ref) {
     },
     /* @__PURE__ */ React.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
       const state = i < at ? "done" : i === at ? "current" : "upcoming";
-      const marker = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null) }) : i + 1);
-      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const error = s.status === "error";
+      const marker = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, error ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null) }) : state === "done" ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null) }) : i + 1);
+      const note = error ? t.stepError : state === "done" ? t.stepDone : "";
       const clickable = state === "done" && !!props.onStepClick;
+      const named = clickable && (typeof s.label === "string" || typeof s.label === "number") && String(s.label).trim() !== "";
+      const descId = idBase + "-step-" + i;
+      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, note ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + note) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc", id: named ? descId : void 0 }, s.description) : null);
       return /* @__PURE__ */ React.createElement(
         "li",
         {
           key: s.id,
-          className: cx("aura-stepper__item", "is-" + state),
+          className: cx("aura-stepper__item", "is-" + state, error && "is-error"),
           "aria-current": state === "current" ? "step" : void 0
         },
         clickable ? /* @__PURE__ */ React.createElement(
@@ -38,6 +43,8 @@ const Stepper = React.forwardRef(function Stepper2(props, ref) {
           {
             type: "button",
             className: "aura-stepper__step aura-focusable",
+            "aria-label": named ? String(s.label) + (note ? ", " + note : "") : void 0,
+            "aria-describedby": named && s.description ? descId : void 0,
             onClick: function() {
               props.onStepClick(s.id);
             }
@@ -47,7 +54,7 @@ const Stepper = React.forwardRef(function Stepper2(props, ref) {
         ) : /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__step" }, marker, text)
       );
     })),
-    !vertical && cur ? /* @__PURE__ */ React.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+    !vertical && cur ? /* @__PURE__ */ React.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length), cur.status === "error" ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count-error" }, " \u2014 " + t.stepError) : null), /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
   );
 });
 export {

package/dist/esm/display.js

@@ -146,8 +146,17 @@ function statElement(props, ref, Link) {
   const tone = 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 labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -158,15 +167,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
+    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
     props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__status" }, props.status) : null,
     ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(
       Icon,
       {

package/dist/esm/strings.js

@@ -126,6 +126,7 @@ const STRINGS = {
       return n(v) + " of " + n(max) + " used, " + n(r) + " reserved";
     },
     breadcrumbMore: "Show the full path",
+    stepError: "has errors",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }

package/dist/esm/strings.sv.js

@@ -122,6 +122,7 @@ const sv = {
     return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+  stepError: "har fel",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/esm/strings.th.js

@@ -122,6 +122,7 @@ const th = {
     return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/index.d.cts

@@ -914,6 +914,10 @@ export interface StepItem {
 	label: React$1.ReactNode;
 	/** Short line under the label, e.g. what the step asks for. */
 	description?: React$1.ReactNode | undefined;
+	/** `'error'` (5.18, Chamber-OS 112): the step has a problem — say, Save found errors on it. It keeps its place in the
+	 * order and whether it can be clicked, shows the danger tone with an alert icon instead of the check or number, and
+	 * adds "has errors" to its accessible name (in place of "completed"). */
+	status?: "error" | undefined;
 }
 /** Progress through a multi-step flow (wizard, checkout, booking). */
 export interface StepperProps {
@@ -924,7 +928,8 @@ export interface StepperProps {
 	label?: string | undefined;
 	/** Makes completed steps buttons that go back to them. Upcoming steps never are. */
 	onStepClick?: ((id: string) => void) | undefined;
-	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"). */
+	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"; "Step 2 of 4 —
+	 * has errors" when that step has `status: 'error'`). */
 	orientation?: "horizontal" | "vertical" | undefined;
 	className?: string | undefined;
 }
@@ -1215,7 +1220,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** 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;
@@ -1233,6 +1239,13 @@ export interface StatProps {
 	/** 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;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1316,6 +1329,9 @@ export interface ProgressProps {
 	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
 	valueLabel?: React$1.ReactNode | undefined;
+	/** What screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` (5.17, Chamber-OS 111): show
+	 * "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6". */
+	valueText?: string | undefined;
 	/** 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;
@@ -1727,6 +1743,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/index.d.ts

@@ -914,6 +914,10 @@ export interface StepItem {
 	label: React$1.ReactNode;
 	/** Short line under the label, e.g. what the step asks for. */
 	description?: React$1.ReactNode | undefined;
+	/** `'error'` (5.18, Chamber-OS 112): the step has a problem — say, Save found errors on it. It keeps its place in the
+	 * order and whether it can be clicked, shows the danger tone with an alert icon instead of the check or number, and
+	 * adds "has errors" to its accessible name (in place of "completed"). */
+	status?: "error" | undefined;
 }
 /** Progress through a multi-step flow (wizard, checkout, booking). */
 export interface StepperProps {
@@ -924,7 +928,8 @@ export interface StepperProps {
 	label?: string | undefined;
 	/** Makes completed steps buttons that go back to them. Upcoming steps never are. */
 	onStepClick?: ((id: string) => void) | undefined;
-	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"). */
+	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"; "Step 2 of 4 —
+	 * has errors" when that step has `status: 'error'`). */
 	orientation?: "horizontal" | "vertical" | undefined;
 	className?: string | undefined;
 }
@@ -1215,7 +1220,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** 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;
@@ -1233,6 +1239,13 @@ export interface StatProps {
 	/** 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;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1316,6 +1329,9 @@ export interface ProgressProps {
 	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
 	valueLabel?: React$1.ReactNode | undefined;
+	/** What screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` (5.17, Chamber-OS 111): show
+	 * "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6". */
+	valueText?: string | undefined;
 	/** 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;
@@ -1727,6 +1743,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.cjs

@@ -147,6 +147,7 @@ var sv = {
     return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+  stepError: "har fel",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/locales/sv.d.cts

@@ -87,6 +87,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.d.ts

@@ -87,6 +87,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.cjs

@@ -147,6 +147,7 @@ var th = {
     return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/locales/th.d.cts

@@ -87,6 +87,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.d.ts

@@ -87,6 +87,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.cjs

@@ -331,6 +331,7 @@ var th = {
     return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -461,6 +462,7 @@ var sv = {
     return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+  stepError: "har fel",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -592,6 +594,7 @@ var STRINGS = {
       return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
     },
     breadcrumbMore: "Show the full path",
+    stepError: "has errors",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1212,8 +1215,17 @@ function statElement(props, ref, Link) {
   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 labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -1224,15 +1236,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React3.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__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),
+    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React3.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.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),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__status" }, props.status) : 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,
       {

package/dist/server/index.d.cts

@@ -107,6 +107,10 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+/** `data-*` attributes in an object prop (TypeScript checks object literals, where JSX would allow them anyway). */
+export type DataAttributes = {
+	[key: `data-${string}`]: string | number | boolean | undefined;
+};
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -116,7 +120,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** 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;
@@ -134,6 +139,13 @@ export interface StatProps {
 	/** 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;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
@@ -294,6 +306,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.d.ts

@@ -107,6 +107,10 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+/** `data-*` attributes in an object prop (TypeScript checks object literals, where JSX would allow them anyway). */
+export type DataAttributes = {
+	[key: `data-${string}`]: string | number | boolean | undefined;
+};
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -116,7 +120,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** 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;
@@ -134,6 +139,13 @@ export interface StatProps {
 	/** 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;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
@@ -294,6 +306,8 @@ export interface AuraStrings {
 	progressReserved: (value: number, reserved: number, max: number) => string;
 	/** The collapsed middle of a Breadcrumb (5.15). */
 	breadcrumbMore: string;
+	/** A Stepper step with `status: 'error'` (5.18). */
+	stepError: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.js

@@ -272,6 +272,7 @@ var th = {
     return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -402,6 +403,7 @@ var sv = {
     return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
+  stepError: "har fel",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -533,6 +535,7 @@ var STRINGS = {
       return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
     },
     breadcrumbMore: "Show the full path",
+    stepError: "has errors",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1153,8 +1156,17 @@ function statElement(props, ref, Link) {
   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 labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -1165,15 +1177,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React3.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__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),
+    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React3.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.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),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__status" }, props.status) : 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,
       {

package/dist/styles.css

@@ -1032,6 +1032,20 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__change.is-negative { color: var(--aura-fg-danger); }
 .aura-stat__change.is-neutral { color: var(--aura-fg-secondary); }
 .aura-stat__caption { color: var(--aura-fg-secondary); }
+/* 5.17 (Chamber-OS 110): a status line under the value, and a link on the label that covers the tile. */
+.aura-stat__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
+.aura-stat--label-link { position: relative; }
+.aura-stat__link { color: inherit; text-decoration: none; }
+.aura-stat__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--aura-card-radius); }
+/* The ring is drawn on the tile where :has() works; elsewhere the link keeps its own. */
+.aura-stat__link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .aura-stat__link:focus-visible { outline: none; }
+  .aura-stat--label-link:has(.aura-stat__link:focus-visible) { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+}
+.aura-stat--label-link:hover .aura-stat__link { text-decoration: underline; text-underline-offset: 3px; }
+/* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
+:where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
 
 /* ---------- TimePicker ---------- */
 .aura-time__popover { min-width: 160px; }
@@ -1280,6 +1294,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
 .aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
 .aura-stepper__compact-label { font-weight: 600; }
+/* 5.18 (Chamber-OS 112): a step with errors — the danger fill and an alert icon; outlined when it is the current step. */
+.aura-stepper__item.is-error .aura-stepper__marker { background: var(--aura-button-danger-bg); border-color: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
+.aura-stepper__item.is-current.is-error .aura-stepper__marker { background: var(--aura-bg-surface); border: 2px solid var(--aura-fg-danger); color: var(--aura-fg-danger); }
+.aura-stepper__item.is-error .aura-stepper__label, .aura-stepper__count-error { color: var(--aura-fg-danger); }
 
 /* ---------- SegmentedControl ---------- */
 .aura-segmented {

package/dist/styles.layer.css

@@ -1034,6 +1034,20 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__change.is-negative { color: var(--aura-fg-danger); }
 .aura-stat__change.is-neutral { color: var(--aura-fg-secondary); }
 .aura-stat__caption { color: var(--aura-fg-secondary); }
+/* 5.17 (Chamber-OS 110): a status line under the value, and a link on the label that covers the tile. */
+.aura-stat__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
+.aura-stat--label-link { position: relative; }
+.aura-stat__link { color: inherit; text-decoration: none; }
+.aura-stat__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--aura-card-radius); }
+/* The ring is drawn on the tile where :has() works; elsewhere the link keeps its own. */
+.aura-stat__link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .aura-stat__link:focus-visible { outline: none; }
+  .aura-stat--label-link:has(.aura-stat__link:focus-visible) { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+}
+.aura-stat--label-link:hover .aura-stat__link { text-decoration: underline; text-underline-offset: 3px; }
+/* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
+:where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
 
 /* ---------- TimePicker ---------- */
 .aura-time__popover { min-width: 160px; }
@@ -1282,6 +1296,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
 .aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
 .aura-stepper__compact-label { font-weight: 600; }
+/* 5.18 (Chamber-OS 112): a step with errors — the danger fill and an alert icon; outlined when it is the current step. */
+.aura-stepper__item.is-error .aura-stepper__marker { background: var(--aura-button-danger-bg); border-color: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
+.aura-stepper__item.is-current.is-error .aura-stepper__marker { background: var(--aura-bg-surface); border: 2px solid var(--aura-fg-danger); color: var(--aura-fg-danger); }
+.aura-stepper__item.is-error .aura-stepper__label, .aura-stepper__count-error { color: var(--aura-fg-danger); }
 
 /* ---------- SegmentedControl ---------- */
 .aura-segmented {

package/package.json

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