@godxjp/ui 18.12.7 → 18.12.11

package/dist/components/data-display/table.d.ts

@@ -19,11 +19,13 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     bordered?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
-     * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
-     * (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
-     * the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
-     * measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
-     * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
+     * table exactly as it is.
+     *
+     * `"action-collection"` is the canonical dense approval / action queue (gh#253): below
+     * `collapseBelow`, the desktop intrinsic column widths — the thing that pushes the last columns
+     * outside a 390px viewport — are replaced by the token-owned column PRIORITY measures
+     * (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead of
+     * forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
      * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
      * header association, `aria-sort` and screen-reader table navigation are identical at every width.
      *
@@ -32,12 +34,26 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
      * table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
      * of a data table; compressing further would shred CJK headers one character per line.
+     *
+     * `"stacked-record-collection"` (gh#356) is the canonical RECORD list — a table whose columns
+     * are independent facts about ONE record (client ID · purpose · scopes · last use · status ·
+     * lifecycle actions) rather than a dense queue `action-collection` can reflow into a
+     * column-priority budget. Below `collapseBelow` each row renders as a card-like block with
+     * every column's label + value stacked vertically (a definition-list composition); row-level
+     * actions stay in document flow at the end of the card, never scrolled off-canvas. Supply the
+     * stacked-tier legend for each column with `label` on its `TableCell` (leave it unset on a
+     * self-evident column, e.g. row actions). This DOES change `display` (table family → block), so
+     * table/rowgroup/row/cell roles are re-asserted explicitly on every element that keeps
+     * rendering — see the prop doc on `TableCell`. The one element that does NOT keep rendering is
+     * the header row: below the step it is removed outright (not just visually hidden), because
+     * each `TableCell`'s own `label` becomes the field name for every modality at that tier — see
+     * `TableCellLabel`.
      */
     preset?: TablePresetProp;
     /**
-     * Step at which `preset="action-collection"` switches to the priority measures, measured against
-     * the TABLE's own container (not the viewport), so a table inside a rail collapses before the
-     * page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
+     * Step at which a named `preset` switches tiers, measured against the TABLE's own container
+     * (not the viewport), so a table inside a rail collapses before the page does. Defaults to
+     * `"sm"` (40rem). Ignored while `preset` is `"default"`.
      */
     collapseBelow?: BreakpointProp;
 };
@@ -60,11 +76,13 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
     bordered?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
-     * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
-     * (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
-     * the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
-     * measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
-     * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
+     * table exactly as it is.
+     *
+     * `"action-collection"` is the canonical dense approval / action queue (gh#253): below
+     * `collapseBelow`, the desktop intrinsic column widths — the thing that pushes the last columns
+     * outside a 390px viewport — are replaced by the token-owned column PRIORITY measures
+     * (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead of
+     * forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
      * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
      * header association, `aria-sort` and screen-reader table navigation are identical at every width.
      *
@@ -73,12 +91,26 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
      * table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
      * of a data table; compressing further would shred CJK headers one character per line.
+     *
+     * `"stacked-record-collection"` (gh#356) is the canonical RECORD list — a table whose columns
+     * are independent facts about ONE record (client ID · purpose · scopes · last use · status ·
+     * lifecycle actions) rather than a dense queue `action-collection` can reflow into a
+     * column-priority budget. Below `collapseBelow` each row renders as a card-like block with
+     * every column's label + value stacked vertically (a definition-list composition); row-level
+     * actions stay in document flow at the end of the card, never scrolled off-canvas. Supply the
+     * stacked-tier legend for each column with `label` on its `TableCell` (leave it unset on a
+     * self-evident column, e.g. row actions). This DOES change `display` (table family → block), so
+     * table/rowgroup/row/cell roles are re-asserted explicitly on every element that keeps
+     * rendering — see the prop doc on `TableCell`. The one element that does NOT keep rendering is
+     * the header row: below the step it is removed outright (not just visually hidden), because
+     * each `TableCell`'s own `label` becomes the field name for every modality at that tier — see
+     * `TableCellLabel`.
      */
     preset?: TablePresetProp;
     /**
-     * Step at which `preset="action-collection"` switches to the priority measures, measured against
-     * the TABLE's own container (not the viewport), so a table inside a rail collapses before the
-     * page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
+     * Step at which a named `preset` switches tiers, measured against the TABLE's own container
+     * (not the viewport), so a table inside a rail collapses before the page does. Defaults to
+     * `"sm"` (40rem). Ignored while `preset` is `"default"`.
      */
     collapseBelow?: BreakpointProp;
 } & React.RefAttributes<HTMLTableElement>>;
@@ -94,6 +126,17 @@ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttribu
 type TableCellPriority = {
     priority?: TableColumnPriorityProp;
 };
+/**
+ * Stacked-tier legend for ONE column, read only by `TableCell` under
+ * `Table preset="stacked-record-collection"`. Rendered as an inline label ahead of the cell's
+ * value, visible only below the collapse step (a wide container still shows the real `<th>`
+ * header instead, so the label stays invisible — never duplicated — above the step). Leave unset
+ * on a column whose value is self-evident without one (e.g. a row-actions cell whose buttons
+ * already carry their own text). Ignored under every other preset.
+ */
+type TableCellLabel = {
+    label?: React.ReactNode;
+};
 export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
-export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & TableCellLabel & React.RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/data-display/table.js

@@ -1,7 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { tableHeadHeightClass } from "../../lib/control-styles.js";
 import { cn } from "../../lib/utils.js";
+const TablePresetContext = React.createContext("default");
 const Table = React.forwardRef(
   ({
     className,
@@ -23,62 +25,115 @@ const Table = React.forwardRef(
       {
         className: cn(
           scrollable ? "relative w-full overflow-auto" : "relative w-full",
-          preset !== "default" && "ui-table-collection"
+          preset === "action-collection" && "ui-table-collection",
+          preset === "stacked-record-collection" && "ui-table-stacked-collection"
         ),
         "data-preset": preset === "default" ? void 0 : preset,
         "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
         ...scrollable ? { tabIndex: 0 } : {},
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(TablePresetContext.Provider, { value: preset, children: /* @__PURE__ */ jsx(
           "table",
           {
             ref,
             "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", bordered && "ui-table-bordered", className),
+            role: preset === "stacked-record-collection" ? "table" : void 0,
+            className: cn(
+              "w-full caption-bottom text-sm",
+              bordered && "ui-table-bordered",
+              className
+            ),
             ...props
           }
-        )
+        ) })
       }
     )
   )
 );
 Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
+  const preset = React.useContext(TablePresetContext);
+  const stacked = preset === "stacked-record-collection";
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      role: stacked ? "rowgroup" : void 0,
+      className: cn(
+        "[&_tr]:border-b",
+        // Removed below the collapse step (the stacked-tier CSS makes it display:none) — the
+        // per-cell label TableCell renders inline (real text, not aria-hidden) replaces it for
+        // every modality, so the raw header is fully redundant there, not just visually.
+        stacked && "ui-table-stacked-collection-head",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TableHeader.displayName = "TableHeader";
-const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+const TableBody = React.forwardRef(({ className, ...props }, ref) => {
+  const preset = React.useContext(TablePresetContext);
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      role: preset === "stacked-record-collection" ? "rowgroup" : void 0,
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+});
 TableBody.displayName = "TableBody";
-const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tr",
-  {
-    ref,
-    className: cn(
-      "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] border-b transition-colors",
-      className
-    ),
-    ...props
-  }
-));
+const TableRow = React.forwardRef(({ className, ...props }, ref) => {
+  const preset = React.useContext(TablePresetContext);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      role: preset === "stacked-record-collection" ? "row" : void 0,
+      className: cn(
+        "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
-  "th",
-  {
-    ref,
-    "data-slot": "table-head",
-    "data-priority": priority,
-    className: cn(tableHeadHeightClass, className),
-    ...props
-  }
-));
+const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => {
+  const preset = React.useContext(TablePresetContext);
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      "data-slot": "table-head",
+      "data-priority": priority,
+      role: preset === "stacked-record-collection" ? "columnheader" : void 0,
+      className: cn(tableHeadHeightClass, className),
+      ...props
+    }
+  );
+});
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
-  "td",
-  {
-    ref,
-    "data-slot": "table-cell",
-    "data-priority": priority,
-    className: cn(className),
-    ...props
-  }
-));
+const TableCell = React.forwardRef(({ className, priority, label, children, ...props }, ref) => {
+  const preset = React.useContext(TablePresetContext);
+  const stacked = preset === "stacked-record-collection";
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      ref,
+      "data-slot": "table-cell",
+      "data-priority": priority,
+      role: stacked ? "cell" : void 0,
+      className: cn(className),
+      ...props,
+      children: [
+        stacked && label != null ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", children: label }) : null,
+        children
+      ]
+    }
+  );
+});
 TableCell.displayName = "TableCell";
 export {
   Table,

package/dist/components/navigation/pagination.js

@@ -178,7 +178,7 @@ function Pagination({
             {
               className: "ui-pagination-size-trigger w-max min-w-[var(--pagination-size-width)]",
               "aria-label": t("navigation.pagination.pageSize"),
-              children: /* @__PURE__ */ jsx(SelectValue, { children: t("navigation.pagination.pageSizeOption", { size: pageSize }) })
+              children: /* @__PURE__ */ jsx(SelectValue, { children: t("navigation.pagination.pageSizeTrigger", { size: pageSize }) })
             }
           ),
           /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })

package/dist/components/ui/table.js

@@ -1 +1,2 @@
+"use client";
 export * from "../data-display/table.js";

package/dist/i18n/messages/en.json

@@ -311,6 +311,7 @@
       "next": "Next page",
       "page": "Page {page}",
       "pageSize": "Page size",
+      "pageSizeTrigger": "{size} / page",
       "pageSizeOption": "{size} / page",
       "total": {
         "one": "Total {total} item",

package/dist/i18n/messages/ja.json

@@ -302,6 +302,7 @@
       "next": "次のページ",
       "page": "ページ {page}",
       "pageSize": "ページサイズ",
+      "pageSizeTrigger": "{size}件",
       "pageSizeOption": "{size} 件/ページ",
       "total": "全 {total} 件"
     },

package/dist/i18n/messages/vi.json

@@ -302,6 +302,7 @@
       "next": "Trang sau",
       "page": "Trang {page}",
       "pageSize": "Số dòng mỗi trang",
+      "pageSizeTrigger": "{size} / trang",
       "pageSizeOption": "{size} / trang",
       "total": "Tổng {total} mục"
     },

package/dist/props/vocabulary/data.prop.d.ts

@@ -81,8 +81,21 @@ export type StickyProp = boolean;
  * the desktop intrinsic column widths are replaced by token-owned column-PRIORITY measures under
  * `table-layout: fixed` and cells wrap, so every column — including the row actions — stays inside
  * the initial narrow frame. The real `<table>` semantics are never rewritten.
