From 7c8338853f0f5e8673706dbd2e29e447d3a87b2c Mon Sep 17 00:00:00 2001 From: engjlr Date: Fri, 3 Oct 2025 12:23:48 +0200 Subject: [PATCH 1/3] Remove the z-index inside teh button in the menu-item --- .../uui-menu-item/lib/uui-menu-item.element.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) 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 eb7958d00..a9a2d2ab5 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -217,6 +217,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( render() { return html` ${this.loading ? html`` @@ -266,12 +266,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** Not active, not selected, not disabled: */ :host(:not([active], [selected], [disabled], [select-mode='highlight'])) - #menu-item - #label-button:hover - ~ #label-button-background, - :host(:not([active], [selected], [disabled])) - #menu-item - #caret-button:hover { + #menu-item:has(#label-button:hover) + #label-button-background { background-color: var( --uui-menu-item-background-color-hover, var(--uui-color-surface-emphasis) @@ -480,7 +476,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( background-color: transparent; cursor: pointer; min-height: var(--uui-size-12); - z-index: 1; + /* z-index: 1; */ } #label-button { @@ -498,7 +494,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( text-decoration: none; color: currentColor; min-height: var(--uui-size-12); - z-index: 1; + /* z-index: 1; */ font-weight: inherit; } From da99d41cce61b89905f7ba285be6b94671d0cee9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 3 Oct 2025 13:35:03 +0200 Subject: [PATCH 2/3] implement hover states --- .../lib/uui-menu-item.element.ts | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) 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 a9a2d2ab5..33d0639c7 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -297,7 +297,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( var(--uui-color-current) ); } - :host([active]) #label-button:hover ~ #label-button-background, + :host([active]) :has(#label-button:hover) #label-button-background, :host([active]) #caret-button:hover { background-color: var( --uui-menu-item-background-color-active-hover, @@ -332,8 +332,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( } /** Selected, not highlight mode */ :host([selected]:not([select-mode='highlight'], [disabled])) - #label-button:hover - ~ #label-button-background, + :has(#label-button:hover) + #label-button-background, :host([selected]:not([select-mode='highlight'], [disabled])) #caret-button:hover { background-color: var( @@ -345,8 +345,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** highlight mode, default */ :host([select-mode='highlight']:not([disabled], [active], [selectable])) #menu-item - #label-button:hover - ~ #label-button-background { + :has(#label-button:hover) + #label-button-background { border-radius: var(--uui-border-radius); background-color: var( --uui-menu-item-background-color-highlight, @@ -364,8 +364,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** highlight mode, active & selected */ :host([select-mode='highlight'][active][selected]:not([disabled])) #menu-item - #label-button:hover - ~ #label-button-background { + :has(#label-button:hover) + #label-button-background { border-radius: var(--uui-border-radius); background-color: var( --uui-menu-item-background-color-highlight-active-selected, @@ -444,14 +444,14 @@ export class UUIMenuItemElement extends SelectOnlyMixin( :host([select-mode='highlight'][selectable]:not([disabled])) #menu-item - #label-button:hover - ~ #label-button-background::after { + :has(#label-button:hover) + #label-button-background::after { opacity: 0.33; } :host([select-mode='highlight'][selected]:not([disabled])) #menu-item - #label-button:hover - ~ #label-button-background::after { + :has(#label-button:hover) + #label-button-background::after { opacity: 0.66; } @@ -476,7 +476,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin( background-color: transparent; cursor: pointer; min-height: var(--uui-size-12); - /* z-index: 1; */ } #label-button { @@ -494,7 +493,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin( text-decoration: none; color: currentColor; min-height: var(--uui-size-12); - /* z-index: 1; */ font-weight: inherit; } From 0191a4ccd13cb0ccbd05cee5dc3a46fcc618340e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 6 Oct 2025 14:48:37 +0200 Subject: [PATCH 3/3] ensure there is a origin for the :has selector --- .../uui-menu-item/lib/uui-menu-item.element.ts | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 33d0639c7..d7073993e 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -297,7 +297,9 @@ export class UUIMenuItemElement extends SelectOnlyMixin( var(--uui-color-current) ); } - :host([active]) :has(#label-button:hover) #label-button-background, + :host([active]) + #menu-item:has(#label-button:hover) + #label-button-background, :host([active]) #caret-button:hover { background-color: var( --uui-menu-item-background-color-active-hover, @@ -332,7 +334,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( } /** Selected, not highlight mode */ :host([selected]:not([select-mode='highlight'], [disabled])) - :has(#label-button:hover) + #menu-item:has(#label-button:hover) #label-button-background, :host([selected]:not([select-mode='highlight'], [disabled])) #caret-button:hover { @@ -344,8 +346,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** highlight mode, default */ :host([select-mode='highlight']:not([disabled], [active], [selectable])) - #menu-item - :has(#label-button:hover) + #menu-item:has(#label-button:hover) #label-button-background { border-radius: var(--uui-border-radius); background-color: var( @@ -363,8 +364,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( /** highlight mode, active & selected */ :host([select-mode='highlight'][active][selected]:not([disabled])) - #menu-item - :has(#label-button:hover) + #menu-item:has(#label-button:hover) #label-button-background { border-radius: var(--uui-border-radius); background-color: var( @@ -443,14 +443,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin( } :host([select-mode='highlight'][selectable]:not([disabled])) - #menu-item - :has(#label-button:hover) + #menu-item:has(#label-button:hover) #label-button-background::after { opacity: 0.33; } :host([select-mode='highlight'][selected]:not([disabled])) - #menu-item - :has(#label-button:hover) + #menu-item:has(#label-button:hover) #label-button-background::after { opacity: 0.66; }