feat: add focus-visible ring styles

src/recipes/select.ts

@@ -1,6 +1,6 @@
 import { defineSlotRecipe, type SystemStyleObject } from '@pandacss/dev'
 
-const selectSlots = [
+export const selectSlots = [
   'trigger',
   'content',
   'viewport',
@@ -11,6 +11,7 @@ const selectSlots = [
   'groupLabel',
   'separator'
 ] as const
+export const selectSizes = ['small', 'medium', 'large'] as const
 
 export interface SelectRecipeArg {
   semanticColorNames: string[]
@@ -35,7 +36,10 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
         cursor: 'pointer',
         transitionProperty: 'color, background-color, border-color',
         transitionDuration: 'normal',
-        transitionTimingFunction: 'easeOut'
+        transitionTimingFunction: 'easeOut',
+        focusVisibleRing: 'outside',
+        focusRingWidth: '2px',
+        focusRingOffset: '0px'
       },
       content: {
         overflow: 'hidden',
@@ -81,6 +85,10 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
         transitionProperty: 'color, background-color',
         transitionDuration: 'normal',
         transitionTimingFunction: 'easeOut',
+        focusRingColor: 'var(--select-border-color-focus)',
+        focusVisibleRing: 'outside',
+        focusRingWidth: '2px',
+        focusRingOffset: '0px',
         _highlighted: {
           backgroundColor: 'var(--select-background-color-hover)'
         },
@@ -124,27 +132,47 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
     },
     variants: {
       size: {
-        small: {
-          trigger: {
-            paddingBlock: 'calc({spacing.xs} * 0.5)',
-            paddingInline: 'calc({spacing.xs} * 1)',
-            fontSize: 'sm'
-          }
-        },
-        medium: {
-          trigger: {
-            paddingBlock: 'calc({spacing.xs} * 0.75)',
-            paddingInline: 'calc({spacing.xs} * 1.25)',
-            fontSize: 'base'
-          }
-        },
-        large: {
-          trigger: {
-            paddingBlock: 'calc({spacing.xs} * 1)',
-            paddingInline: 'calc({spacing.xs} * 1.5)',
-            fontSize: 'lg'
-          }
-        }
+        ...Object.fromEntries(
+          selectSizes.map((size) => {
+            switch (size) {
+              case 'small':
+                return [
+                  size,
+                  {
+                    trigger: {
+                      paddingBlock: 'calc({spacing.xs} * 0.5)',
+                      paddingInline: 'calc({spacing.xs} * 1)',
+                      fontSize: 'sm'
+                    }
+                  }
+                ]
+              case 'medium':
+                return [
+                  size,
+                  {
+                    trigger: {
+                      paddingBlock: 'calc({spacing.xs} * 0.75)',
+                      paddingInline: 'calc({spacing.xs} * 1.25)',
+                      fontSize: 'base'
+                    }
+                  }
+                ]
+              case 'large':
+                return [
+                  size,
+                  {
+                    trigger: {
+                      paddingBlock: 'calc({spacing.xs} * 1)',
+                      paddingInline: 'calc({spacing.xs} * 1.5)',
+                      fontSize: 'lg'
+                    }
+                  }
+                ]
+              default:
+                return [size, {}]
+            }
+          })
+        )
       },
       color: {
         ...Object.fromEntries(
@@ -161,6 +189,7 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
                         backgroundColor: `${color}.2`,
                         color: `${color}.12`,
                         borderColor: `${color}.6`,
+                        focusRingColor: `{colors.${color}.7}`,
                         _placeholder: {
                           color: `${color}.11`
                         },
@@ -203,6 +232,7 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
                         '--select-background-color-active': `{colors.${color}.5}`,
                         '--select-background-color-disabled': `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
                         '--select-border-color': `{colors.${color}.6}`,
+                        '--select-border-color-focus': `{colors.${color}.7}`,
                         '--select-color-subtle': `{colors.${color}.11}`,
                         '--select-color': `{colors.${color}.12}`,
                         '--select-color-disabled': `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`