@godxjp/ui 18.4.0 → 18.6.0

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

@@ -18,6 +18,18 @@
     font-weight: var(--font-weight-medium);
   }
 
+  /* Entity-header mark — `<Avatar shape="square">` (gh#249). Opt-in ONLY: without the attribute the
+   * avatar above is untouched. Geometry and colour are token-owned (rule #45); the brand fill is
+   * handed down through --avatar-background so the fallback slot picks it up with no extra rule,
+   * and a service that only wants a neutral square overrides --avatar-square-background. */
+  .ui-avatar[data-shape="square"] {
+    inline-size: var(--avatar-square-size);
+    block-size: var(--avatar-square-size);
+    border-radius: var(--avatar-square-radius);
+    --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
+    color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;
@@ -449,14 +461,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 +489,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 +511,52 @@
   }
   [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;
+  }
+  /* `density="compact"` (#246) — the compact inline-actions geometry: tighter block padding and
+   * column gap plus a LOWER body threshold, so a 36px avatar, the title/description and one or two
+   * small trailing Buttons stay inline inside the canonical 326px content column at 390px. It only
+   * LOWERS thresholds; the #224 overflow contract above is untouched (the row still wraps, the body
+   * is still clamped with min(…, 100%)), so a compact row can never widen the page root. */
+  [data-slot="list-row"][data-density="compact"] {
+    gap: var(--list-row-compact-gap, var(--space-2));
+    padding: var(--list-row-compact-padding-y, var(--space-2))
+      var(--list-row-compact-padding-x, var(--list-row-padding-x));
+  }
+  [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
+    min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
+    flex-basis: var(--list-row-compact-body-min-width, 6rem);
+  }
   [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";