@jirawatpyk/aura-react 5.22.0 → 5.24.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.24 — Chamber-OS addendum 26
+
+- **`touchHeight` follows the pointer, not only the width** (item 123): Button, IconButton and the ActionBar Clear are 44px wherever the primary pointer is coarse — a tablet in portrait (768px) or landscape (1024–1366px) — as well as below 640px. With a mouse (`pointer: fine`) from 640px up nothing changes. Visible on tablets for every control that already passes `touchHeight`. A touch laptop reports its trackpad as the primary pointer (`pointer: fine`), so it keeps the compact size, as AURA's other touch rules do.
+
+## 5.23 — Chamber-OS addenda 23–25
+
+- **DataTable `card: 'wide'`** (item 120): in a stacked card the column is a field on a line of its own at the card's full inner width, after the half-width fields (and before a `footer`), its label above and its text wrapping — a reason with its evidence line. The grid is unchanged (an ordinary column at its `width`).
+- **Underline Tabs show their whole 2px indicator** (item 121): the list scrolls sideways, and a scroll container clips at its padding box, so the indicator pulled 1px over the list's border showed only 1px. The track is now an inset shadow inside the list and the indicator paints over its bottom row; the tabs' size is unchanged. In forced colours the track is a border again, with the indicator just above it (the list is 1px taller there).
+- **ActionBar `touchHeight`** (item 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px — to match action buttons that use it.
+
 ## 5.22 — Chamber-OS addendum 22
 
 - **DataTable `card: 'footer'`** (item 118): in a stacked card the column becomes the card's last row, full width, after every other cell — row actions such as "Send reminder" and a menu. A Button placed directly in the cell grows to fill the row; an IconButton or menu keeps its size. The grid is unchanged (an ordinary column at its `width`).

package/dist/aura.bundle.js

@@ -5298,12 +5298,13 @@ window.Aura = (() => {
       const part = cardPart(c, i), lv = hideLevel(c);
       return {
         "data-card": part,
-        "data-label": part === "field" ? c.label || void 0 : void 0,
+        "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
         "data-hide": lv ? String(lv) : void 0
       };
     }
     const hasFields = vis.some(function(c, i) {
-      return cardPart(c, i) === "field";
+      const p = cardPart(c, i);
+      return p === "field" || p === "wide";
     });
     const hasFlex = vis.some(function(c) {
       return widthOf(c) == null;
@@ -7198,7 +7199,7 @@ window.Aura = (() => {
           props.className
         )
       },
-      /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+      /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", touchHeight: props.touchHeight, onClick: clear }, t.clear()) : null, props.children) : null)
     );
   });
 

package/dist/cjs/index.cjs

@@ -5280,12 +5280,13 @@ var DataTableImpl = React31.forwardRef(function DataTable(props, ref) {
     const part = cardPart(c, i), lv = hideLevel(c);
     return {
       "data-card": part,
-      "data-label": part === "field" ? c.label || void 0 : void 0,
+      "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
       "data-hide": lv ? String(lv) : void 0
     };
   }
   const hasFields = vis.some(function(c, i) {
-    return cardPart(c, i) === "field";
+    const p = cardPart(c, i);
+    return p === "field" || p === "wide";
   });
   const hasFlex = vis.some(function(c) {
     return widthOf(c) == null;
@@ -7180,7 +7181,7 @@ var ActionBar = React42.forwardRef(function ActionBar2(props, ref) {
         props.className
       )
     },
-    /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+    /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", touchHeight: props.touchHeight, onClick: clear }, t.clear()) : null, props.children) : null)
   );
 });
 

package/dist/esm/ActionBar.js

@@ -42,7 +42,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
         props.className
       )
     },
