@godxjp/ui 18.4.0 → 18.5.0

package/dist/styles/card-layout.css

@@ -56,14 +56,19 @@
     box-shadow: 0 0 0 1px hsl(var(--primary));
   }
 
-  /* ── Density — override the shell inset/body tokens ──────────────────── */
+  /* ── Density — override the shell inset/body tokens ──────────────────────
+   * `--card-space-shell-y: initial` re-arms the block axis to follow THIS card's inset again: the
+   * `density` prop is an explicit per-instance decision and must beat an ambient shell-level block
+   * override (e.g. AuthShell compact), exactly as it did when one inset owned both axes. */
   [data-slot="card"][data-density="tight"] {
     --card-space-inset: var(--space-3);
+    --card-space-shell-y: initial;
     --card-space-body-y: var(--space-3);
   }
 
   [data-slot="card"][data-density="cozy"] {
     --card-space-inset: var(--space-5);
+    --card-space-shell-y: initial;
     --card-space-body-y: var(--space-5);
   }
 
@@ -111,7 +116,7 @@
   }
 
   [data-slot="card-header"]:not([data-banded]) {
-    padding-top: var(--card-space-inset);
+    padding-top: var(--card-space-shell-y, var(--card-space-inset));
     padding-bottom: 0;
   }
 
