@jirawatpyk/aura-react 5.20.0 → 5.22.0

package/README.md

@@ -186,6 +186,17 @@ 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.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.
+- The CSS budget is 27 kB (was 26; 5.19–5.21 added read-only fields, the ActionBar start slot and even rows).
+
 ## 5.20 — Chamber-OS addendum 20, items 115–116
 
 - **Table follows the page's density** (item 115): without a `density` prop a Table takes the nearest AuraProvider's density, as its docs said — inside `AuraProvider density="compact"` the wrap carries `data-density="compact"` and cells get 8px vertical padding (were 12px). A `density` prop still wins. The padding comes from the nearest `data-density` (a provider, `<html>`, any element, or the table's own), so `comfortable` inside a compact page switches back as it does for fields. As before with an explicit `compact`, cells stay compact on touch screens. A visible change for Tables inside a compact provider or page.

package/dist/aura.bundle.js

@@ -7267,7 +7267,19 @@ window.Aura = (() => {
     return out;
   }
   var Table = React44.forwardRef(function Table2(props, ref) {
-    const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+    const {
+      caption,
+      captionHidden,
+      density,
+      stackBelow,
+      align,
+      bordered,
+      stackStyle,
+      rowHeight,
+      className,
+      children,
+      ...rest
+    } = props;
     const cards = !!stackBelow && stackStyle === "cards";
     const labels = stackBelow ? headerLabels(children) : null;
     if (labels && !labels.length)
@@ -7311,7 +7323,9 @@ window.Aura = (() => {
           className: cx(
             "aura-tbl",
             stackBelow && "aura-tbl--stack-" + stackBelow,
-            align === "middle" && "aura-tbl--middle",
+            /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+            (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+            rowHeight === "density" && "aura-tbl--row-density",
             cards && "aura-tbl--cards",
             className
           ),

package/dist/cjs/index.cjs

@@ -7249,7 +7249,19 @@ function headerLabels(children) {
   return out;
 }
 var Table = React44.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+  const {
+    caption,
+    captionHidden,
+    density,
+    stackBelow,
+    align,
+    bordered,
+    stackStyle,
+    rowHeight,
+    className,
+    children,
+    ...rest
+  } = props;
   const cards = !!stackBelow && stackStyle === "cards";
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
@@ -7293,7 +7305,9 @@ var Table = React44.forwardRef(function Table2(props, ref) {
         className: cx(
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
-          align === "middle" && "aura-tbl--middle",
+          /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+          (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+          rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
           className
         ),

package/dist/esm/Table.js

@@ -48,7 +48,19 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+  const {
+    caption,
+    captionHidden,
+    density,
+    stackBelow,
+    align,
+    bordered,
+    stackStyle,
+    rowHeight,
+    className,
+    children,
+    ...rest
+  } = props;
   const cards = !!stackBelow && stackStyle === "cards";
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
@@ -92,7 +104,9 @@ const Table = React.forwardRef(function Table2(props, ref) {
         className: cx(
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
-          align === "middle" && "aura-tbl--middle",
+          /* 5.21: even rows centre their content, as DataTable's auto rows do, unless `align="top"` is asked for. */
+          (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
+          rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
           className
         ),

package/dist/index.d.cts

@@ -106,8 +106,10 @@ 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. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | 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;
@@ -1147,6 +1149,12 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
 	stackStyle?: "list" | "cards" | undefined;
+	/** `'density'` (5.21, Chamber-OS 117): every body row is at least the density's row height (48px, 40px compact,
+	 * 48px on touch screens, as DataTable) and its cells' vertical padding shrinks to fit a small Button — so a row with
+	 * a `sm` Button, an IconButton, a pill or one line of text are all the same height, as in DataTable's
+	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
+	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
+	rowHeight?: "density" | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }

package/dist/index.d.ts

@@ -106,8 +106,10 @@ 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. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | 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;
@@ -1147,6 +1149,12 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
 	stackStyle?: "list" | "cards" | undefined;
+	/** `'density'` (5.21, Chamber-OS 117): every body row is at least the density's row height (48px, 40px compact,
+	 * 48px on touch screens, as DataTable) and its cells' vertical padding shrinks to fit a small Button — so a row with
+	 * a `sm` Button, an IconButton, a pill or one line of text are all the same height, as in DataTable's
+	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
+	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
+	rowHeight?: "density" | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }

package/dist/styles.css

@@ -1697,6 +1697,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
 .aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+/* 5.21 (Chamber-OS 117) rowHeight="density": a body row is at least the density's row height (a table row's height is
+ * a minimum), and its cells' padding shrinks so a 32px small Button still fits it — 7.5px above and below at 48px,
+ * 3.5px compact, never more than 8px — as in DataTable's auto rows. Before the stacked rules, which undo it. */
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row { height: var(--aura-table-row-height); }
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row > * {
+  --aura-tbl-row-py: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  padding-top: var(--aura-tbl-row-py); padding-bottom: var(--aura-tbl-row-py);
+}
 .aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
@@ -1709,7 +1717,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1731,7 +1739,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1846,9 +1854,29 @@ 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.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; }

package/dist/styles.layer.css

@@ -1699,6 +1699,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
 .aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+/* 5.21 (Chamber-OS 117) rowHeight="density": a body row is at least the density's row height (a table row's height is
+ * a minimum), and its cells' padding shrinks so a 32px small Button still fits it — 7.5px above and below at 48px,
+ * 3.5px compact, never more than 8px — as in DataTable's auto rows. Before the stacked rules, which undo it. */
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row { height: var(--aura-table-row-height); }
+.aura-tbl--row-density > .aura-tbl__body > .aura-tbl__row > * {
+  --aura-tbl-row-py: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  padding-top: var(--aura-tbl-row-py); padding-bottom: var(--aura-tbl-row-py);
+}
 .aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
 .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
@@ -1711,7 +1719,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1733,7 +1741,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
-  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1848,9 +1856,29 @@ 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.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; }

package/package.json

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