@godxjp/ui 16.10.0 → 17.0.1

package/dist/props/components/query.prop.d.ts

@@ -8,13 +8,19 @@ import type { ClassNameProp, HandlerProp } from "../vocabulary/index.js";
 export type DataStateProp<T> = {
     query: UseQueryResult<T>;
     skeleton: React.ReactNode;
+    /** Rendered when a query is disabled/unstarted (`fetchStatus: "idle"` with no data). */
+    prerequisite?: React.ReactNode;
     empty?: React.ReactNode;
     isEmpty?: (data: NonNullable<T>) => boolean;
     errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
-    /** Default error UI retry button. Default `true`. */
+    /** Force the Retry affordance even for non-transient causes. Retry is offered automatically for
+     * transient/network/5xx errors regardless of this flag; default `false` for all other causes. */
     showRetry?: boolean;
     /** Default `() => query.refetch()`. */
     onRetry?: HandlerProp;
+    /** Recovery for authentication errors (401 / expired token): renew the session or sign in again.
+     * When provided, a 401 renders this action instead of Retry. */
+    onAuthError?: HandlerProp;
     children: (data: NonNullable<T>) => React.ReactNode;
 };
 type MutationLike = Pick<UseMutationResult<unknown, unknown, unknown, unknown>, "isError" | "error" | "isPending">;

package/dist/props/registry.d.ts

@@ -209,6 +209,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Badge visual variant (default | secondary | outline | dashed)";
     };
+    readonly AppSettingPickerAppearanceProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "AppSettingPicker trigger presentation: labeled (icon + value) | icon (square icon-only topbar trigger)";
+    };
     readonly ShapeProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
@@ -289,6 +294,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Active table sort";
     };
+    readonly RevealDelayProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Reveal entrance-stagger ordinal (0..6) — an index into the motion ladder, never a raw ms";
+    };
     readonly BreadcrumbItemProp: {
         readonly file: "vocabulary/navigation.prop.ts";
         readonly category: "navigation";
@@ -380,7 +390,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AppSettingPickerProp: {
         readonly group: "app";
         readonly file: "components/app.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp", "ClassNameProp", "AppSettingPickerAppearanceProp"];
     };
     readonly PageContainerProp: {
         readonly group: "layout";
@@ -438,6 +448,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp"];
     };
+    readonly AuthShellProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp"];
+    };
     readonly SidebarProductProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -468,6 +483,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/general.prop.ts";
         readonly vocabulary: readonly ["ButtonVariantProp", "SizeProp", "ShapeProp", "AsChildProp", "DisabledProp", "OnClickProp", "PendingProp"];
     };
+    readonly RevealProp: {
+        readonly group: "general";
+        readonly file: "components/general.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "RevealDelayProp", "AsChildProp", "ClassNameProp", {
+            readonly field: "delay";
+            readonly local: true;
+            readonly reason: "Reveal stagger ordinal — RevealDelayProp vocabulary.";
+        }];
+    };
     readonly TextProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
@@ -663,7 +687,12 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly EmptyStateProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["IconProp", "TitleProp", "DescriptionProp", "ActionProp"];
+        readonly vocabulary: readonly ["IconProp", "TitleProp", "DescriptionProp", "ActionProp", "ToneProp"];
+    };
+    readonly EmptyStateToneProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
     };
     readonly DescriptionsProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -208,6 +208,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Badge visual variant (default | secondary | outline | dashed)"
   },
+  AppSettingPickerAppearanceProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "AppSettingPicker trigger presentation: labeled (icon + value) | icon (square icon-only topbar trigger)"
+  },
   ShapeProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
@@ -288,6 +293,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Active table sort"
   },