@@ -254,7 +259,7 @@
   /* Header-only card — terminal slot owns bottom shell */
   [data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
     [data-slot="card-header"] {
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   /* Cover — header below media uses section top, not shell */
@@ -271,18 +276,27 @@
     padding-top: var(--card-space-body-y);
   }
 
-  /* ── Content ─────────────────────────────────────────────────────────── */
+  /* ── Content ─────────────────────────────────────────────────────────────
+   * The two axes are INDEPENDENT (gh#232): the inline column reads --card-space-inset, the block
+   * shell edge reads --card-space-shell-y (default = the same inset, so the resting render is
+   * unchanged). A shell that needs a shorter card without a narrower column — AuthShell compact —
+   * now moves the block axis alone instead of hitting a wall at a uniform inset. */
   [data-slot="card-content"] {
     padding-inline: var(--card-space-inset);
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   [data-slot="card-content"]:not([data-tight]):not([data-solo]) {
     padding-top: var(--card-space-body-y);
   }
 
+  /* A solo body owns BOTH block edges (there is no header/footer to carry them), so this is
+   * `padding-block`, not just `padding-top` — it overrides the generic bottom edge above.
+   * The fallback chain solo-y → shell-y → inset means: a shell that tunes only the general block
+   * knob still reaches a solo body, an explicit --card-space-solo-y wins over it, and with neither
+   * set the render is the historical inset. */
   [data-slot="card-content"][data-solo] {
-    padding-top: var(--card-space-inset);
+    padding-block: var(--card-space-solo-y, var(--card-space-shell-y, var(--card-space-inset)));
   }
 
   [data-slot="card-content"][data-flush] {
@@ -343,7 +357,7 @@
 
   [data-slot="card-footer"]:not([data-separated]) {
     padding-top: 0;
-    padding-bottom: var(--card-space-inset);
+    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
   [data-slot="card-footer"][data-separated] {
@@ -474,4 +488,144 @@
     font-size: var(--stat-card-hint-font-size);
     line-height: var(--line-height-normal);
   }
+
+  /* ── Service launcher — organization-scoped downstream app tile ─────── */
+  [data-slot="card"][data-service-launcher] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-service-launcher-space-gap);
+    padding: var(--card-space-inset);
+  }
+
+  [data-slot="service-launcher-heading"],
+  [data-slot="service-launcher-skeleton-heading"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--card-service-launcher-space-gap);
+  }
+
+  [data-slot="service-launcher-icon"] {
+    display: inline-flex;
+    width: var(--card-service-launcher-icon-size);
+    height: var(--card-service-launcher-icon-size);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--card-service-launcher-icon-radius);
+    background: hsl(var(--card-service-launcher-icon-background, var(--accent)));
+    color: hsl(var(--card-service-launcher-icon-foreground, var(--primary)));
+  }
+
+  /* Unavailable tile (the consumer supplied a `disabledReason`): the medallion drops its brand
+   * wash so an un-launchable service never reads as live. Role-mirror knobs default at the CALL
+   * SITE, so a scoped [data-tenant]/.dark override of --muted still reaches it (docs/TOKENS.md). */
+  [data-slot="card"][data-service-launcher][data-unavailable] [data-slot="service-launcher-icon"] {
+    background: hsl(var(--card-service-launcher-unavailable-icon-background, var(--muted)));
+    color: hsl(var(--card-service-launcher-unavailable-icon-foreground, var(--muted-foreground)));
+  }
+
+  [data-slot="service-launcher-icon"] > svg {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+  }
+
+  [data-slot="service-launcher-title"] {
+    min-width: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+    font-size: var(--card-title-font-size);
+    font-weight: var(--card-title-font-weight);
+    line-height: var(--card-title-line-height);
+  }
+
+  [data-slot="service-launcher-status"] {
+    flex: none;
+  }
+
+  [data-slot="service-launcher-description"] {
+    flex: 1;
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  /* Mono metadata ONLY (hostname · plan) — machine identifiers, never prose. */
+  [data-slot="service-launcher-metadata"] {
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-mono);
+    font-size: var(--card-service-launcher-metadata-font-size);
+    line-height: var(--card-service-launcher-metadata-line-height);
+  }
+
+  /* The disabled/unavailable reason is a localized SENTENCE — it takes the description's prose
+   * rhythm, not the mono metadata treatment (a JA/VI sentence in monospace is unreadable). */
+  [data-slot="service-launcher-disabled-reason"] {
+    overflow-wrap: anywhere;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  [data-slot="service-launcher-action"] > [data-slot="button"] {
+    width: 100%;
+  }
+
+  [data-slot="card"][data-service-catalog-cta] {
+    min-height: var(--card-service-launcher-cta-min-height);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--card-service-launcher-space-gap);
+    border-style: dashed;
+    padding: var(--card-space-inset);
+    text-align: center;
+  }
+
+  [data-slot="service-catalog-icon"] {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  [data-slot="service-catalog-title"] {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--card-service-launcher-description-font-size);
+    line-height: var(--card-service-launcher-description-line-height);
+  }
+
+  [data-slot^="service-launcher-skeleton-"] {
+    display: block;
+  }
+
+  [data-slot="service-launcher-skeleton-icon"] {
+    width: var(--card-service-launcher-icon-size);
+    height: var(--card-service-launcher-icon-size);
+    flex: none;
+  }
+
+  [data-slot="service-launcher-skeleton-title"] {
+    width: var(--card-service-launcher-skeleton-title-width);
+    height: var(--font-size-base);
+  }
+
+  [data-slot="service-launcher-skeleton-status"] {
+    width: var(--card-service-launcher-skeleton-status-width);
+    height: var(--font-size-xs);
+    margin-inline-start: auto;
+  }
+
+  [data-slot="service-launcher-skeleton-description"],
+  [data-slot="service-launcher-skeleton-metadata"],
+  [data-slot="service-launcher-skeleton-action"] {
+    width: 100%;
+    height: var(--font-size-xs);
+  }
+
+  [data-slot="service-launcher-skeleton-action"] {
+    height: var(--control-height);
+  }
 }

package/dist/styles/chart-layout.css

@@ -37,3 +37,100 @@
   color: hsl(var(--popover-foreground));
   font-size: var(--font-size-xs);
 }
