@jirawatpyk/aura-react 5.48.0 → 5.50.0

package/README.md

@@ -186,10 +186,23 @@ 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.
+
 ## 5.48 — Chamber-OS addendum 55 (#153–154)
 
 - **The `actionsBarBelow` bar is now ActionBar's edge strip** (#153): the full width of the screen, on its bottom edge (or on a BottomNav's top edge), a top border only — no radius, no shadow — with ActionBar's inner padding (8px block, 16px start, 12px end) and the home-indicator inset inside it, as the save and bulk bars of an app built on `ActionBar position="container"` look. The page's end padding and `scroll-padding-bottom` follow the new height. The layout inside is unchanged.
-- **Bottom bars on a short screen** (#154): on a screen 480px tall or less — 400% zoom on a desktop (320×256 CSS px), a phone held sideways — `actionsBarBelow` no longer fixes the actions to the bottom: they stay in the header's own row (laid out by `actionsFullWidthBelow` if set), with no status line, page-end space or scroll padding; and an `ActionBar` (either `position`) stops sticking and sits at the end of its container, in the flow. AppShell's top bar scrolls away with the page there too, so a field reached backwards (Shift+Tab) isn't left under it, and `--aura-shell-bar-height` is 0 meanwhile, so nothing sticky (a DataTable `stickyHeader`) leaves a gap for it. A focused control is never under a bar there (WCAG 2.4.11, 1.4.10); from 481px tall everything is as before. An ActionBar with `hidesBottomNav` still hides the BottomNav on a short screen while it sits at the end of its container. Wherever a BottomNav shows (any height), the page's `scroll-padding-bottom` now reserves its height, so a field tabbed into view stops above it.
+- **Bottom bars on a short screen** (#154): on a screen 30rem tall or less — 480px at the browser's default 16px text, and since 5.49 (#155) it follows the default font size set in Chrome, Edge or Firefox (960px at 32px, 720px at 24px), so large-text users get the same room (iOS Dynamic Type and Safari's text-size controls don't change it); 400% zoom on a desktop (320×256 CSS px), a phone held sideways — `actionsBarBelow` no longer fixes the actions to the bottom: they stay in the header's own row (laid out by `actionsFullWidthBelow` if set), with no status line, page-end space or scroll padding; and an `ActionBar` (either `position`) stops sticking and sits at the end of its container, in the flow. AppShell's top bar scrolls away with the page there too, so a field reached backwards (Shift+Tab) isn't left under it, and `--aura-shell-bar-height` is 0 meanwhile, so nothing sticky (a DataTable `stickyHeader`) leaves a gap for it. A focused control is never under a bar there (WCAG 2.4.11, 1.4.10); taller than 30rem everything is as before. The width breakpoints stay in px. An ActionBar with `hidesBottomNav` still hides the BottomNav on a short screen while it sits at the end of its container. Wherever a BottomNav shows (any height), the page's `scroll-padding-bottom` now reserves its height, so a field tabbed into view stops above it.
 - **`actionsBarLook="floating"`** keeps 5.45's card (inset 16px, lifted 12px, bordered all round, rounded, with the overlay shadow) — the look of `ActionBar position="viewport"`. Only the bar's look changed; nothing else about `actionsBarBelow`.
 
 ## 5.47 — Chamber-OS addendum 54 (#152)

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"])
         }
       )
@@ -8333,6 +8341,7 @@ window.Aura = (() => {
     }
     const rootRef = React48.useRef(null);
     const barRef = React48.useRef(null);
+    const probeRef = React48.useRef(null);
     const mergedRef = useMergedRef(ref, rootRef);
     const hasBar = !!(props.header || props.nav);
     const barH = React48.useState(null);
@@ -8362,6 +8371,7 @@ window.Aura = (() => {
         sync();
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
         if (ro) ro.observe(bar);
+        if (ro && probeRef.current) ro.observe(probeRef.current);
         window.addEventListener("resize", sync);
         return function() {
           if (ro) ro.disconnect();
@@ -8445,7 +8455,8 @@ window.Aura = (() => {
             "aria-expanded": open
           }
         ) : null,
-        /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+        /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+        /* @__PURE__ */ React48.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
       ) : null, /* @__PURE__ */ React48.createElement(
         "main",
         {

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"])
       }
     )
@@ -8315,6 +8323,7 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
   }
   const rootRef = React48.useRef(null);
   const barRef = React48.useRef(null);
+  const probeRef = React48.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React48.useState(null);
@@ -8344,6 +8353,7 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(bar);
+      if (ro && probeRef.current) ro.observe(probeRef.current);
       window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
@@ -8427,7 +8437,8 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
           "aria-expanded": open
         }
       ) : null,
-      /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+      /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+      /* @__PURE__ */ React48.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
     ) : null, /* @__PURE__ */ React48.createElement(
       "main",
       {

package/dist/esm/AppShell.js

@@ -30,6 +30,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
   }
   const rootRef = React.useRef(null);
   const barRef = React.useRef(null);
+  const probeRef = React.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React.useState(null);
@@ -59,6 +60,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(bar);
+      if (ro && probeRef.current) ro.observe(probeRef.current);
       window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
@@ -142,7 +144,8 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
           "aria-expanded": open
         }
       ) : null,
