@jirawatpyk/aura-react 5.49.0 → 5.50.0

package/README.md

@@ -186,6 +186,15 @@ 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.50 — Chamber-OS addendum 57 (#156)
+
+- **`invalid` on TextField and Textarea** (and PasswordField, which is a TextField; `Field` for a custom control): marks the value invalid without AURA's message — the danger edge (`--aura-border-danger`, light and dark, also on hover and focus) and `aria-invalid="true"` on the control, no error line, and `aria-describedby` as it would be without it (the addon, the hint, then your own ids). For a page that explains the problem itself — a live contrast readout, a reason line a disabled Save points at. Point `aria-describedby` at that explanation, or a screen reader hears "invalid" with no reason. `error` still wins: its message replaces the hint and its id the hint's. A disabled field keeps its disabled edge.
+- **Your own `aria-invalid="true"` is enough too**: a field whose input or textarea carries it gets the same edge, so a custom control inside `Field` (with `invalid` on the Field for the class) or a form library that sets it needs nothing else.
+
+```jsx
+<TextField label="Primary colour" hint="A hex value." value={colour} onChange={…} invalid={!meetsAa} aria-describedby="contrast-readout" />
+```
+
 ## 5.49 — Chamber-OS addendum 56 (#155)
 
 - **The short-screen threshold follows the browser's text size**: the height at which bottom bars stop pinning (5.48, #154) is `30rem`, not `480px`. In a media query `rem` is the browser's default font size (Chrome, Edge, Firefox; not iOS Dynamic Type or Safari's text size), not the page's `html` font size: 480px at the default 16px (nothing changes), 720px at 24px (an iPhone SE counts as short, an 844px phone keeps the bar), 960px at 32px (an 844px phone counts as short — it holds what a 422px screen holds at 16px). There the `actionsBarBelow` actions stay in the header, an ActionBar sits at the end of its container and AppShell's top bar scrolls away, as at 400% zoom. Changing the text size on an open page re-checks it (the bar-height tokens follow). The width breakpoints stay in px.

package/dist/aura.bundle.js

@@ -1992,7 +1992,12 @@ window.Aura = (() => {
       "div",
       {
         ref,
-        className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
+        className: cx(
+          "aura-field",
+          (props.error || props.invalid) && "is-invalid",
+          props.disabled && "is-disabled",
+          props.className
+        )
       },
       props.label ? h3(
         props.labelAs || "label",
@@ -2037,7 +2042,8 @@ window.Aura = (() => {
     "placeholder",
     "touchHeight",
     "labelAddon",
-    "labelAddonDescribes"
+    "labelAddonDescribes",
+    "invalid"
   ];
 
   // src/TextField.tsx
@@ -2052,6 +2058,7 @@ window.Aura = (() => {
         label: props.label,
         hint: props.hint,
         error: props.error,
+        invalid: props.invalid,
         required: props.required,
         optional: props.optional,
         labelAddon: props.labelAddon,
@@ -2068,7 +2075,7 @@ window.Aura = (() => {
           className: "aura-input__control",
           placeholder: props.placeholder,
           required: props.required,
-          "aria-invalid": props.error ? true : rest["aria-invalid"],
+          "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
           "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       ), props.suffix ? /* @__PURE__ */ React14.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
@@ -2087,6 +2094,7 @@ window.Aura = (() => {
         label: props.label,
         hint: props.hint,
         error: props.error,
+        invalid: props.invalid,
         required: props.required,
         optional: props.optional,
         labelAddon: props.labelAddon,
@@ -2103,7 +2111,7 @@ window.Aura = (() => {
           className: "aura-input aura-textarea",
           placeholder: props.placeholder,
           required: props.required,
-          "aria-invalid": props.error ? true : rest["aria-invalid"],
+          "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
           "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       )

package/dist/cjs/index.cjs

@@ -1974,7 +1974,12 @@ var Field = React13.forwardRef(function Field2(props, ref) {
     "div",
     {
       ref,
-      className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
+      className: cx(
+        "aura-field",
+        (props.error || props.invalid) && "is-invalid",
+        props.disabled && "is-disabled",
+        props.className
+      )
     },
     props.label ? h3(
       props.labelAs || "label",
@@ -2019,7 +2024,8 @@ var FIELD_KEYS = [
   "placeholder",
   "touchHeight",
   "labelAddon",
-  "labelAddonDescribes"
+  "labelAddonDescribes",
+  "invalid"
 ];
 
 // src/TextField.tsx
@@ -2034,6 +2040,7 @@ var TextField = React14.forwardRef(function TextField2(props, ref) {
       label: props.label,
       hint: props.hint,
       error: props.error,
+      invalid: props.invalid,
       required: props.required,
       optional: props.optional,
       labelAddon: props.labelAddon,
@@ -2050,7 +2057,7 @@ var TextField = React14.forwardRef(function TextField2(props, ref) {
         className: "aura-input__control",
         placeholder: props.placeholder,
         required: props.required,
-        "aria-invalid": props.error ? true : rest["aria-invalid"],
+        "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
         "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     ), props.suffix ? /* @__PURE__ */ React14.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
@@ -2069,6 +2076,7 @@ var Textarea = React15.forwardRef(function Textarea2(props, ref) {
       label: props.label,
       hint: props.hint,
       error: props.error,
+      invalid: props.invalid,
       required: props.required,
       optional: props.optional,
       labelAddon: props.labelAddon,
@@ -2085,7 +2093,7 @@ var Textarea = React15.forwardRef(function Textarea2(props, ref) {
         className: "aura-input aura-textarea",
         placeholder: props.placeholder,
         required: props.required,
-        "aria-invalid": props.error ? true : rest["aria-invalid"],
+        "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
         "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )

package/dist/esm/Field.js

@@ -11,7 +11,12 @@ const Field = React.forwardRef(function Field2(props, ref) {
     "div",
     {
       ref,
-      className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
+      className: cx(
+        "aura-field",
+        (props.error || props.invalid) && "is-invalid",
+        props.disabled && "is-disabled",
+        props.className
+      )
     },
     props.label ? h(
       props.labelAs || "label",
@@ -56,7 +61,8 @@ const FIELD_KEYS = [
   "placeholder",
   "touchHeight",
   "labelAddon",
-  "labelAddonDescribes"
+  "labelAddonDescribes",
+  "invalid"
 ];
 export {
   FIELD_KEYS,

package/dist/esm/TextField.js

@@ -13,6 +13,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
       label: props.label,
       hint: props.hint,
       error: props.error,
+      invalid: props.invalid,
       required: props.required,
       optional: props.optional,
       labelAddon: props.labelAddon,
@@ -29,7 +30,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         className: "aura-input__control",
         placeholder: props.placeholder,
         required: props.required,
-        "aria-invalid": props.error ? true : rest["aria-invalid"],
+        "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
         "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

@@ -12,6 +12,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
       label: props.label,
       hint: props.hint,
       error: props.error,
+      invalid: props.invalid,
       required: props.required,
       optional: props.optional,
       labelAddon: props.labelAddon,
@@ -28,7 +29,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
         className: "aura-input aura-textarea",
         placeholder: props.placeholder,
         required: props.required,
-        "aria-invalid": props.error ? true : rest["aria-invalid"],
+        "aria-invalid": props.error || props.invalid ? true : rest["aria-invalid"],
         "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )

package/dist/index.d.cts

@@ -419,6 +419,10 @@ export interface FieldProps {
 	optional?: boolean | undefined;
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
+	/** 5.50 (Chamber-OS 156): marks the value invalid — the danger border and `aria-invalid="true"` — without AURA's
+	 * message: no error line, and `aria-describedby` stays as it is (the hint, the addon, your own ids). For a page that
+	 * explains the problem itself (a live readout, a reason a button points at). `error` still wins when set. */
+	invalid?: boolean | undefined;
 	/** Leading icon inside the field. */
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
@@ -570,6 +574,10 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.50 (Chamber-OS 156): marks the value invalid — the danger border and `aria-invalid="true"` — without AURA's
+	 * message: no error line, and `aria-describedby` stays as it is (the hint, the addon, your own ids). For a page that
+	 * explains the problem itself (a live readout, a reason a button points at). `error` still wins when set. */
+	invalid?: boolean | 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. */
@@ -1798,6 +1806,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	labelAs?: string | undefined;
 	labelId?: string | undefined;
 	disabled?: boolean | undefined;
+	/** 5.50 (Chamber-OS 156): the danger look without a message (`is-invalid`, no error line). Set `aria-invalid` on
+	 * your control yourself; `error` still renders its message. */
+	invalid?: boolean | undefined;
 	className?: string | undefined;
 }
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -419,6 +419,10 @@ export interface FieldProps {
 	optional?: boolean | undefined;
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
+	/** 5.50 (Chamber-OS 156): marks the value invalid — the danger border and `aria-invalid="true"` — without AURA's
+	 * message: no error line, and `aria-describedby` stays as it is (the hint, the addon, your own ids). For a page that
+	 * explains the problem itself (a live readout, a reason a button points at). `error` still wins when set. */
+	invalid?: boolean | undefined;
 	/** Leading icon inside the field. */
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
@@ -570,6 +574,10 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.50 (Chamber-OS 156): marks the value invalid — the danger border and `aria-invalid="true"` — without AURA's
+	 * message: no error line, and `aria-describedby` stays as it is (the hint, the addon, your own ids). For a page that
+	 * explains the problem itself (a live readout, a reason a button points at). `error` still wins when set. */
+	invalid?: boolean | 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. */
@@ -1798,6 +1806,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	labelAs?: string | undefined;
 	labelId?: string | undefined;
 	disabled?: boolean | undefined;
+	/** 5.50 (Chamber-OS 156): the danger look without a message (`is-invalid`, no error line). Set `aria-invalid` on
+	 * your control yourself; `error` still renders its message. */
+	invalid?: boolean | undefined;
 	className?: string | undefined;
 }
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/styles.css

@@ -528,6 +528,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input__icon { position: absolute; left: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-input__suffix { padding: 0 var(--aura-space-3) 0 0; color: var(--aura-fg-secondary); font-size: max(13px, .8125rem); white-space: nowrap; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
+/* 5.50 (Chamber-OS 156): a control the page marks aria-invalid="true" itself gets the same edge, message or not (a
+ * disabled field keeps its disabled edge, as with is-invalid). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"] { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a

package/dist/styles.layer.css

@@ -530,6 +530,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input__icon { position: absolute; left: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-input__suffix { padding: 0 var(--aura-space-3) 0 0; color: var(--aura-fg-secondary); font-size: max(13px, .8125rem); white-space: nowrap; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
+/* 5.50 (Chamber-OS 156): a control the page marks aria-invalid="true" itself gets the same edge, message or not (a
+ * disabled field keeps its disabled edge, as with is-invalid). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"] { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a

package/package.json

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