WIP

apps/docs/content/_data/components.json

@@ -166,6 +166,11 @@
 		"title": "Option",
 		"markdown": "./libs/components/src/lib/option/README.md"
 	},
+	{
+		"title": "Searchable Select",
+		"status": "alpha",
+		"markdown": "./libs/components/src/lib/searchable-select/README.md"
+	},
 	{
 		"title": "Switch",
 		"markdown": "./libs/components/src/lib/switch/README.md"

libs/components/src/lib/components.ts

@@ -40,6 +40,7 @@ export * from './progress/definition';
 export * from './radio-group/definition';
 export * from './radio/definition';
 export * from './range-slider/definition';
+export * from './searchable-select/definition';
 export * from './select/definition';
 export * from './selectable-box/definition';
 export * from './side-drawer/definition';

libs/components/src/lib/option/option.scss

@@ -86,3 +86,8 @@ slot[name='icon'] {
 		color: var(#{constants.$vvd-color-neutral-600});
 	}
 }
+
+.checkmark {
+	font-size: 20px;
+	margin-left: auto;
+}

libs/components/src/lib/option/option.template.ts

@@ -1,5 +1,5 @@
-import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
@@ -9,13 +9,21 @@ import {
 	affixIconTemplateFactory,
 	IconWrapper,
 } from '../../shared/patterns/affix';
+import { Icon } from '../icon/icon';
 import type { ListboxOption } from './option';
 
-const getClasses = ({ icon, disabled, selected, checked }: ListboxOption) =>
+const getClasses = ({
+	icon,
+	disabled,
+	selected,
+	forceHover,
+	checked,
+}: ListboxOption) =>
 	classNames(
 		'base',
 		['disabled', disabled],
 		['selected', Boolean(selected)],
+		['hover', Boolean(forceHover)],
 		['active', Boolean(checked)],
 		['icon', Boolean(icon)]
 	);
@@ -25,6 +33,7 @@ export const ListboxOptionTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<ListboxOption> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
+	const iconTag = context.tagFor(Icon);
 
 	return html`
 		<template
@@ -38,6 +47,10 @@ export const ListboxOptionTemplate: (
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 				${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
+				${when(
+					(x) => x.selected,
+					html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+				)}
 			</div>
 		</template>
 	`;

libs/components/src/lib/option/option.ts

@@ -2,7 +2,7 @@ import {
 	applyMixins,
 	ListboxOption as FoundationListboxOption,
 } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
 /**
@@ -42,6 +42,8 @@ export class ListboxOption extends FoundationListboxOption {
 		this._label = value;
 	}
 	// #endregion overrides
+
+	@observable forceHover = false;
 }
 
 export interface ListboxOption extends AffixIconWithTrailing {}