@djangocfg/ui-core 2.1.450 → 2.1.453

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.450",
+  "version": "2.1.453",
   "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.450",
+    "@djangocfg/i18n": "^2.1.453",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -197,8 +197,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.450",
-    "@djangocfg/typescript-config": "^2.1.450",
+    "@djangocfg/i18n": "^2.1.453",
+    "@djangocfg/typescript-config": "^2.1.453",
     "@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 bg-overlay 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 overlay-backdrop 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 bg-overlay 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 overlay-backdrop 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 bg-overlay transition-opacity duration-200", className)}
+    className={cn("fixed inset-0 z-500 overlay-backdrop 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 bg-overlay 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 overlay-backdrop 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/base.css

@@ -19,6 +19,12 @@
   --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);
+   * 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;
+
   /* Typography tokens — overridable per preset */
   --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

package/src/styles/utilities/overlay.css

@@ -0,0 +1,24 @@
+/**
+ * Modal backdrop utility — the scrim 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))`
+ *
+ * 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.
+ *
+ * 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.
+ */
+
+.overlay-backdrop {
+  background-color: var(--overlay);
+  /* `--overlay-blur` defaults in base.css; a 0 value cleanly no-ops the blur. */
+  backdrop-filter: blur(var(--overlay-blur, 0px));
+  -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
+}

package/src/styles/utilities.css

@@ -8,6 +8,7 @@
 
 @import './utilities/display.css';
 @import './utilities/divider.css';
+@import './utilities/overlay.css';
 @import './utilities/controls.css';
 @import './utilities/step.css';
 @import './utilities/animations.css';