@jirawatpyk/aura-react 5.21.0 → 5.23.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.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`).
+- **Stacked titles wrap** (item 119): a card's title (`card: 'title'` or the automatic one) wraps onto more lines instead of being cut, on a 20px line, and the row box, the pill and top-right actions line up with its first line. Visible in every stacked DataTable: long titles wrap; one-line cards without a pill or actions are 4px taller (the 20px line), with a pill about 1px; the grid is unchanged.
+- `card: 'footer'` moves the cell only visually: arrow keys and screen readers keep the grid's column order. A footer holding only an IconButton or a menu sits at the end edge.
+
 ## 5.21 — Chamber-OS addendum 21
 
 - **Table `rowHeight="density"`** (item 117): every body row is at least the density's row height (48px; 40px compact; 48px on touch screens, as DataTable — unlike the 5.20 cell padding, which stays compact on touch), and its cells' vertical padding shrinks to fit a small Button (7.5px at 48px, 3.5px compact, at most 8px), as in DataTable's `rowHeight="auto"` — so a row with a `sm` Button, an IconButton, a pill or one line of text are all the same height. Content is centred on the row unless you pass `align="top"` (footer cells centre too, as with `align="middle"`). Rows whose text wraps still grow, with the smaller padding. Header and footer row heights, stacked rows and cards (`stackBelow`), and tables without the prop are unchanged.

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

@@ -106,8 +106,12 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	actions?: boolean | undefined;
 	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
-	 * label/value field. Default: today's rule. */
-	card?: "hide" | "field" | "title" | "pill" | undefined;
+	 * 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. `'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;
@@ -1199,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

@@ -106,8 +106,12 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	actions?: boolean | undefined;
 	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
-	 * label/value field. Default: today's rule. */
-	card?: "hide" | "field" | "title" | "pill" | undefined;
+	 * 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. `'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;
@@ -1199,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); }
@@ -1854,9 +1856,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
   .aura-table__td[data-card='pill'] { order: 2; flex: none; }
   .aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
+  /* 5.22 (Chamber-OS 119): the title wraps rather than being cut — a member's full name before a one-click action —
+   * and the row box and the pill line up with its first line (a 20px line; the 16px box 2px down). */
+  .aura-table__td[data-card='title'] { white-space: normal; overflow-wrap: anywhere; overflow: visible; line-height: 20px; align-self: flex-start; }
+  .aura-table__td[data-card='pill'] { align-self: flex-start; line-height: 20px; }
+  .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'] {
+    order: 99; flex: 0 0 100%; display: flex; align-items: center; gap: var(--aura-space-2);
+    margin: var(--aura-space-1) 0 0; overflow: visible; white-space: normal;
+  }
+  .aura-table__td[data-card='footer'] > .aura-table__cell { display: flex; flex: 1 1 auto; align-items: center; gap: var(--aura-space-2); min-width: 0; }
+  .aura-table__td[data-card='footer'] > .aura-btn, .aura-table__td[data-card='footer'] > .aura-table__cell > .aura-btn { flex: 1 1 auto; }
+  /* Only an IconButton or a menu: at the end, as a card's ⋯ usually is. A totals row's label isn't shown there. */
+  .aura-table__td[data-card='footer']:not(:has(.aura-btn)), .aura-table__td[data-card='footer'] > .aura-table__cell:not(:has(.aura-btn)) { justify-content: flex-end; }
+  .aura-table__td[data-card='footer']::before { display: none; }
   /* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
   .aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
   .aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
+  /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
+  .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
@@ -1881,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); }
@@ -1856,9 +1858,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
   .aura-table__td[data-card='pill'] { order: 2; flex: none; }
   .aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
+  /* 5.22 (Chamber-OS 119): the title wraps rather than being cut — a member's full name before a one-click action —
+   * and the row box and the pill line up with its first line (a 20px line; the 16px box 2px down). */
+  .aura-table__td[data-card='title'] { white-space: normal; overflow-wrap: anywhere; overflow: visible; line-height: 20px; align-self: flex-start; }
+  .aura-table__td[data-card='pill'] { align-self: flex-start; line-height: 20px; }
+  .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'] {
+    order: 99; flex: 0 0 100%; display: flex; align-items: center; gap: var(--aura-space-2);
+    margin: var(--aura-space-1) 0 0; overflow: visible; white-space: normal;
+  }
+  .aura-table__td[data-card='footer'] > .aura-table__cell { display: flex; flex: 1 1 auto; align-items: center; gap: var(--aura-space-2); min-width: 0; }
+  .aura-table__td[data-card='footer'] > .aura-btn, .aura-table__td[data-card='footer'] > .aura-table__cell > .aura-btn { flex: 1 1 auto; }
+  /* Only an IconButton or a menu: at the end, as a card's ⋯ usually is. A totals row's label isn't shown there. */
+  .aura-table__td[data-card='footer']:not(:has(.aura-btn)), .aura-table__td[data-card='footer'] > .aura-table__cell:not(:has(.aura-btn)) { justify-content: flex-end; }
+  .aura-table__td[data-card='footer']::before { display: none; }
   /* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
   .aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
   .aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
+  /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
+  .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
@@ -1883,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.21.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",