+
+/* Content that sits BELOW the plot (the activity footer slot) — outside the
+ * `role="img"` canvas so links/buttons in it stay reachable and announced. */
+.ui-chart-footer {
+  margin-block-start: var(--chart-trend-footer-gap);
+  font-size: var(--font-size-xs);
+  color: hsl(var(--muted-foreground));
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * CompactBarTrend — a dependency-free (no recharts) vertical bar trend.
+ * ALL geometry resolves from `--chart-trend-*` tokens; the only inline value is
+ * the DATUM itself (`--chart-trend-bar-value`, a 0..1 ratio), so a consumer never
+ * writes a height calculation or a colour of its own.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* `size` → the active plot-height tier. Set on the <figure> as `data-size`. */
+.ui-chart-trend[data-size="xs"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
+}
+
+.ui-chart-trend[data-size="sm"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-sm);
+}
+
+.ui-chart-trend[data-size="md"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-md);
+}
+
+.ui-chart-trend[data-size="lg"] {
+  --chart-trend-plot-height: var(--chart-trend-plot-height-lg);
+}
+
+.ui-chart-trend-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chart-trend-tick-gap);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-chart-trend-plot {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--chart-trend-bar-gap);
+  block-size: var(--chart-trend-plot-height);
+  inline-size: 100%;
+  min-inline-size: 0;
+  /* Quiet by default (rule #44) — a service opts into a baseline rule with
+   * `--chart-trend-baseline-border: 1px solid hsl(var(--border));`. */
+  border-block-end: var(--chart-trend-baseline-border, none);
+}
+
+.ui-chart-trend-column {
+  display: flex;
+  flex: 1 1 0;
+  align-items: flex-end;
+  justify-content: center;
+  min-inline-size: 0;
+  block-size: 100%;
+}
+
+.ui-chart-trend-bar {
+  inline-size: 100%;
+  max-inline-size: var(--chart-trend-bar-max-width);
+  /* Data-driven: the 0..1 ratio arrives as an inline custom property. */
+  block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
+  border-start-start-radius: var(--chart-trend-bar-radius);
+  border-start-end-radius: var(--chart-trend-bar-radius);
+  background: var(
+    --chart-trend-bar-background,
+    hsl(var(--muted-foreground) / var(--chart-trend-bar-background-alpha))
+  );
+}
+
+.ui-chart-trend-bar[data-emphasized="true"] {
+  background: var(--chart-trend-bar-emphasis-background, hsl(var(--primary)));
+}
+
+.ui-chart-trend-ticks {
+  display: flex;
+  gap: var(--chart-trend-bar-gap);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-chart-trend-tick {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  font-size: var(--chart-trend-tick-font-size);
+  line-height: var(--line-height-tight);
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/control.css

@@ -585,6 +585,52 @@
     opacity: 0.5;
   }
 
+  [data-slot="dialog-content"].ui-command-palette {
+    top: var(--command-palette-inset-top);
+    width: min(
+      var(--command-palette-width),
+      calc(100vw - (2 * var(--command-palette-viewport-inset)))
+    );
+    max-width: none;
+    transform: translateX(-50%);
+    gap: 0;
+    padding: 0;
+    background: hsl(var(--popover));
+  }
+
+  .ui-command-palette-trigger {
+    min-width: 0;
+  }
+
+  .ui-command-palette-label {
+    min-width: 0;
+  }
+
+  .ui-command-palette-meta {
+    margin-inline-start: auto;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-command-palette-state {
+    padding-block: var(--space-6);
+    padding-inline: var(--space-4);
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-base);
+  }
+
+  .ui-command-palette-hints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--command-palette-hint-gap);
+    border-top: 1px solid hsl(var(--border));
+    padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+  }
+
   .ui-search-input {
     position: relative;
   }
@@ -680,8 +726,8 @@
 .ui-otp-slot {
   position: relative;
   display: flex;
-  width: var(--control-height);
-  height: var(--control-height);
+  width: var(--otp-slot-size, var(--control-height));
+  height: var(--otp-slot-size, var(--control-height));
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-base);

package/dist/styles/data-display-layout.css

@@ -449,14 +449,27 @@
 }
 
 @layer components {
-  /* ListRow — single-line entity row (leading · title/description · trailing) for short lists
-   * inside a flush CardContent. Rows separate with a quiet divider; the last row leaves the
-   * Card border to close the list. Logical properties throughout (RTL-safe). */
+  /* ListRow — single-line entity row (indicator · leading · title/description · trailing) for
+   * short lists inside a flush CardContent. Rows separate with a quiet divider; the last row
+   * leaves the Card border to close the list. Logical properties throughout (RTL-safe).
+   *
+   * Overflow contract (#224): the row itself may shrink (min-inline-size: 0) and WRAPS, the
+   * content column keeps only `min(--list-row-body-min-width, 100%)` — so it can always shrink
+   * below its intrinsic width and truncate/wrap — and the trailing actions wrap onto their own
+   * line instead of pushing the row (and the page root) wider than the viewport. */
   [data-slot="list-row"] {
     display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--list-row-gap);
     padding: var(--list-row-padding-y) var(--list-row-padding-x);
+    background: var(--list-row-read-background, transparent);
+  }
+  /* Unread emphasis surface — paired with the indicator dot + its sr-only text, never colour
+   * alone (WCAG 1.4.1). */
+  [data-slot="list-row"][data-unread] {
+    background: var(--list-row-unread-background, hsl(var(--muted)));
   }
   [data-slot="list-row"][data-align="start"] {
     align-items: flex-start;
@@ -464,6 +477,19 @@
   [data-slot="list-row"]:not(:last-child) {
     border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
   }
+  [data-slot="list-row-indicator"] {
+    position: relative;
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--list-row-indicator-size);
+    block-size: var(--list-row-indicator-size);
+    border-radius: var(--radius-pill);
+    /* Read rows keep the gutter (titles stay on one optical axis) but paint nothing. */
+    background: transparent;
+  }
+  [data-slot="list-row"][data-unread] [data-slot="list-row-indicator"] {
+    background: hsl(var(--list-row-indicator-color, var(--primary)));
+  }
   [data-slot="list-row-leading"] {
     display: inline-flex;
     flex-shrink: 0;
@@ -473,18 +499,38 @@
   }
   [data-slot="list-row-body"] {
     display: flex;
-    min-width: 0;
-    flex: 1 1 auto;
+    min-inline-size: min(var(--list-row-body-min-width, 12rem), 100%);
+    flex: 1 1 var(--list-row-body-min-width, 12rem);
     flex-direction: column;
   }