+  RevealDelayProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Reveal entrance-stagger ordinal (0..6) \u2014 an index into the motion ladder, never a raw ms"
+  },
   // navigation.prop.ts
   BreadcrumbItemProp: {
     file: "vocabulary/navigation.prop.ts",
@@ -376,7 +386,14 @@ const COMPONENT_PROP_REGISTRY = {
   AppSettingPickerProp: {
     group: "app",
     file: "components/app.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp", "ClassNameProp"]
+    vocabulary: [
+      "ValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      "AppSettingPickerAppearanceProp"
+    ]
   },
   PageContainerProp: {
     group: "layout",
@@ -416,6 +433,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["ChildrenProp"]
   },
+  AuthShellProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ChildrenProp", "ClassNameProp"]
+  },
   SidebarProductProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -454,6 +476,21 @@ const COMPONENT_PROP_REGISTRY = {
       "PendingProp"
     ]
   },
+  RevealProp: {
+    group: "general",
+    file: "components/general.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "RevealDelayProp",
+      "AsChildProp",
+      "ClassNameProp",
+      {
+        field: "delay",
+        local: true,
+        reason: "Reveal stagger ordinal \u2014 RevealDelayProp vocabulary."
+      }
+    ]
+  },
   TextProp: {
     group: "general",
     file: "components/general.prop.ts",
@@ -705,7 +742,12 @@ const COMPONENT_PROP_REGISTRY = {
   EmptyStateProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["IconProp", "TitleProp", "DescriptionProp", "ActionProp"]
+    vocabulary: ["IconProp", "TitleProp", "DescriptionProp", "ActionProp", "ToneProp"]
+  },
+  EmptyStateToneProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
   },
   DescriptionsProp: {
     group: "data-display",

package/dist/props/vocabulary/index.d.ts

@@ -2,6 +2,6 @@
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
 export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, } from "./data.prop.js";

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -11,7 +11,7 @@ export type ShapeProp = "default" | "pill" | "sharp";
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
 export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info";
-/** Font weight — the dxs-kintai canon is THREE weights only: `regular` (400 body), `medium` (500
+/** Font weight — the reference-design canon is THREE weights only: `regular` (400 body), `medium` (500
  *  heading/label), `bold` (700 emphasis). 600/`semibold` is forbidden. */
 export type FontWeightProp = "regular" | "medium" | "bold";
 /** Heading level — drives both the `--heading-h*` size token and the semantic `<h1..h4>` element. */
@@ -20,6 +20,16 @@ export type HeadingLevelProp = 1 | 2 | 3 | 4;
 export type TextAlignProp = "start" | "center" | "end";
 /** Badge visual style. */
 export type BadgeVariantProp = "default" | "secondary" | "outline" | "dashed";
+/**
+ * AppSettingPicker trigger presentation.
+ * - `labeled` (default) — the leading icon + the selected value inside a full-width control
+ *   (settings forms, preference panels).
+ * - `icon` — a square, icon-only utility trigger (e.g. a topbar globe locale switcher). It
+ *   STRUCTURALLY drops the value text and the picker's owned trigger width, keeping the localized
+ *   `aria-label`, focus ring, keyboard behaviour and a `--control-height` tap target (which is
+ *   ≥44px on coarse/touch pointers per Rule #24) — so consumers never hide internal nodes via CSS.
+ */
+export type AppSettingPickerAppearanceProp = "labeled" | "icon";
 /** Button size preset. */
 export type SizeProp = "xs" | "sm" | "md" | "lg";
 /** Button size preset; icon-only sizes are a documented Button subset. */
@@ -46,3 +56,9 @@ export type SortStateProp = {
     key: string;
     direction: SortDirectionProp;
 };
+/**
+ * Entrance-stagger ordinal for `Reveal` — an INDEX into the motion ladder, never a raw ms.
+ * `0` = enter immediately; `1..6` each add one `--reveal-stagger-step` of delay so a column of
+ * revealed rows cascades in. Reduced-motion collapses every step to 0 (content stays visible).
+ */
+export type RevealDelayProp = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/dist/styles/alert-layout.css

@@ -107,8 +107,7 @@
       grid-column: 1;
     }
 
