@godxjp/ui 33.9.1 → 33.11.2

package/dist/tokens/components/card.css

@@ -8,7 +8,7 @@
 
   --card-space-header-y: var(--space-stack-sm);
 
-  --card-space-body-y: var(--space-section-active);
+  --card-space-body-y: var(--space-6);
 
   --card-space-solo-y: initial;
 
@@ -17,7 +17,7 @@
   --card-space-divided-y: var(--card-space-header-y);
 
   --card-space-gap: var(--space-stack-xs);
-  --card-title-font-size: var(--font-size-base);
+  --card-title-font-size: calc(var(--font-size-base) * var(--font-size-ratio));
   --card-title-line-height: var(--line-height-tight);
   --card-title-font-weight: var(--font-weight-semibold);
   --card-description-font-size: var(--font-size-sm, var(--font-size-base));
@@ -32,7 +32,7 @@
   --card-header-border-bottom: initial;
   --card-radius: initial;
 
-  --card-shadow: initial;
+  --card-shadow: none;
 
   --card-glow: 0 0 0 0 transparent;
 

package/dist/tokens/components/control.css

@@ -2,7 +2,7 @@
 
 :root {
   --control-height-compact: var(--band-height-sm);
-  --control-height-default: var(--band-height-md);
+  --control-height-default: var(--band-height-lg);
   --control-height-comfortable: var(--band-height-xl);
   --control-padding-x-compact: var(--space-2);
   --control-padding-x-default: var(--space-3);
@@ -22,7 +22,7 @@
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
 
-  --button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+  --button-radius: var(--radius);
 
   --button-default-background: initial;
   --button-destructive-background: initial;
@@ -37,7 +37,7 @@
 
   --control-font-size: var(--font-size-base);
   --control-border-width: initial;
-  --control-shadow: var(--shadow-xs);
+  --control-shadow: none;
   --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
 
@@ -107,7 +107,7 @@
   --toggle-focus-ring-width: initial;
   --toggle-focus-ring-alpha: 1;
 
-  --control-focus-ring-width: initial;
+  --control-focus-ring-width: var(--stroke-md);
 
   --rating-focus-ring-offset: 2px;
 
@@ -234,6 +234,8 @@
 
   --control-affix-inset-inline-end: var(--space-2);
   --control-affix-action-size: 1.5rem;
+
+  --control-affix-touch-target-size: var(--band-height-xl);
   --control-affix-action-radius: initial;
   --control-affix-icon-size: var(--icon-size-md);
 
@@ -499,7 +501,8 @@
     --control-height-default: var(--band-height-xl);
 
     --search-input-end-padding: calc(
-      var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--band-height-xl) / 2
+      var(--search-input-edge-inset) + var(--touch-target-min) / 2 +
+        var(--control-affix-touch-target-size) / 2
     );
   }
 }

package/dist/tokens/components/form.css

@@ -8,7 +8,7 @@
 
   --form-label-font-size: var(--control-label-font-size, var(--text-sm));
 
-  --form-block-gap: var(--space-4);
+  --form-block-gap: var(--space-6);
 
   --form-feedback-icon-size: var(--icon-size-sm);
 

package/dist/tokens/components/shell.css

@@ -155,6 +155,9 @@
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
 
+  --topbar-identity-max-inline-size: 40%;
+  --topbar-identity-min-text-inline-size: 3ch;
+
   --topbar-background-alpha: initial;
   --topbar-backdrop-blur-size: initial;
 

package/dist/tokens/components/table.css

@@ -2,7 +2,7 @@
 
 :root {
   --table-row-height-compact: var(--band-height-sm);
-  --table-row-height-default: var(--band-height-md);
+  --table-row-height-default: var(--band-height-lg);
   --table-row-height-comfortable: var(--band-height-xl);
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);

package/dist/tokens/foundation.css

@@ -30,7 +30,7 @@
 
   --border: 30 7% 93%;
 