+  /* `overflow="wrap"` — the title/description wrap instead of truncating; `anywhere` also lowers
+   * the min-content width so an unbroken token (URL, long JA/VI compound) can't widen the row. */
+  [data-slot="list-row"][data-overflow="wrap"] [data-slot="list-row-body"] {
+    overflow-wrap: anywhere;
+  }
   [data-slot="list-row-trailing"] {
     display: inline-flex;
+    max-inline-size: 100%;
     flex-shrink: 0;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-2);
+    justify-content: flex-end;
+    gap: var(--list-row-trailing-gap, var(--space-2));
     margin-inline-start: auto;
   }
 
+  @media (max-width: 359px) {
+    [data-slot="list-row"] {
+      flex-wrap: wrap;
+    }
+
+    [data-slot="list-row-trailing"] {
+      width: 100%;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  }
+
   /* CredentialReveal — one-time secret surface: caution banner, masked/revealed value row with
    * copy/reveal/download actions, and an optional acknowledge footer. Density-aware via the
    * --control-height tier; colours/spacing read semantic role tokens only. */

package/dist/styles/dialog-layout.css

@@ -21,9 +21,22 @@
     border-top: 1px solid hsl(var(--border));
   }
 
-  .ui-dialog-overlay,
+  /* Scrim = a SHARE of the ONE shared semantic scrim (--overlay-background), resolved here at the
+   * call site so a scoped [data-tenant]/.dark override of --overlay-background actually reaches the
+   * portaled overlay (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`"). Setting
+   * --dialog-overlay-background / --sheet-overlay-background still wins outright. */
+  .ui-dialog-overlay {
+    background-color: var(
+      --dialog-overlay-background,
+      color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent)
+    );
+  }
+
   [data-slot="sheet-overlay"] {
-    background-color: var(--overlay-background);
+    background-color: var(
+      --sheet-overlay-background,
+      color-mix(in srgb, var(--overlay-background) var(--sheet-overlay-alpha), transparent)
+    );
   }
 
   .ui-dialog-overlay {
@@ -38,8 +51,8 @@
     top: 50%;
     z-index: 50;
     display: grid;
-    width: 100%;
-    max-width: 32rem;
+    width: min(var(--dialog-width-default), calc(100% - var(--dialog-viewport-inset)));
+    max-width: none;
     transform: translate(-50%, -50%);
     gap: var(--dialog-space-gap);
     border: 1px solid hsl(var(--border));
@@ -133,7 +146,95 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-two-factor-setup {
+    width: calc(100% - 1.5rem);
+    max-width: 27.5rem;
+  }
+
+  /* No scrim override here: the two-factor dialog's backdrop is the SHARED overlay scrim
+   * (.ui-dialog-overlay above). The old literal `rgb(0 0 0 / 0.3)` re-stated the dialog default at a
+   * higher specificity and silently opted this one dialog out of --overlay-background theming. */
+
+  .ui-two-factor-setup-enrollment,
+  .ui-two-factor-setup-recovery {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-md);
+  }
+
+  .ui-two-factor-setup-grid {
+    display: grid;
+    grid-template-columns: 7.5rem minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  .ui-two-factor-setup-grid .ui-qr-code[data-size] {
+    inline-size: 7.5rem;
+  }
+
+  .ui-two-factor-setup-fields,
+  .ui-two-factor-setup-code {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-stack-xs);
+  }
+
+  .ui-two-factor-setup-notice {
+    border: 1px dashed hsl(var(--border));
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .ui-two-factor-setup-recovery-codes {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-md);
+    background: hsl(var(--muted) / 0.4);
+  }
+
+  @media (max-width: 479px) {
+    .ui-two-factor-setup-grid {
+      grid-template-columns: 1fr;
+      justify-items: center;
+    }
+
+    .ui-two-factor-setup-fields {
+      width: 100%;
+    }
+  }
+
   [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
     color: hsl(var(--foreground));
   }
 }
