@godxjp/ui 18.12.14 → 18.12.16

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

@@ -5,10 +5,19 @@ export interface DescriptionsProps {
     columns?: 1 | 2 | 3;
     /** Label placement within each item. Default `vertical` (label over value). */
     layout?: DescriptionsLayoutProp;
+    /**
+     * Text alignment of each item's label within its label column — the SAME contract `Form`
+     * exposes (gh#294), so a `Descriptions` composed beside a `Form`/`FormField` (a read-only
+     * name/email block above an editable role field, for example) can be told to match it. Applies
+     * only in `layout="horizontal"` — a vertical label sits above the value and end-aligning it
+     * there would read as a mistake, exactly like `Form`'s own contract. Default `"start"`, matching
+     * this component's historical unconditional left-align — no existing consumer's render changes.
+     */
+    labelAlign?: "start" | "end";
     className?: string;
     children: React.ReactNode;
 }
-export declare function Descriptions({ columns, layout, className, children, }: DescriptionsProps): React.JSX.Element;
+export declare function Descriptions({ columns, layout, labelAlign, className, children, }: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
     var Item: ({ label, mono, span, className, children, }: DescriptionsItemProps) => React.JSX.Element;
 }

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

@@ -2,15 +2,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const DescriptionsLayoutContext = React.createContext("vertical");
+const DescriptionsLayoutContext = React.createContext({
+  layout: "vertical",
+  labelAlign: "start"
+});
 function Descriptions({
   columns = 2,
   layout = "vertical",
+  labelAlign = "start",
   className,
   children
 }) {
   const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
-  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-3", colsClass, className), children }) });
+  const context = React.useMemo(() => ({ layout, labelAlign }), [layout, labelAlign]);
+  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-[var(--descriptions-row-gap)]", colsClass, className), children }) });
 }
 Descriptions.Item = function DescriptionsItem({
   label,
@@ -19,7 +24,7 @@ Descriptions.Item = function DescriptionsItem({
   className,
   children
 }) {
-  const layout = React.useContext(DescriptionsLayoutContext);
+  const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
   const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -38,7 +43,18 @@ Descriptions.Item = function DescriptionsItem({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground text-xs", children: label }),
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            className: cn(
+              "text-muted-foreground text-xs",
+              // `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
+              // vertical label (already above its value) never mistakenly right-aligns (gh#294).
+              layout === "horizontal" && labelAlign === "end" && "text-end"
+            ),
+            children: label
+          }
+        ),
         /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
       ]
     }

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

@@ -32,12 +32,20 @@ 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#293 restore — SCR-215) is for a wide, heterogeneous record
+     * table that CANNOT be squeezed into any fixed narrow-frame measure — an admin detail row with
+     * many disparate fields, not a dense queue. Below `collapseBelow` the `<thead>` hides and every
+     * `<tr>` becomes a bordered key-value card: each `TableCell`'s own `label` prop (its column's
+     * header text, repeated per cell since `<thead>` is gone) renders inline above the value. Above
+     * the step it renders as a byte-for-byte ordinary table — mark `label` on every `TableCell`.
      */
     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 `preset="action-collection"`/`"stacked-record-collection"` switch away from the
+     * ordinary table, 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;
 };
@@ -73,12 +81,20 @@ 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#293 restore — SCR-215) is for a wide, heterogeneous record
+     * table that CANNOT be squeezed into any fixed narrow-frame measure — an admin detail row with
+     * many disparate fields, not a dense queue. Below `collapseBelow` the `<thead>` hides and every
+     * `<tr>` becomes a bordered key-value card: each `TableCell`'s own `label` prop (its column's
+     * header text, repeated per cell since `<thead>` is gone) renders inline above the value. Above
+     * the step it renders as a byte-for-byte ordinary table — mark `label` on every `TableCell`.
      */
     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 `preset="action-collection"`/`"stacked-record-collection"` switch away from the
+     * ordinary table, 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 +110,17 @@ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttribu
 type TableCellPriority = {
     priority?: TableColumnPriorityProp;
 };
