feat: add focus indicators and full width to menu items

src/recipes/menu.ts

@@ -35,6 +35,7 @@ const menuRecipe = ({ semanticColorNames }: MenuRecipeArg) => {
         display: 'flex',
         alignItems: 'center',
         gap: 'sm',
+        width: '100%',
         paddingBlock: 'xs',
         paddingInline: 'sm',
         cursor: 'pointer',
@@ -42,6 +43,10 @@ const menuRecipe = ({ semanticColorNames }: MenuRecipeArg) => {
         color: 'var(--menu-item-text-color, var(--menu-group-text-color ,var(--menu-text-color)))',
         transitionDuration: 'normal',
         transitionTimingFunction: 'easeOut',
+        focusVisibleRing: 'outside',
+        focusRingWidth: '2px',
+        focusRingOffset: '0px',
+        focusRingColor: 'var(--menu-border-color-active)',
         _hover: {
           backgroundColor:
             'var(--menu-item-background-color-hover, var(--menu-group-background-color-hover ,var(--menu-background-color-hover)))'
@@ -58,6 +63,10 @@ const menuRecipe = ({ semanticColorNames }: MenuRecipeArg) => {
           backgroundColor:
             'var(--menu-item-background-color-active, var(--menu-group-background-color-active ,var(--menu-background-color-active)))'
         },
+        _focusVisible: {
+          backgroundColor:
+            'var(--menu-item-background-color-active, var(--menu-group-background-color-active ,var(--menu-background-color-active)))'
+        },
         _disabled: {
           cursor: 'not-allowed',
           color: