From 6c9281698d7e428bbd0103daf962b477afd894de Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:11:38 -0700
Subject: [PATCH 1/2] improvement(ui): reuse shared button and focus treatments

---
 .../message-container/message-container.tsx   |  3 ++-
 .../message/components/file-download.tsx      |  2 +-
 .../app/workspace/[workspaceId]/home/home.tsx |  4 ++--
 .../table-sidebar-header.tsx                  |  8 +++-----
 .../components/sidebar-row-actions.tsx        |  4 ++--
 .../src/components/button/button.test.tsx     | 20 +++++++++++++++++++
 .../emcn/src/components/button/button.tsx     |  7 ++++++-
 .../field-divider/field-divider.tsx           |  3 ++-
 .../emcn/src/components/slider/slider.tsx     |  8 +++++++-
 .../emcn/src/components/switch/switch.tsx     |  4 +++-
 packages/emcn/src/index.ts                    |  1 +
 packages/emcn/src/lib/focus-ring.ts           |  3 +++
 12 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 packages/emcn/src/lib/focus-ring.ts

diff --git a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
index 9a355614557..b9dd835af01 100644
--- a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
@@ -72,7 +72,8 @@ export function ChatMessageContainer({
           <Button
             onClick={scrollToBottom}
             size='sm'
-            className='gap-1 rounded-full px-3 shadow-medium'
+            shape='round'
+            className='gap-1 px-3 shadow-medium'
           >
             <ArrowDown className='size-3.5' />
             <span className='sr-only'>Scroll to bottom</span>
diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 938ea3f2b3c..10a96947a0f 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -172,7 +172,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
         variant='default'
         onClick={handleDownload}
         disabled={isDownloading}
-        className='group flex h-auto w-[200px] gap-2 rounded-lg px-3 py-2'
+        className='group flex w-[200px] gap-2 rounded-lg px-3 py-2'
       >
         <div className='flex size-8 shrink-0 items-center justify-center'>{renderIcon()}</div>
         <div className='min-w-0 flex-1 text-left'>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index be6316624d4..882b972cfba 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -775,11 +775,11 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
         className={cn('z-30', RESOURCE_HEADER_CLASSES.overlay, RESOURCE_HEADER_CLASSES.endPosition)}
       >
         <Button
-          variant='ghost'
+          variant='quiet'
           size={null}
           type='button'
           onClick={isResourceCollapsed ? expandResource : collapseResource}
-          className="after:-translate-x-1/2 after:-translate-y-1/2 relative size-[var(--resource-header-toggle-size)] rounded-[8px] after:absolute after:top-1/2 after:left-1/2 after:size-[var(--resource-header-toggle-hit-size)] after:content-[''] hover-hover:bg-[var(--surface-active)]"
+          className="after:-translate-x-1/2 after:-translate-y-1/2 relative size-[var(--resource-header-toggle-size)] rounded-[8px] after:absolute after:top-1/2 after:left-1/2 after:size-[var(--resource-header-toggle-hit-size)] after:content-['']"
           aria-label={resourceToggleLabel}
         >
           <span className='relative'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
index 87ca0356ea0..f51e9298a44 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
-import { Button, cn } from '@sim/emcn'
+import { Button } from '@sim/emcn'
 
 interface TableSidebarHeaderProps {
   children: ReactNode
@@ -28,10 +28,8 @@ export const TableSidebarHeaderAction = forwardRef<
     size='sm'
     iconSize='regular'
     iconPadding='sm'
-    className={cn(
-      'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
-      className
-    )}
+    focusRing='muted'
+    className={className}
   />
 ))
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
index f8faef2fac9..a993b0903ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx
@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, mutedFocusRingClass } from '@sim/emcn'
 
 interface SidebarRowActionsProps {
   children: ReactNode
@@ -62,7 +62,7 @@ export const SidebarRowAction = forwardRef<HTMLButtonElement, SidebarRowActionPr
       {...props}
       ref={ref}
       type='button'
-      className='flex size-[18px] items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      className={cn('flex size-[18px] items-center justify-center rounded-sm', mutedFocusRingClass)}
     />
   )
 )
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
index 4c8cae79dc0..77132168d0d 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -107,6 +107,26 @@ describe('Button shared action geometry', () => {
     expect(baseOnly).not.toContain('sm:size')
   })
 