-    /* @__PURE__ */ React.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", touchHeight: props.touchHeight, onClick: clear }, t.clear()) : null, props.children) : null)
   );
 });
 export {

package/dist/esm/DataTable.js

@@ -299,12 +299,13 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     const part = cardPart(c, i), lv = hideLevel(c);
     return {
       "data-card": part,
-      "data-label": part === "field" ? c.label || void 0 : void 0,
+      "data-label": part === "field" || part === "wide" ? c.label || void 0 : void 0,
       "data-hide": lv ? String(lv) : void 0
     };
   }
   const hasFields = vis.some(function(c, i) {
-    return cardPart(c, i) === "field";
+    const p = cardPart(c, i);
+    return p === "field" || p === "wide";
   });
   const hasFlex = vis.some(function(c) {
     return widthOf(c) == null;

package/dist/index.d.cts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
@@ -41,8 +42,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType | undefined;
@@ -108,8 +110,10 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
 	 * label/value field. `'footer'` (5.22, Chamber-OS 118) makes it the card's last row, full width — row actions
 	 * such as "Send reminder" and a menu: a Button placed directly in the cell grows to fill the row, an IconButton or
-	 * menu keeps its size. Default: today's rule. The grid is unchanged by any of them. */
-	card?: "hide" | "field" | "title" | "pill" | "footer" | undefined;
+	 * menu keeps its size. `'wide'` (5.23, Chamber-OS 120) is a field on a line of its own at the card's full width,
+	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
+	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;
@@ -319,8 +323,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
-	/** 44×44 below 640px (the viewport's) instead of 32×32 — a phone sheet's close button, a card's ⋯ trigger
-	 * (5.15, Chamber-OS 100). */
+	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
+	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
 }
 export interface MenuItem {
@@ -1072,7 +1076,7 @@ export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>
 	 * built-in "Close" in the provider's language. (5.9) */
 	closeLabel?: string | undefined;
 	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }` (5.9), or `touchHeight: true` for a
-	 * 44px close button on phones (5.15). */
+	 * 44px close button on phones and tablets (5.15, 5.24). */
 	closeProps?: (ButtonAttributes & {
 		touchHeight?: boolean | undefined;
 	}) | undefined;
@@ -1201,6 +1205,9 @@ export interface ActionBarProps {
 	selected?: number | undefined;
 	/** Adds a "Clear" button next to the count. */
 	onClearSelection?: (() => void) | undefined;
+	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px or on a
+	 * coarse pointer — to match action buttons that use it. */
+	touchHeight?: boolean | undefined;
 	/** Name of the region. Default "Actions". */
 	label?: string | undefined;
 	className?: string | undefined;

package/dist/index.d.ts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
@@ -41,8 +42,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType | undefined;
@@ -108,8 +110,10 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
 	 * label/value field. `'footer'` (5.22, Chamber-OS 118) makes it the card's last row, full width — row actions
 	 * such as "Send reminder" and a menu: a Button placed directly in the cell grows to fill the row, an IconButton or
-	 * menu keeps its size. Default: today's rule. The grid is unchanged by any of them. */
-	card?: "hide" | "field" | "title" | "pill" | "footer" | undefined;
+	 * menu keeps its size. `'wide'` (5.23, Chamber-OS 120) is a field on a line of its own at the card's full width,
+	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
+	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;
@@ -319,8 +323,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
-	/** 44×44 below 640px (the viewport's) instead of 32×32 — a phone sheet's close button, a card's ⋯ trigger
-	 * (5.15, Chamber-OS 100). */
+	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
+	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
 }
 export interface MenuItem {
@@ -1072,7 +1076,7 @@ export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>
 	 * built-in "Close" in the provider's language. (5.9) */
 	closeLabel?: string | undefined;
 	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }` (5.9), or `touchHeight: true` for a
-	 * 44px close button on phones (5.15). */
+	 * 44px close button on phones and tablets (5.15, 5.24). */
 	closeProps?: (ButtonAttributes & {
 		touchHeight?: boolean | undefined;
 	}) | undefined;
@@ -1201,6 +1205,9 @@ export interface ActionBarProps {
 	selected?: number | undefined;
 	/** Adds a "Clear" button next to the count. */
 	onClearSelection?: (() => void) | undefined;
+	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px or on a
+	 * coarse pointer — to match action buttons that use it. */
+	touchHeight?: boolean | undefined;
 	/** Name of the region. Default "Actions". */
 	label?: string | undefined;
 	className?: string | undefined;

package/dist/server/index.d.cts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */

package/dist/server/index.d.ts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */

package/dist/styles.css

@@ -312,8 +312,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
-/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
-@media (max-width: 639.98px) {
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
+ * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+@media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -669,10 +671,13 @@ a.aura-icon-btn { text-decoration: none; }
 
 /* ---------- Tabs ---------- */
 .aura-tabs { font-family: var(--font-sans); }
-.aura-tabs__list { display: flex; gap: var(--aura-space-6); border-bottom: 1px solid var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
+/* 5.23 (Chamber-OS 121): the 1px track is an inset shadow inside the list's padding box, and the active tab's 2px
+ * indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
+ * padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
+.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;
-  height: var(--aura-input-height); padding: 0; margin-bottom: -1px;
+  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;
   transition: color var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
@@ -1335,9 +1340,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * 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
  * wider tab gap doesn't apply. */
-.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
+.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; box-shadow: none; }
 .aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
-.aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
 /* 5.15 (Chamber-OS 90): underline tabs sharing the width, always or below a breakpoint; the segmented track below one. */
 .aura-tabs__list.is-fill { gap: 0; }
 .aura-tabs__list.is-fill > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
@@ -1861,6 +1865,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__row > .aura-table__sel { align-self: flex-start; margin-top: 2px; }
   /* Actions top-right sit on that first line too (a 32px button centred on 20px, the same 24px footprint as before). */
   .aura-table__td[data-card='actions'] { align-self: flex-start; margin-top: calc(-1 * var(--aura-space-1) - 2px); margin-bottom: -2px; }
+  /* 5.23 (Chamber-OS 120): card: 'wide' — a field on its own full-width line after the half-width ones, wrapping. */
+  .aura-table__td[data-card='wide'] { order: 90; flex: 0 0 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
   /* 5.22 (Chamber-OS 118): card: 'footer' — the card's last row, full width; a Button in it grows, an IconButton or a
    * menu keeps its size. */
   .aura-table__td[data-card='footer'] {
@@ -1901,6 +1907,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }
+  /* Shadows are dropped in forced colours: the track is a real border again, the indicator just above it. */
+  .aura-tabs__list:not(.aura-segmented) { border-bottom: 1px solid CanvasText; }
   /* 5.10: segmented tabs mark the selection with a border and focus with a dashed ring inside it, so a focused tab
    * and the selected one never look alike (manual activation moves focus without selecting). */
   .aura-tabs--segmented .aura-tab.aura-segmented__option.is-selected { outline: none; border: 2px solid Highlight; }

package/dist/styles.layer.css

@@ -314,8 +314,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
-/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
-@media (max-width: 639.98px) {
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
+ * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+@media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -671,10 +673,13 @@ a.aura-icon-btn { text-decoration: none; }
 
 /* ---------- Tabs ---------- */
 .aura-tabs { font-family: var(--font-sans); }
-.aura-tabs__list { display: flex; gap: var(--aura-space-6); border-bottom: 1px solid var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
+/* 5.23 (Chamber-OS 121): the 1px track is an inset shadow inside the list's padding box, and the active tab's 2px
+ * indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
+ * padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
+.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;
-  height: var(--aura-input-height); padding: 0; margin-bottom: -1px;
+  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;
   transition: color var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
@@ -1337,9 +1342,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * 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
  * wider tab gap doesn't apply. */
-.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
+.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; box-shadow: none; }
 .aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
-.aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
 /* 5.15 (Chamber-OS 90): underline tabs sharing the width, always or below a breakpoint; the segmented track below one. */
 .aura-tabs__list.is-fill { gap: 0; }
 .aura-tabs__list.is-fill > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
@@ -1863,6 +1867,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__row > .aura-table__sel { align-self: flex-start; margin-top: 2px; }
   /* Actions top-right sit on that first line too (a 32px button centred on 20px, the same 24px footprint as before). */
   .aura-table__td[data-card='actions'] { align-self: flex-start; margin-top: calc(-1 * var(--aura-space-1) - 2px); margin-bottom: -2px; }
+  /* 5.23 (Chamber-OS 120): card: 'wide' — a field on its own full-width line after the half-width ones, wrapping. */
+  .aura-table__td[data-card='wide'] { order: 90; flex: 0 0 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
   /* 5.22 (Chamber-OS 118): card: 'footer' — the card's last row, full width; a Button in it grows, an IconButton or a
    * menu keeps its size. */
   .aura-table__td[data-card='footer'] {
@@ -1903,6 +1909,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }
+  /* Shadows are dropped in forced colours: the track is a real border again, the indicator just above it. */
+  .aura-tabs__list:not(.aura-segmented) { border-bottom: 1px solid CanvasText; }
   /* 5.10: segmented tabs mark the selection with a border and focus with a dashed ring inside it, so a focused tab
    * and the selected one never look alike (manual activation moves focus without selecting). */
   .aura-tabs--segmented .aura-tab.aura-segmented__option.is-selected { outline: none; border: 2px solid Highlight; }

package/package.json

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