@djangocfg/ui-core 2.1.453 → 2.1.454

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.453",
+  "version": "2.1.454",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -119,7 +119,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.453",
+    "@djangocfg/i18n": "^2.1.454",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -197,8 +197,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.453",
-    "@djangocfg/typescript-config": "^2.1.453",
+    "@djangocfg/i18n": "^2.1.454",
+    "@djangocfg/typescript-config": "^2.1.454",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/overlay/alert-dialog/index.tsx

@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, style, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-600 overlay-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-600 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     style={style}

package/src/components/overlay/dialog/index.tsx

@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-600 overlay-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-600 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     style={style}

package/src/components/overlay/drawer/index.tsx

@@ -50,7 +50,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, style, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-500 overlay-backdrop transition-opacity duration-200", className)}
+    className={cn("fixed inset-0 z-500 bg-overlay transition-opacity duration-200", className)}
     style={style}
     {...props}
   />

package/src/components/overlay/sheet/index.tsx

@@ -22,7 +22,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, style, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-200 overlay-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-200 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     style={style}

package/src/styles/README.md

@@ -11,7 +11,7 @@ styles/
 ├── theme.css              # Imports tokens.css → animations → light → dark
 ├── base.css               # Resets + `*` border-color + body bg/color + radius scale + native focus-outline reset
 ├── utilities.css          # Custom utilities entry — imports utilities/*
-│   └── utilities/         # display · divider · controls · step · animations · glass · marquee
+│   └── utilities/         # display · divider · overlay · controls · step · animations · glass · marquee
 ├── sources.css            # @source directives for monorepo class detection
 ├── palette/               # JS-readable color access (Canvas/SVG/Mermaid)
 └── theme/
@@ -70,7 +70,7 @@ This makes opacity modifiers (`bg-card/40`, `border-foreground/20`) resolve thro
 | `bg-destructive` / `text-destructive-foreground` | `--destructive` | Error / delete filled controls |
 | `border-border` | `--border` | **Outlines only** — card frames, control/input edges. *Not* for separators (see Presets § Border vs divider) |
 | `border-divider` / `.divider-b` / `bg-divider` | `--divider` | **All separators** — columns, header `border-b`, list rows, resize handles. A soft hairline (translucent on dark themes) so the chrome never reads as a heavy grid |
-| `bg-overlay` | `--overlay` | Modal scrim / backdrop behind dialogs, drawers, sheets — black scrim in both themes, the token owns the opacity |
+| `bg-overlay` | `--overlay` | Modal scrim / backdrop behind dialogs, drawers, sheets — black scrim in both themes (the token owns the opacity), **plus** a `backdrop-filter` frost via `--overlay-blur` (`utilities/overlay.css` augments this same class) |
 | `bg-input` | `--input` | Input **fill** — a notch off the panel so fields read as real controls (not flush holes). The input *border* uses `--border`, not `--input` |
 | `ring-ring` | `--ring` | Focus rings, selected outlines — **blue** (system-accent feel), independent of the cyan brand |
 
@@ -273,6 +273,7 @@ Some classes are authored as **plain CSS** in `utilities/*.css` (not Tailwind ut
 | Class | File | Why plain CSS |
 |---|---|---|
 | `.divider-b` / `.divider-t` | `utilities/divider.css` | Hairline via `--divider` |
+| `.bg-overlay` (frost) | `utilities/overlay.css` | Adds `backdrop-filter: blur(var(--overlay-blur))` onto Tailwind's own `bg-overlay` so modal backdrops frost the page. Tune via `--overlay-blur` (base.css, default 2px; `0px` disables). Attached to `.bg-overlay` — not a new class — so overlays and host forks that render `bg-overlay` all get it |
 | `.rounded-control` | `utilities/controls.css` | Shared control radius |
 
 > **JIT-scan gotcha.** Tailwind's content scan covers `ui-core/src` but **not always every consumer package** (e.g. the `layouts` package source isn't always scanned by Storybook/apps). A *new* arbitrary Tailwind class used **only** in a consumer (`border-zinc-500/25`, `border-foreground/[0.12]`, `rounded-[var(--x)]`) then produces **no CSS rule** and silently falls back to the global `* { border-color: var(--border) }` — the class is in the DOM but the computed color is wrong. **Fix pattern:** for any token-driven visual that consumers need, add a plain `.class` in `ui-core/styles/utilities/*` and `@import` it, then use that class downstream. Don't invent new Tailwind classes in the `layouts` package.

package/src/styles/base.css

@@ -19,11 +19,11 @@
   --radius-dialog: 1rem;
   --radius-tooltip: 0.375rem;
 
-  /* Modal backdrop frosting — how hard the `.overlay-backdrop` (dialog / drawer
-   * / sheet scrim) blurs the page behind it. Theme-agnostic (same both modes);
+  /* Modal backdrop frosting — how hard the `.bg-overlay` scrim (dialog / drawer
+   * / sheet) blurs the page behind it. Theme-agnostic (same both modes);
    * a preset can override for a heavier/lighter frost, or set `0px` to disable
-   * the blur while keeping the `--overlay` dimming scrim. 8px = a light frost. */
-  --overlay-blur: 8px;
+   * the blur while keeping the `--overlay` dimming scrim. 2px = a subtle frost. */
+  --overlay-blur: 2px;
 
   /* Typography tokens — overridable per preset */
   --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

package/src/styles/utilities/overlay.css

@@ -1,24 +1,24 @@
 /**
- * Modal backdrop utility — the scrim behind dialogs, drawers, sheets.
+ * Modal backdrop frosting — the blur behind dialogs, drawers, sheets.
  *
- * One class owns BOTH layers of a modal backdrop:
- *   1. the dimming scrim  → `--overlay` (a themed `hsl(… / α)` token)
- *   2. a light frosting    → `backdrop-filter: blur(var(--overlay-blur))`
+ * The dimming scrim is Tailwind's `bg-overlay` (`--overlay`, a themed
+ * `hsl(… / α)` token). Blur can't live in that color token (`--overlay` is a
+ * color, blur is a filter), so we attach `backdrop-filter` to the SAME
+ * `.bg-overlay` class every overlay already renders — no extra class, no
+ * component churn, and host forks of Dialog that render `bg-overlay` directly
+ * get the frost for free.
  *
- * Blur can't live in the color token (`--overlay` is a color, blur is a
- * filter), so it rides its own `--overlay-blur` variable — override it per
- * theme/preset to make the backdrop crisper or softer, or set it to `0` to
- * disable frosting entirely without touching the scrim color.
+ * Blur strength rides its own `--overlay-blur` variable (default in base.css) —
+ * override it per theme/preset to make the backdrop crisper or softer, or set
+ * it to `0px` to disable frosting entirely without touching the scrim color.
  *
- * Plain CSS class (NOT a JIT-scanned Tailwind utility) so it compiles
- * regardless of which package's source the Tailwind content scan covers —
- * same rationale as `divider.css`. Used by dialog / alert-dialog / drawer /
- * sheet overlays.
+ * Plain CSS (NOT a JIT-scanned Tailwind utility) so it compiles regardless of
+ * which package's source the Tailwind content scan covers — same rationale as
+ * `divider.css`.
  */
 
-.overlay-backdrop {
-  background-color: var(--overlay);
-  /* `--overlay-blur` defaults in base.css; a 0 value cleanly no-ops the blur. */
+.bg-overlay {
+  /* `--overlay-blur` defaults in base.css; a 0px value cleanly no-ops the blur. */
   backdrop-filter: blur(var(--overlay-blur, 0px));
   -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
 }