@jirawatpyk/aura-react 5.30.0 → 5.31.0

package/README.md

@@ -186,6 +186,11 @@ 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.31 — Chamber-OS addenda 41–42
+
+- **`labelAddon` on TextField, Textarea and PasswordField** (item 138): a node between the label and the box, in the field's 6px gap — e.g. the phrase to type on a typed confirmation, as a chip with a copy button, so it is read before the box and can be copied. The hint and error stay below the box. The addon's box is `.aura-field__addon` with the id `{id}-addon`, and that id comes first in the input's `aria-describedby` (then the error or hint, then your own `aria-describedby` ids), so a screen reader reads it after the label; keep any button names in it short ("Copy"). `labelAddonDescribes={false}` keeps it out — for an addon that isn't a description (a "Forgot password?" link), or to name only part of it (give that part an id and pass it in `aria-describedby`); ids are never repeated. A focusable control in it comes before the input in tab order; clicking the label still focuses the input. `Field` takes `labelAddon` too, for a custom control (add `{id}-addon` to that control's `aria-describedby` yourself). The other fields (Select, Combobox, NumberField, the pickers, FileUpload) don't take it yet. Unset, nothing changes.
+- **"Chosen" follows the brand** (item 139): `createTheme`, `<ThemeStyle>` and `npx aura-theme --brand` now emit `--aura-control-checked-bg` / `-fg` for light and dark, so a themed product's checked box, radio dot, switch, active tab underline, current page, selected day and year, completed step and checked menu item match its links and focus instead of staying violet. Light is the theme's accent itself; dark is the brand's 300 step, lightened to at least 3:1 on the dark surface and canvas (as AURA's own violet-300). The mark on it is white or ink, whichever reads better; both are in the theme's contrast checks (fill 3:1 on surface and canvas, mark 4.5:1 on the fill). In aura.css the light `--aura-control-checked-bg` is now `var(--aura-accent-violet)` (the same violet-700 by default), so a hand-written `:root` override of the accent carries it too; a scoped override needs the generator, or both tokens. Unthemed, nothing changes. Remove any hand-written `--aura-control-checked-*` stand-in after regenerating the theme.
+
 ## 5.30 — Visual polish (audit, Oct 2026) and Chamber-OS addenda 38–40
 
 One release: everything below ships together in 5.30.0.

package/dist/aura.bundle.js

