update hover styles

docs/resources/changelog.md

@@ -21,6 +21,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
 - 🚨 BREAKING: removed the `sl-label-change` event from `<sl-menu-item>` (listen for `slotchange` instead)
 - Added the `<sl-option>` component
 - Fixed a bug in `<sl-tree-item>` where the checked/indeterminate states could get out of sync when using the `multiple` option [#1076](https://github.com/shoelace-style/shoelace/issues/1076)
+- Updated the hover style of `<sl-menu-item>` to be consistent with `<sl-option>`
 - Updated the status of `<sl-tree>` and `<sl-tree-item>` from experimental to stable
 
 ## 2.0.0-beta.87

src/components/menu-item/menu-item.styles.ts

@@ -61,6 +61,11 @@ export default css`
   }
 
   :host(:hover:not([aria-disabled='true'])) .menu-item {
+    background-color: var(--sl-color-neutral-100);
+    color: var(--sl-color-neutral-1000);
+  }
+
+  :host(:focus-visible:not([aria-disabled='true'])) .menu-item {
     outline: none;
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);
@@ -82,7 +87,8 @@ export default css`
   }
 
   @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .menu-item {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible:not([aria-disabled='true'])) .menu-item {
       outline: dashed 1px SelectedItem;
       outline-offset: -1px;
     }