+/**
+ * A `TableCell`'s own column label, read only by `Table preset="stacked-record-collection"`
+ * below its collapse step — where the real `<thead>` hides and this renders inline above the
+ * cell's value inside the stacked card, standing in for the header association that is no longer
+ * visually present. Rendered into the DOM unconditionally (so it exists for the preset's CSS to
+ * reveal) but visually hidden above the collapse step, where the real `<th>` already carries the
+ * label — an ordinary table with no `label` prop supplied gains no extra markup.
+ */
+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,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+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";
@@ -23,7 +23,8 @@ 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,
@@ -69,14 +70,18 @@ const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableCell = React.forwardRef(({ className, priority, label, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   "td",
   {
     ref,
     "data-slot": "table-cell",
     "data-priority": priority,
     className: cn(className),
-    ...props
+    ...props,
+    children: [
+      label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
+      children
+    ]
   }
 ));
 TableCell.displayName = "TableCell";

package/dist/components/data-entry/form-field.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { FormFieldProp } from "../../props/components/data-entry.prop.js";
 export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop.js";
-export declare function FormField({ id, label, required, helper, error, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, }: FormFieldProp): React.JSX.Element;
+export declare function FormField({ id, label, required, helper, error, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

package/dist/components/data-entry/form-field.js

@@ -19,7 +19,8 @@ function FormField({
   controlWidth: controlWidthProp,
   colSpan,
   className,
-  children
+  children,
+  staticText
 }) {
   const form = useFormLayout();
   const layout = layoutProp ?? form?.layout ?? "vertical";
@@ -32,14 +33,19 @@ function FormField({
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
   const errorId = error ? `${resolvedId}-error` : void 0;
-  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
+  const isStatic = staticText !== void 0;
+  if (!isStatic && typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
     console.warn(
-      "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control."
+      "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control. Pass plain text via `staticText` instead of `children` for a read-only value row."
     );
   }
   const childProps = React.isValidElement(children) ? children.props : void 0;
   const mergeIds = mergeAriaIds;
-  const childWithA11y = React.isValidElement(children) ? React.cloneElement(children, {
+  const childWithA11y = isStatic ? (
+    // Byte-for-byte the same value typography as `Descriptions.Item`'s `dd` (gh#294), so a
+    // read-only FormField row and a Descriptions value are indistinguishable when mixed.
+    /* @__PURE__ */ jsx("span", { className: "text-sm break-all", children: staticText })
+  ) : React.isValidElement(children) ? React.cloneElement(children, {
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
@@ -52,14 +58,8 @@ function FormField({
     "aria-label": childProps?.["aria-label"] ?? (typeof label === "string" ? label : void 0),
     // Helper and error can coexist: helper stays on aria-describedby, the error on
     // aria-errormessage (surfaced when aria-invalid is true).
-    "aria-describedby": mergeIds(
-      childProps?.["aria-describedby"],
-      helperId
-    ),
-    "aria-errormessage": mergeIds(
-      childProps?.["aria-errormessage"],
-      errorId
-    ),
+    "aria-describedby": mergeIds(childProps?.["aria-describedby"], helperId),
+    "aria-errormessage": mergeIds(childProps?.["aria-errormessage"], errorId),
     "aria-required": required ? true : childProps?.["aria-required"],
     "aria-invalid": error ? true : childProps?.["aria-invalid"]
   }) : children;

package/dist/props/components/data-entry.prop.d.ts

@@ -90,7 +90,17 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
     density?: DensityProp;
     className?: ClassNameProp;
 };
-/** @see FormField */
+/**
+ * @see FormField — exactly one of `children` (an interactive control) or `staticText` (gh#294):
+ * a read-only VALUE row inside the same Form, styled to match `Descriptions.Item`'s value
+ * typography (`text-sm break-all`) byte-for-byte. This is the "mixed read-only + editable fields
+ * on one form" case (an immutable name/email row above an editable role Select, for example) —
+ * putting the read-only rows through FormField itself, not a separate `Descriptions` composed
+ * alongside it, gets perfect layout/labelAlign/row-gap sync FOR FREE because it IS the same
+ * component reading the same Form context, rather than two components whose contracts need
+ * reconciling. `staticText` skips FormField's control a11y wiring (id/aria-labelledby/
+ * aria-describedby cloning) entirely — there is no real control to label, so none of that applies.
+ */
 export type FormFieldProp = {
     /** Optional — auto-generated and injected into the child control when omitted. */
     id?: IdProp;
@@ -110,6 +120,28 @@ export type FormFieldProp = {
     colSpan?: number;
     className?: ClassNameProp;
     children: React.ReactNode;
+    staticText?: never;
+} | {
+    /** Optional — auto-generated and injected into the child control when omitted. */
+    id?: IdProp;
+    label: LabelProp;
+    required?: RequiredProp;
+    helper?: HelperProp;
+    error?: ErrorProp;
+    /** Optional control rendered inline after the label (e.g. a help button). */
+    labelAddon?: React.ReactNode;
+    /** Override the Form's layout for this field only. */
+    layout?: FormLayoutProp;
+    /** Override the Form's label width for this field (horizontal layout). */
+    labelWidth?: WidthProp;
+    /** Override the Form's control width for this field. */
+    controlWidth?: WidthProp;
+    /** Span N columns when inside a `columns` Form grid. */
+    colSpan?: number;
+    className?: ClassNameProp;
+    children?: never;
+    /** Read-only value — renders as `Descriptions.Item`-matched text instead of a control. */
+    staticText: React.ReactNode;
 };
 /** @see SearchInput */
 export type SearchInputProp = FieldA11yProps & {

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

@@ -81,8 +81,15 @@ 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#293 restore — SCR-215) is the canonical wide-record collection:
+ * a table whose column count/content cannot be squeezed into any fixed-measure narrow frame at all
+ * (an admin detail row with many heterogeneous fields). Below `collapseBelow` the header row hides
+ * and every `<tr>` becomes a bordered key-value CARD stack — each `TableCell`'s own `label` prop
+ * renders inline above its value, taking over the accessible-name role the (now hidden) `<th>`
+ * association would otherwise carry. Above the step it is a byte-for-byte ordinary table.
  */
-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/shell-layout.css

@@ -32,7 +32,14 @@
     min-width: 0;
     min-height: 0;
     flex-direction: column;
-    overflow: hidden;
+    /* Same ring-headroom contract as the topbar family (gh#291): nav rows are
+     * flush with the rail's inline edges, so a plain `hidden` clipped their
+     * focus ring on three sides. `clip` + margin (the margin is honoured only
+     * when BOTH axes clip) lets the ring paint over the rail border, while the
+     * rail still contains its content. Inner scroll regions are unaffected —
+     * `clip` creates no scroll container, exactly like `hidden`. */
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     border-inline-end: 1px solid hsl(var(--border));
     background: hsl(var(--card));
     /* Opt-in brand-chrome wash — invisible by default (--sidebar-gradient: none). */
@@ -47,7 +54,15 @@
      * set to baseline; --scaling:1 alone is not enough — see foundation.css). */
     display: flex;
     min-width: 0;
-    overflow: hidden;
+    /* Same both-axes-clip + margin contract as .ui-topbar (gh#291): Chromium
+     * honours overflow-clip-margin ONLY when BOTH axes are `clip` — a
+     * single-axis clip silently drops the margin, which would cut a flush
+     * control's ring whenever a theme sets --app-shell-bar-inset to 0. The 8px
+     * margin also covers the vertical ring of coarse-pointer 44px controls,
+     * which the 3.5rem coarse bar height already keeps inside the bar. Safari
+     * falls back to `visible` with the .ui-topbar family below. */
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     align-items: center;
     gap: var(--app-shell-bar-gap);
     padding-inline: var(--app-shell-bar-inset);
@@ -1271,18 +1286,18 @@
     align-items: center;
     gap: var(--topbar-gap);
     padding-inline: var(--topbar-inset);
-    /* 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.
-     * Bare var() only — Chromium drops any calc() in overflow-clip-margin. */
+    /* Ring headroom contract (gh#291), measured empirically:
+     *   - Chromium honours overflow-clip-margin ONLY when BOTH axes are `clip`;
+     *     a single-axis clip silently ignores the margin, and a flush-edge
+     *     control's ring vanishes on the clipped axis.
+     *   - `hidden` can never work here (no clip-margin, and pairing it with
+     *     `visible` computes to `auto`, which still clips).
+     *   - The margin must be a bare var() — Chromium drops calc() at parse time.
+     * So: clip BOTH axes and let the margin carry the ring on every side. The
+     * gh#226 shrink/truncation contract is intact (content clips 8px outside
+     * the box). Safari (clip yes, clip-margin no) falls back to `visible`
+     * below. */
+    overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
   }
   .ui-topbar-start,
@@ -1292,19 +1307,27 @@
     min-width: 0;
     align-items: center;
     gap: var(--topbar-gap);
-    /* 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;
-    /* 4px headroom, NOT the 2px ring token: focus/open rings paint up to 3px,
-     * so 1x shaved a flush-edge control's ring (the locale picker is the first
-     * child of `end`). Bare var() only — Chromium drops any calc() in
-     * overflow-clip-margin at parse time, degrading the margin to 0. */
+    /* Same both-axes-clip + margin contract as .ui-topbar above (gh#291): the
+     * 8px margin covers the 3px ring on every side of a flush-edge control;
+     * single-axis clip would silently drop the margin in Chromium. */
+    overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
   }
+  /* Safari implements `overflow: clip` but NOT overflow-clip-margin, so the
+   * both-axes clip above would eat every flush-edge focus ring there with no
+   * margin to save it. Trade slot containment for ring visibility on that
+   * engine only — the .app-topbar horizontal clip still prevents bar blowout
+   * and document scroll. */
+  @supports not (overflow-clip-margin: 1px) {
+    .app-sidebar,
+    .app-topbar,
+    .ui-topbar,
+    .ui-topbar-start,
+    .ui-topbar-center,
+    .ui-topbar-end {
+      overflow: visible;
+    }
+  }
   .ui-topbar-start {
     flex: 0 1 auto;
   }

package/dist/styles/table-layout.css

@@ -119,7 +119,14 @@
   }
 
   .ui-data-table-surface {
-    overflow: hidden;
+    /* `clip`, NOT `hidden` (gh#291 family): both clip the table to the rounded
+     * border, but `hidden` makes this box a SCROLL CONTAINER, which silently
+     * captured the sticky context of `stickyHeader` (default true) and of the
+     * pinned columns — they anchored to a box that never scrolls, so the header
+     * scrolled away with the body inside `.ui-data-table-scroll`. `clip` is not
+     * a scroll container, so sticky binds to the real scroll region and works.
+     * Measured: hidden → thead moved 300px per 300px scrolled; clip → 1px. */
+    overflow: clip;
     /* Narrow-viewport legibility floor — a TOKEN, not the old `min-w-[640px]` literal (gh#253,
      * rule #45). Cleared at the `sm` step below, and opted out of entirely by the collection
      * preset, which owns its width through the column-priority measures. */
@@ -363,6 +370,29 @@
   }
 }
 
+@layer components {
+  /* ── Table · `preset="stacked-record-collection"` (gh#293 restore — SCR-215) ─────────────────
+   * The canonical WIDE, heterogeneous record collection: a table whose column count/content
+   * cannot be squeezed into any fixed narrow-frame measure at all — an admin detail row with many
+   * disparate, free-text fields of unpredictable length, not a dense queue (contrast
+   * `action-collection` above, which keeps the real table and only re-sizes columns). Below
+   * `collapseBelow` the `<thead>` hides and every `<tr>` becomes a bordered key-value CARD: each
+   * `TableCell`'s own `label` (its column header text, carried per-cell since the `<th>`
+   * association is now hidden) renders inline above the value, taking over the accessible-name
+   * role. Above the step it is a byte-for-byte ordinary table. Measured against the TABLE'S OWN
+   * container, not the viewport, same as `action-collection`. */
+  .ui-table-stacked-collection {
+    container: ui-table-stacked-collection / inline-size;
+  }
+
+  /* Rendered into the DOM unconditionally so it exists for the container query below to reveal
+   * (see TableCell in table.tsx) but hidden above the collapse step, where the real `<th>` already
+   * carries the label — an ordinary table gains no visible extra markup. */
+  .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
@@ -536,4 +566,179 @@
       --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
     }
   }
+
+  /* ── `preset="stacked-record-collection"` (gh#293 restore — SCR-215) ────────────────────────
+   * Below the step the `<thead>` hides and each `<tr>` becomes a bordered key-value card. This is
+   * a genuine layout-mode swap (`display: block`) rather than a measure re-point, because the
+   * whole point of this preset is fields too heterogeneous for ANY fixed column measure to hold —
+   * unlike `action-collection`'s fixed-layout column budget above. Above the step, none of this
+   * matches and the table renders exactly as an ordinary `<table>`. One block per canonical step,
+   * same sm/md/lg/xl scale as `action-collection`. */
+  @container ui-table-stacked-collection (width < 40rem) {
+    [data-collapse-below="sm"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="sm"] [data-slot="table"] > thead {
+      display: none;
+    }
+
+    [data-collapse-below="sm"] [data-slot="table"] > tbody {
+      display: block;
+    }
+
+    [data-collapse-below="sm"] .ui-table-row {
+      display: block;
+      border: 1px solid hsl(var(--border));
+      border-radius: var(--radius-md);
+      padding: var(--table-stacked-collection-card-padding-y)
+        var(--table-stacked-collection-card-padding-x);
+      margin-block-end: var(--table-stacked-collection-card-gap);
+    }
+
+    [data-collapse-below="sm"] .ui-table-row:last-child {
+      margin-block-end: 0;
+    }
+
+    [data-collapse-below="sm"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-collection-cell-padding-y);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="sm"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-collection-label-font-size);
+      font-weight: var(--font-weight-medium);
+      color: hsl(var(--muted-foreground));
+      margin-block-end: var(--space-stack-xs);
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 48rem) {
+    [data-collapse-below="md"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="md"] [data-slot="table"] > thead {
+      display: none;
+    }
+
+    [data-collapse-below="md"] [data-slot="table"] > tbody {
+      display: block;
+    }
+
+    [data-collapse-below="md"] .ui-table-row {
+      display: block;
+      border: 1px solid hsl(var(--border));
+      border-radius: var(--radius-md);
+      padding: var(--table-stacked-collection-card-padding-y)
+        var(--table-stacked-collection-card-padding-x);
+      margin-block-end: var(--table-stacked-collection-card-gap);
+    }
+
+    [data-collapse-below="md"] .ui-table-row:last-child {
+      margin-block-end: 0;
+    }
+
+    [data-collapse-below="md"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-collection-cell-padding-y);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="md"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-collection-label-font-size);
+      font-weight: var(--font-weight-medium);
+      color: hsl(var(--muted-foreground));
+      margin-block-end: var(--space-stack-xs);
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 64rem) {
+    [data-collapse-below="lg"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table"] > thead {
+      display: none;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table"] > tbody {
+      display: block;
+    }
+
+    [data-collapse-below="lg"] .ui-table-row {
+      display: block;
+      border: 1px solid hsl(var(--border));
+      border-radius: var(--radius-md);
+      padding: var(--table-stacked-collection-card-padding-y)
+        var(--table-stacked-collection-card-padding-x);
+      margin-block-end: var(--table-stacked-collection-card-gap);
+    }
+
+    [data-collapse-below="lg"] .ui-table-row:last-child {
+      margin-block-end: 0;
+    }
+
+    [data-collapse-below="lg"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-collection-cell-padding-y);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="lg"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-collection-label-font-size);
+      font-weight: var(--font-weight-medium);
+      color: hsl(var(--muted-foreground));
+      margin-block-end: var(--space-stack-xs);
+    }
+  }
+
+  @container ui-table-stacked-collection (width < 80rem) {
+    [data-collapse-below="xl"] [data-slot="table"] {
+      display: block;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table"] > thead {
+      display: none;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table"] > tbody {
+      display: block;
+    }
+
+    [data-collapse-below="xl"] .ui-table-row {
+      display: block;
+      border: 1px solid hsl(var(--border));
+      border-radius: var(--radius-md);
+      padding: var(--table-stacked-collection-card-padding-y)
+        var(--table-stacked-collection-card-padding-x);
+      margin-block-end: var(--table-stacked-collection-card-gap);
+    }
+
+    [data-collapse-below="xl"] .ui-table-row:last-child {
+      margin-block-end: 0;
+    }
+
+    [data-collapse-below="xl"] [data-slot="table-cell"] {
+      display: block;
+      padding-block: var(--table-stacked-collection-cell-padding-y);
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    [data-collapse-below="xl"] .ui-table-stacked-collection-label {
+      display: block;
+      font-size: var(--table-stacked-collection-label-font-size);
+      font-weight: var(--font-weight-medium);
+      color: hsl(var(--muted-foreground));
+      margin-block-end: var(--space-stack-xs);
+    }
+  }
 }

package/dist/tokens/components/descriptions.css

@@ -6,4 +6,9 @@
    * A rem value gives a fixed aligned column; set `max-content` to size each label to its text.
    * (rule #44/#45 — a service theme tunes it here instead of forking CSS.) */
   --descriptions-label-width: 8rem;
+  /* Row-to-row gap (gh#294). Default = the historical hardcoded `gap-y-3`, so nothing changes
+   * visually by default. A consumer composing Descriptions beside a Form/FormField (a read-only
+   * block above an editable field on the same card) retunes this to `var(--space-4)` to match
+   * Form's own field-to-field rhythm instead of the two blocks reading as visually unrelated. */
+  --descriptions-row-gap: var(--space-3);
 }

package/dist/tokens/components/shell.css

@@ -24,6 +24,9 @@
   /* DXS application-shell geometry. These defaults mirror the checked-in
    * Admin/Console hi-fi source while remaining themeable by consumers. */
   --app-shell-bar-height: 3rem;
+  /* (the coarse-pointer override lives at the end of this file — Rule #24 grows
+   * controls to 44px, and a 48px bar cannot hold a 44px control plus its 3px
+   * focus ring at the very top of the viewport, where overflow cannot help.) */
   /* Inline inset and slot gap of the AppShell top bar. `-compact` applies below the shell
    * breakpoint (the docked sidebar is gone, so the bar tightens against the viewport edge). */
   --app-shell-bar-inset: var(--space-4);
@@ -346,3 +349,13 @@
    * page is the plain page canvas, not the app's `--muted` chrome. */
   --centered-shell-landing-background: initial;
 }
