@godxjp/ui 18.3.0 → 18.4.0

package/README.md

@@ -70,7 +70,7 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 | **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                                               |
 | **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
-| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                  |
+| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
 | **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
@@ -121,7 +121,7 @@ separate `@godxjp/ui/data-grid` (`DataGrid`) subpath has been merged in and remo
 ## Consumer setup — theme is self-contained
 
 The framework ships colors, the type scale, the wa-iro palette, and (opt-in)
-bundled fonts (Noto Sans JP + Montserrat via `@fontsource`). A consumer's entire
+bundled fonts (M PLUS 2 + Noto Sans JP fallback via `@fontsource`). A consumer's entire
 styling surface is **one import + content sources** — no `:root` overrides, no
 font `<link>`:
 

package/dist/components/layout/app-shell.js

@@ -49,7 +49,7 @@ function AppShell({
             type: "button",
             variant: "ghost",
             size: "sm",
-            className: "app-mobile-nav-trigger hidden max-lg:inline-flex",
+            className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
             "aria-label": t("layout.appShell.openNav"),
             "aria-haspopup": "dialog",
             children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })

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

@@ -76,7 +76,7 @@ export type AppShellProp = {
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
     /**
-     * Navigation shown in the mobile drawer below the `lg` breakpoint, where the docked sidebar is
+     * Navigation shown in the mobile drawer at the DXS 900px breakpoint, where the docked sidebar is
      * hidden. AppShell OWNS the drawer: it renders a hamburger trigger in the topbar and a focus-
      * trapped Sheet (Esc + overlay close, focus returns to the trigger) — hiding the sidebar without
      * a reachable alternative is invalid (gh#165). Defaults to `sidebar`, so the same nav is

package/dist/styles/base.css

@@ -27,7 +27,7 @@
  * base sans. Consumers switch a locale's face by setting its slot, e.g.
  *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
  * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
- * these slots for its Noto Sans JP + Montserrat faces. `--font-sans-base` is a
+ * these slots for its M PLUS 2 + Noto Sans JP fallback. `--font-sans-base` is a
  * separate token (not --font-family-sans) so the fallback can't self-reference. */
 [lang="ja"] {
   --font-family-sans: var(--font-sans-ja, var(--font-sans-base));

package/dist/styles/card-layout.css

@@ -42,7 +42,7 @@
     overflow: hidden;
   }
 
-  /* ── Surface variants — fill only; flat at rest (border, no shadow) ──── */
+  /* ── Surface variants — fill only; retain the shared DXS surface elevation ──── */
   [data-slot="card"][data-variant="muted"] {
     background: hsl(var(--secondary));
   }

package/dist/styles/fonts.css

@@ -3,35 +3,33 @@
  *
  * Self-contained so consumers need no font config. The browser only downloads
  * the subset files matching the rendered text:
- *   · Noto Sans JP — the DEFAULT face (Japanese + Latin), used for all locales
- *                    except `vi`.
- *   · Montserrat   — swapped in for the Vietnamese locale (`<html lang="vi">`),
- *                    incl. its `vietnamese` subset for full diacritics.
- *                    See --font-family-sans + :lang(vi) in base.css.
+ *   · M PLUS 2 — the DXS DEFAULT face for Japanese and Latin, including the
+ *                Vietnamese glyph coverage used by the product locales.
+ *   · Noto Sans JP — retained as the CJK fallback after M PLUS 2.
  *
  * The all-in-one `@godxjp/ui/styles` entry pulls this in automatically. If you
  * manage fonts yourself (e.g. next/font), DON'T import this — import
  * `@godxjp/ui/styles/base` + the layout layers you use and supply your own
  * faces via the --font-family-* tokens.
  * ───────────────────────────────────────────────────────────────────────── */
+@import "@fontsource/m-plus-2/400.css";
+@import "@fontsource/m-plus-2/500.css";
+@import "@fontsource/m-plus-2/700.css";
 @import "@fontsource/noto-sans-jp/400.css";
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
-@import "@fontsource/montserrat/400.css";
-@import "@fontsource/montserrat/500.css";
-@import "@fontsource/montserrat/700.css";
 
 /* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
  * the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
- * zero-config: Noto Sans JP is the default face (Japanese + clean Latin), and
- * the Vietnamese locale leads with Montserrat (Noto Sans JP tail keeps CJK
- * glyphs, which Montserrat lacks). Consumers on the per-layer setup who supply
- * their own faces simply DON'T import this file and set the slots themselves. */
+ * zero-config: M PLUS 2 is the DXS default face for every supported locale and
+ * Noto Sans JP remains its CJK fallback. Consumers on the per-layer setup who
+ * supply their own faces simply DON'T import this file and set the slots. */
 :root {
   --font-sans-base:
-    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Hiragino Sans", 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,
+    sans-serif;
   --font-sans-vi:
-    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Noto Sans JP", sans-serif;
+    "M PLUS 2", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
+    sans-serif;
 }

package/dist/styles/layout.css

@@ -414,7 +414,7 @@
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
    * header actions makes functionality unreachable. */
-  @media (max-width: 639px) {
+  @media (max-width: 720px) {
     .ui-page-container {
       --space-page-active-x: var(--space-page-compact-x);
       --space-page-active-y: var(--space-page-compact-y);

package/dist/styles/shell-layout.css

@@ -11,11 +11,9 @@
       "sidebar main"
       "sidebar footer";
     grid-template-columns: 16rem minmax(0, 1fr);
-    grid-template-rows: 3.25rem minmax(0, 1fr) auto;
+    grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
     height: 100vh;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--background));
   }
 
   .app-root[data-collapsed="true"] {
@@ -46,10 +44,9 @@
     gap: var(--space-3);
     padding-inline: var(--space-4);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--background) / 0.92);
