@jirawatpyk/aura-react 5.28.0 → 5.29.0

package/README.md

@@ -186,6 +186,14 @@ 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.29 — Chamber-OS addendum 37
+
+- **DataTable loading rows match the rows they stand in for** (item 134), so the layout doesn't jump when the rows arrive:
+  - **Height:** with `rowHeight="auto"` skeleton rows get the same `--auto` class and minimum height as real rows. A column's new **`skeletonLines`** (default 1, at most 10; a `pill` column keeps one pill) draws that many bars, one per text line — `skeletonLines: 2` for a reason and its evidence. On an `align: 'end'` column they line up at the end. Each bar sits on a 20px body line in the grid (a caption line is 16–18px, so a row can come out a few px taller than the real one) and on the 15px value line in a card.
+  - **Stacked cards:** skeleton cards keep each field's label (`data-label`) above its bar, as a real card does.
+  - **Row actions:** an `actions` cell draws one square and a `card: 'footer'` cell a bar across the cell (in a card, the full row, as a Button there fills it), at the small button's height (32px), in the grid as well as in cards. When the column's buttons use `touchHeight`, give the column the new **`skeletonTouch`**: its bars are then 44px below 640px and on a coarse pointer, as those buttons are. A footer that holds only an IconButton still gets the full-width bar; the heights match.
+  - **Unchanged:** skeleton rows stay `aria-hidden`, the pulse stops under reduced motion, `skeletonRows`, `bleed` / `bleedEnd`. Without `rowHeight="auto"` the grid's skeleton rows keep the fixed row height.
+
 ## 5.28 — Chamber-OS addenda 35–36
 
 - **Applied-filter chips show their whole text** (item 132): in `FilterBar`'s chips row a chip takes its text's own width ("Submitted: 28 Aug – 3 Sept 2026", "Member: Midsommar Hospitality Co., Ltd."); only a chip wider than the row is cut, with an ellipsis, and a long chip never widens the FilterBar or its parents (the chips row takes its width from the bar; a bar holding only chips needs a width from its parent, as a block has). A Tag outside FilterBar keeps its 24ch cap. **Whenever a Tag's text is cut** — the 24ch cap or the row — the full text shows on hover (`title`) and, on a removable Tag, in a Tooltip on the remove button's hover and focus; the remove button's name already carries the full text for screen readers. On touch screens a cut chip can't be hovered — keep labels short enough for a phone row where you can.

package/dist/aura.bundle.js

@@ -6339,23 +6339,45 @@ window.Aura = (() => {
             /* @__PURE__ */ React32.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React32.createElement("span", { className: "aura-skel aura-skel--box" }))
           );
         vis.forEach(function(c, j) {
+          const part = cardPart(c, j);
+          const action = part === "footer" || part === "actions";
+          const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+          const bar = function(n4) {
+            return /* @__PURE__ */ React32.createElement(
+              "span",
+              {
+                key: n4,
+                className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n4) % SKELETON_WIDTHS.length] }
+              }
+            );
+          };
+          const bars = [];
+          for (let b = 0; b < lines; b++) bars.push(bar(b));
           sk.push(
             /* @__PURE__ */ React32.createElement(
               "span",
               {
                 key: c.key,
-                className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+                className: cx(
+                  "aura-table__td",
+                  autoRows && "aura-table__td--auto",
+                  c.align === "end" && "is-end",
+                  isPinned(c) && "is-pinned"
+                ),
                 style: cellStyle(c, j),
-                ...cardAttrs(c, j),
-                "data-label": void 0
+                ...cardAttrs(c, j)
               },
-              /* @__PURE__ */ React32.createElement(
+              action ? /* @__PURE__ */ React32.createElement(
                 "span",
                 {
-                  className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                  style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                  className: cx(
+                    "aura-skel aura-skel--action",
+                    part === "footer" && "is-footer",
+                    c.skeletonTouch && "is-touch"
+                  )
                 }
-              )
+              ) : lines > 1 ? /* @__PURE__ */ React32.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
             )
           );
         });