+
+/* Rule #24 companion (gh#291): on coarse pointers --control-height grows to 2.75rem
+ * (44px tap floor), and the shell bar sits flush with the viewport top — a 3rem bar
+ * leaves the control's 3px focus ring painting ABOVE y=0, off-screen, which no
+ * overflow setting can recover. 3.5rem gives 6px of breathing per side. */
+@media (pointer: coarse) {
+  :root {
+    --app-shell-bar-height: 3.5rem;
+  }
+}

package/dist/tokens/components/table.css

@@ -136,3 +136,15 @@
    * 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#293 restore — SCR-215) — the canonical WIDE,
+ * heterogeneous record collection. Below the collapse step every `<tr>` becomes a bordered
+ * key-value card; these tokens own the card's own geometry (unlike action-collection, there is no
+ * column-priority measure to retune — the whole row becomes one block). */
+:root {
+  --table-stacked-collection-card-padding-y: var(--space-stack-sm);
+  --table-stacked-collection-card-padding-x: var(--space-inline-md);
+  --table-stacked-collection-card-gap: var(--space-stack-sm);
+  --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
+  --table-stacked-collection-label-font-size: var(--font-size-xs);
+}

package/dist/tokens/foundation.css

@@ -156,8 +156,11 @@
   /* Ring headroom for clipped chrome (`overflow-clip-margin` on the topbar family, gh#291).
    * MUST stay a plain length consumed via a bare var(): Chromium rejects any calc() in
    * overflow-clip-margin at parse time (even calc(2 * 2px)), silently dropping the
-   * declaration to 0. Value = max ring paint (3px open/focus) + 1px breathing. */
-  --focus-ring-clip-margin: 4px;
+   * declaration to 0. Value = max ring paint (3px open/focus) + rounding immunity:
+   * at 4px a flush-edge ring had only 1px of slack, which device-pixel rounding on
+   * non-retina (dpr 1) displays or fractional browser zoom could consume, shaving the
+   * ring's outer edge. 8px keeps ≥5px of slack under any rounding regime. */
+  --focus-ring-clip-margin: 8px;
   /* REGION focus ring — the keyboard-scroll affordance on large scroll REGIONS (`.app-main`,
    * gh#271/gh#276), separate from the control ring above. A control-strength 2px brand frame
    * around the entire content area reads as a glitch to mouse-first users (`:focus-visible`

package/package.json

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