+    background: hsl(var(--card));
     /* Opt-in brand-chrome wash — invisible by default (--topbar-gradient: none). */
     background-image: var(--topbar-gradient);
-    backdrop-filter: blur(12px);
   }
 
   .app-main {
@@ -69,6 +66,7 @@
      * content can never extend the document scroll height (gh#104 — same shell-containment
      * family as the gh#103 body-stretch void). */
     contain: paint;
+    background-color: var(--app-shell-main-background);
   }
 
   .app-footer {
@@ -78,7 +76,8 @@
   }
 
   .app-main .ui-page-container {
-    max-width: none;
+    width: 100%;
+    max-width: var(--app-shell-page-max-width);
   }
 
   /*
@@ -92,9 +91,7 @@
     display: flex;
     min-height: 100dvh;
     flex-direction: column;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--muted));
   }
 
   .ui-auth-shell-bar {
@@ -135,9 +132,7 @@
     display: flex;
     min-height: 100dvh;
     flex-direction: column;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--muted));
   }
 
   .ui-centered-shell-bar {
@@ -149,10 +144,9 @@
     gap: var(--space-3);
     padding-inline: var(--centered-shell-bar-padding-x);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--background) / 0.92);
+    background: hsl(var(--card));
     /* Opt-in brand-chrome wash — shares the topbar hook, invisible by default (none). */
     background-image: var(--topbar-gradient);
-    backdrop-filter: blur(12px);
   }
 
   .ui-centered-shell-main {
@@ -235,7 +229,7 @@
     font-size: var(--font-size-base);
   }
 