-  --input: 30 7% 53%;
+  --input: 30 7% 51%;
 
   --success: 146 40% 58%;
   --success-foreground: 48 8% 13%;
@@ -109,9 +109,9 @@
   --shadow-xs: 0 1px 1px 0 rgb(var(--shadow-color) / 0.04);
   --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
   --shadow-md:
-    0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+    0 6px 16px -4px rgb(var(--shadow-color) / 0.08), 0 1px 3px 0 rgb(var(--shadow-color) / 0.08);
   --shadow-lg:
-    0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+    0 12px 28px -6px rgb(var(--shadow-color) / 0.1), 0 2px 6px -2px rgb(var(--shadow-color) / 0.08);
   --shadow-xl:
     0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
@@ -125,12 +125,12 @@
   --brand-glow: initial;
 
   --focus-outline: 1;
-  --focus-outline-weight: initial;
+  --focus-outline-weight: var(--stroke-md);
 
   --focus-outline-color: initial;
 
   --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
-  --focus-outline-offset: 0px;
+  --focus-outline-offset: 2px;
 
   --focus-ring-color: initial;
 
@@ -263,9 +263,9 @@
   --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
 
-  --duration-fast: 150ms;
-  --duration-base: 250ms;
-  --duration-slow: 500ms;
+  --duration-fast: 120ms;
+  --duration-base: 180ms;
+  --duration-slow: 320ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0, 1);
@@ -319,8 +319,8 @@
   --table-row-height: var(--table-row-height-default);
   --table-cell-padding-y: var(--space-2);
   --phi-unit: var(--space-4);
-  --space-page-x: var(--space-6);
-  --space-page-y: var(--space-6);
+  --space-page-x: var(--space-8);
+  --space-page-y: var(--space-8);
   --space-section: var(--space-4);
   --space-section-band: var(--space-20);
   --space-section-hero: var(--space-24);
@@ -364,7 +364,7 @@
 
   --border: 45 6% 19%;
 
-  --input: 45 6% 47%;
+  --input: 45 6% 51%;
 
   --success: 146 45% 55%;
   --success-foreground: 48 9% 9%;

package/dist/tokens/semantic/layout.css