-    [data-slot="alert-body"]:has(> [data-slot="alert-actions"])
-      > [data-slot="alert-actions"] {
+    [data-slot="alert-body"]:has(> [data-slot="alert-actions"]) > [data-slot="alert-actions"] {
       grid-column: 2;
       grid-row: 1;
     }

package/dist/styles/base.css

@@ -218,7 +218,7 @@
 
   /* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
    * the document outline (one <h1> per page, levels never skipped). Visual size
-   * follows the dxs-kintai scale; component titles override via their own class.
+   * follows the reference-design scale; component titles override via their own class.
    * Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
    * brands (display face on headings, body face on prose). */
   :where(h1, h2, h3, h4, h5, h6) {

package/dist/styles/card-layout.css

@@ -34,8 +34,7 @@
      * --card-background defaults to the LIVE --card role at the call site (re-resolves under a
      * scoped theme); a service overrides --card-background to win. */
     background:
-      linear-gradient(var(--card-tint), var(--card-tint)),
-      hsl(var(--card-background, var(--card)));
+      linear-gradient(var(--card-tint), var(--card-tint)), hsl(var(--card-background, var(--card)));
     color: hsl(var(--card-foreground));
     /* Resting elevation + opt-in brand glow — both quiet no-ops by default so a service theme can
      * lift (--card-shadow) and/or glow (--card-glow) every card with no markup change. */
@@ -100,9 +99,7 @@
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
-    padding-inline-start: calc(
-      var(--card-space-inset) - var(--card-accent-rail-width)
-    );
+    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
 
   /* ── Header ──────────────────────────────────────────────────────────── */
@@ -156,7 +153,10 @@
   }
 
   .ui-card-header--banded {
-    border-bottom: var(--card-header-border-bottom, 1px solid hsl(var(--card-border, var(--border))));
+    border-bottom: var(
+      --card-header-border-bottom,
+      1px solid hsl(var(--card-border, var(--border)))
+    );
     background-color: hsl(
       var(--card-header-background, var(--muted)) / var(--card-header-background-alpha)
     );

package/dist/styles/index.css

@@ -15,6 +15,7 @@
 @import "./fonts.css";
 @import "./base.css";
 @import "./shell-layout.css";
+@import "./motion.css";
 @import "./layout.css";
 @import "./control.css";
 @import "./logo-layout.css";

package/dist/styles/layout.css

@@ -46,6 +46,15 @@
     flex-direction: column;
   }
 
+  .ui-empty-state[data-variant="section"] {
+    padding: var(--empty-state-section-space-y) var(--empty-state-section-space-x);
+  }
+
+  .ui-empty-state[data-variant="compact"] {
+    padding: var(--empty-state-compact-space-y) var(--empty-state-compact-space-x);
+    gap: var(--space-stack-xs);
+  }
+
   .ui-flex[data-wrap="true"] {
     flex-wrap: wrap;
   }
@@ -512,6 +521,25 @@
     background-color: var(--empty-state-icon-tint, hsl(var(--muted)));
     color: var(--empty-state-icon-foreground, hsl(var(--muted-foreground)));
   }