-      /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+      /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
     ) : null, /* @__PURE__ */ React.createElement(
       "main",
       {

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
@@ -1109,6 +1113,8 @@ a.aura-tab { text-decoration: none; }
   --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
 }
 .aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+/* 5.49 (Chamber-OS 155): AppShell watches this for changes of the browser's text size (see the 30rem queries). */
+.aura-shell__probe { position: absolute; top: 0; inset-inline-start: 0; font-size: medium; width: 1em; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
 /* 5.35 (DxT Monitor 13): headerHideOnScroll — below lg the bar slides up out of view while the page scrolls down (its
  * shadow too); AppShell sets the bar-height token to 0 meanwhile. */
 .aura-shell__bar--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
@@ -1208,14 +1214,14 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
-/* 5.48 (Chamber-OS 154): only on a screen taller than 480px — on a short one (400% zoom, a phone held sideways) the
+/* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
  * actions stay in the header's own row and the page keeps its full height.
  * 5.48 (Chamber-OS 153): the bar is ActionBar's edge strip (full width, on the bottom edge, top border, the safe area
  * inside); actionsBarLook="floating" keeps 5.45's inset card.
  * 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
  * height (--aura-page-actions-height, measured on the client) so its end and a focused field scroll clear. */
 .aura-page-header__status { display: none; }
-@media (max-width: 639.98px) and (min-height: 480.02px) {
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@@ -1233,7 +1239,7 @@ a.aura-tab { text-decoration: none; }
   :root:has(.aura-page-header--actions-bar-below-sm) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
   :root:has(.aura-page-header--actions-bar-below-sm):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
-@media (max-width: 767.98px) and (min-height: 480.02px) {
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@@ -2093,11 +2099,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
-/* 5.48 (Chamber-OS 154): on a short screen (480px or less: 400% zoom, a phone held sideways) the bar stops sticking —
+/* 5.48 (Chamber-OS 154): on a short screen (30rem or less: 400% zoom, a phone held sideways) the bar stops sticking —
  * it stays at the end of its container, in the flow, so it never covers a focused field (WCAG 2.4.11, 1.4.10). */
-@media (max-height: 480px) { .aura-actionbar:not(.is-idle) { position: static; } }
+/* 5.49 (Chamber-OS 155): the threshold is 30rem, which in a media query is the browser's text size, not the page's:
+ * 480px at the default 16px, 960px at 32px, so large text counts lines of text, not pixels. */
+@media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
-@media (max-height: 480px) { .aura-shell__bar { position: static; } }
+@media (max-height: 30rem) { .aura-shell__bar { position: static; } }
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }

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
@@ -1111,6 +1115,8 @@ a.aura-tab { text-decoration: none; }
   --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
 }
 .aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+/* 5.49 (Chamber-OS 155): AppShell watches this for changes of the browser's text size (see the 30rem queries). */
+.aura-shell__probe { position: absolute; top: 0; inset-inline-start: 0; font-size: medium; width: 1em; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
 /* 5.35 (DxT Monitor 13): headerHideOnScroll — below lg the bar slides up out of view while the page scrolls down (its
  * shadow too); AppShell sets the bar-height token to 0 meanwhile. */
 .aura-shell__bar--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
@@ -1210,14 +1216,14 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
-/* 5.48 (Chamber-OS 154): only on a screen taller than 480px — on a short one (400% zoom, a phone held sideways) the
+/* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
  * actions stay in the header's own row and the page keeps its full height.
  * 5.48 (Chamber-OS 153): the bar is ActionBar's edge strip (full width, on the bottom edge, top border, the safe area
  * inside); actionsBarLook="floating" keeps 5.45's inset card.
  * 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
  * height (--aura-page-actions-height, measured on the client) so its end and a focused field scroll clear. */
 .aura-page-header__status { display: none; }
-@media (max-width: 639.98px) and (min-height: 480.02px) {
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@@ -1235,7 +1241,7 @@ a.aura-tab { text-decoration: none; }
   :root:has(.aura-page-header--actions-bar-below-sm) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
   :root:has(.aura-page-header--actions-bar-below-sm):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
-@media (max-width: 767.98px) and (min-height: 480.02px) {
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@@ -2095,11 +2101,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
-/* 5.48 (Chamber-OS 154): on a short screen (480px or less: 400% zoom, a phone held sideways) the bar stops sticking —
+/* 5.48 (Chamber-OS 154): on a short screen (30rem or less: 400% zoom, a phone held sideways) the bar stops sticking —
  * it stays at the end of its container, in the flow, so it never covers a focused field (WCAG 2.4.11, 1.4.10). */
-@media (max-height: 480px) { .aura-actionbar:not(.is-idle) { position: static; } }
+/* 5.49 (Chamber-OS 155): the threshold is 30rem, which in a media query is the browser's text size, not the page's:
+ * 480px at the default 16px, 960px at 32px, so large text counts lines of text, not pixels. */
+@media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
-@media (max-height: 480px) { .aura-shell__bar { position: static; } }
+@media (max-height: 30rem) { .aura-shell__bar { position: static; } }
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.48.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",