@@ -6364,7 +6386,16 @@ window.Aura = (() => {
           /* @__PURE__ */ React32.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
         );
         skRows.push(
-          /* @__PURE__ */ React32.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+          /* @__PURE__ */ React32.createElement(
+            "div",
+            {
+              key: "sk" + i,
+              className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+              "aria-hidden": true,
+              style: rowStyle
+            },
+            sk
+          )
         );
       }
     } else if (!rows.length) {

package/dist/cjs/index.cjs

@@ -6321,23 +6321,45 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
           /* @__PURE__ */ React32.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React32.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
+        const part = cardPart(c, j);
+        const action = part === "footer" || part === "actions";
+        const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+        const bar = function(n4) {
+          return /* @__PURE__ */ React32.createElement(
+            "span",
+            {
+              key: n4,
+              className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n4) % SKELETON_WIDTHS.length] }
+            }
+          );
+        };
+        const bars = [];
+        for (let b = 0; b < lines; b++) bars.push(bar(b));
         sk.push(
           /* @__PURE__ */ React32.createElement(
             "span",
             {
               key: c.key,
-              className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+              className: cx(
+                "aura-table__td",
+                autoRows && "aura-table__td--auto",
+                c.align === "end" && "is-end",
+                isPinned(c) && "is-pinned"
+              ),
               style: cellStyle(c, j),
-              ...cardAttrs(c, j),
-              "data-label": void 0
+              ...cardAttrs(c, j)
             },
-            /* @__PURE__ */ React32.createElement(
+            action ? /* @__PURE__ */ React32.createElement(
               "span",
               {
-                className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                className: cx(
+                  "aura-skel aura-skel--action",
+                  part === "footer" && "is-footer",
+                  c.skeletonTouch && "is-touch"
+                )
               }
-            )
+            ) : lines > 1 ? /* @__PURE__ */ React32.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
           )
         );
       });
@@ -6346,7 +6368,16 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
         /* @__PURE__ */ React32.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React32.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React32.createElement(
+          "div",
+          {
+            key: "sk" + i,
+            className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+            "aria-hidden": true,
+            style: rowStyle
+          },
+          sk
+        )
       );
     }
   } else if (!rows.length) {

package/dist/esm/DataTable.js

@@ -1125,23 +1125,45 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           /* @__PURE__ */ React.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
+        const part = cardPart(c, j);
+        const action = part === "footer" || part === "actions";
+        const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+        const bar = function(n2) {
+          return /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              key: n2,
+              className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+              style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n2) % SKELETON_WIDTHS.length] }
+            }
+          );
+        };
+        const bars = [];
+        for (let b = 0; b < lines; b++) bars.push(bar(b));
         sk.push(
           /* @__PURE__ */ React.createElement(
             "span",
             {
               key: c.key,
-              className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+              className: cx(
+                "aura-table__td",
+                autoRows && "aura-table__td--auto",
+                c.align === "end" && "is-end",
+                isPinned(c) && "is-pinned"
+              ),
               style: cellStyle(c, j),
-              ...cardAttrs(c, j),
-              "data-label": void 0
+              ...cardAttrs(c, j)
             },
-            /* @__PURE__ */ React.createElement(
+            action ? /* @__PURE__ */ React.createElement(
               "span",
               {
-                className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                className: cx(
+                  "aura-skel aura-skel--action",
+                  part === "footer" && "is-footer",
+                  c.skeletonTouch && "is-touch"
+                )
               }
-            )
+            ) : lines > 1 ? /* @__PURE__ */ React.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
           )
         );
       });
@@ -1150,7 +1172,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         /* @__PURE__ */ React.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: "sk" + i,
+            className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+            "aria-hidden": true,
+            style: rowStyle
+          },
+          sk
+        )
       );
     }
   } else if (!rows.length) {

package/dist/index.d.cts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * 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;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | 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;

package/dist/index.d.ts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * 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;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | 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;

package/dist/styles.css

@@ -338,6 +338,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-radius-md); }
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -1952,6 +1962,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 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; }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }

package/dist/styles.layer.css

@@ -340,6 +340,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-radius-md); }
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -1954,6 +1964,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 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; }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }

package/package.json

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