@djangocfg/ui-core 2.1.535 → 2.1.536

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.535",
+  "version": "2.1.536",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.535",
+    "@djangocfg/i18n": "^2.1.536",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.535",
-    "@djangocfg/typescript-config": "^2.1.535",
+    "@djangocfg/i18n": "^2.1.536",
+    "@djangocfg/typescript-config": "^2.1.536",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -38,6 +38,16 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
+/**
+ * Width is a CSS variable, not a prop: set `--width-dialog` on the element.
+ *
+ *     <DialogContent className="[--width-dialog:940px]">
+ *
+ * The card renders at `min(--width-dialog, 100vw - 2rem)`, so raising the token
+ * widens it and the viewport margin is kept for you. A Tailwind `max-w-*`
+ * instead does nothing — the width is declared, and a maximum above a declared
+ * width is inert. Ignored when `fullscreen`.
+ */
 interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   /**
@@ -84,7 +94,14 @@ const DialogContent = React.forwardRef<
           // both edges at any viewport. A `sm:` gate reads the window, so a
           // narrow desktop pane lost its margins and rendered as a sheet with
           // its rounding cropped.
-          : "left-1/2 top-1/2 grid w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          //
+          // The size is `--width-dialog` (32rem by default) rather than a
+          // literal, so a consumer can widen the card WITHOUT restating the
+          // viewport clamp: `className="[--width-dialog:940px]"`. It used to be
+          // hard-coded, which made the width unoverridable in practice — a
+          // `max-width` beside a declared `width` is inert, so callers that
+          // needed a wider dialog silently got 32rem.
+          : "left-1/2 top-1/2 grid w-[min(var(--width-dialog),calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/styles/css/base.css

@@ -19,6 +19,20 @@
   --radius-dialog: 1rem;
   --radius-tooltip: 0.375rem;
 
+  /* Centred-dialog width. The card is `min(--width-dialog, 100vw - 2rem)`, so
+   * this is the width it WANTS and the viewport clamp is applied for it.
+   *
+   * A token rather than a literal in the component, because the clamp and the
+   * size were previously one hard-coded declaration
+   * (`w-[min(32rem,calc(100vw-2rem))]`): a consumer that needed a wider dialog
+   * could not raise the size without also restating the margin logic, and
+   * `max-width` beside it did nothing — a maximum above a declared width is
+   * inert. Set this on the dialog to resize it and keep the clamp:
+   *
+   *   <DialogContent className="[--width-dialog:940px]">
+   */
+  --width-dialog: 32rem;
+
   /* 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