+
+  /* tone — set the medallion foreground + tint from the matching role token, so a consumer never
+   * hand-rolls a `.ui-success-state` class. `muted` (default) keeps the neutral role fallback. */
+  .ui-empty-state[data-tone="success"] {
+    --empty-state-icon-foreground: hsl(var(--success));
+    --empty-state-icon-tint: hsl(var(--success) / 0.12);
+  }
+  .ui-empty-state[data-tone="warning"] {
+    --empty-state-icon-foreground: hsl(var(--warning));
+    --empty-state-icon-tint: hsl(var(--warning) / 0.12);
+  }
+  .ui-empty-state[data-tone="destructive"] {
+    --empty-state-icon-foreground: hsl(var(--destructive));
+    --empty-state-icon-tint: hsl(var(--destructive) / 0.12);
+  }
+  .ui-empty-state[data-tone="info"] {
+    --empty-state-icon-foreground: hsl(var(--info));
+    --empty-state-icon-tint: hsl(var(--info) / 0.12);
+  }
 }
 
 @layer components {

package/dist/styles/motion.css

@@ -0,0 +1,52 @@
+/*
+ * MOTION — entrance/reveal animation for the `Reveal` primitive.
+ * Reads the DS motion tokens (--duration-slow / --ease-emphasized / --reveal-distance) instead of
+ * a hand-rolled @keyframes, and staggers via the --reveal-stagger-step ladder. Under
+ * prefers-reduced-motion the animation is dropped: content renders in its final, fully-visible
+ * position with no transform and no layout shift.
+ */
+
+@layer components {
+  .ui-reveal {
+    animation: ui-reveal-in var(--duration-slow) var(--ease-emphasized) both;
+    will-change: transform, opacity;
+  }
+
+  .ui-reveal[data-reveal-delay="1"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 1);
+  }
+  .ui-reveal[data-reveal-delay="2"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 2);
+  }
+  .ui-reveal[data-reveal-delay="3"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 3);
+  }
+  .ui-reveal[data-reveal-delay="4"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 4);
+  }
+  .ui-reveal[data-reveal-delay="5"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 5);
+  }
+  .ui-reveal[data-reveal-delay="6"] {
+    animation-delay: calc(var(--reveal-stagger-step) * 6);
+  }
+
+  @keyframes ui-reveal-in {
+    from {
+      opacity: 0;
+      transform: translateY(var(--reveal-distance));
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  /* Accessibility: no motion → no animation, content stays visible (WCAG 2.3.3 / 2.2.2). */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-reveal,
+    .ui-reveal[data-reveal-delay] {
+      animation: none;
+    }
+  }
+}

package/dist/styles/shell-layout.css

@@ -81,6 +81,48 @@
     max-width: none;
   }
 
+  /*
+   * AUTH SHELL — centred auth/login page shell (brand bar + centred card + footer).
+   * Comfortable control density + a larger auth heading are scoped to the shell so login/mfa/reset
+   * forms read at the right size without a consumer scope class. Everything reads a token knob.
+   */
+  .ui-auth-shell {
+    --control-height: var(--auth-shell-control-height);
+    --heading-h1: var(--auth-shell-heading-size);
+    display: flex;
+    min-height: 100dvh;
+    flex-direction: column;
+    background:
+      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
+      hsl(var(--background));
+  }
+
+  .ui-auth-shell-bar {
+    display: flex;
+    align-items: center;
+    padding: var(--auth-shell-bar-padding);
+  }
+
+  .ui-auth-shell-main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--auth-shell-main-padding);
+  }
+
+  .ui-auth-shell-card {
+    width: 100%;
+    max-width: var(--auth-shell-card-max-width);
+  }
+
+  .ui-auth-shell-footer {
+    padding: var(--auth-shell-footer-padding);
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+  }
+
   .app-topbar-rail {
     display: flex;
     min-width: 0;

package/dist/styles/text-layout.css

@@ -33,7 +33,7 @@
     font-size: var(--font-size-2xl);
   }
 
-  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600.
+  /* Weight — the reference-design canon (400 body · 500 heading/label · 700 emphasis). No 600.
    * Shared by text + heading; the two-attribute heading selectors outrank the base heading
    * rule below, so `<Heading weight="bold">` renders a semantic, emphasised title. */
   [data-slot="text"][data-weight="regular"],

package/dist/theme/famgia.service.css