-  @media (width < 64rem) {
+  @media (width <= 56.25rem) {
     .app-root,
     .app-root[data-collapsed="true"] {
       grid-template-areas:
@@ -265,7 +259,7 @@
   .sb-product,
   .sb-brand {
     display: flex;
-    min-height: 3.25rem;
+    min-height: var(--app-shell-bar-height);
     align-items: center;
     gap: var(--space-2);
     padding-inline: var(--space-4);
@@ -294,8 +288,8 @@
 
   .sb-logo-mark {
     display: grid;
-    width: 1.75rem;
-    height: 1.75rem;
+    width: var(--sidebar-brand-mark-size);
+    height: var(--sidebar-brand-mark-size);
     flex: 0 0 auto;
     place-items: center;
     border-radius: var(--radius);
@@ -344,14 +338,15 @@
   .sb-nav-scroll {
     flex: 1;
     overflow-y: auto;
+    padding: var(--space-3) var(--space-2);
   }
 
   .sb-section {
-    padding: var(--space-3) var(--space-2);
+    padding: 0;
   }
 
   .sb-section + .sb-section {
-    border-top: 1px solid hsl(var(--border));
+    margin-top: var(--space-4);
   }
 
   .sb-section-label {
@@ -373,18 +368,18 @@
   .sb-nav-item {
     display: flex;
     width: 100%;
-    height: var(--control-height);
+    height: var(--sidebar-nav-item-height);
     min-width: 0;
     align-items: center;
-    gap: var(--space-2);
-    padding-inline: var(--space-2);
+    gap: 0.625rem;
+    padding-inline: 0.625rem;
     border: 0;
     border-radius: calc(var(--radius) - 1px);
     background: transparent;
     color: hsl(var(--muted-foreground));
     cursor: pointer;
     font-family: inherit;
-    font-size: var(--font-size-base);
+    font-size: var(--sidebar-nav-item-font-size);
     text-align: start;
   }
 
@@ -737,7 +732,7 @@
 
   .tb-search {
     display: flex;
-    width: min(20rem, 30vw);
+    width: min(var(--topbar-search-max-width), 40vw);
     height: var(--control-height-sm);
     align-items: center;
     gap: var(--space-2);

package/dist/tokens/components/card.css

@@ -41,11 +41,10 @@
    * --card-header-background-alpha: 0 for a quiet borderless-band header.
    * Default = 1px solid hsl(var(--card-border)) (resolved at the call site). */
   --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
-   * 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;
+  --card-radius: var(--radius-xl);
+  /* The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm
+   * elevation layer. Consumers can still flatten or lift cards through this knob. */
+  --card-shadow: var(--shadow-sm);
   /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the
    * surface box-shadow so a service can wash every card with the global glow, e.g.
    * --card-glow: var(--shadow-glow), with no markup change. */

package/dist/tokens/components/shell.css

@@ -20,6 +20,16 @@
   --sidebar-gradient: none;
   --topbar-gradient: none;
 
+  /* DXS application-shell geometry. These defaults mirror the checked-in
+   * Admin/Console hi-fi source while remaining themeable by consumers. */
+  --app-shell-bar-height: 3rem;
+  --app-shell-page-max-width: 80rem;
+  --app-shell-main-background: hsl(var(--muted) / 0.4);
+  --sidebar-brand-mark-size: 1.375rem;
+  --sidebar-nav-item-height: 2rem;
+  --sidebar-nav-item-font-size: 0.8125rem;
+  --topbar-search-max-width: 26.25rem;
+
   /* Sidebar active-item tint/marker — `initial` so the role defaults re-resolve at the call site
    * under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override
    * never reaches it). A service re-tunes the active sub-item accent without forking CSS.
@@ -47,7 +57,7 @@
    * account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +
    * inline padding); the column max-width has three tiers, all wider than the 24rem auth card. A
    * service retunes the bar inset, block padding and each width tier without forking CSS. */
-  --centered-shell-bar-height: 3.25rem;
+  --centered-shell-bar-height: var(--app-shell-bar-height);
   --centered-shell-bar-padding-x: var(--space-4);
   --centered-shell-main-padding: var(--space-6);
   --centered-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);

package/dist/tokens/foundation.css

@@ -161,8 +161,8 @@
    *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
    *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
    *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
-   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots for its bundled
-   * Noto Sans JP + Montserrat faces, so the all-in-one entry is zero-config. */
+   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots with the DXS
+   * M PLUS 2 face and Noto Sans JP fallback, so the all-in-one entry is zero-config. */
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.3.0",
+  "version": "18.4.0",
   "godxUiMcp": "18.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
@@ -374,7 +374,7 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/m-plus-2": "^5.2.9",
     "@fontsource/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",