@godxjp/ui 33.10.1 → 33.12.1

package/dist/tokens/base.css

@@ -51,3 +51,5 @@
 @import "./components/marquee.css";
 @import "./components/affix.css";
 @import "./components/anchor.css";
+
+@import "./components/resizable.css";

package/dist/tokens/components/control.css

@@ -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/resizable.css

@@ -0,0 +1,4 @@
+:root {
+
+  --resizable-handle-size: var(--space-2);
+}

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/foundation.css

@@ -148,9 +148,12 @@
 
   --focus-ring-offset: var(--focus-outline-offset);
 
+  --focus-ring-inset-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-outline-offset)));
+  --focus-ring-contained-offset: initial;
+
   --focus-ring-clip-margin: 8px;
 
-  --region-focus-ring-width: 0;
+  --region-focus-ring-width: var(--focus-ring-weight);
   --region-focus-ring-color: initial;
 
   --gradient-brand: none;

package/docs/TOKENS.md

@@ -277,7 +277,11 @@ The census confirmed the number and rejected the diagnosis: **`width` is not one
 
 **Px, never rem.** A stroke is a _device_ line: its job is to read as one crisp rule at any type size, so it must not grow when the root font-size does. Every token that moved onto this scale was already `px` for that reason; a `rem` thickness (`--slider-track-height: 0.375rem`) is a different decision and stayed where it was. **Not `--scaling`-multiplied** either — `--scaling` is a density knob, and a 1px divider at 0.92px would blur rather than tighten.
 
-The focus mark reads this scale too, through `--focus-ring-weight` — `var(--focus-outline-weight)`, which is `var(--stroke-hairline)` (the light 1px mark the ON state ships). `--focus-ring-width` is DERIVED from it (`weight × --focus-outline`, the on/off switch) and must never be set directly; a theme that wants a 2px focus perimeter (WCAG 2.2 SC 2.4.13) sets `--focus-ring-weight: var(--stroke-md)`. See docs/CUSTOMER-THEMING.md.
+The focus mark reads this scale through `--focus-ring-weight`: the default is `--stroke-md` (2px), with a 2px outline gap. `--focus-ring-width` is derived from the weight and the global `--focus-outline` switch; do not set it directly.
+
+Clipping surfaces use `--focus-ring-inset-offset` (default minus the mark width plus the gap, -4px) through the inherited `--focus-ring-contained-offset` context. Pagination, tab strips, cards, bars and scrolling surfaces keep the mark inside their boundary without adding padding. A surface-coloured inset backing separates the brand mark from brand-filled controls. Keyboard-scroll regions show their inset mark by default; `--region-focus-ring-width: 0` is an explicit opt-out.
+
+Resize separators use `--resizable-handle-size` (default `--space-2`, 8px), with the inline or block axis selected by ARIA orientation. This reserves room for the inset mark even on an empty handle; focusing does not change its size.
 
 #### `--band-height-*` — the vertical extent of a horizontal band
 
@@ -487,23 +491,23 @@ It is reserved for `@container` / `@media` re-points. Everything static stays in
 
 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` |
+| 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)
 
@@ -514,8 +518,17 @@ Load after library and preset styles. The original input colors restore the orig
   --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))   );
+  --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;
@@ -528,14 +541,19 @@ Load after library and preset styles. The original input colors restore the orig
   --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);
+  --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%; }
+.dark,
+:root[data-theme="dark"] {
+  --input: 45 6% 47%;
+}
 
 .ui-scale-fixed {
   --space-page-x: var(--space-6);
@@ -543,3 +561,14 @@ Load after library and preset styles. The original input colors restore the orig
   --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.10.1",
-  "godxUiMcp": "33.10.1",
+  "version": "33.12.1",
+  "godxUiMcp": "33.12.1",
   "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,