[pull] master from supabase:master

apps/design-system/components/color-palette.tsx

@@ -64,7 +64,7 @@ const ColorPalette = () => {
                     key={step * 100}
                     type="button"
                     onClick={() => handleCopy(reference)}
-                    className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition hover:scale-[1.05] focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
+                    className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition-transform hover:scale-[1.05] focus-ring"
                     style={{ backgroundColor: reference }}
                     title={reference}
                   >

apps/design-system/registry/default/example/form-patterns-sidepanel.tsx

@@ -319,7 +319,7 @@ export default function FormPatternsSidePanel() {
                             tabIndex={0}
                             type="button"
                             onClick={() => uploadButtonRef.current?.click()}
-                            className="flex items-center justify-center h-10 w-10 shrink-0 text-foreground-lighter hover:text-foreground-light overflow-hidden rounded-full bg-cover border hover:border-strong focus-visible:outline-brand-600"
+                            className="flex items-center justify-center h-10 w-10 shrink-0 text-foreground-lighter hover:text-foreground-light overflow-hidden rounded-full bg-cover border hover:border-strong focus-ring"
                             style={{
                               backgroundImage: logoUrl ? `url("${logoUrl}")` : 'none',
                             }}

apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx

@@ -29,7 +29,7 @@ const listItem = {
 }
 
 const itemClassName =
-  'block py-2 pl-2 pr-3.5 text-sm text-foreground-light hover:bg-surface-200 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:rounded-sm'
+  'block py-2 pl-2 pr-3.5 text-sm text-foreground-light hover:bg-surface-200 focus-ring rounded-sm'
 
 const AccordionMenuItem = ({ section }: { section: DropdownMenuItem[] }) => {
   const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
@@ -145,7 +145,7 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => {
                   tabIndex={0}
                   onClick={() => setOpen(false)}
                   type="button"
-                  className="inline-flex items-center justify-center focus:ring-brand bg-surface-100 hover:bg-surface-200 focus:outline-hidden focus:ring-2 focus:ring-inset border border-default bg-surface-100/75 text-foreground-light rounded-sm min-w-[30px] w-[30px] h-[30px]"
+                  className="inline-flex items-center justify-center bg-surface-100 hover:bg-surface-200 border border-default bg-surface-100/75 text-foreground-light rounded-sm min-w-[30px] w-[30px] h-[30px] focus-ring"
                 >
                   <span className="sr-only">Close menu</span>
                   <X />

apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx

@@ -59,7 +59,7 @@ export const useActiveMenuLabel = (menu: typeof GLOBAL_MENU_ITEMS) => {
 const GlobalNavigationMenu: FC = () => {
   const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
   const triggerClassName =
-    'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:bg-transparent hover:text-foreground data-open:bg-transparent! data-open:text-foreground! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none! outline-hidden transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600'
+    'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:bg-transparent hover:text-foreground data-open:bg-transparent! data-open:text-foreground! focus-ring focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none!'
 
   return (
     <div className="flex relative gap-2 justify-start items-end w-full h-full">
@@ -172,7 +172,7 @@ export const MenuItem = React.forwardRef<
       ref={ref}
       className={cn(
         'group/menu-item flex items-center gap-2',
-        'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline outline-hidden! focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
+        'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground',
         className
       )}
       {...props}

apps/docs/features/ui/PromptPanel.tsx

@@ -133,7 +133,7 @@ function ExpandableContent({ children }: { children: ReactNode }) {
         tabIndex={0}
         type="button"
         onClick={() => setIsExpanded((expanded) => !expanded)}
-        className="mt-2 text-sm text-brand-link transition-colors hover:text-brand focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted"
+        className="mt-2 text-sm text-brand-link transition-colors hover:text-brand focus-ring"
         aria-expanded={isExpanded}
       >
         {isExpanded ? 'Show less' : 'Show more'}
@@ -192,7 +192,7 @@ function CopyButton({ label, value }: { label: string; value: string }) {
           setCopied(true)
         })
       }}
-      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted"
+      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
       aria-label={copied ? `${label} copied` : `Copy ${label}`}
       title={copied ? 'Copied' : 'Copy to clipboard'}
     >

apps/docs/features/ui/Tabs.tsx

@@ -55,7 +55,7 @@ export const tabsListVariants = cva(cn('flex'), {
 
 export const tabsTriggerListVariants = cva(
   cn(
-    'relative cursor-pointer flex items-center space-x-2 text-center transition focus:outline-hidden focus-visible:ring-3 focus-visible:ring-foreground-muted focus-visible:border-foreground-muted'
+    'relative cursor-pointer flex items-center space-x-2 text-center transition-colors focus-ring'
   ),
   {
     variants: {

apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx

@@ -260,10 +260,8 @@ export const CreateOrUpdateCustomProviderSheet = ({
           <div className="flex flex-row gap-3 items-center">
             <SheetClose
               className={cn(
-                'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-                'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-                'disabled:pointer-events-none data-[state=open]:bg-secondary',
-                'transition'
+                'text-muted hover:text hover:opacity-100 focus-ring',
+                'disabled:pointer-events-none data-[state=open]:bg-secondary'
               )}
             >
               <X className="h-3 w-3" />

apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx

@@ -263,10 +263,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
             <div className="flex flex-row gap-3 items-center">
               <SheetClose
                 className={cn(
-                  'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-                  'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-                  'disabled:pointer-events-none data-[state=open]:bg-secondary',
-                  'transition'
+                  'text-muted hover:text hover:opacity-100 focus-ring',
+                  'disabled:pointer-events-none data-[state=open]:bg-secondary'
                 )}
               >
                 <X className="h-3 w-3" />

apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx

@@ -30,9 +30,8 @@ export const PolicyEditorPanelHeader = ({
       <div className="flex flex-row gap-3 max-w-[75%] items-start">
         <SheetClose
           className={cn(
-            'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-            'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-            'transition disabled:pointer-events-none data-[state=open]:bg-secondary',
+            'text-muted hover:text hover:opacity-100 focus-ring',
+            'disabled:pointer-events-none data-[state=open]:bg-secondary',
             'mt-1.5'
           )}
         >

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx

@@ -135,7 +135,7 @@ export const SlotLagMetricsList = ({
                         type="button"
                         tabIndex={0}
                         aria-label={`What is ${field.label}`}
-                        className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                        className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                       >
                         <Info size={12} />
                       </button>

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx

@@ -66,7 +66,7 @@ export const SlotStatusLegend = () => {
           type="button"
           tabIndex={0}
           aria-label="What do the slot statuses mean?"
-          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
         >
           <Info size={12} />
         </button>

apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceCard.tsx

@@ -18,7 +18,7 @@ export const MarketplaceCard = ({ integration, isInstalled }: MarketplaceCardPro
   return (
     <Link
       href={`/project/${ref}/integrations/${integration.id}/overview`}
-      className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+      className="rounded-md focus-ring"
     >
       <Card className="flex min-h-[168px] h-full flex-col gap-2.5 hover:border-stronger p-4">
         <div className="flex items-start justify-between">

apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHeroGrid.tsx

@@ -113,7 +113,7 @@ export const MarketplaceFeaturedHeroGrid = ({
         <div className="col-span-1 @xl:col-span-2">
           <Link
             href={`/project/${ref}/integrations/${primaryIntegration.id}/overview`}
-            className="block h-full rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+            className="block h-full rounded-md focus-ring"
           >
             <Card className="relative flex flex-row overflow-hidden h-full min-h-[168px] hover:border-stronger">
               <div className="relative z-10 flex flex-col gap-2.5 p-4 flex-1 min-w-0">
@@ -170,7 +170,7 @@ export const MarketplaceFeaturedHeroGrid = ({
             <div key={integration.id} className="col-span-1">
               <Link
                 href={`/project/${ref}/integrations/${integration.id}/overview`}
-                className="block h-full rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+                className="block h-full rounded-md focus-ring"
               >
                 <Card className="flex flex-col overflow-hidden h-full hover:border-stronger">
                   <div className="hidden @xl:block relative w-full h-28 bg-black/90 dark:bg-black/50 shrink-0">

apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx

@@ -220,7 +220,7 @@ export const MarketplaceFilterBar = ({
           onClick={() => onViewModeChange('grid')}
           className={cn(
             'border-r px-2 py-1.5 rounded-l-md cursor-pointer',
-            'focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+            'focus-visible:z-10 focus-ring',
             viewMode === 'grid'
               ? 'bg-surface-200 text-foreground'
               : 'text-foreground-light hover:bg-surface-100'
@@ -235,7 +235,7 @@ export const MarketplaceFilterBar = ({
           onClick={() => onViewModeChange('list')}
           className={cn(
             'px-2 py-1.5 rounded-r-md cursor-pointer',
-            'focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+            'focus-visible:z-10 focus-ring',
             viewMode === 'list'
               ? 'bg-surface-200 text-foreground'
               : 'text-foreground-light hover:bg-surface-100'

apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceListRow.tsx

@@ -33,12 +33,9 @@ export const MarketplaceListRow = ({ integration, isInstalled }: MarketplaceList
       </TableCell>
 
       <TableCell>
-        <Link
-          href={href}
-          className="block w-full hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background rounded-md"
-        >
+        <Link href={href} className="block w-full rounded-md hover:underline focus-ring">
           <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
-            <div className="relative z-10 text-sm font-medium @lg:text-sm after:absolute after:-inset-y-2 after:left-0 after:right-[calc(100%+6px)] after:content-[''] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground">
+            <div className="relative z-10 text-sm font-medium @lg:text-sm after:absolute after:-inset-y-2 after:left-0 after:right-[calc(100%+6px)] after:content-['']">
               {integration.name}
             </div>
             <div className="relative z-10">

apps/studio/components/interfaces/ProjectHome/ConnectSection.tsx

@@ -92,7 +92,7 @@ export const ConnectSection = () => {
                 onClick={() => handleActionClick(action)}
                 className={cn(
                   'group flex items-center gap-3 p-4 text-left transition-colors min-h-[72px] w-full',
-                  'hover:bg-surface-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand',
+                  'hover:bg-surface-100 focus-ring',
                   'xl:min-h-32 xl:flex-col xl:justify-center xl:p-6 xl:text-center',
                   ((action.requiresActiveProject ?? true)
                     ? !isActiveHealthy

apps/studio/components/interfaces/ProjectHome/SortableSection.tsx

@@ -27,8 +27,7 @@ export const SortableSection = ({ id, children }: SortableSectionProps) => {
         aria-label="Drag to reorder section"
         className={cn(
           'absolute -left-6 top-2 text-foreground-muted hover:text-foreground cursor-grab active:cursor-grabbing',
-          'rounded-sm outline-hidden',
-          'focus-visible:outline-solid focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-border-strong'
+          'rounded-sm focus-ring'
         )}
         {...attributes}
         {...listeners}

apps/studio/components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx

@@ -71,7 +71,7 @@ export const QueryPerformanceMetrics = () => {
                           type="button"
                           tabIndex={0}
                           aria-label="How are slow queries calculated?"
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                           onClick={(e) => {
                             e.stopPropagation()
                           }}
@@ -92,7 +92,7 @@ export const QueryPerformanceMetrics = () => {
                           type="button"
                           tabIndex={0}
                           aria-label={`What is ${card.title}?`}
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                           onClick={(e) => {
                             e.stopPropagation()
                           }}

apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx

@@ -72,7 +72,7 @@ export const BucketsPolicies = ({
             aria-label="Toggle bucket list"
             className={cn(
               'rounded-md p-1 text-foreground-light hover:text-foreground',
-              'outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+              'focus-ring'
             )}
           >
             <ChevronUp size={14} className={cn(!expanded && 'rotate-180', 'transition')} />

apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx

@@ -32,7 +32,7 @@ export const StoragePolicyEditorModalTitle = ({
             tabIndex={0}
             onClick={onSelectBackFromTemplates}
             className={cn(
-              'cursor-pointer rounded-xs opacity-20 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+              'cursor-pointer rounded-xs opacity-20 hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
               'hit-area-6'
             )}
           >
@@ -51,7 +51,7 @@ export const StoragePolicyEditorModalTitle = ({
       <DocsButton href={`${DOCS_URL}/learn/auth-deep-dive/auth-policies`} />
       <DialogPrimitive.Close
         className={cn(
-          'absolute p-0.5 right-3.5 top-4.5 rounded-xs opacity-20 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+          'absolute p-0.5 right-3.5 top-4.5 rounded-xs opacity-20 hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
           'hit-area-6'
         )}
       >

apps/studio/components/interfaces/Support/AttachmentUpload.tsx

@@ -24,7 +24,7 @@ const MAX_ATTACHMENTS = 5
 
 const removeAttachmentButtonClassName = cn(
   'absolute -top-1 -right-1 size-4 shrink-0 rounded-full bg-red-900 p-0 cursor-pointer',
-  'outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+  'focus-ring'
 )
 
 const RemoveAttachmentIcon = () => (
@@ -257,9 +257,9 @@ export function AttachmentUploadDisplay({
             tabIndex={0}
             aria-label="Add attachment"
             className={cn(
-              'border border-stronger opacity-50 transition hover:opacity-100',
+              'border border-stronger opacity-50 hover:opacity-100',
               'group flex h-14 w-14 cursor-pointer items-center justify-center rounded-sm',
-              'outline-hidden focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+              'focus-visible:opacity-100 focus-ring'
             )}
             onClick={addFile}
           >