User dialog hover state is not working as expected

[hjbrown11]

Description

When I open user menu I see the first item highlighted which is selected, I expect that when I hover on the next item, the first will not be highlighted and the second will be. Instead, I see that whichever item I last clicked on stays highlighted even when I hover on another item, meaning that two items are highlighted at one time

Link to Reproduction

Your docs have this bug too - https://paste.twilio.design/components/user-dialog

Steps to reproduce

1. Go to the docs
2. Click on the button to open the menu
3. See the first item is highlighted
4. Hover over another item
5. See the error where two items are highlighted at the same time

Paste Core Version

'@twilio-paste/core': ^21.3.0, @twilio-paste/user-dialog': ^3.0.1

Browser

Chrome 138.0.7204.158

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[nkrantz]

Hey @hjbrown11 - this is happening because we set the initial focus on the first option item when the User Dialog is open, and we apply the same styles to hover and focus states. That's why it looks like a bug when the first item is focused and you hover over another item at the same time. I'm chatting with design to get a path forward and will circle back here!