+
+/*
+ * REDUCED MOTION — every overlay enter/exit animation is gated (WCAG 2.3.3 Animation from
+ * Interactions / 2.2.2 Pause-Stop-Hide). Dialog, AlertDialog, CommandPalette (a Dialog), Sheet /
+ * mobile drawer and Popover all animate via Tailwind `data-[state]:animate-in|animate-out`
+ * utilities plus a `transition`; the content additionally zooms/slides, which is exactly the
+ * vestibular trigger the media query exists for. The overlay still fades in/out INSTANTLY, so the
+ * open/closed state is never ambiguous — only the motion is removed, never the affordance.
+ *
+ * DELIBERATELY UNLAYERED. Tailwind v4 emits `animate-in` / `slide-in-from-*` into `@layer
+ * utilities`, which beats ANY rule inside `@layer components` regardless of specificity — a gate
+ * written inside the components layer above would be dead code. Unlayered author declarations win
+ * over every layered one, so this block (and only this block) actually stops the animation.
+ */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="dialog-overlay"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-overlay"],
+  [data-slot="sheet-content"],
+  [data-slot="popover-content"],
+  .ui-dialog-overlay,
+  .ui-command-palette {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/styles/fonts.css

@@ -7,10 +7,21 @@
  *                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 ORDER IS LOAD-BEARING — this file MUST be imported AFTER
+ * `@godxjp/ui/styles/base`:
+ *
+ *     @import "@godxjp/ui/styles/base";   /· tokens: --font-sans-base = system stack ·/
+ *     @import "@godxjp/ui/styles/fonts";  /· THEN the bundled faces overwrite it ·/
+ *
+ * The token fills below and foundation.css's font-agnostic default both target
+ * `:root` at identical specificity (0,1,0), so whichever is parsed LAST wins.
+ * Imported first, this file is silently dead — the system stack renders and the
+ * ~800 KB of @font-face is downloaded for nothing (issue #210).
+ *
+ * The all-in-one `@godxjp/ui/styles` entry pulls this in automatically, in the
+ * correct position. 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";

package/dist/styles/index.css

@@ -7,13 +7,21 @@
  *   @import "@godxjp/ui/styles/control";     // + only the layout layers you use
  *   @import "@godxjp/ui/styles/dialog-layout";
  *   ...
- * and add `@godxjp/ui/styles/fonts` only if you want the bundled faces.
- * See src/styles/base.css for the full list and rules.
+ * and add `@godxjp/ui/styles/fonts` AFTER `styles/base` if you want the bundled
+ * faces. See src/styles/base.css for the full list and rules.
+ *
+ * ORDER IS LOAD-BEARING — `fonts.css` MUST come AFTER `base.css`.
+ * `base.css` pulls in `tokens/base.css` → `tokens/foundation.css`, which declares
+ * the font-agnostic `:root { --font-sans-base: <system stack> }` default. Both
+ * declarations sit on `:root` at identical specificity (0,1,0), so the LATER one
+ * wins. With `fonts.css` first the bundled faces could never apply and every
+ * consumer downloaded ~800 KB of dead @font-face (issue #210).
  * ───────────────────────────────────────────────────────────────────────── */
 @import "sonner/dist/styles.css";
 @import "react-day-picker/style.css";
-@import "./fonts.css";
 @import "./base.css";
+/* AFTER the token layers — see the ORDER IS LOAD-BEARING note above. */
+@import "./fonts.css";
 @import "./shell-layout.css";
 @import "./motion.css";
 @import "./layout.css";