@jirawatpyk/aura-react 5.18.0 → 5.19.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.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.

package/dist/aura.bundle.js

@@ -1869,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(
@@ -1880,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() {
@@ -2002,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 }));
@@ -2012,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;
@@ -2143,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,
       {
@@ -2175,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) {
@@ -2276,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
@@ -2328,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);
@@ -2350,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
       )
     );
@@ -2429,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);
         }
       },
@@ -2450,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
     );
   });
 

package/dist/cjs/index.cjs

@@ -1851,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(
@@ -1862,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() {
@@ -1984,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 }));
@@ -1994,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;
@@ -2125,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,
     {
@@ -2157,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) {
@@ -2258,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
@@ -2310,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);
@@ -2332,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
     )
   );
@@ -2411,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);
       }
     },
@@ -2432,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
   );
 });
 

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/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/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;
 }

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;
 }

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 {
@@ -1414,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 {
@@ -1416,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.18.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",