diff --git a/change/@fluentui-web-components-2020-11-19-21-47-55-users-jes-select-styling.json b/change/@fluentui-web-components-2020-11-19-21-47-55-users-jes-select-styling.json new file mode 100644 index 0000000000000..109e5d7a7a32d --- /dev/null +++ b/change/@fluentui-web-components-2020-11-19-21-47-55-users-jes-select-styling.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "feat: add select and related styles", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-11-20T05:47:55.207Z" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 00f60955ae0b7..6ef90ac4beb5c 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -21,10 +21,13 @@ import { Direction } from '@microsoft/fast-web-utilities'; import { Divider } from '@microsoft/fast-foundation'; import { ElementStyles } from '@microsoft/fast-element'; import { Flipper } from '@microsoft/fast-foundation'; +import { Listbox } from '@microsoft/fast-foundation'; +import { ListboxOption } from '@microsoft/fast-foundation'; import { Menu } from '@microsoft/fast-foundation'; import { MenuItem } from '@microsoft/fast-foundation'; import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; +import { Select } from '@microsoft/fast-foundation'; import { Skeleton } from '@microsoft/fast-foundation'; import { Slider } from '@microsoft/fast-foundation'; import { SliderLabel } from '@microsoft/fast-foundation'; @@ -363,6 +366,10 @@ export class FluentDivider extends Divider { export class FluentFlipper extends Flipper { } +// @public +export class FluentListbox extends Listbox { +} + // @public export class FluentMenu extends Menu { } @@ -371,6 +378,10 @@ export class FluentMenu extends Menu { export class FluentMenuItem extends MenuItem { } +// @public +export class FluentOption extends ListboxOption { +} + // @public export class FluentProgress extends BaseProgress { } @@ -387,6 +398,10 @@ export class FluentRadio extends Radio { export class FluentRadioGroup extends RadioGroup { } +// @public +export class FluentSelect extends Select { +} + // @public export class FluentSkeleton extends Skeleton { } @@ -460,6 +475,9 @@ export const inlineStartBehavior: CSSCustomPropertyBehavior; // @internal (undocumented) export const LightweightButtonStyles: ElementStyles; +// @public +export const ListboxStyles: import("@microsoft/fast-element").ElementStyles; + // @public export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles; @@ -592,6 +610,9 @@ export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior; // @public export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior; +// @public +export const OptionStyles: import("@microsoft/fast-element").ElementStyles; + // Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -612,6 +633,9 @@ export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles; // @public export const RadioStyles: import("@microsoft/fast-element").ElementStyles; +// @public +export const SelectStyles: import("@microsoft/fast-element").ElementStyles; + // @public export const SkeletonStyles: import("@microsoft/fast-element").ElementStyles; diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index a2d2af6acb221..3ce3c12729d77 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -8,11 +8,14 @@ export * from './design-system-provider/'; export * from './dialog/'; export * from './divider/'; export * from './flipper/'; +export * from './listbox'; +export * from './listbox-option'; export * from './menu/'; export * from './menu-item/'; export * from './progress/'; export * from './radio/'; export * from './radio-group/'; +export * from './select'; export * from './skeleton/'; export * from './slider/'; export * from './slider-label/'; diff --git a/packages/web-components/src/listbox-option/fixtures/base.html b/packages/web-components/src/listbox-option/fixtures/base.html new file mode 100644 index 0000000000000..03bec40dc2337 --- /dev/null +++ b/packages/web-components/src/listbox-option/fixtures/base.html @@ -0,0 +1,35 @@ + +

Option

+ +

Defaults

+ + Text content is the value when the value attribute is absent. + + + + Even when the value attribute and text are both present, this text should be displayed. + + + + +

Disabled

+ This option is disabled. + +

Selected

+ This option is selected by default. + +

Slots

