fix menu focus color

docs/resources/changelog.md

@@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a big in `<sl-input>` that caused the calendar icon to be clipped in Firefox [#1213](https://github.com/shoelace-style/shoelace/pull/1213)
 - Fixed a bug in `<sl-tab>` that caused `sl-tab-show` to be emitted when activating the close button
 - Fixed a bug in `<sl-spinner>` that caused `--track-color` to be invisible with certain colors
+- Fixed a bug in `<sl-menu-item>` that caused the focus color to show when selecting menu items with a mouse or touch device
 - Updated `@shoelace-style/localize` to 3.1.0
 
 When using `<input type="password">` the default value for `autocapitalize`, `autocomplete`, and `autocorrect` may be affected due to the bug fixed in [#1205](https://github.com/shoelace-style/shoelace/issues/1205). For any affected users, setting these attributes to `off` will restore the previous behavior.

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

@@ -60,7 +60,7 @@ export default css`
     margin-inline-start: var(--sl-spacing-x-small);
   }
 
-  :host(:focus) {
+  :host(:focus-visible) {
     outline: none;
   }
 
@@ -69,7 +69,7 @@ export default css`
     color: var(--sl-color-neutral-1000);
   }
 
-  :host(:focus) .menu-item {
+  :host(:focus-visible) .menu-item {
     outline: none;
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);
@@ -93,7 +93,7 @@ export default css`
 
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .menu-item,
-    :host(:focus) .menu-item {
+    :host(:focus-visible) .menu-item {
       outline: dashed 1px SelectedItem;
       outline-offset: -1px;
     }