@jirawatpyk/aura-react 5.50.0 → 5.51.0

package/README.md

@@ -186,6 +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.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.

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"]);
@@ -5759,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;
@@ -5951,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"]'
       );
@@ -6035,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;
     });
@@ -6047,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";
@@ -6230,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;
     }
@@ -6252,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) {
@@ -6528,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();
       }
     }
@@ -6616,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
             }
@@ -6631,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(
@@ -6689,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);
@@ -6708,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",
@@ -6783,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"]);
@@ -5741,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;
@@ -5933,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"]'
     );
@@ -6017,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;
   });
@@ -6029,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";
@@ -6212,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;
   }
@@ -6234,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) {
@@ -6510,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();
     }
   }
@@ -6598,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
           }
@@ -6613,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(
@@ -6671,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);
@@ -6690,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",
@@ -6765,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/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;

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;

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); }
@@ -529,9 +539,10 @@ a.aura-icon-btn { text-decoration: 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); }
+ * 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
@@ -1864,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); }
@@ -531,9 +541,10 @@ a.aura-icon-btn { text-decoration: 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); }
+ * 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
@@ -1866,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.50.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",