+ *
+ * `"stacked-record-collection"` (gh#356) is the canonical RECORD list — a table whose columns
+ * cannot be reflowed into a fixed-layout budget (a scopes/status/lifecycle-action record, not a
+ * dense queue): below `collapseBelow` each row renders as a card-like block with every column's
+ * label + value stacked vertically (a definition-list composition), and row-level actions stay in
+ * document flow at the bottom of the card — never scrolled off-canvas. Unlike `action-collection`
+ * this DOES change `display` (table → block), so the preset re-asserts table semantics with
+ * explicit `role` attributes on every element that keeps rendering (browsers drop the IMPLICIT
+ * table roles once `display` leaves the table family — the standard fix, see e.g. Scott O'Hara's
+ * "breaking tables"). The header row is the one element that does NOT keep rendering below the
+ * step — it is removed outright, because each `TableCell`'s own `label` becomes the field name
+ * for every modality at that tier. Mark each column's stacked-tier legend with `label` on its
+ * `TableCell`.
  */
-export type TablePresetProp = "default" | "action-collection";
+export type TablePresetProp = "default" | "action-collection" | "stacked-record-collection";
 /**
  * Relative importance of a table column, used by `preset="action-collection"` to allocate the
  * narrow-frame measure. `"primary"` is the row's subject, `"secondary"` its object/target,

package/dist/styles/table-layout.css

@@ -363,6 +363,32 @@
   }
 }
 
+@layer components {
+  /* ── Table · `preset="stacked-record-collection"` (gh#356) ──────────────────────────────────
+   * The canonical RECORD list: client ID · purpose · scopes · last use · status · lifecycle
+   * actions — independent facts about ONE record, not a dense queue `action-collection`'s
+   * column-priority budget can reflow. Below `collapseBelow` every row becomes a card-like block
+   * and every column's label + value stack vertically (a definition-list composition), so every
+   * field — the row's lifecycle actions included — stays inside the initial narrow frame instead
+   * of requiring horizontal scroll.
+   *
+   * Unlike `action-collection` this DOES change `display` (table family → block) below the step,
+   * so table.tsx re-asserts table/rowgroup/row/columnheader/cell explicitly via `role` — browsers
+   * drop the IMPLICIT roles once an element's `display` leaves the table family. The static rules
+   * here are unqueried (apply whenever the preset is on); the display-changing, card-drawing
+   * rules live in the `godxjp-ui-responsive` layer below, same split as `action-collection`. */
+  .ui-table-stacked-collection {
+    container: ui-table-stacked-collection / inline-size;
+  }
+
+  /* The stacked-tier field label TableCell renders ahead of its value when `label` is supplied.
+   * Hidden above the collapse step so a wide container never shows both the real `<th>` header
+   * AND the inline label for the same column — the responsive layer below turns it back on. */
+  .ui-table-stacked-collection-label {
+    display: none;
+  }
+}
+
 /* The compact tier lives in `godxjp-ui-responsive` — the LAST layer, declared after Tailwind in
  * styles/base.css — not in `@layer components`. `<table>` carries `text-sm`, a Tailwind utility,
  * and `utilities` outranks `components` by LAYER ORDER, so a `font-size:` re-point written here as
@@ -537,3 +563,325 @@
     }
   }
 }
+
+/* `preset="stacked-record-collection"` compact tier (gh#356) — same layer-contract reason as
+ * `action-collection` above: `<table>` carries `text-sm`/`border-b`/`border-0`, all Tailwind
+ * utilities, and `utilities` outranks `components` by LAYER ORDER, so the display-changing card
+ * transform has to live in this LAST layer to ever win the cascade. One block per canonical step
+ * (a container query cannot read a `var()`, so the scale is written out — sm 40rem · md 48rem ·
+ * lg 64rem · xl 80rem, the same steps `action-collection` and `--master-detail-collapse-below`
+ * use). See styles/base.css · THE LAYER CONTRACT. */
+@layer godxjp-ui-responsive {
+  @container ui-table-stacked-collection (width < 40rem) {
+    [data-collapse-below="sm"] [data-slot="table"] {
+      display: block;
+    }
+
+    /* The header is fully removed below the step — see the rule's own comment for why
+     * `display: none` (not a sr-only clip) is the right call here. */
+    [data-collapse-below="sm"] .ui-table-stacked-collection-head {
+      /* `display: none` (not a visually-hidden clip) removes the header from BOTH the paint
+       * tree and the accessibility tree below the step — deliberate: TableCell's stacked-tier
+       * label (rendered as real, non-aria-hidden text) is what carries the field name to every
+       * modality at this tier, sighted and AT alike, so the raw `<th>` is fully redundant here,
+       * not just visually. */
+      display: none;
+    }
+
+    [data-collapse-below="sm"] tbody {
+      display: block;
+    }
+
+    /* Card shell. `border`/`background` here are the SHORTHAND form, which beats the individual
+     * `border-bottom-width` / `background-color` Tailwind utilities TableRow also carries — layer
+     * order decides that, not specificity (this layer is declared after `utilities`). */
+    [data-collapse-below="sm"] .ui-table-row {
+      display: block;
+      /* `.ui-table-row` carries a FIXED `height: var(--table-row-height)` from
+       * control.css (an earlier layer, but that only matters for a property BOTH
+       * layers declare — this preset never touches `height` anywhere else, so without
+       * this reset the fixed row height survives untouched and every stacked field
+       * below the first overflows the ~34px box, visually overlapping the next card).
+       * `auto` lets the card grow to fit its stacked fields. */
+      height: auto;
+      border: 1px solid
+        var(--table-stacked-record-collection-card-border-color, hsl(var(--border)));
+      border-radius: var(--table-stacked-record-collection-card-radius);
+      background: var(
+        --table-stacked-record-collection-card-background,
+        hsl(var(--card, var(--background)))
+      );
+      padding: var(--table-stacked-record-collection-card-padding);
+    }
+
+    [data-collapse-below="sm"] .ui-table-row + .ui-table-row {
+      margin-block-start: var(--table-stacked-record-collection-card-gap);
+    }
+
+    /* Each column becomes its own block inside the card. Consistent vertical rhythm (the
+     * field-gap padding below) separates fields — no rule between them, matching the
+     * canonical's plain definition-list composition. */
+    [data-collapse-below="sm"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-record-collection-field-gap);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="sm"] [data-slot="table-cell"]:first-child {
+      padding-block-start: 0;
+    }
+
+    [data-collapse-below="sm"] [data-slot="table-cell"]:last-child {
+      padding-block-end: 0;
+    }
+
+    /* A nowrap child (a Badge pill) would otherwise clip inside the narrow card. */
+    [data-collapse-below="sm"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+
+    [data-collapse-below="sm"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-record-collection-label-font-size);
+      color: var(--table-stacked-record-collection-label-color, hsl(var(--muted-foreground)));
+      margin-block-end: var(--table-stacked-record-collection-label-gap);
+    }
+
+    /* Lifecycle actions (`priority="actions"`) span the card edge-to-edge and split evenly —
+     * the canonical's full-width button pair — instead of the compact right-aligned desktop
+     * pair. Targets any actionable element inside the cell regardless of nesting, so it
+     * still applies through a `Flex` wrapper. */
+    [data-collapse-below="sm"] [data-slot="table-cell"][data-priority="actions"] :is(button, a) {
+      flex: 1 1 0%;
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 48rem) {
+    [data-collapse-below="md"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="md"] .ui-table-stacked-collection-head {
+      /* `display: none` (not a visually-hidden clip) removes the header from BOTH the paint
+       * tree and the accessibility tree below the step — deliberate: TableCell's stacked-tier
+       * label (rendered as real, non-aria-hidden text) is what carries the field name to every
+       * modality at this tier, sighted and AT alike, so the raw `<th>` is fully redundant here,
+       * not just visually. */
+      display: none;
+    }
+
+    [data-collapse-below="md"] tbody {
+      display: block;
+    }
+
+    [data-collapse-below="md"] .ui-table-row {
+      display: block;
+      /* `.ui-table-row` carries a FIXED `height: var(--table-row-height)` from
+       * control.css (an earlier layer, but that only matters for a property BOTH
+       * layers declare — this preset never touches `height` anywhere else, so without
+       * this reset the fixed row height survives untouched and every stacked field
+       * below the first overflows the ~34px box, visually overlapping the next card).
+       * `auto` lets the card grow to fit its stacked fields. */
+      height: auto;
+      border: 1px solid
+        var(--table-stacked-record-collection-card-border-color, hsl(var(--border)));
+      border-radius: var(--table-stacked-record-collection-card-radius);
+      background: var(
+        --table-stacked-record-collection-card-background,
+        hsl(var(--card, var(--background)))
+      );
+      padding: var(--table-stacked-record-collection-card-padding);
+    }
+
+    [data-collapse-below="md"] .ui-table-row + .ui-table-row {
+      margin-block-start: var(--table-stacked-record-collection-card-gap);
+    }
+
+    [data-collapse-below="md"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-record-collection-field-gap);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="md"] [data-slot="table-cell"]:first-child {
+      padding-block-start: 0;
+    }
+
+    [data-collapse-below="md"] [data-slot="table-cell"]:last-child {
+      padding-block-end: 0;
+    }
+
+    [data-collapse-below="md"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+
+    [data-collapse-below="md"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-record-collection-label-font-size);
+      color: var(--table-stacked-record-collection-label-color, hsl(var(--muted-foreground)));
+      margin-block-end: var(--table-stacked-record-collection-label-gap);
+    }
+
+    /* Lifecycle actions (`priority="actions"`) span the card edge-to-edge and split evenly —
+     * the canonical's full-width button pair — instead of the compact right-aligned desktop
+     * pair. Targets any actionable element inside the cell regardless of nesting, so it
+     * still applies through a `Flex` wrapper. */
+    [data-collapse-below="md"] [data-slot="table-cell"][data-priority="actions"] :is(button, a) {
+      flex: 1 1 0%;
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 64rem) {
+    [data-collapse-below="lg"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="lg"] .ui-table-stacked-collection-head {
+      /* `display: none` (not a visually-hidden clip) removes the header from BOTH the paint
+       * tree and the accessibility tree below the step — deliberate: TableCell's stacked-tier
+       * label (rendered as real, non-aria-hidden text) is what carries the field name to every
+       * modality at this tier, sighted and AT alike, so the raw `<th>` is fully redundant here,
+       * not just visually. */
+      display: none;
+    }
+
+    [data-collapse-below="lg"] tbody {
+      display: block;
+    }
+
+    [data-collapse-below="lg"] .ui-table-row {
+      display: block;
+      /* `.ui-table-row` carries a FIXED `height: var(--table-row-height)` from
+       * control.css (an earlier layer, but that only matters for a property BOTH
+       * layers declare — this preset never touches `height` anywhere else, so without
+       * this reset the fixed row height survives untouched and every stacked field
+       * below the first overflows the ~34px box, visually overlapping the next card).
+       * `auto` lets the card grow to fit its stacked fields. */
+      height: auto;
+      border: 1px solid
+        var(--table-stacked-record-collection-card-border-color, hsl(var(--border)));
+      border-radius: var(--table-stacked-record-collection-card-radius);
+      background: var(
+        --table-stacked-record-collection-card-background,
+        hsl(var(--card, var(--background)))
+      );
+      padding: var(--table-stacked-record-collection-card-padding);
+    }
+
+    [data-collapse-below="lg"] .ui-table-row + .ui-table-row {
+      margin-block-start: var(--table-stacked-record-collection-card-gap);
+    }
+
+    [data-collapse-below="lg"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-record-collection-field-gap);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table-cell"]:first-child {
+      padding-block-start: 0;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table-cell"]:last-child {
+      padding-block-end: 0;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+
+    [data-collapse-below="lg"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-record-collection-label-font-size);
+      color: var(--table-stacked-record-collection-label-color, hsl(var(--muted-foreground)));
+      margin-block-end: var(--table-stacked-record-collection-label-gap);
+    }
+
+    /* Lifecycle actions (`priority="actions"`) span the card edge-to-edge and split evenly —
+     * the canonical's full-width button pair — instead of the compact right-aligned desktop
+     * pair. Targets any actionable element inside the cell regardless of nesting, so it
+     * still applies through a `Flex` wrapper. */
+    [data-collapse-below="lg"] [data-slot="table-cell"][data-priority="actions"] :is(button, a) {
+      flex: 1 1 0%;
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 80rem) {
+    [data-collapse-below="xl"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="xl"] .ui-table-stacked-collection-head {
+      /* `display: none` (not a visually-hidden clip) removes the header from BOTH the paint
+       * tree and the accessibility tree below the step — deliberate: TableCell's stacked-tier
+       * label (rendered as real, non-aria-hidden text) is what carries the field name to every
+       * modality at this tier, sighted and AT alike, so the raw `<th>` is fully redundant here,
+       * not just visually. */
+      display: none;
+    }
+
+    [data-collapse-below="xl"] tbody {
+      display: block;
+    }
+
+    [data-collapse-below="xl"] .ui-table-row {
+      display: block;
+      /* `.ui-table-row` carries a FIXED `height: var(--table-row-height)` from
+       * control.css (an earlier layer, but that only matters for a property BOTH
+       * layers declare — this preset never touches `height` anywhere else, so without
+       * this reset the fixed row height survives untouched and every stacked field
+       * below the first overflows the ~34px box, visually overlapping the next card).
+       * `auto` lets the card grow to fit its stacked fields. */
+      height: auto;
+      border: 1px solid
+        var(--table-stacked-record-collection-card-border-color, hsl(var(--border)));
+      border-radius: var(--table-stacked-record-collection-card-radius);
+      background: var(
+        --table-stacked-record-collection-card-background,
+        hsl(var(--card, var(--background)))
+      );
+      padding: var(--table-stacked-record-collection-card-padding);
+    }
+
+    [data-collapse-below="xl"] .ui-table-row + .ui-table-row {
+      margin-block-start: var(--table-stacked-record-collection-card-gap);
+    }
+
+    [data-collapse-below="xl"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-record-collection-field-gap);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table-cell"]:first-child {
+      padding-block-start: 0;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table-cell"]:last-child {
+      padding-block-end: 0;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+
+    [data-collapse-below="xl"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-record-collection-label-font-size);
+      color: var(--table-stacked-record-collection-label-color, hsl(var(--muted-foreground)));
+      margin-block-end: var(--table-stacked-record-collection-label-gap);
+    }
+
+    /* Lifecycle actions (`priority="actions"`) span the card edge-to-edge and split evenly —
+     * the canonical's full-width button pair — instead of the compact right-aligned desktop
+     * pair. Targets any actionable element inside the cell regardless of nesting, so it
+     * still applies through a `Flex` wrapper. */
+    [data-collapse-below="xl"] [data-slot="table-cell"][data-priority="actions"] :is(button, a) {
+      flex: 1 1 0%;
+    }
+  }
+}

