@jirawatpyk/aura-react 5.17.0 → 5.18.0

package/README.md

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

package/dist/aura.bundle.js

@@ -928,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 ");
     }
@@ -1058,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(", ");
     }
@@ -1189,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(", ");
       }
@@ -8912,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) {
@@ -8929,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(
@@ -8944,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);
               }
@@ -8953,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

@@ -910,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 ");
   }
@@ -1040,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(", ");
   }
@@ -1171,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(", ");
     }
@@ -8894,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) {
@@ -8911,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(
@@ -8926,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);
             }
@@ -8935,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/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/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;
 }
@@ -1738,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;
 }
@@ -1738,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(", ");
     }

package/dist/server/index.d.cts

@@ -306,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

@@ -306,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(", ");
     }

package/dist/styles.css

@@ -1294,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

@@ -1296,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.17.0",
+  "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",