@jirawatpyk/aura-react 5.36.0 → 5.38.0

package/README.md

@@ -186,6 +186,17 @@ 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.38 — Chamber-OS addenda 43–45
+
+- **FilterBar and FilterSelect `touchHeight`** (#140): `true` makes the search (and its clear button) and every field-height control in the bar (FilterSelect, Select, Combobox, DatePicker and TimePicker with their buttons, SegmentedControl's options) 44px below 640px or on a coarse pointer — the same rule as Button's and TextField's `touchHeight` — and `'always'` at every width; `touchHeight` on one FilterSelect does the same for it alone. Without it nothing changes: the density's input height with a mouse, 44px on a coarse pointer. Buttons in `actions` take their own `touchHeight`. A SegmentedControl's track is 50px there (44px options plus its edge and padding), as with its own `touchHeight`. Opt-in rather than a new default, like every other `touchHeight`, so a narrow desktop window doesn't change size unasked.
+- **`touchHeight` on Combobox, DatePicker, DateRangePicker, TimePicker and NumberField** (#141): the same values and rule as TextField's. The box is 44px and the buttons inside it (clear, chevron, calendar, steppers) take their touch-screen size — 44px wide, side by side, 40px tall — so none is a 32px target in a 44px box. A multiple Combobox now reserves room for both 44px buttons on touch screens too (chips used to run up to 24px under the clear button).
+- **DataTable `rowProps`** (#142): `rowProps={(row) => ({ 'data-user-id': row.id, id: 'user-' + row.id })}` sets `data-*` attributes and an `id` on each row's element, in the grid and as a stacked card — for end-to-end hooks. Anything else it returns is ignored (a development warning names it) — `aria-*`, `role`, `className`, handlers, and `data-rc` (the table's own cell address) — so a row keeps its role, name, classes, selection and keyboard behaviour.
+
+## 5.37 — DxT Monitor requests 17–18
+
+- **PageHeader `actionsFullWidthBelow`** (request 17): `'sm'`, `'md'` or `'lg'` — below 640px, 768px or 1024px the actions take the whole row under the text, 12px apart, and the buttons share each line in equal widths (unless a label needs more), so they reach the page's edge: three buttons on a phone fill two rows (two halves, then one across) when their labels don't fit on one, and a single button spans the row. A button inside a DropdownMenu, Tooltip or Popover fills its share too; an IconButton (bare, or as a menu's trigger) keeps its square size — so a line with only IconButtons on it doesn't reach the edge (one that wraps alone sits at the start); put them on the first line. Labels don't wrap: a label wider than the row overflows, as before — keep phone labels short, or give that one Button `fullWidth`. For a fixed arrangement, pass your own grid as the one child — it spans the row too. Wider than the breakpoint, the actions hug their content at the end, 8px apart, as before. A class on the root, so it works from `/server` too. Apps that stretched the actions with their own selector (e.g. `max-md:[&>:last-child]:w-full`) can drop it.
+- **SegmentedControl `touchHeight`** (request 18): 44px options — `size="sm"` too, icon-only options 44px square — with `true` below 640px or on a coarse pointer (the same rule as Button's and TextField's `touchHeight`), or `'always'` at every width. A phone-sized viewport with a mouse (or an emulated phone in end-to-end tests) now gets the touch size too. Without it nothing changes: options are as tall as a field beside them with a mouse, and 44px on a coarse pointer. DxT asked for "below md"; it follows AURA's other `touchHeight` props (below 640px) so a form's fields, buttons and choices change size together — at 390px it is the same.
+
 ## 5.36 — DxT Monitor requests 15–16
 
 - **Focus rings in table cells** (request 15): a DataTable cell clips its text (ellipsis) but no longer the focus ring of a link or button in it. The clip has a 4px margin (`overflow: clip` + `overflow-clip-margin`), so content wider than its cell (a pill, a button) now shows up to 4px past its edge. In the first data column a focused link or button sits just above the row's sticky start gutter or pinned checkbox column (which painted over the ring's start side) — not while the table is scrolled sideways, and never above the sticky header, totals or pinned columns — and a plain `<a>` or `<button>` of yours in a cell gets AURA's ring instead of the browser's (zero specificity, so your own focus style wins). Safari has no `overflow-clip-margin`: there rings in cells are drawn just inside the control, whole. Apps that set `overflow: clip` on `.aura-table__td` themselves can drop it.

package/dist/aura.bundle.js

@@ -2501,18 +2501,30 @@ window.Aura = (() => {
     const nameId = id + "-name";
     const face = filter ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("span", { id: nameId, className: "aura-filterselect__name", "aria-hidden": true }, filter.name), /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__value", "aria-hidden": shown[0].label !== shown[0].full || void 0 }, shown[0].label || " "), shown[0].label !== shown[0].full ? /* @__PURE__ */ React16.createElement("span", { className: "aura-sr-only" }, shown[0].full) : null, /* @__PURE__ */ React16.createElement(Icon, { name: /* @__PURE__ */ React16.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })) : null;
     if (!live && filter)
-      return /* @__PURE__ */ React16.createElement("div", { className: cx("aura-filterselect", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face), h4(
-        "select",
-        Object.assign(extra, omit(rest, ["style"]), {
-          ref: selMerged,
-          id,
-          className: "aura-filterselect__native",
-          "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
-          "aria-describedby": described
-        }),
-        opts,
-        props.children
-      ));
+      return /* @__PURE__ */ React16.createElement(
+        "div",
+        {
+          className: cx(
+            "aura-filterselect",
+            props.disabled && "is-disabled",
+            touchClass(props.touchHeight),
+            props.className
+          )
+        },
+        /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face),
+        h4(
+          "select",
+          Object.assign(extra, omit(rest, ["style"]), {
+            ref: selMerged,
+            id,
+            className: "aura-filterselect__native",
+            "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
+            "aria-describedby": described
+          }),
+          opts,
+          props.children
+        )
+      );
     if (!live)
       return field(
         /* @__PURE__ */ React16.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React16.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
@@ -2625,6 +2637,7 @@ window.Aura = (() => {
             ro && "is-readonly",
             open && "is-open",
             filter && props.disabled && "is-disabled",
+            filter && touchClass(props.touchHeight),
             filter && props.className
           ),
           "data-invalid": props.error ? "" : void 0
@@ -3393,7 +3406,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className,
+        className: cx(touchClass(props.touchHeight), props.className),
         name: props.name,
         boxRef,
         inputRef: inputMerged,
@@ -3527,7 +3540,7 @@ window.Aura = (() => {
           required: props.required,
           optional: props.optional,
           disabled: props.disabled,
-          className: props.className,
+          className: cx(touchClass(props.touchHeight), props.className),
           name: props.name,
           boxRef,
           inputRef: inputMerged,
@@ -4117,7 +4130,7 @@ window.Aura = (() => {
           required: props.required,
           optional: props.optional,
           disabled: props.disabled,
-          className: props.className
+          className: cx(touchClass(props.touchHeight), props.className)
         },
         /* @__PURE__ */ React22.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React22.createElement(Icon, { name: props.icon || /* @__PURE__ */ React22.createElement(IconSearch, null), className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React22.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
           return /* @__PURE__ */ React22.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React22.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React22.createElement(
@@ -4962,6 +4975,7 @@ window.Aura = (() => {
           props.searchGrow && "aura-filterbar--grow",
           props.controlsLayout === "fill" && "aura-filterbar--fill",
           props.stackBelow === "lg" && "aura-filterbar--stack-lg",
+          touchClass(props.touchHeight),
           props.className
         )
       },
@@ -5529,6 +5543,19 @@ window.Aura = (() => {
   // src/DataTable.tsx
   var React33 = __toESM(require_react(), 1);
   var import_react_dom10 = __toESM(require_react_dom(), 1);
+  function ownRowAttrs(p) {
+    if (!p) return null;
+    const out = {};
+    Object.keys(p).forEach(function(k) {
+      if (k === "id" || /^data-/.test(k) && k !== "data-rc") out[k] = p[k];
+      else
+        devWarnOnce(
+          "datatable-rowprops-" + k,
+          'DataTable rowProps: "' + k + '" is ignored; only data-* (not data-rc) and id are set on a row.'
+        );
+    });
+    return out;
+  }
   var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
   var DEFAULT_COLUMNS = [
     { key: "id", label: "ID", width: 96, mono: true },
@@ -6740,6 +6767,7 @@ window.Aura = (() => {
                   (props.onRowActivate || rowHref) && "is-actionable"
                 ),
                 style: rowStyle,
+                ...ownRowAttrs(props.rowProps ? props.rowProps(r2) : null),
                 onClick: function(e) {
                   const el = e.target;
                   if (el.closest && el.closest(".aura-check, button, a, input")) return;
@@ -7663,9 +7691,18 @@ window.Aura = (() => {
         attrs2[k] = props[k];
     });
     const level = props.headingLevel || 1;
+    const below2 = props.actionsFullWidthBelow;
     return h8(
       "div",
-      Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+      Object.assign(attrs2, {
+        ref,
+        className: cx(
+          "aura-page-header",
+          (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+          props.className
+        ),
+        style: props.style
+      }),
       h8(
         "div",
         { className: "aura-page-header__text" },
@@ -8823,7 +8860,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React54.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React54.createElement(Icon, { name: /* @__PURE__ */ React54.createElement(IconClock, null), className: "aura-input__icon" }), /* @__PURE__ */ React54.createElement(
         "input",
@@ -10025,7 +10062,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React65.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React65.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React65.createElement(
         "input",
@@ -10239,6 +10276,7 @@ window.Aura = (() => {
             "aura-segmented",
             props.size === "sm" && "aura-segmented--sm",
             props.fullWidth && "is-full",
+            touchClass(props.touchHeight),
             props.disabled && "is-disabled",
             props.className
           )

package/dist/cjs/index.cjs

@@ -2483,18 +2483,30 @@ var Select = React16.forwardRef(function Select2(props, ref) {
   const nameId = id + "-name";
   const face = filter ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("span", { id: nameId, className: "aura-filterselect__name", "aria-hidden": true }, filter.name), /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__value", "aria-hidden": shown[0].label !== shown[0].full || void 0 }, shown[0].label || " "), shown[0].label !== shown[0].full ? /* @__PURE__ */ React16.createElement("span", { className: "aura-sr-only" }, shown[0].full) : null, /* @__PURE__ */ React16.createElement(Icon, { name: /* @__PURE__ */ React16.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })) : null;
   if (!live && filter)
-    return /* @__PURE__ */ React16.createElement("div", { className: cx("aura-filterselect", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face), h4(
-      "select",
-      Object.assign(extra, omit(rest, ["style"]), {
-        ref: selMerged,
-        id,
-        className: "aura-filterselect__native",
-        "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
-        "aria-describedby": described
-      }),
-      opts,
-      props.children
-    ));
+    return /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        className: cx(
+          "aura-filterselect",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
+      },
+      /* @__PURE__ */ React16.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face),
+      h4(
+        "select",
+        Object.assign(extra, omit(rest, ["style"]), {
+          ref: selMerged,
+          id,
+          className: "aura-filterselect__native",
+          "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
+          "aria-describedby": described
+        }),
+        opts,
+        props.children
+      )
+    );
   if (!live)
     return field(
       /* @__PURE__ */ React16.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React16.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
@@ -2607,6 +2619,7 @@ var Select = React16.forwardRef(function Select2(props, ref) {
           ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
+          filter && touchClass(props.touchHeight),
           filter && props.className
         ),
         "data-invalid": props.error ? "" : void 0
@@ -3375,7 +3388,7 @@ var DatePicker = React18.forwardRef(function DatePicker2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className,
+      className: cx(touchClass(props.touchHeight), props.className),
       name: props.name,
       boxRef,
       inputRef: inputMerged,
@@ -3509,7 +3522,7 @@ var DateRangePicker = React18.forwardRef(
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className,
+        className: cx(touchClass(props.touchHeight), props.className),
         name: props.name,
         boxRef,
         inputRef: inputMerged,
@@ -4099,7 +4112,7 @@ var Combobox = React22.forwardRef(
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React22.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React22.createElement(Icon, { name: props.icon || /* @__PURE__ */ React22.createElement(IconSearch, null), className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React22.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
         return /* @__PURE__ */ React22.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React22.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React22.createElement(
@@ -4944,6 +4957,7 @@ var FilterBar = React29.forwardRef(function FilterBar2(props, ref) {
         props.searchGrow && "aura-filterbar--grow",
         props.controlsLayout === "fill" && "aura-filterbar--fill",
         props.stackBelow === "lg" && "aura-filterbar--stack-lg",
+        touchClass(props.touchHeight),
         props.className
       )
     },
@@ -5511,6 +5525,19 @@ var Drawer = React32.forwardRef(function Drawer2(props, ref) {
 // src/DataTable.tsx
 var React33 = __toESM(require("react"), 1);
 var import_react_dom10 = require("react-dom");
+function ownRowAttrs(p) {
+  if (!p) return null;
+  const out = {};
+  Object.keys(p).forEach(function(k) {
+    if (k === "id" || /^data-/.test(k) && k !== "data-rc") out[k] = p[k];
+    else
+      devWarnOnce(
+        "datatable-rowprops-" + k,
+        'DataTable rowProps: "' + k + '" is ignored; only data-* (not data-rc) and id are set on a row.'
+      );
+  });
+  return out;
+}
 var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 var DEFAULT_COLUMNS = [
   { key: "id", label: "ID", width: 96, mono: true },
@@ -6722,6 +6749,7 @@ var DataTableImpl = React33.forwardRef(function DataTable(props, ref) {
                 (props.onRowActivate || rowHref) && "is-actionable"
               ),
               style: rowStyle,
+              ...ownRowAttrs(props.rowProps ? props.rowProps(r2) : null),
               onClick: function(e) {
                 const el = e.target;
                 if (el.closest && el.closest(".aura-check, button, a, input")) return;
@@ -7645,9 +7673,18 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below2 = props.actionsFullWidthBelow;
   return h8(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+        props.className
+      ),
+      style: props.style
+    }),
     h8(
       "div",
       { className: "aura-page-header__text" },
@@ -8805,7 +8842,7 @@ var TimePicker = React54.forwardRef(function TimePicker2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React54.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React54.createElement(Icon, { name: /* @__PURE__ */ React54.createElement(IconClock, null), className: "aura-input__icon" }), /* @__PURE__ */ React54.createElement(
       "input",
@@ -10007,7 +10044,7 @@ var NumberField = React65.forwardRef(function NumberField2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React65.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React65.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React65.createElement(
       "input",
@@ -10221,6 +10258,7 @@ var SegmentedControl = React67.forwardRef(
           "aura-segmented",
           props.size === "sm" && "aura-segmented--sm",
           props.fullWidth && "is-full",
+          touchClass(props.touchHeight),
           props.disabled && "is-disabled",
           props.className
         )

package/dist/esm/Combobox.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { useStrings, useDensity } from "./locale.js";
 import { createPortal } from "react-dom";
-import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef, touchClass } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
 import { IconCheck, IconChevronDown, IconLoaderCircle, IconSearch, IconX } from "./icons.js";
@@ -313,7 +313,7 @@ const Combobox = React.forwardRef(
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
         return /* @__PURE__ */ React.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React.createElement(

package/dist/esm/DataTable.js

@@ -24,6 +24,19 @@ import {
   IconPinOff,
   IconRotateCcw
 } from "./icons.js";
+function ownRowAttrs(p) {
+  if (!p) return null;
+  const out = {};
+  Object.keys(p).forEach(function(k) {
+    if (k === "id" || /^data-/.test(k) && k !== "data-rc") out[k] = p[k];
+    else
+      devWarnOnce(
+        "datatable-rowprops-" + k,
+        'DataTable rowProps: "' + k + '" is ignored; only data-* (not data-rc) and id are set on a row.'
+      );
+  });
+  return out;
+}
 const BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 const DEFAULT_COLUMNS = [
   { key: "id", label: "ID", width: 96, mono: true },
@@ -1233,6 +1246,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
                 (props.onRowActivate || rowHref) && "is-actionable"
               ),
               style: rowStyle,
+              ...ownRowAttrs(props.rowProps ? props.rowProps(r) : null),
               onClick: function(e) {
                 const el = e.target;
                 if (el.closest && el.closest(".aura-check, button, a, input")) return;

package/dist/esm/DatePicker.js

@@ -2,7 +2,16 @@
 import * as React from "react";
 import { useAuraLocale } from "./locale.js";
 import { createPortal } from "react-dom";
-import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, trapTab, useMergedRef } from "./internal.js";
+import {
+  cx,
+  uid,
+  useMaybeControlled,
+  useMounted,
+  useIsoLayoutEffect,
+  trapTab,
+  useMergedRef,
+  touchClass
+} from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Field } from "./Field.js";
@@ -499,7 +508,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className,
+      className: cx(touchClass(props.touchHeight), props.className),
       name: props.name,
       boxRef,
       inputRef: inputMerged,
@@ -633,7 +642,7 @@ const DateRangePicker = React.forwardRef(
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className,
+        className: cx(touchClass(props.touchHeight), props.className),
         name: props.name,
         boxRef,
         inputRef: inputMerged,

package/dist/esm/FilterBar.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Tag } from "./Tag.js";
-import { cx, uid } from "./internal.js";
+import { cx, touchClass, uid } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { IconSearch, IconX } from "./icons.js";
 const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
@@ -60,6 +60,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
         props.searchGrow && "aura-filterbar--grow",
         props.controlsLayout === "fill" && "aura-filterbar--fill",
         props.stackBelow === "lg" && "aura-filterbar--stack-lg",
+        touchClass(props.touchHeight),
         props.className
       )
     },

package/dist/esm/NumberField.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Field, describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, uid, useMaybeControlled, touchClass } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { IconMinus, IconPlus } from "./icons.js";
 function decimalsOf(n) {
@@ -87,7 +87,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/PageHeader.js

@@ -9,9 +9,18 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       attrs[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h(
     "div",
-    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h(
       "div",
       { className: "aura-page-header__text" },

package/dist/esm/SegmentedControl.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { touchClass } from "./classes.js";
 import { useAutoTip } from "./autoTip.js";
 function toOpt(o) {
   return typeof o === "object" ? o : { value: o, label: o };
@@ -65,6 +66,7 @@ const SegmentedControl = React.forwardRef(
           "aura-segmented",
           props.size === "sm" && "aura-segmented--sm",
           props.fullWidth && "is-full",
+          touchClass(props.touchHeight),
           props.disabled && "is-disabled",
           props.className
         )

package/dist/esm/Select.js

@@ -425,18 +425,30 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const nameId = id + "-name";
   const face = filter ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { id: nameId, className: "aura-filterselect__name", "aria-hidden": true }, filter.name), /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value", "aria-hidden": shown[0].label !== shown[0].full || void 0 }, shown[0].label || " "), shown[0].label !== shown[0].full ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, shown[0].full) : null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })) : null;
   if (!live && filter)
-    return /* @__PURE__ */ React.createElement("div", { className: cx("aura-filterselect", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face), h(
-      "select",
-      Object.assign(extra, omit(rest, ["style"]), {
-        ref: selMerged,
-        id,
-        className: "aura-filterselect__native",
-        "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
-        "aria-describedby": described
-      }),
-      opts,
-      props.children
-    ));
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(
+          "aura-filterselect",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face),
+      h(
+        "select",
+        Object.assign(extra, omit(rest, ["style"]), {
+          ref: selMerged,
+          id,
+          className: "aura-filterselect__native",
+          "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
+          "aria-describedby": described
+        }),
+        opts,
+        props.children
+      )
+    );
   if (!live)
     return field(
       /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
@@ -549,6 +561,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
+          filter && touchClass(props.touchHeight),
           filter && props.className
         ),
         "data-invalid": props.error ? "" : void 0

package/dist/esm/TimePicker.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef, touchClass } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
@@ -236,7 +236,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconClock, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",

package/dist/index.d.cts

@@ -216,6 +216,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	linkComponent?: React$1.ElementType | undefined;
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
+	/** 5.38 (Chamber-OS 142): attributes of your own on each row's element — `data-*` (a test hook such as
+	 * `data-user-id`) and `id` — in the table layout and as a stacked card. Anything else is ignored, so a row keeps
+	 * its own role, classes and handlers. */
+	rowProps?: RowCallback<DataTableRowProps | null | undefined, Row> | undefined;
 	/** Called on row click or Enter. */
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
@@ -496,6 +500,11 @@ export interface FilterBarProps {
 	/** `fill`: the filter controls share their row in equal columns (at least 120px each, wrapping when they can't),
 	 * and the count and actions keep to the end (5.15, Chamber-OS 92). Default `auto`: each at its own width. */
 	controlsLayout?: "auto" | "fill" | undefined;
+	/** 5.38 (Chamber-OS 140): 44px search and field-height controls in the bar (FilterSelect, Select, SegmentedControl…)
+	 * — `true` below 640px or on a coarse pointer, as Button's and TextField's `touchHeight`; `'always'` at every
+	 * width. Without it they follow the density's input height (44px on a coarse pointer). Buttons in `actions` take
+	 * their own `touchHeight`. */
+	touchHeight?: TouchHeight | undefined;
 	/** Below this width (the viewport's) the search takes a row of its own above the controls. Default `md` (768px);
 	 * `lg` (1024px) for bars with several filters (5.15, Chamber-OS 92). */
 	stackBelow?: "md" | "lg" | undefined;
@@ -597,6 +606,9 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
+	/** 5.38 (Chamber-OS 140): a 44px face — `true` below 640px or on a coarse pointer (as Button's and TextField's
+	 * `touchHeight`), `'always'` at every width. Without it: the density's input height, 44px on a coarse pointer. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
  * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
@@ -927,6 +939,9 @@ export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "de
 	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** The options. Optional with `groups` (5.16). */
 	options?: Array<ComboboxOption | string> | undefined;
 	/** Selected option value (controlled). */
@@ -966,6 +981,9 @@ export interface ComboboxProps extends FieldProps {
 }
 /** Number input: thousands separators, +/− buttons, arrow keys, min/max/step, prefix/suffix (฿, %). */
 export interface NumberFieldProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** The number (controlled). `null` = empty. */
 	value?: number | null | undefined;
 	defaultValue?: number | null | undefined;
@@ -1036,6 +1054,10 @@ export interface SegmentedControlProps {
 	size?: "sm" | "md" | undefined;
 	/** Stretch across the container, segments equal width. */
 	fullWidth?: boolean | undefined;
+	/** 5.37 (DxT Monitor #18): 44px options (`sm` too; icon-only options 44px square). `true`: below 640px or on a
+	 * coarse pointer, as Button's and TextField's `touchHeight`; `'always'`: at every width. Without it, options are
+	 * 44px on a coarse pointer only. */
+	touchHeight?: TouchHeight | undefined;
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
@@ -1073,6 +1095,9 @@ export interface CalendarProps extends DateDisplayOptions {
 	autoFocus?: boolean | undefined;
 }
 export interface DateFieldProps extends FieldProps, DateDisplayOptions {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	id?: string | undefined;
 	name?: string | undefined;
 	placeholder?: string | undefined;
@@ -1142,6 +1167,10 @@ export interface DateRangePickerProps extends DateFieldProps {
 export type DataAttributes = {
 	[key: `data-${string}`]: string | number | boolean | undefined;
 };
+/** What DataTable's `rowProps` may set on a row (5.38): `data-*` attributes and an `id`. */
+export type DataTableRowProps = DataAttributes & {
+	id?: string | undefined;
+};
 /** Attributes for a button AURA renders for you (a Drawer's close button, a tab): `data-testid`, `aria-*`, `id`… */
 export type ButtonAttributes = React$1.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
 /** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-drawer` panel (5.9, Chamber-OS 70). */
@@ -1417,6 +1446,9 @@ export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** "HH:mm", 24-hour. */
 	value?: string | null | undefined;
 	defaultValue?: string | null | undefined;
@@ -1893,6 +1925,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/index.d.ts

@@ -216,6 +216,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	linkComponent?: React$1.ElementType | undefined;
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
+	/** 5.38 (Chamber-OS 142): attributes of your own on each row's element — `data-*` (a test hook such as
+	 * `data-user-id`) and `id` — in the table layout and as a stacked card. Anything else is ignored, so a row keeps
+	 * its own role, classes and handlers. */
+	rowProps?: RowCallback<DataTableRowProps | null | undefined, Row> | undefined;
 	/** Called on row click or Enter. */
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
@@ -496,6 +500,11 @@ export interface FilterBarProps {
 	/** `fill`: the filter controls share their row in equal columns (at least 120px each, wrapping when they can't),
 	 * and the count and actions keep to the end (5.15, Chamber-OS 92). Default `auto`: each at its own width. */
 	controlsLayout?: "auto" | "fill" | undefined;
+	/** 5.38 (Chamber-OS 140): 44px search and field-height controls in the bar (FilterSelect, Select, SegmentedControl…)
+	 * — `true` below 640px or on a coarse pointer, as Button's and TextField's `touchHeight`; `'always'` at every
+	 * width. Without it they follow the density's input height (44px on a coarse pointer). Buttons in `actions` take
+	 * their own `touchHeight`. */
+	touchHeight?: TouchHeight | undefined;
 	/** Below this width (the viewport's) the search takes a row of its own above the controls. Default `md` (768px);
 	 * `lg` (1024px) for bars with several filters (5.15, Chamber-OS 92). */
 	stackBelow?: "md" | "lg" | undefined;
@@ -597,6 +606,9 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
+	/** 5.38 (Chamber-OS 140): a 44px face — `true` below 640px or on a coarse pointer (as Button's and TextField's
+	 * `touchHeight`), `'always'` at every width. Without it: the density's input height, 44px on a coarse pointer. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
  * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
@@ -927,6 +939,9 @@ export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "de
 	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** The options. Optional with `groups` (5.16). */
 	options?: Array<ComboboxOption | string> | undefined;
 	/** Selected option value (controlled). */
@@ -966,6 +981,9 @@ export interface ComboboxProps extends FieldProps {
 }
 /** Number input: thousands separators, +/− buttons, arrow keys, min/max/step, prefix/suffix (฿, %). */
 export interface NumberFieldProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** The number (controlled). `null` = empty. */
 	value?: number | null | undefined;
 	defaultValue?: number | null | undefined;
@@ -1036,6 +1054,10 @@ export interface SegmentedControlProps {
 	size?: "sm" | "md" | undefined;
 	/** Stretch across the container, segments equal width. */
 	fullWidth?: boolean | undefined;
+	/** 5.37 (DxT Monitor #18): 44px options (`sm` too; icon-only options 44px square). `true`: below 640px or on a
+	 * coarse pointer, as Button's and TextField's `touchHeight`; `'always'`: at every width. Without it, options are
+	 * 44px on a coarse pointer only. */
+	touchHeight?: TouchHeight | undefined;
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
@@ -1073,6 +1095,9 @@ export interface CalendarProps extends DateDisplayOptions {
 	autoFocus?: boolean | undefined;
 }
 export interface DateFieldProps extends FieldProps, DateDisplayOptions {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	id?: string | undefined;
 	name?: string | undefined;
 	placeholder?: string | undefined;
@@ -1142,6 +1167,10 @@ export interface DateRangePickerProps extends DateFieldProps {
 export type DataAttributes = {
 	[key: `data-${string}`]: string | number | boolean | undefined;
 };
+/** What DataTable's `rowProps` may set on a row (5.38): `data-*` attributes and an `id`. */
+export type DataTableRowProps = DataAttributes & {
+	id?: string | undefined;
+};
 /** Attributes for a button AURA renders for you (a Drawer's close button, a tab): `data-testid`, `aria-*`, `id`… */
 export type ButtonAttributes = React$1.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
 /** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-drawer` panel (5.9, Chamber-OS 70). */
@@ -1417,6 +1446,9 @@ export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
+	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
+	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 	/** "HH:mm", 24-hour. */
 	value?: string | null | undefined;
 	defaultValue?: string | null | undefined;
@@ -1893,6 +1925,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.cjs

@@ -1425,9 +1425,18 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h4(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h4(
       "div",
       { className: "aura-page-header__text" },

package/dist/server/index.d.cts

@@ -496,6 +496,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.d.ts

@@ -496,6 +496,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
+	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole
+	 * row under the text, 12px apart, and its buttons share each line in equal widths unless a label needs more (a trigger inside a DropdownMenu,
+	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
+	 * than that, the actions hug their content at the end as before. */
+	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.js

@@ -1361,9 +1361,18 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
+  const below = props.actionsFullWidthBelow;
   return h4(
     "div",
-    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, {
+      ref,
+      className: cx(
+        "aura-page-header",
+        (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        props.className
+      ),
+      style: props.style
+    }),
     h4(
       "div",
       { className: "aura-page-header__text" },

package/dist/styles.css

@@ -1138,6 +1138,30 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
+ * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
+ * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+@media (max-width: 639.98px) {
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
 /* Thai marks need the room a 1.15 line takes away. */
 .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
@@ -1530,6 +1554,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.37 (DxT Monitor #18): touchHeight — 44px options below 640px or on a coarse pointer (is-touch), or always. */
+.aura-segmented.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-segmented.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-segmented.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-segmented.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+}
 /* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
  * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
  * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's
@@ -1586,6 +1617,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
   .aura-tag__remove { position: relative; }
   .aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+  .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); } /* 5.38: room for both 44px buttons */
 }
 
 /* ---------- Small screens (< 640px) ---------- */
@@ -1634,6 +1666,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-check--labelled.is-touch-always .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
 .aura-radio-group.is-touch-always .aura-radio-group__list { gap: 0; }
 .aura-radio-group.is-touch-always .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+/* 5.38 (Chamber-OS 141): Combobox, DatePicker, TimePicker and NumberField take touchHeight too; their buttons inside
+ * the box get the touch-screen sizes (44px wide, side by side) with the 44px box, so neither is a 32px target. A
+ * FilterBar with touchHeight (Chamber-OS 140) does the same for those fields in it. */
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle) { width: var(--aura-touch-target); height: 40px; }
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle) { width: var(--aura-touch-target); height: 40px; }
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
+}
 @media (max-width: 639.98px), (pointer: coarse) {
   .aura-field.is-touch { --aura-input-height: var(--aura-touch-target); }
   .aura-radio-group.is-touch .aura-choice, .aura-check--labelled.is-touch {
@@ -1757,6 +1808,18 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
 .aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+/* 5.38 (Chamber-OS 140): touchHeight on FilterBar (its search and field-height controls) or on one FilterSelect —
+ * 44px below 640px or on a coarse pointer (is-touch), or always. */
+:is(.aura-filterbar, .aura-filterselect).is-touch-always { --aura-input-height: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-filterbar__clear-search { width: var(--aura-touch-target); height: 40px; margin-right: 0; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  :is(.aura-filterbar, .aura-filterselect).is-touch { --aura-input-height: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-filterbar__clear-search { width: var(--aura-touch-target); height: 40px; margin-right: 0; }
+}
 @media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 /* 5.26 (Chamber-OS 128) FilterDateRange: presets beside the range calendar; above it on phones. */
 .aura-filterdate__pop { display: flex; gap: var(--aura-space-3); overflow-y: auto; }

package/dist/styles.layer.css

@@ -1140,6 +1140,30 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
+ * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
+ * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+@media (max-width: 639.98px) {
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+}
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
 /* Thai marks need the room a 1.15 line takes away. */
 .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
@@ -1532,6 +1556,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.37 (DxT Monitor #18): touchHeight — 44px options below 640px or on a coarse pointer (is-touch), or always. */
+.aura-segmented.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-segmented.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-segmented.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-segmented.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+}
 /* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
  * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
  * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's
@@ -1588,6 +1619,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
   .aura-tag__remove { position: relative; }
   .aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+  .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); } /* 5.38: room for both 44px buttons */
 }
 
 /* ---------- Small screens (< 640px) ---------- */
@@ -1636,6 +1668,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-check--labelled.is-touch-always .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
 .aura-radio-group.is-touch-always .aura-radio-group__list { gap: 0; }
 .aura-radio-group.is-touch-always .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+/* 5.38 (Chamber-OS 141): Combobox, DatePicker, TimePicker and NumberField take touchHeight too; their buttons inside
+ * the box get the touch-screen sizes (44px wide, side by side) with the 44px box, so neither is a 32px target. A
+ * FilterBar with touchHeight (Chamber-OS 140) does the same for those fields in it. */
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle) { width: var(--aura-touch-target); height: 40px; }
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
+:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle) { width: var(--aura-touch-target); height: 40px; }
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
+  :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
+}
 @media (max-width: 639.98px), (pointer: coarse) {
   .aura-field.is-touch { --aura-input-height: var(--aura-touch-target); }
   .aura-radio-group.is-touch .aura-choice, .aura-check--labelled.is-touch {
@@ -1759,6 +1810,18 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
 .aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+/* 5.38 (Chamber-OS 140): touchHeight on FilterBar (its search and field-height controls) or on one FilterSelect —
+ * 44px below 640px or on a coarse pointer (is-touch), or always. */
+:is(.aura-filterbar, .aura-filterselect).is-touch-always { --aura-input-height: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-segmented__option { height: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+.aura-filterbar.is-touch-always .aura-filterbar__clear-search { width: var(--aura-touch-target); height: 40px; margin-right: 0; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  :is(.aura-filterbar, .aura-filterselect).is-touch { --aura-input-height: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-segmented__option { height: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-segmented__option.is-icon { width: var(--aura-touch-target); }
+  .aura-filterbar.is-touch .aura-filterbar__clear-search { width: var(--aura-touch-target); height: 40px; margin-right: 0; }
+}
 @media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 /* 5.26 (Chamber-OS 128) FilterDateRange: presets beside the range calendar; above it on phones. */
 .aura-filterdate__pop { display: flex; gap: var(--aura-space-3); overflow-y: auto; }

package/package.json

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