@godxjp/ui 16.9.4 → 17.0.0

package/dist/props/components/data-entry.prop.d.ts

@@ -320,6 +320,8 @@ export type SearchSelectProp = {
     searchPlaceholder?: PlaceholderProp;
     emptyMessage?: EmptyMessageProp;
     loadingMessage?: string;
+    /** Message shown when an async `loadOptions` rejects — a distinct state from empty/loading. */
+    errorMessage?: string;
     clearLabel?: string;
     /** Show a "clear" row when a value is selected (default true). */
     clearable?: boolean;
@@ -328,6 +330,12 @@ export type SearchSelectProp = {
     name?: NameProp;
     id?: IdProp;
     className?: ClassNameProp;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-errormessage"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
     "data-testid"?: string;
 };
 /**

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

@@ -1,5 +1,6 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
+import type { QueryErrorCategory } from "../../lib/query-error.js";
 import type { AlertVariantProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /** @see AlertDialog */
 export type AlertDialogProp = {
@@ -19,7 +20,12 @@ export type AlertDialogProp = {
 /** @see Alert */
 export type AlertQueryErrorProp = {
     error: unknown;
+    /** Override the auto-classified cause. When omitted, the error is classified via `classifyQueryError`. */
+    category?: QueryErrorCategory;
+    /** Retry affordance — only shown for causes where retrying is meaningful (transient/network/5xx). */
     onRetry?: HandlerProp;
+    /** Recovery for `auth` (401/expired token): renew the session or sign in again. Replaces Retry. */
+    onAuthAction?: HandlerProp;
     className?: ClassNameProp;
 };
 /** @see Alert */

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

@@ -1,6 +1,6 @@
 /** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
 import type * as React from "react";
-import type { AsChildProp, ButtonSizeProp, ButtonVariantProp, DisabledProp, FontWeightProp, HeadingLevelProp, OnClickProp, PendingProp, ShapeProp, TextAlignProp, TextSizeProp, TextToneProp } from "../vocabulary/index.js";
+import type { AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DisabledProp, FontWeightProp, HeadingLevelProp, OnClickProp, PendingProp, RevealDelayProp, ShapeProp, TextAlignProp, TextSizeProp, TextToneProp } from "../vocabulary/index.js";
 /** @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`. */
 export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     /** Render element. Default `span`. Covers inline/block text + description-list + code/caption. */
@@ -71,3 +71,25 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
      */
     showZero?: boolean;
 };
+/**
+ * @see Reveal — entrance-motion primitive (staggered fade-up). Wraps content in a real element
+ * that animates in on mount reading the DS motion tokens (`--duration-slow`, `--ease-emphasized`,
+ * `--reveal-distance`), replacing hand-rolled `@keyframes` + `.app-reveal`/`.d1..d6` classes.
+ * Honours `prefers-reduced-motion` — the animation is dropped and content stays fully visible with
+ * no layout shift.
+ */
+export type RevealProp = React.HTMLAttributes<HTMLDivElement> & {
+    /** Child content to reveal on enter. */
+    children?: ChildrenProp;
+    /**
+     * Stagger ordinal — an INDEX into the motion ladder (`0..6`), never a raw ms. Each step adds one
+     * `--reveal-stagger-step` of delay so sibling reveals cascade. Default `0` (enter immediately).
+     */
+    delay?: RevealDelayProp;
+    /**
+     * Merge the reveal behaviour onto the single child element (Radix `Slot`) instead of rendering a
+     * wrapper `<div>` — use when an extra box would break a grid/flex layout. Default `false`.
+     */
+    asChild?: AsChildProp;
+    className?: ClassNameProp;
+};

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

@@ -67,6 +67,23 @@ export type AppShellProp = {
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
 };
+/**
+ * @see AuthShell — centred auth/login page shell (login · mfa · passkey · device · reset). A
+ * top brand bar, a centred `main` that holds the auth `Card`, and an optional footer, over a
+ * `min-h-dvh` surface. The shell scopes `--control-height` to the comfortable tier (44px, the WCAG
+ * touch floor) and bumps the auth heading size so forms read at the right density — replacing
+ * consumers' hand-rolled `.auth-shell-*` / `.ui-auth-scope` classes. Motion is delegated to
+ * `Reveal` (wrap the card) so `prefers-reduced-motion` is honoured at one place.
+ */
+export type AuthShellProp = {
+    /** Centred content — typically a single auth `<Card>` with the form. */
+    children: ReactNode;
+    /** Brand bar slot pinned to the top (e.g. a `<Logo>` / product mark). */
+    brand?: ReactNode;
+    /** Footer slot pinned to the bottom (legal links, locale switch, support). */
+    footer?: ReactNode;
+    className?: ClassNameProp;
+};
 /** @see Sidebar */
 export type SidebarProductProp = {
     name: string;

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

@@ -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/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/data-display-layout.css

@@ -56,6 +56,24 @@
     background: hsl(var(--warning));
   }
 
+  .ui-progress[data-tone="destructive"] .ui-progress-bar {
+    background: hsl(var(--destructive));
+  }
+
+  /* Over-capacity: keep the destructive fill but lay a diagonal hatch over it so an over-limit bar
+   * (value > 100, width still capped at 100%) is visually distinct from a full one. Placed after the
+   * tone rules so background-color wins; background-image carries the stripes. */
+  .ui-progress[data-over] .ui-progress-bar {
+    background-color: hsl(var(--destructive));
+    background-image: repeating-linear-gradient(
+      45deg,
+      hsl(var(--destructive-foreground) / 0.4) 0,
+      hsl(var(--destructive-foreground) / 0.4) 0.3rem,
+      transparent 0.3rem,
+      transparent 0.6rem
+    );
+  }
+
   .ui-progress-label {
     color: hsl(var(--muted-foreground));
     font-size: var(--progress-label-font-size);

package/dist/styles/index.css

@@ -15,8 +15,10 @@
 @import "./fonts.css";
 @import "./base.css";
 @import "./shell-layout.css";
+@import "./motion.css";
 @import "./layout.css";
 @import "./control.css";
+@import "./logo-layout.css";
 @import "./card-layout.css";
 @import "./text-layout.css";
 @import "./table-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/logo-layout.css

@@ -0,0 +1,41 @@
+/*
+ * LOGO — the product brand-mark box (a glyph on the primary fill). Replaces the hand-rolled
+ * `<span aria-hidden className="grid size-7 place-items-center rounded-md bg-primary …">g</span>`
+ * repeated across app shells and topbars (issue #116): size/radius/font-size are tokens (rule #45),
+ * colours read the primary role directly, and the type comes from a semantic class (not utilities
+ * on a bare span, rule #46).
+ */
+@layer components {
+  .ui-logo {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+    width: var(--logo-size-md);
+    height: var(--logo-size-md);
+    border-radius: var(--logo-radius);
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    font-weight: 700;
+    font-size: var(--logo-font-size-md);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ui-logo[data-size="xs"] {
+    width: var(--logo-size-xs);
+    height: var(--logo-size-xs);
+    font-size: var(--logo-font-size-xs);
+  }
+
+  .ui-logo[data-size="sm"] {
+    width: var(--logo-size-sm);
+    height: var(--logo-size-sm);
+    font-size: var(--logo-font-size-sm);
+  }
+
+  .ui-logo[data-size="lg"] {
+    width: var(--logo-size-lg);
+    height: var(--logo-size-lg);
+    font-size: var(--logo-font-size-lg);
+  }
+}

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/theme/famgia.service.css

@@ -0,0 +1,44 @@
+/* ───────────────────────────────────────────────────────────────
+ * Famgia service theme — ファムジア株式会社
+ * Re-themes @godxjp/ui via SEMANTIC TOKENS only (no component CSS).
+ * Brand: electric blue #2563EB (primary) + violet #7C3AED (accent gradient).
+ * Import this instead of "@godxjp/ui/styles".
+ * ─────────────────────────────────────────────────────────────── */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
+@import "@godxjp/ui/styles";
+
+/* ── Light (default) ── */
+:root {
+  /* Brand primary ramp — electric blue */
+  --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%;
+
+  /* Brand-colored text (AA on tint/white) */
+  --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;
+}
+
+/* ── Dark ── lifted blue for contrast */
+.dark {
+  --primary: 221 90% 66%;
+  --primary-foreground: 222 47% 11%;
+  --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%;
+}

package/dist/tokens/base.css

@@ -16,5 +16,6 @@
 @import "./components/navigation.css";
 @import "./components/data-display.css";
 @import "./components/list-row.css";
+@import "./components/logo.css";
 @import "./components/data-entry.css";
 @import "./components/shell.css";

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.