From 8521e84bcd145f58c1086739f1cb034aeca32a3f Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Tue, 7 Jul 2026 13:38:09 +0000
Subject: [PATCH] fix(ui): suppress native focus outline on dialog, alert
 dialog and sheet panels

Radix focuses the content element (tabindex="-1") when a dialog opens, and the panel had no
outline suppression, so Chrome drew its default blue focus-visible ring around the whole panel.
Adds focus:outline-none to the dialog, alert dialog and sheet content base classes. Interactive
children keep their themed focus rings.
---
 packages/ui/primitives/alert-dialog.tsx |   2 +-
 packages/ui/primitives/dialog.tsx       |   2 +-
 packages/ui/primitives/sheet.tsx        | 165 ++++++++++++------------
 3 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/packages/ui/primitives/alert-dialog.tsx b/packages/ui/primitives/alert-dialog.tsx
index 0bd424445..77c1cfaa2 100644
--- a/packages/ui/primitives/alert-dialog.tsx
+++ b/packages/ui/primitives/alert-dialog.tsx
@@ -41,7 +41,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg sm:rounded-lg md:w-full',
+        'fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 animate-in gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none sm:rounded-lg md:w-full',
         className,
       )}
       {...props}
diff --git a/packages/ui/primitives/dialog.tsx b/packages/ui/primitives/dialog.tsx
index 4a2dee857..c346dcff4 100644
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -61,7 +61,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
+        'data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full animate-in gap-4 border bg-background p-6 shadow-lg focus:outline-none sm:max-w-lg sm:rounded-lg',
         {
           'rounded-b-xl': position === 'start',
           'rounded-t-xl': position === 'end',
diff --git a/packages/ui/primitives/sheet.tsx b/packages/ui/primitives/sheet.tsx
index 338edf09f..2cb3a8590 100644
--- a/packages/ui/primitives/sheet.tsx
+++ b/packages/ui/primitives/sheet.tsx
@@ -49,90 +49,93 @@ const SheetOverlay = React.forwardRef<
 
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
-const sheetVariants = cva('fixed z-[61] scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border', {
-  variants: {
-    position: {
-      top: 'animate-in slide-in-from-top w-full duration-300',
-      bottom: 'animate-in slide-in-from-bottom w-full duration-300',
-      left: 'animate-in slide-in-from-left h-full duration-300',
-      right: 'animate-in slide-in-from-right h-full duration-300',
+const sheetVariants = cva(
+  'fixed z-[61] scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg focus:outline-none',
+  {
+    variants: {
+      position: {
+        top: 'animate-in slide-in-from-top w-full duration-300',
+        bottom: 'animate-in slide-in-from-bottom w-full duration-300',
+        left: 'animate-in slide-in-from-left h-full duration-300',
+        right: 'animate-in slide-in-from-right h-full duration-300',
+      },
+      size: {
+        content: '',
+        default: '',
+        sm: '',
+        lg: '',
+        xl: '',
+        full: '',
+      },
     },
-    size: {
-      content: '',
-      default: '',
-      sm: '',
-      lg: '',
-      xl: '',
-      full: '',
+    compoundVariants: [
+      {
+        position: ['top', 'bottom'],
+        size: 'content',
+        class: 'max-h-screen',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'default',
+        class: 'h-1/3',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'sm',
+        class: 'h-1/4',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'lg',
+        class: 'h-1/2',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'xl',
+        class: 'h-5/6',
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'full',
+        class: 'h-screen',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'content',
+        class: 'max-w-screen',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'default',
+        class: 'w-1/3',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'sm',
+        class: 'w-1/4',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'lg',
+        class: 'w-1/2',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'xl',
+        class: 'w-5/6',
+      },
+      {
+        position: ['right', 'left'],
+        size: 'full',
+        class: 'w-screen',
+      },
+    ],
+    defaultVariants: {
+      position: 'right',
+      size: 'default',
     },
   },
-  compoundVariants: [
-    {
-      position: ['top', 'bottom'],
-      size: 'content',
-      class: 'max-h-screen',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'default',
-      class: 'h-1/3',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'sm',
-      class: 'h-1/4',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'lg',
-      class: 'h-1/2',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'xl',
-      class: 'h-5/6',
-    },
-    {
-      position: ['top', 'bottom'],
-      size: 'full',
-      class: 'h-screen',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'content',
-      class: 'max-w-screen',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'default',
-      class: 'w-1/3',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'sm',
-      class: 'w-1/4',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'lg',
-      class: 'w-1/2',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'xl',
-      class: 'w-5/6',
-    },
-    {
-      position: ['right', 'left'],
-      size: 'full',
-      class: 'w-screen',
-    },
-  ],
-  defaultVariants: {
-    position: 'right',
-    size: 'default',
-  },
-});
+);
 
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,