From 43ba18de133b370f3940235878d81d79cf7dfb17 Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Fri, 7 Nov 2025 12:53:04 -0600
Subject: [PATCH] feat: add focus indicators and full width to menu items

---
 src/recipes/menu.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/recipes/menu.ts b/src/recipes/menu.ts
index 28ac97d..3764eb7 100644
--- a/src/recipes/menu.ts
+++ b/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: