@jirawatpyk/aura-react 5.10.1 → 5.11.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.11 — Chamber-OS addendum 11 (member directory)
+
+- **DataTable `rowSelectLabel`** (item 75): names each row's checkbox after the row instead of its key — `rowSelectLabel={(r) => 'Select ' + r.company}` — in the grid and in cards. Without it (or when it returns an empty string) the name stays "Select {key}".
+- **Checkbox `aria-describedby`** (item 76): a passed id is kept and the description's own id added after it (`aria-describedby="hint"` + `description` → `"hint {id}-desc"`); with neither there is no attribute. Before, a passed `aria-describedby` was always dropped, with or without a description.
+- **Selection boxes take 24×24** (item 77): the header and row checkboxes in DataTable still draw 16px, but their invisible input reaches 24×24 (WCAG 2.5.8) in the grid and in cards, so a click just outside the box counts.
+- **DataTable `rowHeight="auto"`** (item 78): rows grow to fit what wraps — two badges, a long name — with every cell vertically centred. A row whose content fits keeps the density's height (a pill, one line of text, a small Button or IconButton); padding appears only around content taller than that. Badges and pills side by side keep apart when they wrap. Rows must all be in the DOM, so it's ignored with `height` (virtualized rows are one fixed height; a dev notice says so) — paginate instead. Cards are unchanged. Default: one fixed line per row, long text ends in an ellipsis.
+  ```tsx
+  <DataTable rows={members} rowHeight="auto" columns={[…, { key: 'tags', label: 'TAGS', width: 150, render: (r) => r.tags.map((t) => <Badge key={t}>{t}</Badge>) }]} />
+  ```
+
 ## 5.10.1 — fixes from a new project
 
 - **Switch**: a disabled switch that is on ("always on", enforced by policy) no longer fades into the same grey as an off one. Disabled rows, on or off, now look alike and stay readable: the label turns `aura-fg-secondary`, the description (often the reason it's locked) keeps its colour, the row shows a not-allowed cursor, and only the switch fades — off to the disabled opacity, on to 0.75, at least 3:1 apart in both themes. In forced colours a locked switch is `GrayText`. Use it instead of a Badge for settings people can see but not change.

package/dist/aura.bundle.js

@@ -1524,7 +1524,7 @@ window.Aura = (() => {
           checked: on,
           tabIndex: props.tabIndex,
           disabled: props.disabled,
-          "aria-describedby": descId,
+          "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
           "aria-label": labelled ? void 0 : props.label,
           onChange: function(e) {
             st[1](e.target.checked);
@@ -4996,6 +4996,12 @@ window.Aura = (() => {
       return rowHref ? /* @__PURE__ */ React30.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
     }
     const height = props.height || 0;
+    const autoRows = props.rowHeight === "auto" && !height;
+    if (props.rowHeight === "auto" && height)
+      devWarnOnce(
+        "table-row-height-auto",
+        'DataTable `rowHeight="auto"` is ignored with `height`: virtualized rows are one fixed height. Drop `height` (and paginate) to let rows grow.'
+      );
     const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
     const stickyTotal = !!(props.footer && props.stickyFooter && rows.length && !loading);
     const bodyH = Math.max(ROW_H, height - ROW_H - (stickyTotal ? ROW_H : 0));
@@ -5520,6 +5526,7 @@ window.Aura = (() => {
     }
     function rowCells(r, i, k, isSel) {
       const ri = i + 1;
+      const selLabel = selectable && canSelect(r) ? props.rowSelectLabel && props.rowSelectLabel(r) || t.selectRow(k) : void 0;
       const cells = [/* @__PURE__ */ React30.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
       if (selectable)
         cells.push(
@@ -5532,7 +5539,7 @@ window.Aura = (() => {
               className: cx("aura-table__sel", nPinned && "is-pinned"),
               tabIndex: tabFor(ri, 0),
               "data-rc": ri + ":0",
-              "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
+              "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
               onFocus: function(e) {
                 if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
               }
@@ -5543,7 +5550,7 @@ window.Aura = (() => {
                 hideLabel: true,
                 checked: isSel,
                 tabIndex: -1,
-                label: t.selectRow(k),
+                label: selLabel,
                 onChange: function(on) {
                   toggle(k, on);
                 }
@@ -5564,6 +5571,7 @@ window.Aura = (() => {
               "data-rc": ri + ":" + ci,
               className: cx(
                 "aura-table__td",
+                autoRows && "aura-table__td--auto",
                 c.mono && "aura-table__mono",
                 c.align === "end" && "is-end",
                 pin && "is-pinned",
@@ -5575,7 +5583,7 @@ window.Aura = (() => {
                 if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
               }
             },
-            j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
+            autoRows ? /* @__PURE__ */ React30.createElement("span", { className: "aura-table__cell" }, j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)) : j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
           )
         );
       });
@@ -5654,6 +5662,7 @@ window.Aura = (() => {
                 "aria-selected": selectable && canSelect(r) ? isSel : void 0,
                 className: cx(
                   "aura-table__row",
+                  autoRows && "aura-table__row--auto",
                   isSel && "is-selected",
                   (props.onRowActivate || rowHref) && "is-actionable"
                 ),

package/dist/cjs/index.cjs

@@ -1506,7 +1506,7 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
         checked: on,
         tabIndex: props.tabIndex,
         disabled: props.disabled,
-        "aria-describedby": descId,
+        "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
         "aria-label": labelled ? void 0 : props.label,
         onChange: function(e) {
           st[1](e.target.checked);
@@ -4978,6 +4978,12 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
     return rowHref ? /* @__PURE__ */ React30.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
   }
   const height = props.height || 0;
+  const autoRows = props.rowHeight === "auto" && !height;
+  if (props.rowHeight === "auto" && height)
+    devWarnOnce(
+      "table-row-height-auto",
+      'DataTable `rowHeight="auto"` is ignored with `height`: virtualized rows are one fixed height. Drop `height` (and paginate) to let rows grow.'
+    );
   const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
   const stickyTotal = !!(props.footer && props.stickyFooter && rows.length && !loading);
   const bodyH = Math.max(ROW_H, height - ROW_H - (stickyTotal ? ROW_H : 0));
@@ -5502,6 +5508,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
   }
   function rowCells(r, i, k, isSel) {
     const ri = i + 1;
+    const selLabel = selectable && canSelect(r) ? props.rowSelectLabel && props.rowSelectLabel(r) || t.selectRow(k) : void 0;
     const cells = [/* @__PURE__ */ React30.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
     if (selectable)
       cells.push(
@@ -5514,7 +5521,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
             className: cx("aura-table__sel", nPinned && "is-pinned"),
             tabIndex: tabFor(ri, 0),
             "data-rc": ri + ":0",
-            "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
+            "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
             onFocus: function(e) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
             }
@@ -5525,7 +5532,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
               hideLabel: true,
               checked: isSel,
               tabIndex: -1,
-              label: t.selectRow(k),
+              label: selLabel,
               onChange: function(on) {
                 toggle(k, on);
               }
@@ -5546,6 +5553,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
             "data-rc": ri + ":" + ci,
             className: cx(
               "aura-table__td",
+              autoRows && "aura-table__td--auto",
               c.mono && "aura-table__mono",
               c.align === "end" && "is-end",
               pin && "is-pinned",
@@ -5557,7 +5565,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
           },
-          j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
+          autoRows ? /* @__PURE__ */ React30.createElement("span", { className: "aura-table__cell" }, j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)) : j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
         )
       );
     });
@@ -5636,6 +5644,7 @@ var DataTableImpl = React30.forwardRef(function DataTable(props, ref) {
               "aria-selected": selectable && canSelect(r) ? isSel : void 0,
               className: cx(
                 "aura-table__row",
+                autoRows && "aura-table__row--auto",
                 isSel && "is-selected",
                 (props.onRowActivate || rowHref) && "is-actionable"
               ),

package/dist/esm/Checkbox.js

@@ -50,7 +50,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
         checked: on,
         tabIndex: props.tabIndex,
         disabled: props.disabled,
-        "aria-describedby": descId,
+        "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
         "aria-label": labelled ? void 0 : props.label,
         onChange: function(e) {
           st[1](e.target.checked);

package/dist/esm/DataTable.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
-import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { cx, devWarnOnce, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
@@ -416,6 +416,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return rowHref ? /* @__PURE__ */ React.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
   }
   const height = props.height || 0;
+  const autoRows = props.rowHeight === "auto" && !height;
+  if (props.rowHeight === "auto" && height)
+    devWarnOnce(
+      "table-row-height-auto",
+      'DataTable `rowHeight="auto"` is ignored with `height`: virtualized rows are one fixed height. Drop `height` (and paginate) to let rows grow.'
+    );
   const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
   const stickyTotal = !!(props.footer && props.stickyFooter && rows.length && !loading);
   const bodyH = Math.max(ROW_H, height - ROW_H - (stickyTotal ? ROW_H : 0));
@@ -940,6 +946,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }
   function rowCells(r, i, k, isSel) {
     const ri = i + 1;
+    const selLabel = selectable && canSelect(r) ? props.rowSelectLabel && props.rowSelectLabel(r) || t.selectRow(k) : void 0;
     const cells = [/* @__PURE__ */ React.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
     if (selectable)
       cells.push(
@@ -952,7 +959,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             className: cx("aura-table__sel", nPinned && "is-pinned"),
             tabIndex: tabFor(ri, 0),
             "data-rc": ri + ":0",
-            "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
+            "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
             onFocus: function(e) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
             }
@@ -963,7 +970,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               hideLabel: true,
               checked: isSel,
               tabIndex: -1,
-              label: t.selectRow(k),
+              label: selLabel,
               onChange: function(on) {
                 toggle(k, on);
               }
@@ -984,6 +991,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             "data-rc": ri + ":" + ci,
             className: cx(
               "aura-table__td",
+              autoRows && "aura-table__td--auto",
               c.mono && "aura-table__mono",
               c.align === "end" && "is-end",
               pin && "is-pinned",
@@ -995,7 +1003,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
           },
-          j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
+          autoRows ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__cell" }, j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)) : j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
         )
       );
     });
@@ -1074,6 +1082,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               "aria-selected": selectable && canSelect(r) ? isSel : void 0,
               className: cx(
                 "aura-table__row",
+                autoRows && "aura-table__row--auto",
                 isSel && "is-selected",
                 (props.onRowActivate || rowHref) && "is-actionable"
               ),

package/dist/index.d.cts

@@ -129,6 +129,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
 	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
 	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
+	/** Accessible name for a row's checkbox (and its cell), e.g. `(r) => 'Select ' + r.company` (5.11). Default: the
+	 * `selectRow` string with the row key ("Select M-102"), also used when this returns an empty string. */
+	rowSelectLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -175,6 +178,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
+	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
+	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
+	rowHeight?: "auto" | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
 	columnControls?: boolean | undefined;
 	/** Set false to keep column controls but turn off reordering. */
@@ -256,7 +263,7 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label (needs an id to be linked). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;

package/dist/index.d.ts

@@ -129,6 +129,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
 	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
 	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
+	/** Accessible name for a row's checkbox (and its cell), e.g. `(r) => 'Select ' + r.company` (5.11). Default: the
+	 * `selectRow` string with the row key ("Select M-102"), also used when this returns an empty string. */
+	rowSelectLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -175,6 +178,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
+	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
+	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
+	rowHeight?: "auto" | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
 	columnControls?: boolean | undefined;
 	/** Set false to keep column controls but turn off reordering. */
@@ -256,7 +263,7 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label (needs an id to be linked). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;

package/dist/styles.css

@@ -130,7 +130,21 @@ a.aura-btn { text-decoration: none; }
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
-.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
+/* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
+ * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
+ * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
+.aura-table__row--auto { height: auto; min-height: var(--aura-table-row-height); }
+.aura-table__td--auto {
+  --aura-cell-pad-y: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  display: flex; align-items: center; height: auto; line-height: 20px; white-space: normal;
+  padding-top: var(--aura-cell-pad-y); padding-bottom: var(--aura-cell-pad-y);
+}
+.aura-table__cell { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
+/* Badges and pills side by side keep apart when they wrap onto a second line. */
+.aura-table__cell > .aura-badge, .aura-table__cell > .aura-pill { vertical-align: middle; margin-top: 2px; margin-bottom: 2px; }
+.aura-table__cell > .aura-badge:not(:last-child), .aura-table__cell > .aura-pill:not(:last-child) { margin-inline-end: var(--aura-space-1); }
+.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn,
+.aura-table__cell > .aura-icon-btn, .aura-table__cell > .aura-btn { vertical-align: middle; }
 .aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
 /* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
 .aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
@@ -153,6 +167,10 @@ a.aura-btn { text-decoration: none; }
 
 /* Selection column */
 .aura-table__sel { width: var(--aura-table-select-width); flex: none; display: flex; align-items: center; background: inherit; }
+/* 5.11: the selection box's invisible input reaches 24×24 (WCAG 2.5.8) around the 16px box it draws. Its left edge
+ * overlaps the sticky 24px gutter, so it sits one layer up — unless the column has scrolled under that gutter. */
+.aura-table__sel .aura-check__input { inset: calc((var(--aura-icon-sm) - 24px) / 2); z-index: 2; }
+.aura-table.is-scrolled-x .aura-table__sel:not(.is-pinned) .aura-check__input { z-index: auto; }
 .aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
 
 /* Pinned columns */
@@ -1580,6 +1598,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.11: rowHeight="auto" leaves cards as they are. */
+  .aura-table__td--auto { display: block; white-space: nowrap; }
+  .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }
   .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';

package/dist/styles.layer.css

@@ -132,7 +132,21 @@ a.aura-btn { text-decoration: none; }
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
-.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
+/* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
+ * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
+ * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
+.aura-table__row--auto { height: auto; min-height: var(--aura-table-row-height); }
+.aura-table__td--auto {
+  --aura-cell-pad-y: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  display: flex; align-items: center; height: auto; line-height: 20px; white-space: normal;
+  padding-top: var(--aura-cell-pad-y); padding-bottom: var(--aura-cell-pad-y);
+}
+.aura-table__cell { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
+/* Badges and pills side by side keep apart when they wrap onto a second line. */
+.aura-table__cell > .aura-badge, .aura-table__cell > .aura-pill { vertical-align: middle; margin-top: 2px; margin-bottom: 2px; }
+.aura-table__cell > .aura-badge:not(:last-child), .aura-table__cell > .aura-pill:not(:last-child) { margin-inline-end: var(--aura-space-1); }
+.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn,
+.aura-table__cell > .aura-icon-btn, .aura-table__cell > .aura-btn { vertical-align: middle; }
 .aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
 /* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
 .aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
@@ -155,6 +169,10 @@ a.aura-btn { text-decoration: none; }
 
 /* Selection column */
 .aura-table__sel { width: var(--aura-table-select-width); flex: none; display: flex; align-items: center; background: inherit; }
+/* 5.11: the selection box's invisible input reaches 24×24 (WCAG 2.5.8) around the 16px box it draws. Its left edge
+ * overlaps the sticky 24px gutter, so it sits one layer up — unless the column has scrolled under that gutter. */
+.aura-table__sel .aura-check__input { inset: calc((var(--aura-icon-sm) - 24px) / 2); z-index: 2; }
+.aura-table.is-scrolled-x .aura-table__sel:not(.is-pinned) .aura-check__input { z-index: auto; }
 .aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
 
 /* Pinned columns */
@@ -1582,6 +1600,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.11: rowHeight="auto" leaves cards as they are. */
+  .aura-table__td--auto { display: block; white-space: nowrap; }
+  .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }
   .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';

package/package.json

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