@jirawatpyk/aura-react 5.17.0 → 5.19.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.19 — Chamber-OS addendum 20
+
+- **Switch `readOnly`, `icon` and `aria-describedby`** (item 113): `readOnly` keeps a locked switch in the Tab order with `aria-readonly="true"`, so its name, state and notes are heard; click, Space, its label and its row change nothing. It keeps its colours (a locked "on" reads as on) and loses the pointer. `icon` puts an icon at the end of the row, the field icon's size, in fg-secondary (`icon={<IconLock />}`), hidden from screen readers. `aria-describedby` is merged with the description's id, as on TextField and Select. `disabled` wins over `readOnly`.
+- **Select `readOnly`** (item 114): the field stays in the Tab order with `aria-readonly="true"` and shows the chosen option on the read-only ground of a read-only TextField, with no chevron; no click or key opens the list. Unlike `disabled`, the value is still posted with the form, and your code can still set it (`reset()`, `setValue()`). Before JavaScript runs, the options from `options` other than the value are disabled so the native control keeps it (`<option>` children aren't; with no `value` or `defaultValue` nothing is); once hydrated they are enabled again, since a disabled selected option is left out of the form's data. A `multiple` / `size` list box ignores the mouse and the keys that pick (arrows, Home/End, Page keys, letters, Space, Ctrl+A); a change that gets through anyway (a touch tap, a phone's picker, `selectOption` in a test) is put back, and your `onChange` isn't called — though a native `change` or `input` listener on the form still sees the event, with the value already restored.
+- Read-only is `aria-readonly` alone; pair it with a note that says why (`aria-describedby`), which screen readers read after the state.
+
+## 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(", ");
       }
@@ -1866,10 +1869,22 @@ window.Aura = (() => {
   var Select = React15.forwardRef(function Select2(props, ref) {
     const auto = uid(), id = props.id || auto;
     const filter = props[FILTER_KEY];
-    const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+    const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+    const ro = !!props.readOnly && !props.disabled;
+    const mounted = useMounted();
+    const kept = React15.useRef(null);
+    const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
     const opts = (props.options || []).map(function(o) {
       const v = typeof o === "object" ? o : { value: o, label: o };
-      return /* @__PURE__ */ React15.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+      return /* @__PURE__ */ React15.createElement(
+        "option",
+        {
+          key: v.value,
+          value: v.value,
+          disabled: v.disabled || ro && !mounted && current2.length > 0 && current2.indexOf(v.value) < 0 || void 0
+        },
+        v.label
+      );
     });
     if (props.placeholder)
       opts.unshift(
@@ -1877,7 +1892,6 @@ window.Aura = (() => {
       );
     const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
     const native = !!props.multiple || props.size != null && props.size > 1;
-    const mounted = useMounted();
     const live = !native && mounted;
     const density = useDensity();
     React15.useEffect(function() {
@@ -1999,7 +2013,7 @@ window.Aura = (() => {
     }
     function choose(it) {
       const el = selRef.current;
-      if (!el || it.disabled) return;
+      if (!el || it.disabled || ro) return;
       if (el.value !== it.value) {
         el.value = it.value;
         el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -2009,7 +2023,7 @@ window.Aura = (() => {
       close(true);
     }
     function openList(at) {
-      if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+      if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
       const list = readItems(selRef.current);
       const ok = choices(list);
       if (!ok.length) return;
@@ -2140,6 +2154,45 @@ window.Aura = (() => {
       [open, active, pos[0] != null]
     );
     const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+    function keep(e) {
+      kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+        return o.selected;
+      }).map(function(o) {
+        return o.value;
+      });
+    }
+    const listBoxLock = ro && native ? {
+      onFocus: function(e) {
+        const user = rest.onFocus;
+        if (user) user(e);
+        keep(e);
+      },
+      onPointerDown: function(e) {
+        const user = rest.onPointerDown;
+        if (user) user(e);
+        keep(e);
+      },
+      onMouseDown: function(e) {
+        const user = rest.onMouseDown;
+        if (user) user(e);
+        e.preventDefault();
+        e.currentTarget.focus();
+      },
+      onKeyDown: function(e) {
+        const user = rest.onKeyDown;
+        if (user) user(e);
+        const k = e.key;
+        const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+        if (picks) e.preventDefault();
+      },
+      onChange: function(e) {
+        const was = kept.current;
+        if (!was) return;
+        Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+          o.selected = was.indexOf(o.value) >= 0;
+        });
+      }
+    } : {};
     const field = (child) => filter ? child : /* @__PURE__ */ React15.createElement(
       Field,
       {
@@ -2172,19 +2225,25 @@ window.Aura = (() => {
       ));
     if (!live)
       return field(
-        /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
+        /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
           "select",
-          Object.assign(extra, rest, {
-            ref: native ? ref : selMerged,
-            id,
-            className: "aura-input__control",
-            required: props.required,
-            "aria-invalid": props.error ? true : void 0,
-            "aria-describedby": described
-          }),
+          Object.assign(
+            extra,
+            rest,
+            {
+              ref: native ? ref : selMerged,
+              id,
+              className: "aura-input__control",
+              required: props.required,
+              "aria-invalid": props.error ? true : void 0,
+              "aria-readonly": ro || void 0,
+              "aria-describedby": described
+            },
+            listBoxLock
+          ),
           opts,
           props.children
-        ), /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+        ), ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
       );
     const listId = id + "-list", labelId = id + "-label";
     const optId = function(i) {
@@ -2273,6 +2332,7 @@ window.Aura = (() => {
             filter ? "aura-filterselect" : "aura-input",
             "aura-select aura-select--custom",
             props.icon && "has-icon",
+            ro && "is-readonly",
             open && "is-open",
             filter && props.disabled && "is-disabled",
             filter && props.className
@@ -2325,6 +2385,7 @@ window.Aura = (() => {
             "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
             "aria-required": props.required || void 0,
             "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
             "aria-describedby": described,
             onFocus: function(e) {
               if (userFocus) userFocus(e);
@@ -2347,7 +2408,7 @@ window.Aura = (() => {
           },
           face || /* @__PURE__ */ React15.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
         ),
-        filter ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+        filter || ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
         popup
       )
     );
@@ -2426,13 +2487,15 @@ window.Aura = (() => {
     const auto = uid(), id = props.id || auto;
     const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
     const on = !!st[0];
+    const ro = !!props.readOnly && !props.disabled;
+    const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ React18.createElement(
       "div",
       {
-        className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+        className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
         onClick: function(e) {
           const t = e.target;
-          if (props.disabled || t.closest("button, label, a, input")) return;
+          if (props.disabled || ro || t.closest("button, label, a, input")) return;
           st[1](!on);
         }
       },
@@ -2447,15 +2510,17 @@ window.Aura = (() => {
           disabled: props.disabled,
           "aria-labelledby": props.label ? id + "-label" : void 0,
           "aria-label": props.label ? void 0 : props["aria-label"],
-          "aria-describedby": props.description ? id + "-desc" : void 0,
+          "aria-readonly": ro || void 0,
+          "aria-describedby": described || void 0,
           className: cx("aura-switch", on && "is-on"),
           onClick: function() {
-            st[1](!on);
+            if (!ro) st[1](!on);
           }
         },
         /* @__PURE__ */ React18.createElement("span", { className: "aura-switch__thumb" })
       ),
-      props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+      props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+      props.icon ? /* @__PURE__ */ React18.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : null
     );
   });
 
@@ -8912,6 +8977,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 +8995,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 +9014,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 +9025,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(", ");
     }
@@ -1848,10 +1851,22 @@ function initialLabel(props, filter) {
 var Select = React15.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const filter = props[FILTER_KEY];
-  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+  const ro = !!props.readOnly && !props.disabled;
+  const mounted = useMounted();
+  const kept = React15.useRef(null);
+  const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
-    return /* @__PURE__ */ React15.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+    return /* @__PURE__ */ React15.createElement(
+      "option",
+      {
+        key: v.value,
+        value: v.value,
+        disabled: v.disabled || ro && !mounted && current2.length > 0 && current2.indexOf(v.value) < 0 || void 0
+      },
+      v.label
+    );
   });
   if (props.placeholder)
     opts.unshift(
@@ -1859,7 +1874,6 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     );
   const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
   const native = !!props.multiple || props.size != null && props.size > 1;
-  const mounted = useMounted();
   const live = !native && mounted;
   const density = useDensity();
   React15.useEffect(function() {
@@ -1981,7 +1995,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
   }
   function choose(it) {
     const el = selRef.current;
-    if (!el || it.disabled) return;
+    if (!el || it.disabled || ro) return;
     if (el.value !== it.value) {
       el.value = it.value;
       el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -1991,7 +2005,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     close(true);
   }
   function openList(at) {
-    if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+    if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
     const list = readItems(selRef.current);
     const ok = choices(list);
     if (!ok.length) return;
@@ -2122,6 +2136,45 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  function keep(e) {
+    kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+      return o.selected;
+    }).map(function(o) {
+      return o.value;
+    });
+  }
+  const listBoxLock = ro && native ? {
+    onFocus: function(e) {
+      const user = rest.onFocus;
+      if (user) user(e);
+      keep(e);
+    },
+    onPointerDown: function(e) {
+      const user = rest.onPointerDown;
+      if (user) user(e);
+      keep(e);
+    },
+    onMouseDown: function(e) {
+      const user = rest.onMouseDown;
+      if (user) user(e);
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: function(e) {
+      const user = rest.onKeyDown;
+      if (user) user(e);
+      const k = e.key;
+      const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+      if (picks) e.preventDefault();
+    },
+    onChange: function(e) {
+      const was = kept.current;
+      if (!was) return;
+      Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+        o.selected = was.indexOf(o.value) >= 0;
+      });
+    }
+  } : {};
   const field = (child) => filter ? child : /* @__PURE__ */ React15.createElement(
     Field,
     {
@@ -2154,19 +2207,25 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     ));
   if (!live)
     return field(
-      /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
+      /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
         "select",
-        Object.assign(extra, rest, {
-          ref: native ? ref : selMerged,
-          id,
-          className: "aura-input__control",
-          required: props.required,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": described
-        }),
+        Object.assign(
+          extra,
+          rest,
+          {
+            ref: native ? ref : selMerged,
+            id,
+            className: "aura-input__control",
+            required: props.required,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
+            "aria-describedby": described
+          },
+          listBoxLock
+        ),
         opts,
         props.children
-      ), /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+      ), ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
     );
   const listId = id + "-list", labelId = id + "-label";
   const optId = function(i) {
@@ -2255,6 +2314,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
           filter ? "aura-filterselect" : "aura-input",
           "aura-select aura-select--custom",
           props.icon && "has-icon",
+          ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
           filter && props.className
@@ -2307,6 +2367,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
           "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
+          "aria-readonly": ro || void 0,
           "aria-describedby": described,
           onFocus: function(e) {
             if (userFocus) userFocus(e);
@@ -2329,7 +2390,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
         },
         face || /* @__PURE__ */ React15.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      filter ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter || ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );
@@ -2408,13 +2469,15 @@ var Switch = React18.forwardRef(function Switch2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
+  const ro = !!props.readOnly && !props.disabled;
+  const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ React18.createElement(
     "div",
     {
-      className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+      className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
       onClick: function(e) {
         const t = e.target;
-        if (props.disabled || t.closest("button, label, a, input")) return;
+        if (props.disabled || ro || t.closest("button, label, a, input")) return;
         st[1](!on);
       }
     },
@@ -2429,15 +2492,17 @@ var Switch = React18.forwardRef(function Switch2(props, ref) {
         disabled: props.disabled,
         "aria-labelledby": props.label ? id + "-label" : void 0,
         "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
+        "aria-readonly": ro || void 0,
+        "aria-describedby": described || void 0,
         className: cx("aura-switch", on && "is-on"),
         onClick: function() {
-          st[1](!on);
+          if (!ro) st[1](!on);
         }
       },
       /* @__PURE__ */ React18.createElement("span", { className: "aura-switch__thumb" })
     ),
-    props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+    props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+    props.icon ? /* @__PURE__ */ React18.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : null
   );
 });
 
@@ -8894,6 +8959,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 +8977,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 +8996,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 +9007,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/Select.js

@@ -83,10 +83,22 @@ function initialLabel(props, filter) {
 const Select = React.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const filter = props[FILTER_KEY];
-  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+  const ro = !!props.readOnly && !props.disabled;
+  const mounted = useMounted();
+  const kept = React.useRef(null);
+  const current = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
-    return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+    return /* @__PURE__ */ React.createElement(
+      "option",
+      {
+        key: v.value,
+        value: v.value,
+        disabled: v.disabled || ro && !mounted && current.length > 0 && current.indexOf(v.value) < 0 || void 0
+      },
+      v.label
+    );
   });
   if (props.placeholder)
     opts.unshift(
@@ -94,7 +106,6 @@ const Select = React.forwardRef(function Select2(props, ref) {
     );
   const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
   const native = !!props.multiple || props.size != null && props.size > 1;
-  const mounted = useMounted();
   const live = !native && mounted;
   const density = useDensity();
   React.useEffect(function() {
@@ -216,7 +227,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   }
   function choose(it) {
     const el = selRef.current;
-    if (!el || it.disabled) return;
+    if (!el || it.disabled || ro) return;
     if (el.value !== it.value) {
       el.value = it.value;
       el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -226,7 +237,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
     close(true);
   }
   function openList(at) {
-    if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+    if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
     const list = readItems(selRef.current);
     const ok = choices(list);
     if (!ok.length) return;
@@ -357,6 +368,45 @@ const Select = React.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  function keep(e) {
+    kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+      return o.selected;
+    }).map(function(o) {
+      return o.value;
+    });
+  }
+  const listBoxLock = ro && native ? {
+    onFocus: function(e) {
+      const user = rest.onFocus;
+      if (user) user(e);
+      keep(e);
+    },
+    onPointerDown: function(e) {
+      const user = rest.onPointerDown;
+      if (user) user(e);
+      keep(e);
+    },
+    onMouseDown: function(e) {
+      const user = rest.onMouseDown;
+      if (user) user(e);
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: function(e) {
+      const user = rest.onKeyDown;
+      if (user) user(e);
+      const k = e.key;
+      const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+      if (picks) e.preventDefault();
+    },
+    onChange: function(e) {
+      const was = kept.current;
+      if (!was) return;
+      Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+        o.selected = was.indexOf(o.value) >= 0;
+      });
+    }
+  } : {};
   const field = (child) => filter ? child : /* @__PURE__ */ React.createElement(
     Field,
     {
@@ -389,19 +439,25 @@ const Select = React.forwardRef(function Select2(props, ref) {
     ));
   if (!live)
     return field(
-      /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
+      /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
         "select",
-        Object.assign(extra, rest, {
-          ref: native ? ref : selMerged,
-          id,
-          className: "aura-input__control",
-          required: props.required,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": described
-        }),
+        Object.assign(
+          extra,
+          rest,
+          {
+            ref: native ? ref : selMerged,
+            id,
+            className: "aura-input__control",
+            required: props.required,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
+            "aria-describedby": described
+          },
+          listBoxLock
+        ),
         opts,
         props.children
-      ), /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+      ), ro ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
     );
   const listId = id + "-list", labelId = id + "-label";
   const optId = function(i) {
@@ -490,6 +546,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           filter ? "aura-filterselect" : "aura-input",
           "aura-select aura-select--custom",
           props.icon && "has-icon",
+          ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
           filter && props.className
@@ -542,6 +599,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
+          "aria-readonly": ro || void 0,
           "aria-describedby": described,
           onFocus: function(e) {
             if (userFocus) userFocus(e);
@@ -564,7 +622,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
         },
         face || /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      filter ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter || ro ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );

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/Switch.js

@@ -1,17 +1,20 @@
 'use client';
 import * as React from "react";
+import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
 const Switch = React.forwardRef(function Switch2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
+  const ro = !!props.readOnly && !props.disabled;
+  const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+      className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
       onClick: function(e) {
         const t = e.target;
-        if (props.disabled || t.closest("button, label, a, input")) return;
+        if (props.disabled || ro || t.closest("button, label, a, input")) return;
         st[1](!on);
       }
     },
@@ -26,15 +29,17 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
         disabled: props.disabled,
         "aria-labelledby": props.label ? id + "-label" : void 0,
         "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
+        "aria-readonly": ro || void 0,
+        "aria-describedby": described || void 0,
         className: cx("aura-switch", on && "is-on"),
         onClick: function() {
-          st[1](!on);
+          if (!ro) st[1](!on);
         }
       },
       /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
     ),
-    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : 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

@@ -517,6 +517,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
+	/** 5.19 (Chamber-OS 114): a locked value. The field stays in the Tab order with `aria-readonly` and shows the chosen
+	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
+	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
+	readOnly?: boolean | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -557,8 +561,16 @@ export interface SwitchProps {
 	defaultChecked?: boolean | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** 5.19 (Chamber-OS 113): a locked value. The switch stays in the Tab order with `aria-readonly`, so its name,
+	 * state and description are heard; click, Space and the row ignore it. Its colours stay (on reads as on). */
+	readOnly?: boolean | undefined;
+	/** 5.19: an icon at the end of the row, in fg-secondary and the field icon's size — `icon={<IconLock />}` or
+	 * `icon="lock"` on a locked row. Hidden from screen readers; say what it means in the description. */
+	icon?: IconInput | undefined;
 	/** Required when there is no visible label. */
 	"aria-label"?: string | undefined;
+	/** 5.19: ids of more text that describes the switch (a lock note); merged with `description`'s. */
+	"aria-describedby"?: string | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 }
@@ -914,6 +926,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 +940,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 +1755,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

@@ -517,6 +517,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
+	/** 5.19 (Chamber-OS 114): a locked value. The field stays in the Tab order with `aria-readonly` and shows the chosen
+	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
+	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
+	readOnly?: boolean | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -557,8 +561,16 @@ export interface SwitchProps {
 	defaultChecked?: boolean | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** 5.19 (Chamber-OS 113): a locked value. The switch stays in the Tab order with `aria-readonly`, so its name,
+	 * state and description are heard; click, Space and the row ignore it. Its colours stay (on reads as on). */
+	readOnly?: boolean | undefined;
+	/** 5.19: an icon at the end of the row, in fg-secondary and the field icon's size — `icon={<IconLock />}` or
+	 * `icon="lock"` on a locked row. Hidden from screen readers; say what it means in the description. */
+	icon?: IconInput | undefined;
 	/** Required when there is no visible label. */
 	"aria-label"?: string | undefined;
+	/** 5.19: ids of more text that describes the switch (a lock note); merged with `description`'s. */
+	"aria-describedby"?: string | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 }
@@ -914,6 +926,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 +940,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 +1755,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

@@ -487,6 +487,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
 .aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
+/* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
+ * open), no pointer; the value keeps full contrast. */
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -528,6 +532,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-fg); }
 .aura-switch:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-switch:disabled { cursor: not-allowed; }
+/* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
+ * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
+.aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
+.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1294,6 +1302,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 {
@@ -1410,7 +1422,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: calc((var(--aura-touch-target) - 20px) / 2);
   }
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
-  .aura-switch-row:not(.is-disabled) { cursor: pointer; }
+  .aura-switch-row:not(.is-disabled):not(.is-readonly) { cursor: pointer; }
   .aura-radio-group__list { gap: 0; }
   .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
 }

package/dist/styles.layer.css

@@ -489,6 +489,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
 .aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
+/* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
+ * open), no pointer; the value keeps full contrast. */
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -530,6 +534,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-fg); }
 .aura-switch:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-switch:disabled { cursor: not-allowed; }
+/* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
+ * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
+.aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
+.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1296,6 +1304,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 {
@@ -1412,7 +1424,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: calc((var(--aura-touch-target) - 20px) / 2);
   }
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
-  .aura-switch-row:not(.is-disabled) { cursor: pointer; }
+  .aura-switch-row:not(.is-disabled):not(.is-readonly) { cursor: pointer; }
   .aura-radio-group__list { gap: 0; }
   .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
 }

package/package.json

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