@@ -2,8 +2,8 @@
 
 :root {
 
-  --space-page-x: var(--space-6);
-  --space-page-y: var(--space-6);
+  --space-page-x: var(--space-8);
+  --space-page-y: var(--space-8);
   --space-section: var(--space-4);
 
   --space-section-band: var(--space-20);
@@ -46,7 +46,7 @@
   --space-page-compact-y: var(--space-4);
   --space-section-compact: var(--space-4);
 
-  --overlay-background: rgb(0 0 0 / 0.5);
+  --overlay-background: rgb(0 0 0 / 0.4);
 
   --surface-recessed: hsl(var(--muted) / 0.4);
 

package/docs/TOKENS.md

@@ -175,7 +175,7 @@ These two look like synonyms and are not. Keep them apart:
 | `--border` | Decorative chrome — table rules, card edges, section dividers, `<Separator>`                                                                                    | **None.** WCAG 2.2 SC 1.4.11 does not reach a divider; this system's dense JP grid depends on it staying quiet                                         |
 | `--input`  | The boundary that **is** the control — Input, Textarea, Select, outline Button, TagInput, composite date field, topbar search, and the Switch's unchecked track | **≥ 3:1** (SC 1.4.11 Non-text Contrast) against every surface a control sits on — page, card, popover, muted/secondary panel, striped and hovered rows |
 
-A field here has no fill of its own (`background: hsl(var(--background))`) and no shadow to speak of, so that 1px edge is the whole visual claim that you may type there. Current values: `30 7% 53%` light (3.47:1 on `--background`/`--card`, 3.18:1 on `--muted`) and `45 6% 47%` dark (4.22:1 on `--background`, 3.88:1 on `--card`/`--popover`, 3.17:1 on `--muted`).
+A field here has no fill of its own (`background: hsl(var(--background))`) and no shadow to speak of, so that 1px edge is the whole visual claim that you may type there. Current values: `30 7% 51%` light and `45 6% 51%` dark. Both clear 3:1 on background, card, popover, muted and the full accent surface. The earlier 53% / 47% pair passed translucent table hover backgrounds but failed the full accent surface (2.91:1 / 2.69:1).
 
 **Re-theming rule:** a service theme that retints neutrals must move these two **independently** — setting `--input: var(--border)` re-opens the bug. `src/tokens/__tests__/input-boundary-contrast.test.ts` recomputes the ratios from `foundation.css` and fails below 3:1, and fails outright if the two roles are given the same value again.
 
@@ -482,3 +482,75 @@ It is reserved for `@container` / `@media` re-points. Everything static stays in
 ## MCP
 
 `godxjp_ui_guide` topic=`golden-ratio` · `tokens`
+
+## Second pass: hierarchy and rhythm
+
+Fifteen existing token defaults build on the eight first-pass changes. Body stays 14px/1.7, labels and headings stay 500, with no Latin-style negative tracking on Japanese. Mobile gutters remain 16px. Zebra stays off; table numeric alignment and sidebar active styling are unchanged. Card header-to-body spacing grows to 24px; horizontal card/table insets and section gaps stay 16px so fixed-width date columns remain on one line. No new token or component API.
+
+| Token | Previous | New |
+|---|---|---|
+| `--space-page-x` | `var(--space-6)` | `var(--space-8)` |
+| `--space-page-y` | `var(--space-6)` | `var(--space-8)` |
+| `--card-space-body-y` | `var(--space-section-active)` | `var(--space-6)` |
+| `--page-title-font-size` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` |
+| `--page-title-font-size-compact` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` |
+| `--overlay-background` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.4)` |
+| `--card-title-font-size` | `var(--font-size-base)` | `calc(var(--font-size-base) * var(--font-size-ratio))` |
+| `--card-shadow` | `initial` | `none` |
+| `--form-field-row-gap` | `var(--space-3)` | `var(--space-3)` |
+| `--form-block-gap` | `var(--space-4)` | `var(--space-6)` |
+| `--control-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
+| `--control-focus-ring-width` | `initial` | `var(--stroke-md)` |
+| `--table-row-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
+| `--focus-outline-weight` | `initial` | `var(--stroke-md)` |
+| `--focus-outline-offset` | `0px` | `2px` |
+
+### Complete restoration (both passes)
+
+Load after library and preset styles. The original input colors restore the original sub-3:1 accent-boundary limitation.
+
+```css
+:root {
+  --space-page-x: var(--space-6);
+  --space-page-y: var(--space-6);
+  --card-space-body-y: var(--space-section-active);
+  --page-title-font-size: var(     --heading-h1,     calc(       var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *         var(--font-size-ratio)     )   );
+  --page-title-font-size-compact: var(     --heading-h2,     calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))   );
+  --overlay-background: rgb(0 0 0 / 0.5);
+  --card-title-font-size: var(--font-size-base);
+  --card-shadow: initial;
+  --form-field-row-gap: var(--space-3);
+  --form-block-gap: var(--space-4);
+  --control-height-default: var(--band-height-md);
+  --control-focus-ring-width: initial;
+  --table-row-height-default: var(--band-height-md);
+  --focus-outline-weight: initial;
+  --focus-outline-offset: 0px;
+  --button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+  --control-shadow: var(--shadow-xs);
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-slow: 500ms;
+  --input: 30 7% 53%;
+}
+.dark, :root[data-theme="dark"] { --input: 45 6% 47%; }
+
+.ui-scale-fixed {
+  --space-page-x: var(--space-6);
+  --space-page-y: var(--space-6);
+  --space-section: var(--space-4);
+}
+```
+
+### Input affix touch targets
+
+`--control-affix-touch-target-size` defaults to `var(--band-height-xl)` (44px) and applies
+only under `pointer: coarse`. It sizes the action box, not the glyph. Input reserves the measured
+width of its complete trailing slot plus the existing inset and gap, including two adjacent
+44px actions in a 200px field. `--input-trailing-measured-size` is runtime measurement, not a
+service override. `allowClear` still replaces the suffix; DatePicker and TimePicker still swap
+clear and open actions. NumberInput lays out its two steppers horizontally on coarse pointers.
+SearchInput retains its glyph centre while sharing this target token. Fine-pointer geometry is
+unchanged. Override the token on the field or in the service theme; no new prop is required.

package/package.json

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

package/scripts/visual-audit.mjs

@@ -453,9 +453,9 @@ export const PROBE_RULES = [
     id: "c04-compact-account-name",
     severity: "warn",
     category: "a11y",
-    standard: `compact (<600px) bar shows no account name (${RC}); trigger name per WCAG 2.2 SC 4.1.2`,
+    standard: `compact (<600px) bar shows avatar-only or measured bounded shared-device identity (${RC}); trigger name per WCAG 2.2 SC 4.1.2`,
     kind: "probe",
-    fix: "Below 600px the bar shows the avatar only: hide the account name (it belongs in the opened account menu) and make the avatar the trigger — accessible name + aria-haspopup, opening identity and account controls.",
+    fix: "Shared-device exception: Topbar identity with TopbarItem truncate keeps a bounded, ellipsised name and full title/accessible name. Otherwise below 600px the bar shows the avatar only: hide the account name (it belongs in the opened account menu) and make the avatar the trigger — accessible name + aria-haspopup, opening identity and account controls.",
   },
   {
     id: "c05-compact-editor-inset",
@@ -733,7 +733,7 @@ export function evaluateProbes(raw, { url, viewport }) {
   // C04 — compact account access without the name in the bar.
   const accounts = applies("c04-compact-account-name") ? raw.c04?.mapped || [] : [];
   for (const a of accounts) {
-    if (a.nameVisible)
+    if (a.nameVisible && !a.compactIdentity)
       add(
         "c04-compact-account-name",
         a.element,
@@ -1158,7 +1158,37 @@ export function collectProbes(opts) {
   const pushAccount = (region, nameEl, avatar, t, nameText) => {
     if (avatar) accountAvatars.add(avatar);
     const text = nameText ?? (nameEl && shown(nameEl) ? snippet(nameEl.textContent) : "");
+    const label = region.querySelector('[data-slot="topbar-item-label"]');
+    const identity = region.closest('[data-slot="topbar-identity"]');
+    const bar = identity?.closest('[data-slot="topbar"]');
+    const r = region.getBoundingClientRect();
+    const b = bar?.getBoundingClientRect();
+    const l = label?.getBoundingClientRect();
+    // An opt-in is not an exemption by itself: measure the visible label, bounded share,
+    // containment, and full-name recovery. Old full-width labels still fail C04.
+    const compactIdentity = !!(
+      identity &&
+      b &&
+      label &&
+      l &&
+      text &&
+      region.getAttribute("data-truncate") === "true" &&
+      cs(label).textOverflow === "ellipsis" &&
+      cs(label).whiteSpace === "nowrap" &&
+      l.width > 1 &&
+      l.height > 1 &&
+      l.left >= r.left - 1 &&
+      l.right <= r.right + 1 &&
+      r.width <= b.width * 0.4 + 1 &&
+      r.left >= b.left - 1 &&
+      r.right <= b.right + 1 &&
+      r.left >= -1 &&
+      r.right <= width + 1 &&
+      region.getAttribute("title")?.includes(label.textContent) &&
+      accName(region).includes(label.textContent)
+    );
     accounts.push({
+      compactIdentity,
       element: desc(region),
       nameVisible: !!text,
       nameText: text,