@@ -1755,6 +1755,7 @@ window.Aura = (() => {
         props.required ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
         props.optional ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
       ) : null,
+      hasAddon(props.labelAddon) ? /* @__PURE__ */ React12.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
       props.children,
       props.error ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React12.createElement(Icon, { name: /* @__PURE__ */ React12.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
     );
@@ -1762,6 +1763,20 @@ window.Aura = (() => {
   function describedBy(id, p) {
     return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
   }
+  function hasAddon(n3) {
+    return n3 != null && typeof n3 !== "boolean" && n3 !== "";
+  }
+  function joinDescribedBy(id, p, own) {
+    const ids = [
+      hasAddon(p.labelAddon) && p.labelAddonDescribes !== false ? id + "-addon" : "",
+      describedBy(id, p) || ""
+    ].concat(typeof own === "string" ? own.split(/\s+/) : []);
+    const out = [];
+    ids.forEach(function(x) {
+      if (x && out.indexOf(x) < 0) out.push(x);
+    });
+    return out.join(" ") || void 0;
+  }
   var FIELD_KEYS = [
     "label",
     "hint",
@@ -1774,7 +1789,9 @@ window.Aura = (() => {
     "suffix",
     "options",
     "placeholder",
-    "touchHeight"
+    "touchHeight",
+    "labelAddon",
+    "labelAddonDescribes"
   ];
 
   // src/TextField.tsx
@@ -1791,6 +1808,7 @@ window.Aura = (() => {
         error: props.error,
         required: props.required,
         optional: props.optional,
+        labelAddon: props.labelAddon,
         disabled: props.disabled,
         className: cx(touchClass(props.touchHeight), props.className)
       },
@@ -1805,7 +1823,7 @@ window.Aura = (() => {
           placeholder: props.placeholder,
           required: props.required,
           "aria-invalid": props.error ? true : rest["aria-invalid"],
-          "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+          "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       ), props.suffix ? /* @__PURE__ */ React13.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
     );
@@ -1825,6 +1843,7 @@ window.Aura = (() => {
         error: props.error,
         required: props.required,
         optional: props.optional,
+        labelAddon: props.labelAddon,
         disabled: props.disabled,
         className: cx(touchClass(props.touchHeight), props.className)
       },
@@ -1839,7 +1858,7 @@ window.Aura = (() => {
           placeholder: props.placeholder,
           required: props.required,
           "aria-invalid": props.error ? true : rest["aria-invalid"],
-          "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+          "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       )
     );
@@ -8582,6 +8601,13 @@ window.Aura = (() => {
       D["accent-lime"] = s[200];
       D["mesh-to"] = s[200];
     }
+    function onFill(bg) {
+      return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+    }
+    L["control-checked-bg"] = L["accent-violet"];
+    L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+    D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+    D["control-checked-fg"] = onFill(D["control-checked-bg"]);
     const shadowLight = INK, shadowDark = D["accent-violet"];
     if (o.primary === "brand") {
       L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -8664,6 +8690,30 @@ window.Aura = (() => {
       );
     }
     if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+    [
+      [
+        "light",
+        L,
+        [
+          ["bg-surface", ZINC[0]],
+          ["bg-canvas", ZINC[50]]
+        ]
+      ],
+      [
+        "dark",
+        D,
+        [
+          ["bg-surface", ZINC[900]],
+          ["bg-canvas", ZINC[950]]
+        ]
+      ]
+    ].forEach(function(g) {
+      const t = g[0], m = g[1];
+      g[2].forEach(function(gr) {
+        check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+      });
+      check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+    });
     function css(selector) {
       if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
         throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/cjs/index.cjs

@@ -1737,6 +1737,7 @@ var Field = React12.forwardRef(function Field2(props, ref) {
       props.required ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
       props.optional ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
+    hasAddon(props.labelAddon) ? /* @__PURE__ */ React12.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
     props.error ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React12.createElement(Icon, { name: /* @__PURE__ */ React12.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
@@ -1744,6 +1745,20 @@ var Field = React12.forwardRef(function Field2(props, ref) {
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function hasAddon(n3) {
+  return n3 != null && typeof n3 !== "boolean" && n3 !== "";
+}
+function joinDescribedBy(id, p, own) {
+  const ids = [
+    hasAddon(p.labelAddon) && p.labelAddonDescribes !== false ? id + "-addon" : "",
+    describedBy(id, p) || ""
+  ].concat(typeof own === "string" ? own.split(/\s+/) : []);
+  const out = [];
+  ids.forEach(function(x) {
+    if (x && out.indexOf(x) < 0) out.push(x);
+  });
+  return out.join(" ") || void 0;
+}
 var FIELD_KEYS = [
   "label",
   "hint",
@@ -1756,7 +1771,9 @@ var FIELD_KEYS = [
   "suffix",
   "options",
   "placeholder",
-  "touchHeight"
+  "touchHeight",
+  "labelAddon",
+  "labelAddonDescribes"
 ];
 
 // src/TextField.tsx
@@ -1773,6 +1790,7 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -1787,7 +1805,7 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     ), props.suffix ? /* @__PURE__ */ React13.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );
@@ -1807,6 +1825,7 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -1821,7 +1840,7 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )
   );
@@ -8564,6 +8583,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -8646,6 +8672,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/esm/Field.js

@@ -20,6 +20,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
       props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
       props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
+    hasAddon(props.labelAddon) ? /* @__PURE__ */ React.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
     props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
@@ -27,6 +28,20 @@ const Field = React.forwardRef(function Field2(props, ref) {
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function hasAddon(n) {
+  return n != null && typeof n !== "boolean" && n !== "";
+}
+function joinDescribedBy(id, p, own) {
+  const ids = [
+    hasAddon(p.labelAddon) && p.labelAddonDescribes !== false ? id + "-addon" : "",
+    describedBy(id, p) || ""
+  ].concat(typeof own === "string" ? own.split(/\s+/) : []);
+  const out = [];
+  ids.forEach(function(x) {
+    if (x && out.indexOf(x) < 0) out.push(x);
+  });
+  return out.join(" ") || void 0;
+}
 const FIELD_KEYS = [
   "label",
   "hint",
@@ -39,10 +54,14 @@ const FIELD_KEYS = [
   "suffix",
   "options",
   "placeholder",
-  "touchHeight"
+  "touchHeight",
+  "labelAddon",
+  "labelAddonDescribes"
 ];
 export {
   FIELD_KEYS,
   Field,
-  describedBy
+  describedBy,
+  hasAddon,
+  joinDescribedBy
 };

package/dist/esm/TextField.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { cx, omit, touchClass, uid } from "./internal.js";
 const TextField = React.forwardRef(function TextField2(props, ref) {
@@ -15,6 +15,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -29,7 +30,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );

package/dist/esm/Textarea.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
 import { cx, omit, touchClass, uid } from "./internal.js";
 const Textarea = React.forwardRef(function Textarea2(props, ref) {
   const auto = uid(), id = props.id || auto;
@@ -14,6 +14,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -28,7 +29,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )
   );

package/dist/esm/theme.js

@@ -162,6 +162,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -244,6 +251,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/index.d.cts

@@ -415,6 +415,13 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
 	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
 	 * Default: the density's input height. */
@@ -540,6 +547,13 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
 	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
 	touchHeight?: TouchHeight | undefined;
@@ -1634,6 +1648,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;

package/dist/index.d.ts

@@ -415,6 +415,13 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
 	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
 	 * Default: the density's input height. */
@@ -540,6 +547,13 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
 	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
 	touchHeight?: TouchHeight | undefined;
@@ -1634,6 +1648,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;

package/dist/server/index.cjs

@@ -768,6 +768,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -850,6 +857,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/server/index.js

@@ -708,6 +708,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -790,6 +797,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/styles.css

@@ -474,6 +474,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
+.aura-field__addon { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
 
 .aura-input {
@@ -2077,7 +2079,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
  * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
-.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }

package/dist/styles.layer.css

@@ -476,6 +476,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
+.aura-field__addon { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
 
 .aura-input {
@@ -2079,7 +2081,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
  * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
-.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }

package/package.json

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