@jirawatpyk/aura-react 5.22.0 → 5.23.0

package/README.md

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

@@ -108,8 +108,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;
@@ -1201,6 +1203,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 — 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

@@ -108,8 +108,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;
@@ -1201,6 +1203,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 — to match
+	 * action buttons that use it. */
+	touchHeight?: boolean | undefined;
 	/** Name of the region. Default "Actions". */
 	label?: string | undefined;
 	className?: string | undefined;

package/dist/styles.css

@@ -669,10 +669,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 +1338,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 +1863,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 +1905,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

@@ -671,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);
@@ -1337,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); }
@@ -1863,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'] {
@@ -1903,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/package.json

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