@@ -11,33 +11,34 @@
 /* ── Light (default) ── */
 :root {
   /* Brand primary ramp — electric blue */
-  --primary:          221 83% 53%;  /* #2563EB */
+  --primary: 221 83% 53%; /* #2563EB */
   --primary-foreground: 0 0% 100%;
-  --primary-hover:    224 71% 48%;  /* #1D4ED8 */
-  --primary-active:   226 71% 40%;  /* #1E40AF */
-  --ring:             221 83% 53%;
+  --primary-hover: 224 71% 48%; /* #1D4ED8 */
+  --primary-active: 226 71% 40%; /* #1E40AF */
+  --ring: 221 83% 53%;
 
   /* Brand-colored text (AA on tint/white) */
-  --text-link:    224 76% 45%;
-  --text-brand:   221 83% 53%;
+  --text-link: 224 76% 45%;
+  --text-brand: 221 83% 53%;
   --text-primary: 224 76% 42%;
 
   /* Signature brand gradient: blue → violet */
   --gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
 
   /* Typography — Inter (Latin/VI) + Noto Sans JP (kana/kanji) */
-  --font-family-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-sans:
+    "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
 }
 
 /* ── Dark ── lifted blue for contrast */
 .dark {
-  --primary:        221 90% 66%;
+  --primary: 221 90% 66%;
   --primary-foreground: 222 47% 11%;
-  --primary-hover:  221 90% 72%;
+  --primary-hover: 221 90% 72%;
   --primary-active: 221 90% 60%;
-  --ring:           221 90% 66%;
-  --text-link:      221 90% 72%;
-  --text-brand:     221 90% 70%;
-  --text-primary:   221 90% 68%;
+  --ring: 221 90% 66%;
+  --text-link: 221 90% 72%;
+  --text-brand: 221 90% 70%;
+  --text-primary: 221 90% 68%;
 }

package/dist/tokens/components/card.css

@@ -43,7 +43,7 @@
   --card-header-border-bottom: initial;
   --card-radius: var(--radius);
   /* Resting elevation — quiet by default (rule #44): cards are flat (1px border, no shadow) in the
-   * dxs-kintai baseline. A service that wants lifted cards sets this to an elevation token once,
+   * reference-design baseline. A service that wants lifted cards sets this to an elevation token once,
    * e.g. --card-shadow: var(--shadow-sm), and every Card picks up the shadow with no markup change. */
   --card-shadow: 0 0 0 0 transparent;
   /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the

package/dist/tokens/components/feedback.css

@@ -22,6 +22,10 @@
   --dialog-content-glow: 0 0 0 0 transparent;
   --empty-state-space-y: var(--space-10);
   --empty-state-space-x: var(--space-6);
+  --empty-state-section-space-y: var(--space-6);
+  --empty-state-section-space-x: var(--space-4);
+  --empty-state-compact-space-y: var(--space-3);
+  --empty-state-compact-space-x: var(--space-2);
   /* EmptyState icon medallion colour — `initial` so the role defaults re-resolve at the call site
    * under a scoped theme (rule #44). A service recolours the glyph (--empty-state-icon-foreground)
    * or washes the medallion fill (--empty-state-icon-tint) without forking.

package/dist/tokens/components/shell.css

@@ -32,4 +32,14 @@
    * Defaults = hsl(var(--accent)) fill · hsl(var(--foreground)) text. */
   --sidebar-item-active-background: initial;
   --sidebar-item-active-foreground: initial;
+
+  /* AuthShell — centred auth/login page shell. Comfortable control density (44px, WCAG touch floor)
+   * + a larger auth heading, scoped to the shell; a service re-tunes the auth card width, insets
+   * and heading size without forking. */
+  --auth-shell-control-height: var(--control-height-comfortable);
+  --auth-shell-heading-size: var(--font-size-2xl);
+  --auth-shell-card-max-width: 24rem;
+  --auth-shell-bar-padding: var(--space-5) var(--space-6);
+  --auth-shell-main-padding: var(--space-6);
+  --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 }

package/dist/tokens/foundation.css

@@ -1,7 +1,7 @@
 /* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
 
 :root {
-  /* Color system (HSL components) — dxs-kintai: warm hue-60 neutral spine,
+  /* Color system (HSL components) — the reference design: warm hue-60 neutral spine,
    * SmartHR blue primary, 和色/wa-iro semantics. */
   --background: 60 33% 99%; /* #fdfdfb warm off-white */
   --foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