package/dist/tokens/components/table.css

@@ -136,3 +136,21 @@
    * Japanese at the compact type tier) and the table scrolls instead of crushing. */
   --table-action-collection-min-inline-size-compact: 0;
 }
+
+/* Table · stacked-record-collection preset (gh#356) — the canonical RECORD list: below the
+ * collapse step each row becomes a card and every column's label + value stack vertically. Every
+ * measure here is themeable so a service can retint/respace the cards without forking the
+ * component (rule #45). Colour/background tokens are `initial` so the default re-resolves the
+ * LIVE role at the call site (a :root binding would freeze a scoped [data-tenant] override —
+ * docs/TOKENS.md). */
+:root {
+  --table-stacked-record-collection-card-gap: var(--space-stack-sm);
+  --table-stacked-record-collection-card-padding: var(--space-4);
+  --table-stacked-record-collection-card-radius: var(--card-radius);
+  --table-stacked-record-collection-card-border-color: initial; /* default = hsl(var(--border)) */
+  --table-stacked-record-collection-card-background: initial; /* default = hsl(var(--card, var(--background))) */
+  --table-stacked-record-collection-field-gap: var(--space-2);
+  --table-stacked-record-collection-label-gap: var(--space-1);
+  --table-stacked-record-collection-label-font-size: var(--font-size-xs);
+  --table-stacked-record-collection-label-color: initial; /* default = hsl(var(--muted-foreground)) */
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.12.7",
-  "godxUiMcp": "18.12.7",
+  "version": "18.12.11",
+  "godxUiMcp": "18.12.11",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",