@jirawatpyk/aura-tokens 5.10.1 → 5.11.0

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v5.10.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
+/* AURA v5.11.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura-tailwind.prefixed.css

@@ -1,4 +1,4 @@
-/* AURA v5.10.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
+/* AURA v5.11.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v5.10.1 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
+/* AURA v5.11.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/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/components/aura.components.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/components/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "5.10.1",
+  "version": "5.11.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.10.1",
+  "version": "5.11.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",