diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index fe406348..2f086cdd 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -21,6 +21,7 @@ This release includes a complete rewrite of `` to improve accessibili - 🚨 BREAKING: removed the `sl-label-change` event from `` (listen for `slotchange` instead) - Added the `` component - Fixed a bug in `` 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 `` to be consistent with `` - Updated the status of `` and `` from experimental to stable ## 2.0.0-beta.87 diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 39127afe..8b7794b6 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/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; }