+ + + + + + + + This option has an icon in its start and end slots. + + diff --git a/packages/web-components/src/listbox-option/index.ts b/packages/web-components/src/listbox-option/index.ts new file mode 100644 index 0000000000000..9af12489f6f54 --- /dev/null +++ b/packages/web-components/src/listbox-option/index.ts @@ -0,0 +1,25 @@ +import { customElement } from '@microsoft/fast-element'; +import { ListboxOption, ListboxOptionTemplate as template } from '@microsoft/fast-foundation'; +import { OptionStyles as styles } from './listbox-option.styles'; + +/** + * The Fluent ListboxOption Element. Implements {@link @microsoft/fast-foundation#ListboxOption}, + * {@link @microsoft/fast-foundation#ListboxOptionTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +@customElement({ + name: 'fluent-option', + template, + styles, +}) +export class FluentOption extends ListboxOption {} + +/** + * Styles for Option + * @public + */ +export const OptionStyles = styles; diff --git a/packages/web-components/src/listbox-option/listbox-option.stories.ts b/packages/web-components/src/listbox-option/listbox-option.stories.ts new file mode 100644 index 0000000000000..0402ced0d478e --- /dev/null +++ b/packages/web-components/src/listbox-option/listbox-option.stories.ts @@ -0,0 +1,12 @@ +import { FluentDesignSystemProvider } from '../design-system-provider'; +import ListboxOptionTemplate from './fixtures/base.html'; +import { FluentOption } from './'; + +FluentOption; +FluentDesignSystemProvider; + +export default { + title: 'ListboxOption', +}; + +export const ListboxOption = (): string => ListboxOptionTemplate; diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts new file mode 100644 index 0000000000000..4924fb8824617 --- /dev/null +++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts @@ -0,0 +1,142 @@ +import { css } from '@microsoft/fast-element'; +import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { SystemColors } from '@microsoft/fast-web-utilities'; +import { + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillSelectedBehavior, + accentForegroundCutRestBehavior, + neutralFillHoverBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFillStealthSelectedBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralLayerL1Behavior, +} from '../styles'; +import { heightNumber } from '../styles/size'; + +export const OptionStyles = css` + ${display('inline-flex')} :host { + font-family: var(--body-font); + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--focus-outline-width) * 1px) solid transparent; + box-sizing: border-box; + color: ${neutralForegroundRestBehavior.var}; + cursor: pointer; + fill: currentcolor; + font-size: var(--type-ramp-base-font-size); + height: calc(${heightNumber} * 1px); + line-height: var(--type-ramp-base-line-height); + margin: 0 calc(var(--design-unit) * 1px); + outline: none; + overflow: hidden; + align-items: center; + padding: 0 calc(var(--design-unit) * 2.25px); + user-select: none; + white-space: nowrap; + } + + :host(:${focusVisible}) { + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var}; + border-color: ${neutralFocusBehavior.var}; + background: ${accentFillHoverBehavior.var}; + color: ${accentForegroundCutRestBehavior.var}; + } + + :host([aria-selected="true"]) { + background: ${accentFillHoverBehavior.var}; + color: ${accentForegroundCutRestBehavior.var}; + } + + :host(:active) { + background: ${accentFillActiveBehavior.var}; + color: ${accentForegroundCutRestBehavior.var}; + } + + :host(:not([aria-selected="true"]):hover) { + background: ${neutralFillHoverBehavior.var}; + color: ${neutralForegroundHoverBehavior.var}; + } + + :host(:not([aria-selected="true"]):active) { + background: ${neutralFillHoverBehavior.var}; + color: ${neutralForegroundHoverBehavior.var}; + } + + :host([disabled]) { + cursor: ${disabledCursor}; + opacity: var(--disabled-opacity); + } + + :host([disabled]:hover) { + background-color: inherit; + } + + .content { + grid-column-start: 2; + justify-self: start; + overflow: hidden; + text-overflow: ellipsis; + } + + .start, + .end, + ::slotted(svg) { + display: flex; + } + + ::slotted(svg) { + ${/* Glyph size and margin-left is temporary - replace when adaptive typography is figured out */ ''} + height: calc(var(--design-unit) * 4px); + width: calc(var(--design-unit) * 4px); + } + + ::slotted([slot="end"]) { + margin-inline-start: 1ch; + } + + ::slotted([slot="start"]) { + margin-inline-end: 1ch; + } + +`.withBehaviors( + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillSelectedBehavior, + accentForegroundCutRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + border-color: transparent; + color: ${SystemColors.ButtonText}; + forced-color-adjust: none; + } + + :host(:not([aria-selected='true']):hover), + :host([aria-selected='true']) { + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + + :host([disabled]), + :host([disabled]:not([aria-selected='true']):hover) { + background: ${SystemColors.Canvas}; + color: ${SystemColors.GrayText}; + fill: currentcolor; + opacity: 1; + } + `, + ), + neutralFillHoverBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFillStealthSelectedBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralLayerL1Behavior, +); diff --git a/packages/web-components/src/listbox/fixtures/base.html b/packages/web-components/src/listbox/fixtures/base.html new file mode 100644 index 0000000000000..b8afa30a85d3e --- /dev/null +++ b/packages/web-components/src/listbox/fixtures/base.html @@ -0,0 +1,64 @@ + +

Listbox

+

Default

+ + This option has no value + This option is disabled + This option has a value + This option is selected by default + + +

Long list

+ + Alabama + Alaska + Arizona + Arkansas + California + Colorado + Connecticut + Delaware + Florida + Georgia + Hawaii + Idaho + Illinois + Indiana + Iowa + Kansas + Kentucky + Louisiana + Maine + Maryland + Massachussets + Michigain + Minnesota + Mississippi + Missouri + Montana + Nebraska + Nevada + New Hampshire + New Jersey + New Mexico + New York + North Carolina + North Dakota + Ohio + Oklahoma + Oregon + Pennsylvania + Rhode Island + South Carolina + South Dakota + Texas + Tennessee + Utah + Vermont + Virginia + Washington + Wisconsin + West Virginia + Wyoming + + diff --git a/packages/web-components/src/listbox/index.ts b/packages/web-components/src/listbox/index.ts new file mode 100644 index 0000000000000..7b75b3de96baa --- /dev/null +++ b/packages/web-components/src/listbox/index.ts @@ -0,0 +1,25 @@ +import { customElement } from '@microsoft/fast-element'; +import { Listbox, ListboxTemplate as template } from '@microsoft/fast-foundation'; +import { ListboxStyles as styles } from './listbox.styles'; + +/** + * The Fluent Listbox Element. Implements {@link @microsoft/fast-foundation#Listbox}, + * {@link @microsoft/fast-foundation#ListboxTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +@customElement({ + name: 'fluent-listbox', + template, + styles, +}) +export class FluentListbox extends Listbox {} + +/** + * Styles for Listbox + * @public + */ +export const ListboxStyles = styles; diff --git a/packages/web-components/src/listbox/listbox.stories.ts b/packages/web-components/src/listbox/listbox.stories.ts new file mode 100644 index 0000000000000..52a73d9afe023 --- /dev/null +++ b/packages/web-components/src/listbox/listbox.stories.ts @@ -0,0 +1,12 @@ +import { FluentDesignSystemProvider } from '../design-system-provider'; +import ListboxTemplate from './fixtures/base.html'; +import { FluentListbox } from './'; + +FluentListbox; +FluentDesignSystemProvider; + +export default { + title: 'Listbox', +}; + +export const Listbox = (): string => ListboxTemplate; diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts new file mode 100644 index 0000000000000..be825f20507bd --- /dev/null +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -0,0 +1,56 @@ +import { css } from '@microsoft/fast-element'; +import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { SystemColors } from '@microsoft/fast-web-utilities'; +import { + neutralFocusBehavior, + neutralLayerFloatingBehavior, + neutralOutlineFocusBehavior, + neutralOutlineRestBehavior, +} from '../styles'; + +export const ListboxStyles = css` + ${display('inline-flex')} :host { + background: ${neutralLayerFloatingBehavior.var}; + border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + box-sizing: border-box; + flex-direction: column; + padding: calc(var(--design-unit) * 1px) 0; + } + + :host(:focus-within:not([disabled])) { + border-color: ${neutralFocusBehavior.var}; + box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; + } +`.withBehaviors( + forcedColorsStylesheetBehavior( + css` + :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.ButtonText}; + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText}; + color: ${SystemColors.HighlightText}; + fill: currentcolor; + } + + :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.ButtonText}; + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText}; + color: ${SystemColors.HighlightText}; + fill: currentcolor; + } + + ::slotted([role="option"]:not([aria-selected="true"]):not([disabled]):hover) { + forced-color-adjust: none; + color: ${SystemColors.ButtonText}; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.Highlight}; + box-shadow: none; + } + `, + ), + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior, + neutralOutlineFocusBehavior, +); diff --git a/packages/web-components/src/select/fixtures/base.html b/packages/web-components/src/select/fixtures/base.html new file mode 100644 index 0000000000000..0af678840be0c --- /dev/null +++ b/packages/web-components/src/select/fixtures/base.html @@ -0,0 +1,117 @@ + +

Select

+ +

Default

+ + This option has no value + This option is disabled + This option has a value + This option is selected by default + + +

With Label

+ + + Small + Medium + Large + Extra Large + + +

Disabled

+ + This option is not selectable + + + + This option is disabled + This option is not disabled + This option is not disabled + + +

Selected Option

+ + Option One + Option Two + Option Three + Option Four + + +

Custom Indicator

+ + + + + Option One + Option Two + Option Three + Option Four + + +

Long list

+ + Alabama + Alaska + Arizona + Arkansas + California + Colorado + Connecticut + Delaware + Florida + Georgia + Hawaii + Idaho + Illinois + Indiana + Iowa + Kansas + Kentucky + Louisiana + Maine + Maryland + Massachussets + Michigain + Minnesota + Mississippi + Missouri + Montana + Nebraska + Nevada + New Hampshire + New Jersey + New Mexico + New York + North Carolina + North Dakota + Ohio + Oklahoma + Oregon + Pennsylvania + Rhode Island + South Carolina + South Dakota + Texas + Tennessee + Utah + Vermont + Virginia + Washington + Wisconsin + West Virginia + Wyoming + + +

Forced positions

+ + Position forced above + Option Two + + + + Position forced below + Option Two + + diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts new file mode 100644 index 0000000000000..f331dea6daf74 --- /dev/null +++ b/packages/web-components/src/select/index.ts @@ -0,0 +1,25 @@ +import { customElement } from '@microsoft/fast-element'; +import { Select, SelectTemplate as template } from '@microsoft/fast-foundation'; +import { SelectStyles as styles } from './select.styles'; + +/** + * The Fluent Select Element. Implements {@link @microsoft/fast-foundation#Select}, + * {@link @microsoft/fast-foundation#SelectTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +@customElement({ + name: 'fluent-select', + template, + styles, +}) +export class FluentSelect extends Select {} + +/** + * Styles for Select + * @public + */ +export const SelectStyles = styles; diff --git a/packages/web-components/src/select/select.stories.ts b/packages/web-components/src/select/select.stories.ts new file mode 100644 index 0000000000000..03d4c58e5cd91 --- /dev/null +++ b/packages/web-components/src/select/select.stories.ts @@ -0,0 +1,12 @@ +import { FluentDesignSystemProvider } from '../design-system-provider'; +import SelectTemplate from './fixtures/base.html'; +import { FluentSelect } from './'; + +FluentSelect; +FluentDesignSystemProvider; + +export default { + title: 'Select', +}; + +export const Select = (): string => SelectTemplate; diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts new file mode 100644 index 0000000000000..950632c0ecbeb --- /dev/null +++ b/packages/web-components/src/select/select.styles.ts @@ -0,0 +1,252 @@ +import { css } from '@microsoft/fast-element'; +import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { SystemColors } from '@microsoft/fast-web-utilities'; +import { elevation } from '../styles/elevation'; +import { + accentFillHoverBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralLayerFloatingBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from '../styles'; +import { heightNumber } from '../styles/size'; + +export const SelectStyles = css` + ${display('inline-flex')} :host { + --elevation: 14; + background: ${neutralFillInputRestBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; + color: ${neutralForegroundRestBehavior.var}; + contain: contents; + position: relative; + user-select: none; + min-width: 250px; + } + + .listbox { + ${elevation} + background: ${neutralLayerFloatingBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + left: 0; + max-height: calc(var(--max-height) - (${heightNumber} * 1px)); + padding: calc(var(--design-unit) * 1px) 0; + overflow-y: auto; + position: absolute; + width: 100%; + z-index: 1; + margin: 1px 0; + } + + .listbox[hidden] { + display: none; + } + + .control { + align-items: center; + box-sizing: border-box; + cursor: pointer; + display: flex; + font-size: var(--type-ramp-base-font-size); + font: inherit; + line-height: var(--type-ramp-base-line-height); + min-height: calc(${heightNumber} * 1px); + padding: 0 calc(var(--design-unit) * 2.25px); + width: 100%; + } + + :host(:not([disabled]):hover) { + background: ${neutralFillInputHoverBehavior.var}; + border-color: ${neutralOutlineHoverBehavior.var}; + } + + :host(:focus) { + outline: none; + } + + :host(:${focusVisible}) { + border-color: ${neutralFocusBehavior.var}; + outline: none; + box-shadow: + 0 0 0 1px inset ${neutralFocusBehavior.var}; + } + + :host([open]:${focusVisible}) { + border-color: ${neutralOutlineRestBehavior.var}; + outline: none; + box-shadow: none; + } + + :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) { + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var}; + border-color: ${neutralFocusBehavior.var}; + background: ${accentFillHoverBehavior.var}; + color: ${accentForegroundCutRestBehavior.var}; + } + + :host([disabled]) { + cursor: ${disabledCursor}; + opacity: var(--disabled-opacity); + } + + :host([disabled]) .control { + cursor: ${disabledCursor}; + } + + :host([disabled]:hover) { + background: ${neutralFillStealthRestBehavior.var}; + color: ${neutralForegroundRestBehavior.var}; + fill: currentcolor; + } + + :host(:not([disabled])) .control:active { + background: ${neutralFillInputActiveBehavior.var}; + border-color: ${neutralOutlineActiveBehavior.var}; + } + + :host([open][position="above"]) .listbox, + :host([open][position="below"]) .control { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + :host([open][position="above"]) .control, + :host([open][position="below"]) .listbox { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + :host([open][position="above"]) .listbox { + border-bottom: 0; + bottom: calc(${heightNumber} * 1px); + } + + :host([open][position="below"]) .listbox { + border-top: 0; + top: calc(${heightNumber} * 1px); + } + + .selected-value { + font-family: var(--body-font); + flex: 1 1 auto; + text-align: start; + } + + .indicator { + flex: 0 0 auto; + margin-inline-start: 1em; + } + + slot[name="listbox"] { + display: none; + width: 100%; + } + + :host([open]) slot[name="listbox"] { + display: flex; + position: absolute; + ${elevation} + } + + .end { + margin-inline-start: auto; + } + + .start, + .end, + .indicator, + ::slotted(svg) { + ${`` /* Glyph size is temporary - replace when glyph-size var is added */} + fill: currentcolor; + height: 1em; + min-height: calc(var(--design-unit) * 4px); + min-width: calc(var(--design-unit) * 4px); + width: 1em; + } + + ::slotted([role="option"]) { + flex: 0 0 auto; + } + +`.withBehaviors( + accentFillHoverBehavior, + accentForegroundCutRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + border-color: ${SystemColors.GrayText}; + background-color: ${SystemColors.ButtonFace}; + color: ${SystemColors.GrayText}; + opacity: 1; + forced-color-adjust: none; + } + + :host([disabled]:hover) { + background: ${SystemColors.ButtonFace}; + } + + :host([disabled]) .control { + color: ${SystemColors.GrayText}; + border-color: ${SystemColors.GrayText}; + } + + :host(:not([disabled]):hover) { + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.Highlight}; + } + + :host(:${focusVisible}) { + forced-color-adjust: none; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px inset ${SystemColors.Highlight}; + color: ${SystemColors.ButtonText}; + fill: currentcolor; + } + + :host([open]) .listbox { + background: ${SystemColors.ButtonFace}; + border: 1px solid ${SystemColors.ButtonText}; + } + + :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.ButtonText}; + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText}; + color: ${SystemColors.HighlightText}; + fill: currentcolor; + } + + ::slotted([role="option"]:not([aria-selected="true"]):not([disabled]):hover) { + forced-color-adjust: none; + color: ${SystemColors.ButtonText}; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.Highlight}; + box-shadow: none; + } + `, + ), + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior, +);