@godxjp/ui 18.4.0 → 18.6.0

package/dist/tokens/foundation.css

@@ -31,6 +31,25 @@
   --attention: 25 99% 46%; /* 朱 #eb6101 */
   --attention-foreground: 60 33% 99%;
 
+  /* IDENTITY role — the canonical GoDX emerald. This is the PRODUCT MARK colour (Logo `mark="godx"`
+   * / `tone="success"`, its wordmark, the email brand capsule), and it is deliberately THREE-WAY
+   * distinct:
+   *   · from --primary   — a service re-theming its action colour must never recolour the mark;
+   *   · from --success   — 若竹 #68be8d is the STATUS green (badges, progress, "saved" text) and
+   *                        stays exactly as it is. The mark previously borrowed it, which rendered
+   *                        the identity at #69bf8e instead of the canonical emerald — ΔE76 ≈ 17.5,
+   *                        a plainly wrong brand colour (gh#250/#214);
+   *   · from --text-brand / --color-brand — those are the BLUE brand-numeral TEXT slot and the
+   *                        Tailwind `text-brand` utility it feeds; unrelated, and not renamed here.
+   * Canonical value: oklch(0.595 0.137 162.94) = #009766, "kept distinct from SmartHR primary".
+   * The triplet is carried at one decimal so hsl() lands on that exact hex (an integer 160 100% 30%
+   * would drift to #009966). Dark lifts lightness only — same hue, same full chroma — so the mark
+   * stays the same emerald while clearing AA against the dark spine.
+   * There is no Tailwind `bg-brand` utility on purpose: `--color-brand` is already taken by
+   * --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. */
+  --brand: 160.5 100% 29.6%; /* 翠 GoDX emerald #009766 */
+  --brand-foreground: 60 33% 99%;
+
   /* Extended text hierarchy (beyond --foreground / --muted-foreground) — themeable per service.
    * Roles primitives bake in today: caption/meta, disabled, inline link, brand numerals. */
   --text-tertiary: 44 5% 55%; /* lighter than muted-foreground — captions / meta */
@@ -161,8 +180,11 @@
    *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
    *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
    *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
-   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots with the DXS
-   * M PLUS 2 face and Noto Sans JP fallback, so the all-in-one entry is zero-config. */
+   * The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base`
+   * (and `--font-sans-vi`) with the DXS bundle — "M PLUS 2" primary, "Noto Sans JP"
+   * as the CJK fallback — so the all-in-one entry is zero-config. That fill also
+   * lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER
+   * `styles/base`, or the system stack below silently wins (issue #210). */
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;
@@ -377,6 +399,13 @@
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
 
+  /* IDENTITY (dark) — the SAME canonical emerald hue/chroma, lifted 29.6% → 36% lightness so the
+   * mark reads off the warm near-black spine (#00b87c: 6.9:1 on --background, 6.3:1 on --card;
+   * the unlifted #009766 sat at 4.4:1 on the card). The on-fill glyph flips dark, exactly like
+   * --success-foreground does. */
+  --brand: 160.5 100% 36%; /* #00b87c */
+  --brand-foreground: 48 9% 9%;
+
   /* Extended text hierarchy + interaction ramp (dark) */
   --text-tertiary: 44 6% 56%;
   --text-disabled: 45 6% 40%;

package/dist/tokens/semantic/layout.css

@@ -18,6 +18,30 @@
   --space-inline-md: var(--space-3); /* 12px */
   --space-inline-lg: var(--space-4); /* 16px */
 
+  /* Master-detail geometry. Consumers choose a semantic rail preset; they never author grid tracks. */
+  --master-detail-rail-compact: 18.75rem; /* 300px */
+  --master-detail-rail-standard: 20rem; /* 320px */
+  --master-detail-gap: var(--space-stack-md);
+  /* The collapse threshold: MasterDetail keeps its two-track split while the composition's OWN
+   * inline size is at least this wide, and stacks (master then detail) below it. A service theme
+   * retunes it once globally; the `collapseBelow` prop overrides it per instance (rule #45).
+   * This is a real knob — the layout reads it through the flex-basis threshold, NOT a media
+   * query, precisely so a `var()` can drive it (see src/styles/layout.css · .ui-master-detail). */
+  --master-detail-collapse-below: 40rem; /* 640px — the `sm` step */
+
+  /* Bounded master viewport (gh#231). OPT-IN, chosen by the semantic `masterViewport` prop —
+   * `auto` (the default) applies NO bound, so every existing composition is unchanged. A real
+   * collection can be thousands of pixels tall; when the layout stacks, that pushes the detail
+   * far below the fold. The presets cap the collection's BLOCK size and scroll it inside the
+   * region instead. Sized as a whole number of nominal collection rows (2.5rem ≈ a compact list
+   * row) so a service theme retunes them in the same semantic unit the design grid uses. */
+  --master-detail-master-viewport-compact: 20rem; /* 320px — about 8 nominal rows */
+  --master-detail-master-viewport-standard: 28rem; /* 448px — about 11 nominal rows */
+  /* Focus-ring room INSIDE the bounded region: an overflow container clips both axes, so without
+   * an inset the ring of a row at the edge would be cut off (WCAG 2.4.11/2.4.13). Doubles as the
+   * scroll-padding so a row scrolled into view never sits flush against the clip edge. */
+  --master-detail-master-viewport-inset: var(--space-1); /* 4px */
+
   --space-page-active-x: var(--space-page-x);
   --space-page-active-y: var(--space-page-y);
   --space-section-active: var(--space-section);
@@ -26,8 +50,18 @@
   --space-section-compact: var(--space-4);
 
   /* Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet,
-   * Drawer). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy
-   * `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay. */
+   * Drawer, AppShell mobile nav). Themeable (rule #44) so a service tints the wash to its brand
+   * once, e.g. a navy `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay.
+   *
+   * HOW IT REACHES AN OVERLAY (gh#215 — it previously reached NOTHING): each surface declares its
+   * own knob `initial` and resolves a SHARE of this colour at the call site,
+   * `var(--dialog-overlay-background, color-mix(in srgb, var(--overlay-background)
+   * var(--dialog-overlay-alpha), transparent))`. That keeps the calibrated per-surface depth — a
+   * slide-in Sheet washes the page more lightly (40%) than a modal Dialog (60%) — while ONE
+   * override here retints every backdrop. Per docs/TOKENS.md the knobs must stay `initial`: a
+   * `:root` binding would freeze and a scoped `[data-tenant]`/`.dark` override of this token would
+   * never reach the overlay. Overlays are portaled, so a tenant scope must also sit on the portal
+   * container (see docs/CUSTOMER-THEMING.md). */
   --overlay-background: rgb(0 0 0 / 0.5);
 
   /* Full-bleed rule under the PageContainer header. OFF by default — the title/body
@@ -41,6 +75,29 @@
    * old fixed 16px pad that left 24 above vs 32 below. */
   --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
 
+  /* Inline measure of the header `extra` region while the page header is in `responsive-inline`
+   * arrangement (gh#231). Below the 640px step the default arrangement drops `extra` onto its own
+   * full-width line under the subtitle; `headerLayout="responsive-inline"` keeps it beside the
+   * title band at this measure instead, so a single compact control (a search field, one primary
+   * action) stays on the title row at 390px. Unused by the default arrangement, so no existing
+   * page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. */
+  --page-header-extra-measure: 11rem; /* 176px */
+
+  /* Bounded page MEASURE (gh#245 / gh#247) — the shared inline cap applied to the page HEADER and
+   * BODY together, so the header `extra` action ends on the same edge as the body surface (the
+   * `variant="narrow"` complaint: it caps only `.ui-page-body`, leaving the header action out at
+   * the page edge). Selected by the semantic `measure` prop; `measure="default"` reads NEITHER
+   * token, so an existing page is untouched.
+   *
+   * These are OUTER measures: the page gutters (--space-page-active-x, 24px each side by default)
+   * live INSIDE the cap, so the VISIBLE surface is the measure minus both gutters:
+   *   narrow  42rem = 672px → 624px visible surface (the historical variant="narrow" body width)
+   *   medium  48rem = 768px → 720px visible surface (the canonical readable/feed measure)
+   * Below the cap nothing binds, so a 390px viewport stays fluid at the 16px compact gutter
+   * (358px surface). A service theme retunes both in ONE place; never a page-local max-width. */
+  --page-measure-narrow: 42rem; /* 672px outer → 624px surface */
+  --page-measure-medium: 48rem; /* 768px outer → 720px surface */
+
   /* Responsive page typography is independent from density. Density changes information spacing;
    * these tokens change only page chrome so mobile keeps readable body text and touch targets. */
   --page-title-font-size: var(--heading-h1);
@@ -62,3 +119,13 @@
    * whole system stays in sync (gh feedback: Descriptions was ~0px while FormField was 8px). */
   --field-label-gap: var(--space-2); /* 8px */
 }
+
+/* Canonical admin collection composition. Services may retune these semantic knobs once. */
+:root {
+  --admin-collection-control-height: var(--control-height-default);
+  --admin-collection-section-gap: var(--space-stack-md);
+  --admin-collection-toolbar-padding-y: 0px;
+  --admin-collection-search-measure: 20rem;
+  --admin-collection-table-row-height: var(--table-row-height-default);
+  --admin-collection-table-cell-padding-y: var(--space-1);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.4.0",
-  "godxUiMcp": "18.3.0",
+  "version": "18.6.0",
+  "godxUiMcp": "18.6.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -32,6 +32,7 @@
     },
     "./styles": "./dist/styles/index.css",
     "./styles/*": "./dist/styles/*.css",
+    "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
     "./admin": {
       "types": "./dist/components/admin/index.d.ts",
@@ -65,6 +66,10 @@
       "types": "./dist/components/charts/index.d.ts",
       "import": "./dist/components/charts/index.js"
     },
+    "./charts/compact-bar-trend": {
+      "types": "./dist/components/charts/compact-bar-trend.d.ts",
+      "import": "./dist/components/charts/compact-bar-trend.js"
+    },
     "./ui": {
       "types": "./dist/components/ui/index.d.ts",
       "import": "./dist/components/ui/index.js"
@@ -109,6 +114,10 @@
       "types": "./dist/i18n/index.d.ts",
       "import": "./dist/i18n/index.js"
     },
+    "./email": {
+      "types": "./dist/email/index.d.ts",
+      "import": "./dist/email/index.js"
+    },
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
@@ -286,10 +295,14 @@
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "test": "vitest run",
+    "test:visual:auth-login": "node scripts/auth-shell-login-visual.mjs",
+    "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "check:frame-coverage": "node scripts/frame-coverage.mjs",
+    "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
+    "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
     "check:voiceover-capture": "node scripts/check-voiceover-capture.mjs",
     "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
@@ -301,14 +314,16 @@
     "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
     "check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
     "check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
-    "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
+    "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
+    "check:release-plan": "node scripts/check-release-command-plan.mjs",
+    "check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
     "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
@@ -323,6 +338,8 @@
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
     "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
+    "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
+    "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
     "release": "node scripts/release.mjs",