@godxjp/ui 18.5.0 → 18.6.0

package/dist/tokens/components/email.css

@@ -10,8 +10,10 @@
  * string. Where a value mirrors a web token the comment names it, so a retune stays traceable.
  *
  * Colours are deliberately NOT redeclared here — they derive from the semantic roles
- * (--card/--background/--foreground/--muted/--border/--primary/--ring/--success) and are converted
+ * (--card/--background/--foreground/--muted/--border/--primary/--ring/--brand) and are converted
  * HSL→hex at module load, so a re-themed role re-tints the email with zero copy-paste.
+ * The identity mark reads --brand, NOT --success: --success is the wakatake status green, and the
+ * two are deliberately distinct roles (gh#250).
  */
 :root {
   /* ── Shell — the 480px transactional-email geometry ─────────────────────────────────────── */
@@ -24,31 +26,53 @@
   --email-stack-gap: 24px; /* block rhythm — mirrors --space-stack-lg (1.5rem) */
   --email-stack-gap-sm: 12px; /* tight rhythm — mirrors --space-3 (0.75rem) */
 
-  /* ── Brand mark — the canonical GoDX capsule (see EMAIL_BRAND_MARK) ─────────────────────── */
-  --email-mark-width: 32px; /* mirrors --logo-godx-size (2rem) */
-  --email-mark-height: 32px;
+  /* ── Brand-mark lockup — the canonical GoDX capsule + wordmark (see EMAIL_BRAND_MARK) ────── */
+  /* The mark ARTWORK is the same 32×32 capsule + glyph `<Logo mark="godx" />` paints; only the
+   * RENDERED BOX differs. The canonical SCR-302 header sets it at 22px next to a 13px/700 "GoDX"
+   * wordmark, which is smaller than the web --logo-godx-size (2rem) — an email header carries the
+   * identity, not the navigation, so the lockup sits quieter (gh#250). */
+  --email-mark-width: 22px; /* canonical SCR-302 header lockup mark box */
+  --email-mark-height: 22px;
+  --email-mark-gap: 8px; /* mark ↔ wordmark — mirrors --logo-wordmark-gap (--space-2) */
+  --email-wordmark-font-size: 13px; /* canonical wordmark size (≈ --font-size-xs 12.5px) */
+  --email-wordmark-font-weight: 700; /* mirrors --logo-wordmark-font-weight */
 
   /* ── Typography — literal px so no client has to resolve the rem scale ──────────────────── */
+  /* The DXS canonical face is M PLUS 2 (see src/styles/fonts.css). Email clients honour NO
+   * @font-face, so the stack ships the face NAME first and degrades through the platform JP faces
+   * to a generic — a client with M PLUS 2 installed (or a webmail that already loaded it) renders
+   * the canonical face, everything else lands on Hiragino (macOS/iOS) → Yu Gothic (Windows) →
+   * Noto Sans JP → Meiryo → the system UI face → Arial → sans-serif. Family names are SINGLE-quoted
+   * on export (the generator normalises) because an inline `style="…"` attribute is double-quoted;
+   * only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer
+   * encoding. */
   --email-font-family-sans:
-    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    "M PLUS 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
+    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial,
+    sans-serif;
+  /* Tabular/reference strings — invoice ids, masked card numbers, ISO dates, amounts — are set in
+   * the mono face in the canonical card. Mirrors --font-family-mono. */
+  --email-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --email-body-font-size: 14px; /* mirrors --font-size-base (0.875rem) */
-  --email-body-line-height: 1.7; /* mirrors --line-height-body */
+  /* 1.9, NOT the web --line-height-body (1.7) — the canonical email card runs its JP body copy
+   * looser than a screen, because a mail client gives the reader no density control. */
+  --email-body-line-height: 1.9;
   --email-body-font-weight: 400; /* mirrors --font-weight-normal */
-  --email-heading-font-size: 20px; /* mirrors --heading-h1 (base × φ^¼³ ≈ 19.8px) */
-  --email-heading-line-height: 1.25; /* mirrors --line-height-tight */
-  --email-heading-font-weight: 700; /* mirrors --font-weight-bold */
+  --email-heading-font-size: 17px; /* canonical card title (≈ --heading-h2, base × φ^¼² ≈ 17.6px) */
+  --email-heading-line-height: 1.7; /* the title shares the card's body leading, not a tight ramp */
+  --email-heading-font-weight: 500; /* mirrors --font-weight-medium — an email title is calm, not bold */
 
   /* ── Primary CTA — the one action button ────────────────────────────────────────────────── */
-  --email-cta-height: 44px; /* mirrors --control-height-comfortable (2.75rem coarse-pointer target) */
-  --email-cta-line-height: 44px; /* equal to the height: bulletproof vertical centring in Outlook */
-  --email-cta-padding-x: 24px; /* mirrors --space-6 */
+  --email-cta-height: 36px; /* mirrors --control-height-lg (2.25rem) — the canonical CTA box */
+  --email-cta-line-height: 36px; /* equal to the height: bulletproof vertical centring in Outlook */
+  --email-cta-padding-x: 16px; /* mirrors --space-4 */
   --email-cta-radius: 6px; /* mirrors the --radius base (0.375rem) */
   --email-cta-font-size: 14px; /* mirrors --font-size-base */
-  --email-cta-font-weight: 700; /* mirrors --font-weight-bold */
+  --email-cta-font-weight: 500; /* mirrors --font-weight-medium */
 
   /* ── Legal footer ───────────────────────────────────────────────────────────────────────── */
-  --email-footer-font-size: 12px; /* mirrors --font-size-xs (base ÷ φ^¼ ≈ 12.5px) */
-  --email-footer-line-height: 1.5; /* mirrors --line-height-normal */
+  --email-footer-font-size: 11px; /* mirrors --font-size-2xs (base ÷ φ^¼² ≈ 11.1px) */
+  --email-footer-line-height: 1.8; /* the legal band runs looser than the web --line-height-normal */
   --email-footer-link-gap: 12px; /* horizontal separation between footer links (--space-3) */
   --email-footer-padding-top: 20px; /* space above the legal band */
   --email-footer-border-width: 1px; /* the hairline above the legal band */
@@ -61,6 +85,9 @@
   --email-mobile-width: 100%; /* the card goes fluid below the breakpoint */
   --email-mobile-padding: 20px; /* reduced card inset — mirrors --space-5 */
   --email-mobile-page-padding: 12px; /* reduced viewport gutter — mirrors --space-3 */
-  --email-mobile-heading-font-size: 18px; /* mirrors --heading-h2 (base × φ^¼² ≈ 17.6px) */
+  /* One step below the 17px desktop title. The canonical 390px reference raster is unusable (it is
+   * 435px wide and already clips the card — dxs-platform/platform#496), so this is the library's
+   * documented contract rather than a measured canonical value. */
+  --email-mobile-heading-font-size: 16px;
   --email-mobile-cta-width: 100%; /* the CTA goes full-bleed so the tap target spans the card */
 }

package/dist/tokens/components/error-surface.css

@@ -0,0 +1,36 @@
+/* ErrorSurface — the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251).
+ *
+ * Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of
+ * forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET
+ * (cardinal rule #44): the metadata block ships with no divider — a service opts IN.
+ */
+:root {
+  /* Measure of the surface block. Caps the status code + body + metadata column so a long ja/vi
+   * headline wraps at a readable width in BOTH shells, including the application shell where
+   * PageContainer is much wider than the copy wants to be. */
+  --error-surface-max-width: 32rem;
+
+  /* Rhythm between the status code, the EmptyState body, the metadata list and the progress meter. */
+  --error-surface-gap: var(--space-3);
+
+  /* Block padding of the surface inside the shell it is placed in. Desktop (1440/1024) default; the
+   * 390 step steps it down so a phone loses no vertical space (see styles/shell-layout.css). */
+  --error-surface-padding-block: var(--space-10);
+  --error-surface-padding-block-compact: var(--space-6);
+
+  /* Brand slot (a Logo) above the status code, system mode only. */
+  --error-surface-brand-gap: var(--space-2);
+
+  /* Metadata description list: row rhythm and the label↔value gap inside one row. */
+  --error-surface-meta-gap: var(--space-1);
+  --error-surface-meta-row-gap: var(--space-2);
+
+  /* Chrome, default quiet (#44). A service opts in with
+   * `--error-surface-meta-border: 1px solid hsl(var(--border));`. */
+  --error-surface-meta-border: none;
+  --error-surface-meta-padding-block: 0;
+
+  /* Width of the maintenance progress meter — narrower than the measure, so it reads as metadata
+   * rather than as the primary content of the page. */
+  --error-surface-progress-max-width: 18rem;
+}

package/dist/tokens/components/list-row.css

@@ -15,6 +15,26 @@
   --list-row-body-min-width: 12rem;
   /* Gap BETWEEN trailing actions — they also wrap among themselves at narrow widths (#224). */
   --list-row-trailing-gap: var(--space-2);
+  /* ── Compact inline-actions geometry (`density="compact"`, #246) ──────────────────────────
+   * The canonical invitation / history row: a 36px leading avatar, a shrinkable title +
+   * description body and one or two small trailing Buttons, all on ONE line inside the canonical
+   * 358px card (326px content after the row's own inline inset) at a 390px viewport. These knobs
+   * only LOWER the geometry — the #224 wrap contract (row + trailing cluster wrap, body clamped
+   * with min(…, 100%)) is untouched, so a cluster that genuinely cannot fit still wraps instead of
+   * widening the page root.
+   * Declared `initial` so the spacing defaults re-resolve at the CALL SITE — --space-2 is
+   * density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would
+   * freeze compact rows at the :root density (docs/TOKENS.md — the :root freeze rule).
+   * Defaults = var(--space-2) block padding · var(--list-row-padding-x) inline padding ·
+   * var(--space-2) gap. */
+  --list-row-compact-padding-y: initial;
+  /* Inline inset defaults to the default row axis so compact and default rows in the same Card keep
+   * one optical axis; a service retunes it to its own grid (#45). */
+  --list-row-compact-padding-x: initial;
+  --list-row-compact-gap: initial;
+  /* Compact body threshold — small enough that avatar + body + two compact Buttons fit the
+   * canonical column (36 + 8 + 96 + 8 + 146 = 294 ≤ 326), and still a readable measure. */
+  --list-row-compact-body-min-width: 6rem;
   /* Read (default) row surface — `initial`, documented default = transparent, i.e. the Card
    * surface shows through untouched (#44 — chrome defaults to the quietest state). */
   --list-row-read-background: initial;

package/dist/tokens/components/logo.css

@@ -12,28 +12,70 @@
   --logo-font-size-sm: var(--font-size-xs);
   --logo-font-size-md: var(--font-size-sm);
   --logo-font-size-lg: var(--font-size-base);
-  /* Semantic identity fill is deliberately independent from --primary so a green brand mark never
-   * recolours primary buttons or links. Services can retune the role once for every Logo.
+  /* Semantic identity fill reads the --brand IDENTITY role: independent of --primary (a re-themed
+   * action colour never recolours the mark) AND of --success (the 若竹 STATUS green stays on
+   * badges/progress/"saved" text — the mark used to borrow it and rendered ΔE76 ≈ 17.5 off the
+   * canonical emerald, gh#250). Services retune the role once for every Logo.
    * ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
-   * (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --success actually
+   * (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --brand actually
    * reaches the mark instead of freezing at the :root value (docs/TOKENS.md ·
    * "Role-mirror knobs MUST be `initial`"). Documented defaults:
-   *   --logo-success-background = hsl(var(--success))
-   *   --logo-success-foreground = hsl(var(--success-foreground))
-   *   --logo-godx-color         = hsl(var(--success)) */
+   *   --logo-success-background = hsl(var(--brand))
+   *   --logo-success-foreground = hsl(var(--logo-identity-foreground))
+   *   --logo-godx-color         = hsl(var(--brand)) */
   --logo-success-background: initial;
   --logo-success-foreground: initial;
-  --logo-godx-size: 2rem;
   --logo-godx-color: initial;
 
+  /* Identity-fill INK — the ink `mark="glyph"` sets its (caller-supplied) TEXT in when it sits on
+   * the --brand identity fill. This is deliberately NOT --brand-foreground.
+   *
+   * --brand-foreground is the identity artwork's KNOCKOUT colour, not an ink: it tracks
+   * --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background)
+   * because `<Logo mark="godx">` punches its inner bar as an evenodd HOLE and the email mark has to
+   * paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11
+   * (3:1, non-text) — and at 3.67:1 on the emerald it does.
+   *
+   * The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px
+   * bold is NOT "large text" — that needs 18.66px bold / 24px), and the knockout white measured
+   * 3.67:1 → a genuine AA failure. This ink is 48 9% 9% (#191815), the same near-black spine the
+   * DARK theme already inked the glyph with, so it is theme-INVARIANT: dark renders byte-identically
+   * (6.89:1, unchanged) and light rises 3.67 → 4.74:1. A service that re-themes --brand to a dark
+   * fill overrides --logo-success-foreground (the public knob) to re-invert the ink.
+   *
+   * NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to
+   * freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it. */
+  --logo-identity-foreground: 48 9% 9%;
+
+  /* ── Identity-mark box (`<Logo mark="godx" />`) ──────────────────────────────────────────────
+   * The `size` prop drives the identity mark exactly like it drives the boxed glyph — a public
+   * prop that renders identically at every tier is a silent no-op, and the godx LOCKUP already
+   * scaled its wordmark per tier, so a fixed mark broke the mark↔wordmark proportion at
+   * `size="lg"` (gh#163 follow-up). The godx artwork is a horizontal capsule inside a square
+   * viewBox, so it carries less optical weight than the fully-filled glyph box: each tier sits
+   * +0.25rem above its --logo-size-* sibling. `md` is 2rem — the historical fixed value — so
+   * every existing default-size identity surface renders byte-identically.
+   *
+   * --logo-godx-size is the PIN: declared `initial` (guaranteed-invalid) here with the per-tier
+   * default at the CALL SITE (logo-layout.css), so it is inert by default and a service that
+   * sets it once freezes the mark at that box on EVERY tier — the same call-site pattern the
+   * role-mirror colour knobs use (docs/TOKENS.md). Retune a single tier via --logo-godx-size-*.
+   * Documented default: --logo-godx-size = unset (tiers apply). */
+  --logo-godx-size-xs: 1.5rem;
+  --logo-godx-size-sm: 1.75rem;
+  --logo-godx-size-md: 2rem;
+  --logo-godx-size-lg: 2.5rem;
+  --logo-godx-size: initial;
+
   /* ── Wordmark / lockup (`<Logo wordmark="GoDX" />`) ─────────────────────────────────────────
    * The readable product name set beside the mark. The package ships NO wordmark artwork: the
    * wordmark is typeset in the design-system display face, so a service retunes face, weight,
    * tracking, size and the mark↔wordmark gap here instead of writing page CSS. The colour is a
-   * role-mirror knob whose default is the IDENTITY role (never --primary): the GoDX/`success`
-   * lockup is brand-green out of the box, and every other lockup reads --foreground.
+   * role-mirror knob whose default is the IDENTITY role --brand (never --primary, never the
+   * --success status green): the GoDX/`success` lockup is canonical emerald out of the box, and
+   * every other lockup reads --foreground.
    * Documented defaults: --logo-wordmark-font-family = var(--font-family-display);
-   * --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--success)) on the
+   * --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--brand)) on the
    * godx / tone="success" lockup. */
   --logo-wordmark-gap: var(--space-2);
   --logo-wordmark-font-size-xs: var(--font-size-xs);

package/dist/tokens/components/navigation.css

@@ -10,6 +10,10 @@
   --filter-label-font-size: var(--font-size-xs);
   --filter-picker-width-sm: 11rem;
   --filter-picker-width-md: 14rem;
+  --steps-inline-gap: var(--space-2);
+  --steps-inline-item-gap: var(--space-1);
+  --steps-inline-font-size: var(--font-size-xs);
+  --steps-inline-separator-size: var(--control-icon-size-sm);
 
   /* AppSettingPicker `compact` (gh#217) — the small, content-hugging labelled trigger used in an
    * auth/legal footer, where the square icon-only default reads as a stray button and the full
@@ -24,6 +28,17 @@
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
+  /* Tabs `line` active indicator (gh#248) — the ONLY selected-state decoration the line variant
+   * paints. The surrounding active ring belongs to the default/card lists, so `:focus-visible`
+   * keeps its own distinct keyboard ring here (WCAG 2.4.7). `--tabs-indicator-background` is a
+   * role-mirror knob: `initial` so hsl(var(--primary)) re-resolves at the CALL SITE under a scoped
+   * [data-tenant]/.dark theme (a :root binding to a role var would freeze at :root).
+   * Default = hsl(var(--primary)) · 2px thick · flush with the trigger edge (offset 0 = quietest,
+   * rule #44); a service raises the offset to park the bar on a thicker strip hairline. */
+  --tabs-indicator-background: initial;
+  --tabs-indicator-size: 2px;
+  --tabs-indicator-offset: 0px;
+
   /* Menu item hover/highlight tint — `initial` so the --accent default re-resolves at the call site
    * under a scoped theme (a :root binding to a role var freezes at :root).
    * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */

package/dist/tokens/components/shell.css

@@ -54,6 +54,15 @@
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: 2rem;
   --sidebar-nav-item-font-size: 0.8125rem;
+  /* Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip
+   * box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2. */
+  --sidebar-nav-item-line-height: 1.5;
+  /* Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last
+   * child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`),
+   * so their line box IS their clip box — inheriting a tight value shears descenders and Vietnamese
+   * tone marks exactly as the sidebar label did. Keep >= 1.2. */
+  --auth-account-summary-email-line-height: 1.5;
+  --topbar-start-truncate-line-height: 1.5;
   --sidebar-nav-icon-size: 1rem;
   --sidebar-nav-item-gap: 0.625rem;
   --sidebar-nav-item-padding-x: 0.625rem;
@@ -72,6 +81,11 @@
   --topbar-height: auto;
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
+  /* At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
+   * intrinsically-sized clusters. The package hides the optional center slot before it can cover
+   * the breadcrumb/title or end utilities. Consumers may opt back into another display strategy
+   * (for example `flex`) once their center content has its own compact presentation. */
+  --topbar-center-compact-display: none;
   --org-switcher-trigger-height: 2.75rem;
   --org-switcher-trigger-padding-x: var(--space-2);
   --org-switcher-avatar-size: 1.75rem;
@@ -144,6 +158,24 @@
    * (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in. */
   --auth-shell-card-stack-gap: 0px;
 
+  /* Login preset (gh#237) — canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844.
+   * The 112px identity slot is deliberately taller than a two-line real requester. Identity
+   * content aligns to the slot end, so missing/one-line/two-line requester data changes only the
+   * empty space above it, never the card or footer position. The flow starts at y=231 desktop and
+   * y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here,
+   * not in a consumer selector, and do not drift with --scaling. */
+  --auth-shell-login-card-max-width: 22.5rem;
+  --auth-shell-login-flow-offset-block: 14.4375rem;
+  --auth-shell-login-flow-offset-block-mobile: 13.8125rem;
+  --auth-shell-login-main-padding-inline: 1rem;
+  --auth-shell-login-main-padding-inline-mobile: 0.9375rem;
+  --auth-shell-login-main-padding-block-end: 1rem;
+  --auth-shell-login-identity-slot-block-size: 7rem;
+  --auth-shell-login-card-stack-gap: 1.25rem;
+  --auth-shell-login-card-padding-block-compact: calc(
+    var(--auth-shell-compact-card-inset) + var(--control-border-width) + var(--control-border-width)
+  );
+
   /* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
    * (at a 390px viewport the card is x=5px, width=380px). */
   --auth-shell-device-card-max-width: 23.75rem;
@@ -178,6 +210,13 @@
   --auth-requester-gap: 0.375rem;
   --auth-requester-icon-size: 1rem;
   --auth-requester-glyph-size: 0.625rem;
+  --auth-account-summary-min-height: var(--control-height-comfortable);
+  --auth-account-summary-gap: var(--space-2);
+  --auth-account-summary-padding: var(--space-1) var(--space-2);
+  --auth-account-summary-identity-min-width: 12rem;
+  --auth-account-summary-avatar-size: var(--control-height-sm);
+  --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
+  --auth-account-summary-email-font-size: var(--font-size-sm);
   --auth-footer-content-gap: 0.375rem;
   --auth-footer-text-font-size: 0.6875rem;
   --auth-stack-gap: var(--space-3);
@@ -203,3 +242,36 @@
   --centered-shell-width-md: 46rem;
   --centered-shell-width-lg: 64rem;
 }
+
+/* CenteredShell · public-landing preset (gh#252) — the token-owned geometry of a PUBLIC marketing
+ * / product landing page: one content measure shared by header, main column and footer, the
+ * section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero
+ * heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a
+ * COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md — Hero/Navbar/Footer FAIL the
+ * Framework-Component Test), so the consumer must never own geometry or a media query. These
+ * knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default
+ * shell — which emits no `data-preset` at all — is byte-identical to before. */
+:root {
+  --centered-shell-landing-max-width: 67.5rem; /* 1080px — header/main/footer share ONE measure */
+  --centered-shell-landing-inset-inline: var(--space-6); /* 24px page gutter ≥ 40rem */
+  --centered-shell-landing-inset-inline-compact: var(--space-4); /* 16px page gutter < 40rem */
+  --centered-shell-landing-main-padding-block: var(--space-10); /* 40px */
+  --centered-shell-landing-main-padding-block-compact: var(--space-6); /* 24px */
+  --centered-shell-landing-section-gap: var(--space-10); /* rhythm BETWEEN page sections */
+  --centered-shell-landing-section-gap-compact: var(--space-6);
+  --centered-shell-landing-footer-padding-block: var(--space-8);
+  /* Chrome is a token, default quiet (rule #44): a landing surface is FLAT — no card elevation —
+   * so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`. */
+  --centered-shell-landing-card-shadow: none;
+  /* Hero heading tier. The preset re-points `--heading-h1` (same mechanism as
+   * `.ui-auth-shell` → `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}`
+   * and never a consumer font-size. */
+  --centered-shell-landing-heading-size: var(--font-size-display);
+  --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
+  /* Role-mirror knob — MUST stay `initial`, with the role default at the CALL SITE
+   * (`var(--centered-shell-landing-background, var(--background))`), so a scoped
+   * `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md ·
+   * "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) — a public
+   * page is the plain page canvas, not the app's `--muted` chrome. */
+  --centered-shell-landing-background: initial;
+}

package/dist/tokens/components/table.css

@@ -7,6 +7,29 @@
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
+  /* Pagination footer inset (gh#236). The footer ships as a SELF-CONTAINED slot and is commonly
+   * placed in a flush container (`<Card><CardContent flush><DataTable/>`), where no ancestor
+   * supplies padding — so it owns its own on BOTH axes instead of declaring block-start only.
+   * Block default = the previous single `padding-top` value, now on both block edges (breathing
+   * room above the footer and before the container's closing border). Inline default = the cell
+   * inline padding, so the "rows per page" label sits on the same optical axis as the first
+   * column's text. A service retunes either axis to its own grid (#45).
+   * Both are declared `initial` so the defaults re-resolve at the CALL SITE: --space-stack-sm and
+   * --table-cell-space-x are density-scaled and re-declared inside a `.ui-density-*` subtree, and a
+   * :root binding would freeze the footer at the :root density (docs/TOKENS.md — the :root freeze
+   * rule). Defaults = var(--space-stack-sm) block · var(--table-cell-space-x) inline. */
+  --table-pagination-padding-y: initial;
+  --table-pagination-padding-x: initial;
+  /* DataTable surface — narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a
+   * multi-column admin grid whose columns are `white-space: nowrap` would otherwise be crushed, so
+   * the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead.
+   * This shipped as a hard-coded `min-w-[640px]` utility on the surface element, which left a
+   * service that wants a narrower (or no) floor with no route but forking the component (#45).
+   * Default = the previous literal, in px so the floor releases at EXACTLY the same width as the
+   * px-based `sm` media query that clears it (a rem value would drift under a non-16px root and
+   * re-introduce the scroll between the two thresholds). Set `0` to opt out entirely — which is
+   * what `preset="action-collection"` does, because there the priority measures own the width. */
+  --table-surface-min-inline-size: 640px;
   --table-head-font-size: var(--font-size-xs);
   /* Header band — its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the
    * default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root
@@ -24,3 +47,25 @@
   --table-row-hover-background: initial;
   --table-row-selected-background: initial;
 }
+
+/* Table · action-collection preset (gh#253) — the canonical dense approval / action queue.
+ * Column PRIORITY measures replace the desktop intrinsic widths (a nowrap free-text column is
+ * what makes a five-column queue wider than its card and forces a horizontal scroll). Nothing
+ * here is read unless `preset="action-collection"` is set, so every existing table is untouched.
+ * Percentages so the ratio holds at any card width; the action affordance is an absolute measure
+ * because it must never be squeezed below its touch target. */
+:root {
+  --table-action-collection-primary-width: 18%; /* requester / subject */
+  --table-action-collection-secondary-width: 22%; /* target / resource */
+  --table-action-collection-meta-width: 12%; /* timestamps, ids — lowest priority */
+  --table-action-collection-actions-width: 3.5rem; /* row-action affordance, never clipped */
+  /* Compact tier, applied below the collapse step (the 390px acceptance frame). */
+  --table-action-collection-primary-width-compact: 24%;
+  --table-action-collection-secondary-width-compact: 22%;
+  --table-action-collection-meta-width-compact: 20%;
+  --table-action-collection-actions-width-compact: 2.75rem;
+  --table-action-collection-font-size-compact: var(--font-size-xs);
+  --table-action-collection-cell-space-x-compact: var(--space-2);
+  --table-action-collection-cell-padding-y-compact: var(--space-2);
+  --table-action-collection-row-height-compact: var(--table-row-height-compact);
+}

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 */
@@ -380,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

@@ -83,6 +83,21 @@
    * 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);
@@ -104,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.5.0",
-  "godxUiMcp": "18.5.0",
+  "version": "18.6.0",
+  "godxUiMcp": "18.6.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -66,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"
@@ -291,6 +295,8 @@
     "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",