@jirawatpyk/aura-react 5.37.0 → 5.39.0

package/README.md

@@ -186,6 +186,18 @@ 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.39 — Chamber-OS addendum 46
+
+- **Tabs `touchHeight`** (#143): 44px tabs — buttons or links, underline or segmented — with `true` below 640px or on a coarse pointer (Button's rule), or `'always'` at every width. The count badge and icon stay centred on the label (above the 2px underline). The height is set on the tabs themselves, so fields in the panels keep their own size. Without it nothing changes.
+- **Link tabs are as tall as button tabs.** A link tab (`href`) was 2px taller than a button tab — its 2px underline sat outside the height (38px instead of 36px in compact density, 46px instead of 44px on touch screens). Tests that measure link tabs will see 2px less.
+- **FilterDateRange `touchHeight`**: a 44px face on its own, as FilterSelect's. A FilterBar with `touchHeight` already reaches it (checked for Chamber-OS's audit log filter row).
+
+## 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.

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,
@@ -3673,7 +3686,13 @@ window.Aura = (() => {
         "div",
         {
           ref: boxRef,
-          className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+          className: cx(
+            "aura-filterselect",
+            pop.open && "is-open",
+            props.disabled && "is-disabled",
+            touchClass(props.touchHeight),
+            props.className
+          )
         },
         /* @__PURE__ */ React19.createElement(
           "button",
@@ -4117,7 +4136,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 +4981,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 +5549,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 +6773,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;
@@ -7049,7 +7083,7 @@ window.Aura = (() => {
     const tabCls = function(on, extra) {
       return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
     };
-    const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+    const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
     const [focusId, setFocusId] = React35.useState(null);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];
@@ -8832,7 +8866,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",
@@ -10034,7 +10068,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",

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,
@@ -3655,7 +3668,13 @@ var FilterDateRange = React19.forwardRef(
       "div",
       {
         ref: boxRef,
-        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+        className: cx(
+          "aura-filterselect",
+          pop.open && "is-open",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
       },
       /* @__PURE__ */ React19.createElement(
         "button",
@@ -4099,7 +4118,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 +4963,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 +5531,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 +6755,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;
@@ -7031,7 +7065,7 @@ var Tabs = React35.forwardRef(function Tabs2(props, ref) {
   const tabCls = function(on, extra) {
     return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
   };
-  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React35.useState(null);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
@@ -8814,7 +8848,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",
@@ -10016,7 +10050,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",

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/FilterDateRange.js

@@ -5,7 +5,7 @@ import { Calendar, allowedDate, useCalendarPopover } from "./DatePicker.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { IconChevronDown } from "./icons.js";
-import { cx, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
+import { cx, touchClass, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
 import { useAuraLocale } from "./locale.js";
 import { dateText, defaultCalendar, formatDateRange } from "./dates.js";
 const NONE = { start: null, end: null };
@@ -126,7 +126,13 @@ const FilterDateRange = React.forwardRef(
       "div",
       {
         ref: boxRef,
-        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+        className: cx(
+          "aura-filterselect",
+          pop.open && "is-open",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
       },
       /* @__PURE__ */ React.createElement(
         "button",

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/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/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -34,7 +34,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const tabCls = function(on, extra) {
     return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
   };
-  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React.useState(null);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];

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). */
@@ -800,6 +812,10 @@ export interface TabsProps {
 	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
 	 * this page (`#contacts`). */
 	current?: "page" | "location" | undefined;
+	/** 5.39 (Chamber-OS 143): 44px tabs, button or link form, either variant — `true` below 640px or on a coarse
+	 * pointer, as Button's `touchHeight`; `'always'` at every width. Without it: the density's input height (44px on a
+	 * coarse pointer). Panels are not affected. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -927,6 +943,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 +985,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;
@@ -1077,6 +1099,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;
@@ -1136,6 +1161,8 @@ export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.H
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 5.39: a 44px face, as FilterSelect's `touchHeight` (FilterBar's `touchHeight` already reaches it). */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
@@ -1146,6 +1173,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). */
@@ -1421,6 +1452,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;

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). */
@@ -800,6 +812,10 @@ export interface TabsProps {
 	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
 	 * this page (`#contacts`). */
 	current?: "page" | "location" | undefined;
+	/** 5.39 (Chamber-OS 143): 44px tabs, button or link form, either variant — `true` below 640px or on a coarse
+	 * pointer, as Button's `touchHeight`; `'always'` at every width. Without it: the density's input height (44px on a
+	 * coarse pointer). Panels are not affected. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -927,6 +943,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 +985,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;
@@ -1077,6 +1099,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;
@@ -1136,6 +1161,8 @@ export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.H
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 5.39: a 44px face, as FilterSelect's `touchHeight` (FilterBar's `touchHeight` already reaches it). */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
@@ -1146,6 +1173,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). */
@@ -1421,6 +1452,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;

package/dist/styles.css

@@ -756,6 +756,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
+  box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
   height: var(--aura-input-height); padding: 0;
   border: 0; border-bottom: 2px solid transparent; background: transparent;
   color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
@@ -772,6 +773,10 @@ a.aura-tab { text-decoration: none; }
   font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
 }
 .aura-tabs__panel { padding-top: var(--aura-space-6); outline: none; }
+/* 5.39 (Chamber-OS 143): touchHeight — 44px tabs (underline or segmented, buttons or links) below 640px or on a coarse
+ * pointer (is-touch), or always. The height is set on the tabs, not through --aura-input-height, so panels keep theirs. */
+.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) { .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); } }
 .aura-tabs__panel[hidden] { display: none; }
 .aura-tabs__panel:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-sm); }
 
@@ -1617,6 +1622,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) ---------- */
@@ -1665,6 +1671,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 {
@@ -1788,6 +1813,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

@@ -758,6 +758,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
+  box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
   height: var(--aura-input-height); padding: 0;
   border: 0; border-bottom: 2px solid transparent; background: transparent;
   color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
@@ -774,6 +775,10 @@ a.aura-tab { text-decoration: none; }
   font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
 }
 .aura-tabs__panel { padding-top: var(--aura-space-6); outline: none; }
+/* 5.39 (Chamber-OS 143): touchHeight — 44px tabs (underline or segmented, buttons or links) below 640px or on a coarse
+ * pointer (is-touch), or always. The height is set on the tabs, not through --aura-input-height, so panels keep theirs. */
+.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) { .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); } }
 .aura-tabs__panel[hidden] { display: none; }
 .aura-tabs__panel:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-sm); }
 
@@ -1619,6 +1624,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) ---------- */
@@ -1667,6 +1673,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 {
@@ -1790,6 +1815,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.37.0",
+  "version": "5.39.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",