+  it('offers the existing muted keyboard ring without changing the default', () => {
+    const before = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='sm'
+        className='focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+      >
+        Open
+      </Button>
+    )
+    const after = renderToStaticMarkup(
+      <Button variant='ghost' size='sm' focusRing='muted'>
+        Open
+      </Button>
+    )
+    expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+    expect(after).not.toContain('focusRing=')
+    expect(renderToStaticMarkup(<Button>Open</Button>)).not.toContain('focus-visible:ring-2')
+  })
+
   it('forwards refs and native focus, submission and disabled behavior with responsive sizing', () => {
     const container = document.createElement('div')
     document.body.appendChild(container)
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 649c3524432..dfbfea46fb0 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -1,6 +1,7 @@
 import { type ButtonHTMLAttributes, forwardRef } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * `size='icon'` is the square 20px icon-only button — a chip field's trailing
@@ -61,6 +62,9 @@ const buttonVariants = cva(
       shape: {
         round: 'rounded-full',
       },
+      focusRing: {
+        muted: mutedFocusRingClass,
+      },
       iconPadding: {
         sm: 'p-1',
         md: 'p-1.5',
@@ -118,7 +122,7 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconSize, iconPadding, shape, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, focusRing, ...props }, ref) => {
     const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
     const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
@@ -131,6 +135,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             iconSize: baseIconSize,
             iconPadding,
             shape,
+            focusRing,
           }),
           smIconSize && responsiveIconSizes[smIconSize],
           className
diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 4b15d867f80..9e11f4b5a10 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -79,8 +79,9 @@ function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps)
         type='button'
         variant='ghost'
         size={null}
+        focusRing='muted'
         aria-expanded={expanded}
-        className='gap-1.5 whitespace-nowrap p-0 text-small focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+        className='gap-1.5 whitespace-nowrap p-0 text-small'
       >
         {children}
         <ChevronDown
diff --git a/packages/emcn/src/components/slider/slider.tsx b/packages/emcn/src/components/slider/slider.tsx
index 7dd386a0599..9d5303a7787 100644
--- a/packages/emcn/src/components/slider/slider.tsx
+++ b/packages/emcn/src/components/slider/slider.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
 
@@ -30,7 +31,12 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
+      <SliderPrimitive.Thumb
+        className={cn(
+          'relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-hidden',
+          mutedFocusRingClass
+        )}
+      />
     </SliderPrimitive.Root>
   )
 )
diff --git a/packages/emcn/src/components/switch/switch.tsx b/packages/emcn/src/components/switch/switch.tsx
index 1d5b0c8be9c..fdf3c797ac7 100644
--- a/packages/emcn/src/components/switch/switch.tsx
+++ b/packages/emcn/src/components/switch/switch.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 import { cn } from '../../lib/cn'
+import { mutedFocusRingClass } from '../../lib/focus-ring'
 
 /**
  * Switch component styled to match Sim's design system.
@@ -16,7 +17,8 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        mutedFocusRingClass,
         className
       )}
       {...props}
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index f89fbb7afd2..c7591f96128 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -52,5 +52,6 @@ export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion'
 export { useScrollEdges } from './hooks/use-scroll-edges'
 export * from './icons'
 export { cn } from './lib/cn'
+export { mutedFocusRingClass } from './lib/focus-ring'
 export { handleKeyboardActivation, isKeyboardActivation } from './lib/keyboard'
 export { bindPreviewHorizontalWheel, bindPreviewWheelZoom } from './lib/preview-wheel-zoom'
diff --git a/packages/emcn/src/lib/focus-ring.ts b/packages/emcn/src/lib/focus-ring.ts
new file mode 100644
index 00000000000..0298faf9841
--- /dev/null
+++ b/packages/emcn/src/lib/focus-ring.ts
@@ -0,0 +1,3 @@
+/** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
+export const mutedFocusRingClass =
+  'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'

From 22ed39680187983c82b476e489444c9aeadfe4b6 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:26:04 -0700
Subject: [PATCH 2/2] fix(emcn): include outline reset in muted focus ring

---
 packages/emcn/src/components/slider/slider.tsx | 2 +-
 packages/emcn/src/components/switch/switch.tsx | 2 +-
 packages/emcn/src/lib/focus-ring.ts            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/emcn/src/components/slider/slider.tsx b/packages/emcn/src/components/slider/slider.tsx
index 9d5303a7787..b3c1b313889 100644
--- a/packages/emcn/src/components/slider/slider.tsx
+++ b/packages/emcn/src/components/slider/slider.tsx
@@ -33,7 +33,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
         className={cn(
-          'relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-hidden',
+          'relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""]',
           mutedFocusRingClass
         )}
       />
diff --git a/packages/emcn/src/components/switch/switch.tsx b/packages/emcn/src/components/switch/switch.tsx
index fdf3c797ac7..ed8e455e9f4 100644
--- a/packages/emcn/src/components/switch/switch.tsx
+++ b/packages/emcn/src/components/switch/switch.tsx
@@ -17,7 +17,7 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
         mutedFocusRingClass,
         className
       )}
diff --git a/packages/emcn/src/lib/focus-ring.ts b/packages/emcn/src/lib/focus-ring.ts
index 0298faf9841..b9e02a74dd2 100644
--- a/packages/emcn/src/lib/focus-ring.ts
+++ b/packages/emcn/src/lib/focus-ring.ts
@@ -1,3 +1,3 @@
 /** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
 export const mutedFocusRingClass =
-  'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'