@djangocfg/ui-core 2.1.510 → 2.1.512

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.510",
+  "version": "2.1.512",
   "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.510",
+    "@djangocfg/i18n": "^2.1.512",
     "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.510",
-    "@djangocfg/typescript-config": "^2.1.510",
+    "@djangocfg/i18n": "^2.1.512",
+    "@djangocfg/typescript-config": "^2.1.512",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/forms/switch/index.tsx

@@ -12,7 +12,14 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      // Track: generous Cloudflare-style pill (44×24) with an inset thumb.
+      "peer group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      "p-0.5 outline-none transition-colors duration-200 ease-out",
+      // On/off surfaces — all on-token so every preset & theme follows along.
+      "data-[state=unchecked]:bg-input data-[state=checked]:bg-primary",
+      // Focus ring sits outside the pill with an offset gap (matches Cloudflare's selected state).
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -20,7 +27,11 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-md ring-0",
+        "transition-transform duration-200 ease-out",
+        "data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
+        // Subtle press-in feel on active, like the CF thumb.
+        "group-active:scale-95"
       )}
     />
   </SwitchPrimitives.Root>

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

@@ -15,9 +15,24 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+>(({ className, align = "center", sideOffset = 4, forceMount, ...props }, ref) => (
+  // `forceMount` must reach BOTH halves, and that is the whole reason it is
+  // destructured rather than swept up by `...props` (live 2026-08-15).
+  //
+  // Radix declares it on `Portal` AND on `Content`, and the Portal is the outer
+  // one: with it only on Content, the Portal still unmounts on close and takes
+  // the subtree — including any <audio>/<video> element — with it. A cmdop
+  // status-bar player mounted in a popover therefore went SILENT the moment the
+  // panel closed, and no amount of `forceMount` on the content could stop it,
+  // because that content no longer had a portal to live in.
+  //
+  // Passing it to both keeps the DOM alive while closed; Radix then leaves the
+  // `data-state="closed"` attribute for the caller to style (the built-in
+  // fade/zoom classes below already key off it), so nothing changes visually for
+  // the callers that do not opt in.
+  <PopoverPrimitive.Portal forceMount={forceMount}>
     <PopoverPrimitive.Content
+      forceMount={forceMount}
       ref={ref}
       aria-describedby={undefined}
       align={align}