@godxjp/ui 18.12.11 → 18.12.13

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

@@ -19,13 +19,11 @@ 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.
      *
@@ -34,26 +32,12 @@ 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 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"`.
+     * 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"`.
      */
     collapseBelow?: BreakpointProp;
 };
@@ -76,13 +60,11 @@ 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.
      *
@@ -91,26 +73,12 @@ 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 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"`.
+     * 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"`.
      */
     collapseBelow?: BreakpointProp;
 } & React.RefAttributes<HTMLTableElement>>;
@@ -126,17 +94,6 @@ 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 & TableCellLabel & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
 export {};

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

@@ -1,9 +1,7 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } 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,
@@ -25,115 +23,62 @@ const Table = React.forwardRef(
       {
         className: cn(
           scrollable ? "relative w-full overflow-auto" : "relative w-full",
-          preset === "action-collection" && "ui-table-collection",
-          preset === "stacked-record-collection" && "ui-table-stacked-collection"
+          preset !== "default" && "ui-table-collection"
         ),
         "data-preset": preset === "default" ? void 0 : preset,
         "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
         ...scrollable ? { tabIndex: 0 } : {},
-        children: /* @__PURE__ */ jsx(TablePresetContext.Provider, { value: preset, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           "table",
           {
             ref,
             "data-slot": "table",
-            role: preset === "stacked-record-collection" ? "table" : void 0,
-            className: cn(
-              "w-full caption-bottom text-sm",
-              bordered && "ui-table-bordered",
-              className
-            ),
+            className: cn("w-full caption-bottom text-sm", bordered && "ui-table-bordered", className),
             ...props
           }
-        ) })
+        )
       }
     )
   )
 );
 Table.displayName = "Table";
-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
-    }
-  );
-});
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-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
-    }
-  );
-});
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-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
-    }
-  );
-});
+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
+  }
+));
 TableRow.displayName = "TableRow";
-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
-    }
-  );
-});
+const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    "data-slot": "table-head",
+    "data-priority": priority,
+    className: cn(tableHeadHeightClass, className),
+    ...props
+  }
+));
 TableHead.displayName = "TableHead";
-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
-      ]
-    }
-  );
-});
+const TableCell = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    "data-slot": "table-cell",
+    "data-priority": priority,
+    className: cn(className),
+    ...props
+  }
+));
 TableCell.displayName = "TableCell";
 export {
   Table,

package/dist/components/ui/table.js

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

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

@@ -81,21 +81,8 @@ 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" | "stacked-record-collection";
+export type TablePresetProp = "default" | "action-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/shell-layout.css

@@ -1271,7 +1271,19 @@
     align-items: center;
     gap: var(--topbar-gap);
     padding-inline: var(--topbar-inset);
-    overflow: hidden;
+    /* Horizontal-only clip (gh#291). `hidden` clipped BOTH axes with no clip-margin,
+     * cutting the focus ring of slot controls flat at top/bottom — the bar's content
+     * box hugs --control-height exactly, and the rails' overflow-clip-margin below
+     * cannot help when the parent already swallowed the ring. `clip` (not `hidden`)
+     * is what lets overflow-y stay `visible` — a `hidden`/`visible` pair computes to
+     * `auto` and still clips. Vertically the ring paints into the shell bar's box,
+     * which has headroom; the horizontal shrink/truncation contract is unchanged. */
+    overflow-x: clip;
+    overflow-y: visible;
+    /* Ring headroom on the clipped axis: the end rail sits flush against this
+     * box, so without a margin the LAST control's ring loses its outer edge.
+     * 2x the ring token — open/focus rings paint up to 3px (gh#291 follow-up). */
+    overflow-clip-margin: calc(2 * var(--focus-ring-width));
   }
   .ui-topbar-start,
   .ui-topbar-center,
@@ -1280,8 +1292,17 @@
     min-width: 0;
     align-items: center;
     gap: var(--topbar-gap);
-    overflow: clip;
-    overflow-clip-margin: var(--focus-ring-width);
+    /* Clip horizontally only (gh#291): the rails hug --control-height, so a
+     * vertical clip eats the focus ring even WITH the clip-margin — the margin
+     * is 2px while e.g. the toggle ring paints 3px, and Safari does not
+     * implement overflow-clip-margin at all. The margin still buys horizontal
+     * ring headroom where supported. */
+    overflow-x: clip;
+    overflow-y: visible;
+    /* 2x the ring token, NOT 1x: focus/open rings paint up to 3px while the
+     * token is 2px, so a flush-edge control (the locale picker is the first
+     * child of `end`) lost 1px of ring on the clipped axis (gh#291 follow-up). */
+    overflow-clip-margin: calc(2 * var(--focus-ring-width));
   }
   .ui-topbar-start {
     flex: 0 1 auto;

package/dist/styles/table-layout.css

@@ -363,32 +363,6 @@
   }
 }
 
-@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
@@ -563,325 +537,3 @@
     }
   }
 }
-
-/* `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,21 +136,3 @@
    * 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.11",
-  "godxUiMcp": "18.12.11",
+  "version": "18.12.13",
+  "godxUiMcp": "18.12.13",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",