diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts index 2bd78d7ab..e80375e43 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -302,6 +302,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** Active */ :host([active]) #label-button, + :host([active]) #actions-container, :host([active]) #caret-button { color: var( --uui-menu-item-color-active, @@ -335,6 +336,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** Selected */ :host([selected]:not([select-mode='highlight'], [disabled])) #label-button, + :host([selected]:not([select-mode='highlight'], [disabled])) + #actions-container, :host([selected]:not([select-mode='highlight'], [disabled])) #caret-button { color: var( @@ -394,6 +397,9 @@ export class UUIMenuItemElement extends SelectOnlyMixin( :host([select-mode='highlight'][selected]:not([disabled])) #menu-item #label-button, + :host([select-mode='highlight'][selected]:not([disabled])) + #menu-item + #actions-container, :host([select-mode='highlight'][selected]:not([disabled])) #menu-item #caret-button { diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts index 44944cb83..88c93a63d 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.story.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts @@ -221,6 +221,21 @@ export const WithActions: Story = { }, }; +export const SelectableWithActions: Story = { + args: { + selectable: true, + selectOnly: true, + selected: true, + 'actions slot': html` + + `, + }, +}; + export const WidthBadge: Story = { args: { 'badge slot': html`!`,