@jirawatpyk/aura-react 5.49.0 → 5.51.0

package/README.md

@@ -186,6 +186,32 @@ 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.51 — Chamber-OS addenda 58–64 (#157–163)
+
+- **DataTable column `sortDirection`** (#157): `'ascending' | 'descending'` — for a list the page orders (from the URL, a line under the table), puts `aria-sort` on that column's header with no sort button, icon or click, in the server's HTML too. Give it to one column (two warn in development); move it when the order changes. Once the table has its own sort (a sortable header was used, or `sort` is set) that wins and `sortDirection` is ignored, so one header at most claims the order.
+- **DataTable `selectAllRef`** (#157): a ref to the select-all checkbox, e.g. to return focus there after a bulk bar's Clear.
+- **The row minimum counts each flexible column's `minWidth`** (#159), the value its cells already used, instead of 160px for every one — eight columns with minimums of 80–132px now fit a 959px box without a sideways scroll. Columns without `minWidth` still count 160.
+- **`StatusPill wrap`** (#158): in a box narrower than the words they wrap inside the pill (the icon beside the first line, the pill's own line height, Thai's too), and its corners are `aura-radius-lg` (16px) instead of full (addendum 61): on one line that still gives fully round ends, so it looks exactly as before; wrapped it is a rounded rectangle rather than a tall lozenge instead of running out of it — for a narrow DataTable column or a stacked card. In a wide box, or without `wrap`, a pill is one line as before.
+- **Toggle Tags among FilterBar's controls show their whole label** (#160): from 640px a selectable Tag inside FilterBar isn't cut at 24ch, only when wider than the bar, and in the Filters sheet it never is; below 640px in the bar itself, and for a Tag outside FilterBar, the cap and its tip stay. Applied-filter chips were already uncapped (5.28).
+- **The wheel over a DataTable scrolls the page again** (#163): `.aura-table__scroll` contains only the sideways axis (`overscroll-behavior-x: contain`), so a vertical wheel over a grid that scrolls sideways scrolls the page, a sideways swipe stays in the grid (no back navigation), and a fixed-`height` grid scrolls inside first, then the page at its end. Remove any `overscroll-behavior-y` override you added for it.
+- **DataTable column `grow`** (#162): a flexible column's share of the spare width (its cells' flex-grow; default 1), e.g. `{ key: 'actions', minWidth: 128, grow: 3 }` puts Approve and Reject side by side once the table is wide. At the row minimum nothing changes, the row minimum ignores it, and fixed-`width` columns and stacked cards ignore it. `grow: 0` keeps a column at its minimum; leave at least one flexible column above 0 or the rows won't fill a wide table.
+- **DataTable `keyboard="tab"`** (#161): every checkbox, sort and column button, row link and row action is an ordinary Tab stop in reading order (Shift+Tab walks back), each with its focus ring, in the grid and in stacked cards — for lists whose rows carry actions people expect to Tab to. The cells stop being Tab stops; the arrows still move between them once focus is in one (click a cell, or Escape from a control), and the grid's row and column semantics stay. Without it (`'grid'`, the default) the table is one Tab stop as before. Keyboard resizing and reordering of columns (Alt/Ctrl+Shift with the arrows on a header cell) need focus on that header cell, so they stay with the grid keyboard.
+- **5.50 follow-up:** a disabled box whose control has `aria-invalid="true"` keeps its disabled edge inside an enabled custom `Field` too.
+
+```jsx
+<DataTable columns={[{ key: 'timeInStage', label: 'Time in stage', minWidth: 132, sortDirection: 'descending' }, …]} selectAllRef={selectAll} … />
+<StatusPill tone="progress" wrap>Awaiting marketing review</StatusPill>
+```
+
+## 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

@@ -684,8 +684,17 @@ window.Aura = (() => {
   };
   function statusPillElement(props, ref) {
     const tone2 = props.tone || toneFor(props.children);
-    const rest = omit(props, ["tone", "className", "children"]);
-    return /* @__PURE__ */ React4.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+    const rest = omit(props, ["tone", "className", "children", "wrap"]);
+    return /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+      },
+      /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+      props.wrap ? /* @__PURE__ */ React4.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+    );
   }
   function badgeElement(props, ref) {
     const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
@@ -1992,7 +2001,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 +2051,8 @@ window.Aura = (() => {
     "placeholder",
     "touchHeight",
     "labelAddon",
-    "labelAddonDescribes"
+    "labelAddonDescribes",
+    "invalid"
   ];
 
   // src/TextField.tsx
@@ -2052,6 +2067,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 +2084,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 +2103,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 +2120,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"])
         }
       )
@@ -5751,6 +5768,8 @@ window.Aura = (() => {
     const refreshing = busy && manual && rows.length > 0;
     const loading = busy && !refreshing;
     const selectable = !!props.selectable;
+    const tabMode = props.keyboard === "tab";
+    const tabIdx = tabMode ? void 0 : -1;
     const reorderable = props.reorderable !== false && !!props.columnControls;
     const controls = !!props.columnControls;
     const oneCallback = !!props.onStateChange;
@@ -5943,7 +5962,7 @@ window.Aura = (() => {
     const pending = React33.useRef(null);
     const resizing = React33.useRef(false);
     useIsoLayoutEffect(function() {
-      if (!gridRef.current) return;
+      if (!gridRef.current || tabMode) return;
       const els = gridRef.current.querySelectorAll(
         '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
       );
@@ -6027,7 +6046,7 @@ window.Aura = (() => {
     });
     let fixedSum = 0, hideTerms = "";
     vis.forEach(function(c) {
-      const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+      const w = widthOf(c) != null ? widthOf(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
       if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
       else fixedSum += w;
     });
@@ -6039,13 +6058,21 @@ window.Aura = (() => {
         acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
       }
     });
+    if (vis.filter(function(c) {
+      return !!c.sortDirection;
+    }).length > 1)
+      devWarnOnce(
+        "datatable-sortdirection-twice",
+        "DataTable: more than one column has sortDirection. The order follows one column; give it to that one."
+      );
     const selW = selectable ? " + var(--aura-table-select-width)" : "";
     const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
     const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
     function cellStyle(c, i) {
       const w = widthOf(c), s = {};
       if (w == null) {
-        s["--aura-cell-flex"] = "1 1 0";
+        const g = typeof c.grow === "number" && c.grow >= 0 && isFinite(c.grow) ? c.grow : 1;
+        s["--aura-cell-flex"] = g + " 1 0";
         s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
       } else {
         s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
@@ -6222,6 +6249,7 @@ window.Aura = (() => {
       [stacked]
     );
     function tabFor(r2, c) {
+      if (tabMode) return -1;
       if (!activeRendered) return r2 === 0 && c === ac ? 0 : -1;
       return r2 === ar && c === acShown ? 0 : -1;
     }
@@ -6244,7 +6272,7 @@ window.Aura = (() => {
       const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
       if (el) {
         pending.current = null;
-        el.focus();
+        (p.menuBtn && el.querySelector(".aura-table__menu-btn") || el).focus();
       }
     });
     function focusCell(r2, c, dir) {
@@ -6520,7 +6548,7 @@ window.Aura = (() => {
       const m = menu;
       setMenu(null);
       if (restore && m) {
-        if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0 };
+        if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0, menuBtn: tabMode };
         else if (m.anchor) m.anchor.focus();
       }
     }
@@ -6608,10 +6636,11 @@ window.Aura = (() => {
           pageKeys.length ? /* @__PURE__ */ React33.createElement(
             Checkbox,
             {
+              ref: props.selectAllRef,
               hideLabel: true,
               checked: all,
               indeterminate: nSel > 0 && !all,
-              tabIndex: -1,
+              tabIndex: tabIdx,
               label: all ? t.deselectAllRows : t.selectAllRows,
               onChange: toggleAll
             }
@@ -6623,7 +6652,8 @@ window.Aura = (() => {
       const ci = i + (selectable ? 1 : 0);
       const isSorted = sort && sort.key === c.key;
       const canSort = c.sortable && canSortAny;
-      const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
+      const own = c.sortDirection === "ascending" || c.sortDirection === "descending" ? c.sortDirection : void 0;
+      const ariaSort = sort && canSortAny ? isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0 : own || (canSort ? "none" : void 0);
       const pin = isPinned(c), edge = pin && i === nPinned - 1;
       head.push(
         /* @__PURE__ */ React33.createElement(
@@ -6681,7 +6711,7 @@ window.Aura = (() => {
             "button",
             {
               type: "button",
-              tabIndex: -1,
+              tabIndex: tabIdx,
               className: cx("aura-table__sort", isSorted && "is-active"),
               onClick: function() {
                 sortBy(c.key);
@@ -6700,7 +6730,7 @@ window.Aura = (() => {
             "button",
             {
               type: "button",
-              tabIndex: -1,
+              tabIndex: tabIdx,
               className: "aura-table__menu-btn",
               "aria-label": t.columnOptions(c.label),
               "aria-haspopup": "menu",
@@ -6775,7 +6805,7 @@ window.Aura = (() => {
               {
                 hideLabel: true,
                 checked: isSel,
-                tabIndex: -1,
+                tabIndex: tabIdx,
                 label: selLabel,
                 onChange: function(on) {
                   const shift = shiftClick.current;

package/dist/cjs/index.cjs

@@ -666,8 +666,17 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React4.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React4.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React4.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
@@ -1974,7 +1983,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 +2033,8 @@ var FIELD_KEYS = [
   "placeholder",
   "touchHeight",
   "labelAddon",
-  "labelAddonDescribes"
+  "labelAddonDescribes",
+  "invalid"
 ];
 
 // src/TextField.tsx
@@ -2034,6 +2049,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 +2066,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 +2085,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 +2102,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"])
       }
     )
@@ -5733,6 +5750,8 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
   const refreshing = busy && manual && rows.length > 0;
   const loading = busy && !refreshing;
   const selectable = !!props.selectable;
+  const tabMode = props.keyboard === "tab";
+  const tabIdx = tabMode ? void 0 : -1;
   const reorderable = props.reorderable !== false && !!props.columnControls;
   const controls = !!props.columnControls;
   const oneCallback = !!props.onStateChange;
@@ -5925,7 +5944,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
   const pending = React33.useRef(null);
   const resizing = React33.useRef(false);
   useIsoLayoutEffect(function() {
-    if (!gridRef.current) return;
+    if (!gridRef.current || tabMode) return;
     const els = gridRef.current.querySelectorAll(
       '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
     );
@@ -6009,7 +6028,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
   });
   let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
-    const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+    const w = widthOf(c) != null ? widthOf(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
   });
@@ -6021,13 +6040,21 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
       acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
     }
   });
+  if (vis.filter(function(c) {
+    return !!c.sortDirection;
+  }).length > 1)
+    devWarnOnce(
+      "datatable-sortdirection-twice",
+      "DataTable: more than one column has sortDirection. The order follows one column; give it to that one."
+    );
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
   const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
   const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
   function cellStyle(c, i) {
     const w = widthOf(c), s = {};
     if (w == null) {
-      s["--aura-cell-flex"] = "1 1 0";
+      const g = typeof c.grow === "number" && c.grow >= 0 && isFinite(c.grow) ? c.grow : 1;
+      s["--aura-cell-flex"] = g + " 1 0";
       s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
     } else {
       s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
@@ -6204,6 +6231,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
     [stacked]
   );
   function tabFor(r2, c) {
+    if (tabMode) return -1;
     if (!activeRendered) return r2 === 0 && c === ac ? 0 : -1;
     return r2 === ar && c === acShown ? 0 : -1;
   }
@@ -6226,7 +6254,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
     const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
     if (el) {
       pending.current = null;
-      el.focus();
+      (p.menuBtn && el.querySelector(".aura-table__menu-btn") || el).focus();
     }
   });
   function focusCell(r2, c, dir) {
@@ -6502,7 +6530,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
     const m = menu;
     setMenu(null);
     if (restore && m) {
-      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0 };
+      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0, menuBtn: tabMode };
       else if (m.anchor) m.anchor.focus();
     }
   }
@@ -6590,10 +6618,11 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
         pageKeys.length ? /* @__PURE__ */ React33.createElement(
           Checkbox,
           {
+            ref: props.selectAllRef,
             hideLabel: true,
             checked: all,
             indeterminate: nSel > 0 && !all,
-            tabIndex: -1,
+            tabIndex: tabIdx,
             label: all ? t.deselectAllRows : t.selectAllRows,
             onChange: toggleAll
           }
@@ -6605,7 +6634,8 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
     const ci = i + (selectable ? 1 : 0);
     const isSorted = sort && sort.key === c.key;
     const canSort = c.sortable && canSortAny;
-    const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
+    const own = c.sortDirection === "ascending" || c.sortDirection === "descending" ? c.sortDirection : void 0;
+    const ariaSort = sort && canSortAny ? isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0 : own || (canSort ? "none" : void 0);
     const pin = isPinned(c), edge = pin && i === nPinned - 1;
     head.push(
       /* @__PURE__ */ React33.createElement(
@@ -6663,7 +6693,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: cx("aura-table__sort", isSorted && "is-active"),
             onClick: function() {
               sortBy(c.key);
@@ -6682,7 +6712,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: "aura-table__menu-btn",
             "aria-label": t.columnOptions(c.label),
             "aria-haspopup": "menu",
@@ -6757,7 +6787,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
             {
               hideLabel: true,
               checked: isSel,
-              tabIndex: -1,
+              tabIndex: tabIdx,
               label: selLabel,
               onChange: function(on) {
                 const shift = shiftClick.current;

package/dist/esm/DataTable.js

@@ -71,6 +71,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const refreshing = busy && manual && rows.length > 0;
   const loading = busy && !refreshing;
   const selectable = !!props.selectable;
+  const tabMode = props.keyboard === "tab";
+  const tabIdx = tabMode ? void 0 : -1;
   const reorderable = props.reorderable !== false && !!props.columnControls;
   const controls = !!props.columnControls;
   const oneCallback = !!props.onStateChange;
@@ -263,7 +265,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const pending = React.useRef(null);
   const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
-    if (!gridRef.current) return;
+    if (!gridRef.current || tabMode) return;
     const els = gridRef.current.querySelectorAll(
       '.aura-table__td button, .aura-table__td a[href], .aura-table__td input, .aura-table__td select, .aura-table__td textarea, .aura-table__td [tabindex="0"]'
     );
@@ -347,7 +349,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   });
   let fixedSum = 0, hideTerms = "";
   vis.forEach(function(c) {
-    const w = widthOf(c) != null ? widthOf(c) : FLEX_MIN, lv = hideLevel(c);
+    const w = widthOf(c) != null ? widthOf(c) : c.minWidth || FLEX_MIN, lv = hideLevel(c);
     if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
     else fixedSum += w;
   });
@@ -359,13 +361,21 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
     }
   });
+  if (vis.filter(function(c) {
+    return !!c.sortDirection;
+  }).length > 1)
+    devWarnOnce(
+      "datatable-sortdirection-twice",
+      "DataTable: more than one column has sortDirection. The order follows one column; give it to that one."
+    );
   const selW = selectable ? " + var(--aura-table-select-width)" : "";
   const gutterR = controls ? "var(--aura-space-12)" : "var(--aura-space-6)";
   const rowMinWidth = "calc(" + fixedSum + "px" + hideTerms + " + var(--aura-space-6) + " + gutterR + selW + ")";
   function cellStyle(c, i) {
     const w = widthOf(c), s = {};
     if (w == null) {
-      s["--aura-cell-flex"] = "1 1 0";
+      const g = typeof c.grow === "number" && c.grow >= 0 && isFinite(c.grow) ? c.grow : 1;
+      s["--aura-cell-flex"] = g + " 1 0";
       s["--aura-cell-min"] = (c.minWidth || FLEX_MIN) + "px";
     } else {
       s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
@@ -542,6 +552,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [stacked]
   );
   function tabFor(r, c) {
+    if (tabMode) return -1;
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
     return r === ar && c === acShown ? 0 : -1;
   }
@@ -564,7 +575,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const el = gridRef.current.querySelector('[data-rc="' + p.r + ":" + c + '"]');
     if (el) {
       pending.current = null;
-      el.focus();
+      (p.menuBtn && el.querySelector(".aura-table__menu-btn") || el).focus();
     }
   });
   function focusCell(r, c, dir) {
@@ -840,7 +851,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const m = menu;
     setMenu(null);
     if (restore && m) {
-      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0 };
+      if (m.kind === "col") pending.current = { r: 0, key: m.key, c: m.rc ? m.rc.c : 0, menuBtn: tabMode };
       else if (m.anchor) m.anchor.focus();
     }
   }
@@ -928,10 +939,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         pageKeys.length ? /* @__PURE__ */ React.createElement(
           Checkbox,
           {
+            ref: props.selectAllRef,
             hideLabel: true,
             checked: all,
             indeterminate: nSel > 0 && !all,
-            tabIndex: -1,
+            tabIndex: tabIdx,
             label: all ? t.deselectAllRows : t.selectAllRows,
             onChange: toggleAll
           }
@@ -943,7 +955,8 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const ci = i + (selectable ? 1 : 0);
     const isSorted = sort && sort.key === c.key;
     const canSort = c.sortable && canSortAny;
-    const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
+    const own = c.sortDirection === "ascending" || c.sortDirection === "descending" ? c.sortDirection : void 0;
+    const ariaSort = sort && canSortAny ? isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0 : own || (canSort ? "none" : void 0);
     const pin = isPinned(c), edge = pin && i === nPinned - 1;
     head.push(
       /* @__PURE__ */ React.createElement(
@@ -1001,7 +1014,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: cx("aura-table__sort", isSorted && "is-active"),
             onClick: function() {
               sortBy(c.key);
@@ -1020,7 +1033,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "button",
           {
             type: "button",
-            tabIndex: -1,
+            tabIndex: tabIdx,
             className: "aura-table__menu-btn",
             "aria-label": t.columnOptions(c.label),
             "aria-haspopup": "menu",
@@ -1095,7 +1108,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             {
               hideLabel: true,
               checked: isSel,
-              tabIndex: -1,
+              tabIndex: tabIdx,
               label: selLabel,
               onChange: function(on) {
                 const shift = shiftClick.current;

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/esm/display.js

@@ -85,8 +85,17 @@ const PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);

package/dist/index.d.cts

@@ -89,12 +89,22 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	tones?: Record<string, StatusTone> | undefined;
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 157): the order this column is in when the page sets it (from the URL, say), not a header
+	 * button — puts `aria-sort` on the header, with no button, icon or click. Give it to one column. Once the table has
+	 * its own sort (someone used a sortable header, or `sort` is set) that wins and this is ignored, so only one header
+	 * claims the order. */
+	sortDirection?: "ascending" | "descending" | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
 	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
 	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 162): a flexible column's share of the spare width (its cells' flex-grow; default 1) — e.g.
+	 * `grow: 3` lets row actions sit side by side once the table is wide. At the minimum width nothing changes; the row
+	 * minimum ignores it; a fixed `width` column and stacked cards ignore it. `0` keeps the column at its minimum; leave
+	 * at least one flexible column above 0, or the rows won't fill a wide table. */
+	grow?: number | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
 	minWidth?: number | undefined;
 	maxWidth?: number | undefined;
@@ -160,6 +170,15 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 161): how the keyboard moves through the table. `'grid'` (default): the table is one Tab stop,
+	 * the arrows move between cells and Enter or F2 enters a cell's controls (APG grid). `'tab'`: every checkbox, sort
+	 * and column button, row link and row action is an ordinary Tab stop in reading order (Shift+Tab walks back), for a
+	 * list whose rows carry actions people expect to Tab to; the cells are not Tab stops, the arrows still move between
+	 * them once focus is in one (click a cell, or Escape from a control), and the grid's row and column semantics stay. */
+	keyboard?: "grid" | "tab" | undefined;
+	/** 5.51 (Chamber-OS 157): a ref to the select-all checkbox (an `<input>`), e.g. to return focus to it after a bulk
+	 * bar's Clear. Null while the page has no selectable rows. */
+	selectAllRef?: React$1.Ref<HTMLInputElement> | undefined;
 	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
 	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
@@ -307,6 +326,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
@@ -419,6 +441,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 +596,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 +1828,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

@@ -89,12 +89,22 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	tones?: Record<string, StatusTone> | undefined;
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 157): the order this column is in when the page sets it (from the URL, say), not a header
+	 * button — puts `aria-sort` on the header, with no button, icon or click. Give it to one column. Once the table has
+	 * its own sort (someone used a sortable header, or `sort` is set) that wins and this is ignored, so only one header
+	 * claims the order. */
+	sortDirection?: "ascending" | "descending" | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
 	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
 	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 162): a flexible column's share of the spare width (its cells' flex-grow; default 1) — e.g.
+	 * `grow: 3` lets row actions sit side by side once the table is wide. At the minimum width nothing changes; the row
+	 * minimum ignores it; a fixed `width` column and stacked cards ignore it. `0` keeps the column at its minimum; leave
+	 * at least one flexible column above 0, or the rows won't fill a wide table. */
+	grow?: number | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
 	minWidth?: number | undefined;
 	maxWidth?: number | undefined;
@@ -160,6 +170,15 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** 5.51 (Chamber-OS 161): how the keyboard moves through the table. `'grid'` (default): the table is one Tab stop,
+	 * the arrows move between cells and Enter or F2 enters a cell's controls (APG grid). `'tab'`: every checkbox, sort
+	 * and column button, row link and row action is an ordinary Tab stop in reading order (Shift+Tab walks back), for a
+	 * list whose rows carry actions people expect to Tab to; the cells are not Tab stops, the arrows still move between
+	 * them once focus is in one (click a cell, or Escape from a control), and the grid's row and column semantics stay. */
+	keyboard?: "grid" | "tab" | undefined;
+	/** 5.51 (Chamber-OS 157): a ref to the select-all checkbox (an `<input>`), e.g. to return focus to it after a bulk
+	 * bar's Clear. Null while the page has no selectable rows. */
+	selectAllRef?: React$1.Ref<HTMLInputElement> | undefined;
 	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
 	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
@@ -307,6 +326,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
@@ -419,6 +441,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 +596,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 +1828,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/server/index.cjs

@@ -1240,8 +1240,17 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React3.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);

package/dist/server/index.d.cts

@@ -46,6 +46,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;

package/dist/server/index.d.ts

@@ -46,6 +46,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;

package/dist/server/index.js

@@ -1176,8 +1176,17 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React3.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);

package/dist/styles.css

@@ -105,7 +105,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   background: var(--aura-bg-surface);
   color: var(--aura-fg-primary);
 }
-.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.51 (Chamber-OS 163): only the sideways axis is contained (a trackpad swipe in a wide grid never goes back a page);
+ * a vertical wheel over a grid that scrolls sideways still scrolls the page, and a fixed-height grid scrolls inside
+ * first, then chains to the page at its end. */
+.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; height: var(--aura-table-h, auto); }
 /* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
  * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
 .aura-table__edge {
@@ -440,6 +443,13 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-status-neutral-bg);
   color: var(--aura-status-neutral-fg);
 }
+/* 5.51 (Chamber-OS 158, addendum 61): wrap — the words break inside the pill when its box is narrower; the icon stays
+ * beside the first line. Corners are aura-radius-lg (16px), not full: on one line (20px tall) that still clamps to fully
+ * round ends, and a wrapped pill is a rounded rectangle, not a tall lozenge. */
+.aura-pill.is-wrap { align-items: flex-start; white-space: normal; border-radius: var(--aura-radius-lg); }
+.aura-pill.is-wrap > .aura-icon { margin-top: calc((max(16px, 1rem) - 12px) / 2); }
+.aura-pill.is-wrap:lang(th) > .aura-icon { margin-top: calc((max(18px, 1.125rem) - 12px) / 2); }
+.aura-pill__text { min-width: 0; overflow-wrap: anywhere; }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
 .aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
@@ -528,6 +538,11 @@ 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; 5.51: so does a disabled control inside an enabled custom
+ * Field). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { 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
@@ -1860,6 +1875,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
 .aura-filterbar__chips { contain: inline-size; }
 .aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
+/* 5.51 (Chamber-OS 160): a toggle Tag among FilterBar's controls (or in its sheet) is a filter, not a label to cut:
+ * from 640px it shows its whole text, cut only when wider than the bar. Below 640px (outside the sheet) the 24ch cap
+ * and its tip stay. */
+@media (min-width: 640px) {
+  .aura-filterbar .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+  .aura-filterbar .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
+}
+/* …and in the Filters sheet at any width: it is full width, with every control labelled. */
+.aura-filterbar--sheet .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+.aura-filterbar--sheet .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: max(13px, .8125rem); font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;

package/dist/styles.layer.css

@@ -107,7 +107,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   background: var(--aura-bg-surface);
   color: var(--aura-fg-primary);
 }
-.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.51 (Chamber-OS 163): only the sideways axis is contained (a trackpad swipe in a wide grid never goes back a page);
+ * a vertical wheel over a grid that scrolls sideways still scrolls the page, and a fixed-height grid scrolls inside
+ * first, then chains to the page at its end. */
+.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; height: var(--aura-table-h, auto); }
 /* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
  * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
 .aura-table__edge {
@@ -442,6 +445,13 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-status-neutral-bg);
   color: var(--aura-status-neutral-fg);
 }
+/* 5.51 (Chamber-OS 158, addendum 61): wrap — the words break inside the pill when its box is narrower; the icon stays
+ * beside the first line. Corners are aura-radius-lg (16px), not full: on one line (20px tall) that still clamps to fully
+ * round ends, and a wrapped pill is a rounded rectangle, not a tall lozenge. */
+.aura-pill.is-wrap { align-items: flex-start; white-space: normal; border-radius: var(--aura-radius-lg); }
+.aura-pill.is-wrap > .aura-icon { margin-top: calc((max(16px, 1rem) - 12px) / 2); }
+.aura-pill.is-wrap:lang(th) > .aura-icon { margin-top: calc((max(18px, 1.125rem) - 12px) / 2); }
+.aura-pill__text { min-width: 0; overflow-wrap: anywhere; }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
 .aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
@@ -530,6 +540,11 @@ 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; 5.51: so does a disabled control inside an enabled custom
+ * Field). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { 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
@@ -1862,6 +1877,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
 .aura-filterbar__chips { contain: inline-size; }
 .aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
+/* 5.51 (Chamber-OS 160): a toggle Tag among FilterBar's controls (or in its sheet) is a filter, not a label to cut:
+ * from 640px it shows its whole text, cut only when wider than the bar. Below 640px (outside the sheet) the 24ch cap
+ * and its tip stay. */
+@media (min-width: 640px) {
+  .aura-filterbar .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+  .aura-filterbar .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
+}
+/* …and in the Filters sheet at any width: it is full width, with every control labelled. */
+.aura-filterbar--sheet .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+.aura-filterbar--sheet .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: max(13px, .8125rem); font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;

package/package.json

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