Updates menu component styles

src/webviews/apps/shared/components/menu/index.ts

@@ -1,3 +1,4 @@
 export * from './menu-list';
 export * from './menu-item';
 export * from './menu-label';
+export * from './menu-divider';

src/webviews/apps/shared/components/menu/menu-divider.ts

@@ -0,0 +1,18 @@
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { elementBase } from '../styles/base';
+
+const template = html<MenuDivider>``;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: block;
+		height: 0;
+		margin: 0.6rem;
+		border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
+	}
+`;
+
+@customElement({ name: 'menu-divider', template: template, styles: styles })
+export class MenuDivider extends FASTElement {}

src/webviews/apps/shared/components/menu/menu-item.ts

@@ -1,8 +1,8 @@
-import { attr, css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { attr, css, customElement, FASTElement, html, volatile } from '@microsoft/fast-element';
 import { elementBase } from '../styles/base';
 
 const template = html<MenuItem>`
-	<template role="option" tabindex="${x => (x.disabled ? '-1' : '0')}" ?disabled="${x => x.disabled}">
+	<template tabindex="${x => (x.isInteractive ? '0' : null)}" ?disabled="${x => x.disabled}">
 		<slot></slot>
 	</template>
 `;
@@ -11,6 +11,7 @@ const styles = css`
 	${elementBase}
 
 	:host {
+		display: block;
 		font-family: inherit;
 		border: none;
 		padding: 0 0.6rem;
@@ -18,13 +19,11 @@ const styles = css`
 		color: var(--vscode-menu-foreground);
 		background-color: var(--vscode-menu-background);
 		text-align: left;
-		display: flex;
-		align-items: center;
 		height: auto;
 		line-height: 2.2rem;
 	}
 
-	:host(:hover) {
+	:host([role='option']:hover) {
 		color: var(--vscode-menu-selectionForeground);
 		background-color: var(--vscode-menu-selectionBackground);
 	}
@@ -46,4 +45,16 @@ const styles = css`
 export class MenuItem extends FASTElement {
 	@attr({ mode: 'boolean' })
 	disabled = false;
+
+	@attr
+	override role: ARIAMixin['role'] = 'option';
+
+	@volatile
+	get isInteractive() {
+		if (this.disabled) {
+			return false;
+		}
+
+		return this.role === 'option';
+	}
 }

src/webviews/apps/shared/components/menu/menu-label.ts

@@ -11,12 +11,15 @@ const styles = css`
 	${elementBase}
 
 	:host {
+		display: block;
 		text-transform: uppercase;
 		font-size: 0.84em;
 		line-height: 2.2rem;
 		padding-left: 0.6rem;
 		padding-right: 0.6rem;
 		margin: 0px;
+		color: var(--vscode-menu-foreground);
+		opacity: 0.6;
 	}
 `;
 

src/webviews/apps/shared/components/menu/react.tsx

@@ -1,6 +1,12 @@
 import { reactWrapper } from '../helpers/react-wrapper';
-import { MenuItem as MenuItemComponent, MenuLabel as MenuLabelComponent, MenuList as MenuListComponent } from './index';
+import {
+	MenuDivider as MenuDividerComponent,
+	MenuItem as MenuItemComponent,
+	MenuLabel as MenuLabelComponent,
+	MenuList as MenuListComponent,
+} from './index';
 
+export const MenuDivider = reactWrapper(MenuDividerComponent);
 export const MenuItem = reactWrapper(MenuItemComponent);
 export const MenuLabel = reactWrapper(MenuLabelComponent);
 export const MenuList = reactWrapper(MenuListComponent);

src/webviews/apps/shared/components/overlays/pop-menu/pop-menu.ts

@@ -57,7 +57,7 @@ export class PopMenu extends FASTElement {
 		return this.contentNodes![0];
 	}
 
-	isTrackingOutside = false;
+	private isTrackingOutside = false;
 
 	override connectedCallback() {
 		super.connectedCallback();
@@ -71,7 +71,9 @@ export class PopMenu extends FASTElement {
 		this.disposeTrackOutside();
 	}
 
-	handleToggle() {
+	handleToggle(e: MouseEvent) {
+		if (!e.composedPath().includes(this.triggerNode!)) return;
+
 		this.open = !this.open;
 		this.updateToggle();
 	}

src/webviews/apps/shared/components/search/search-input.ts

@@ -344,6 +344,7 @@ const styles = css`
 		padding-left: 0.6rem;
 		padding-right: 0.6rem;
 		margin: 0;
+		opacity: 0.6;
 	}
 
 	.helper-button {