@@ -83,7 +83,8 @@
   --disabled-opacity: 0.5;
 
   /* Shape and elevation */
-  --radius: calc(0.375rem * var(--scaling)); /* 6px base × scaling; override to retheme every step */
+  /* 6px base × scaling; override to retheme every radius step */
+  --radius: calc(0.375rem * var(--scaling));
   --radius-ratio: 1.618; /* φ — radii scale by the golden ratio (steps derive in @theme) */
   --radius-pill: 9999px; /* fully-round: switch / radio / slider / pill badges (NOT --radius-derived) */
   --radius-sharp: 0; /* squared corners: table cells, flush inputs */
@@ -202,7 +203,9 @@
   --font-size-3xl: calc(
     var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
   ); /* ≈ 33 → 28px feature heading */
-  --font-size-4xl: calc(var(--font-size-display) / var(--font-size-display-ratio)); /* ≈ 36px section */
+  --font-size-4xl: calc(
+    var(--font-size-display) / var(--font-size-display-ratio)
+  ); /* ≈ 36px section */
   --font-size-5xl: var(--font-size-display); /* 54px hero */
 
   /* Headings — also golden-derived. h1=ratio³, h2=ratio²; h3/h4 reuse body sizes (single source). */
@@ -217,7 +220,7 @@
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
-  /* dxs-kintai uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
+  /* the reference design uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
    * forbidden (ambiguous between 500 and 700) — the legacy "semibold" token collapses to medium
    * so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
   --font-weight-semibold: 500;
@@ -322,7 +325,7 @@
 
   /* Motion — the primitive tier for animation, so enter/transition timing reads a token
    * instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2).
-   * dxs-kintai keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
+   * the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
    * Consumers honour prefers-reduced-motion at the call site. */
   --duration-fast: 150ms;
   --duration-base: 250ms;
@@ -332,6 +335,9 @@
   --ease-decelerate: cubic-bezier(0, 0, 0, 1);
   --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
   --reveal-distance: 10px;
+  /* One step of the Reveal stagger ladder — `<Reveal delay={n}>` waits n × this before entering,
+   * so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay. */
+  --reveal-stagger-step: 60ms;
 }
 
 .dark,

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.10.0",
+  "version": "17.0.1",
+  "godxUiMcp": "17.0.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -275,8 +276,9 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && 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-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && 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-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && 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:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
+    "verify:release": "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:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
@@ -288,6 +290,7 @@
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
     "check:mcp-token-sync": "node scripts/gen-component-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",
     "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",
     "preview:build": "vite build --config preview/vite.config.ts",
@@ -300,6 +303,7 @@
     "check:audit-sync": "node scripts/check-audit-sync.mjs",
     "check:contrast": "node scripts/check-contrast.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
+    "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "check:use-client": "node scripts/check-use-client.mjs"

package/scripts/ui-audit.mjs

@@ -281,9 +281,9 @@ const RULES = [
   {
     id: "no-em-dash-in-copy",
     severity: "warn",
-    // Em-dash (U+2014) in JSX text — dxs-kintai uses the middot `·` for JP/EN pairs and calm copy.
+    // Em-dash (U+2014) in JSX text — the reference design uses the middot `·` for JP/EN pairs and calm copy.
     test: /[A-Za-z0-9぀-ヿ一-鿿]\s*—\s*[A-Za-z0-9぀-ヿ一-鿿]/,
-    standard: "@godxjp/ui dxs-kintai typography (best-ux) · Unicode punctuation",
+    standard: "@godxjp/ui reference-design typography (best-ux) · Unicode punctuation",
     message:
       "No em-dash (—) in product copy. Use a middot `·` for JP/EN label pairs, or restructure into two calm sentences. Keep copy factual and quiet.",
   },