@jirawatpyk/aura-react 5.35.0 → 5.37.0

package/README.md

@@ -186,6 +186,16 @@ 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.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.
+- **Right-aligned DataTable columns** (request 16): already there — `align: 'end'` on a column right-aligns its header (label and sort arrow) and every cell, with tabular figures, in default and `rowHeight="auto"` rows, totals and skeleton rows. Stacked cards keep each value under its label, start-aligned, by design. Now covered by tests and documented here.
+
 ## 5.35 — DxT Monitor requests 11–14
 
 - **Breadcrumb touch targets** (request 11): on a touch screen (`pointer: coarse`) every crumb link or button (and "…") gets a hit area 44px tall and as wide as its text plus 24px; the text doesn't move. It reaches 12px into the gutter on each side, so short neighbours never share a spot, and only 4px below the text, so it stops short of a PageHeader title right underneath — the rest of the height is above, so keep about 20px clear above a breadcrumb (AppShell's content padding already is). When the crumbs wrap, the rows sit 24px apart on touch screens so one row never covers the next. The current page (not a link) gets none; a link component must render its `<a>` directly in the crumb's `li`. Apps that added their own `.aura-crumbs a::after` rule should drop it.

package/dist/aura.bundle.js

@@ -7663,9 +7663,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" },
@@ -10239,6 +10248,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

@@ -7645,9 +7645,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" },
@@ -10221,6 +10230,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/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/index.d.cts

@@ -1036,6 +1036,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;
@@ -1893,6 +1897,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

@@ -1036,6 +1036,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;
@@ -1893,6 +1897,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

@@ -161,6 +161,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
@@ -1122,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; }
@@ -1514,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

package/dist/styles.layer.css

@@ -163,6 +163,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
@@ -1124,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; }
@@ -1516,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

package/package.json

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