@godxjp/ui 18.12.13 → 18.12.15

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/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,19 +1286,19 @@
     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.
-     * 2x the ring token — open/focus rings paint up to 3px (gh#291 follow-up). */
-    overflow-clip-margin: calc(2 * var(--focus-ring-width));
+    /* 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,
   .ui-topbar-center,
@@ -1292,17 +1307,26 @@
     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;
-    /* 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));
+    /* 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/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

@@ -153,6 +153,14 @@
    * default re-resolves at the element that paints the ring while an explicit override still wins. */
   --focus-ring-color: initial; /* default = the live --ring role */
   --focus-ring-width: 2px;
+  /* 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) + 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.13",
-  "godxUiMcp": "18.12.13",
+  "version": "18.12.15",
+  "godxUiMcp": "18.12.15",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",