Custom style for listbox focus

packages/components/src/listbox/index.ts

@@ -5,7 +5,7 @@ import {
   ListboxElement,
   listboxTemplate as template
 } from '@microsoft/fast-foundation';
-import { listboxStyles as styles } from '@microsoft/fast-components';
+import { listboxStyles as styles } from './listbox.styles';
 
 /**
  * The Jupyter listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}

packages/components/src/listbox/listbox.styles.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Jupyter Development Team.
+// Copyright (c) Microsoft Corporation.
+// Distributed under the terms of the Modified BSD License.
+
+import type { ElementStyles } from '@microsoft/fast-element';
+import { css } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import {
+  disabledCursor,
+  display,
+  focusVisible,
+  forcedColorsStylesheetBehavior,
+  ListboxElement,
+  ListboxOption
+} from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import {
+  controlCornerRadius,
+  designUnit,
+  disabledOpacity,
+  fillColor,
+  focusStrokeOuter,
+  focusStrokeWidth,
+  neutralStrokeRest,
+  strokeWidth
+} from '@microsoft/fast-components';
+import { heightNumber } from '../styles/size';
+
+/**
+ * Styles for Listbox
+ * @public
+ */
+export const listboxStyles: FoundationElementTemplate<ElementStyles> = (
+  context,
+  definition
+) => {
+  const ListboxOptionTag = context.tagFor(ListboxOption);
+  const hostContext =
+    context.name === context.tagFor(ListboxElement) ? '' : '.listbox';
+
+  // The expression interpolations present in this block cause Prettier to generate
+  // various formatting bugs.
+  // prettier-ignore
+  return css`
+        ${!hostContext ? display('inline-flex') : ''}
+
+        :host ${hostContext} {
+            background: ${fillColor};
+            border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
+            border-radius: calc(${controlCornerRadius} * 1px);
+            box-sizing: border-box;
+            flex-direction: column;
+            padding: calc(${designUnit} * 1px) 0;
+        }
+
+        ${!hostContext ? css`
+            :host(:${focusVisible}:not([disabled])) {
+                outline: none;
+            }
+
+            :host(:focus-within:not([disabled])) {
+                border-color: ${focusStrokeOuter};
+                box-shadow: 0 0 0
+                    calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+                    ${focusStrokeOuter} inset;
+            }
+
+            :host([disabled]) ::slotted(*) {
+                cursor: ${disabledCursor};
+                opacity: ${disabledOpacity};
+                pointer-events: none;
+            }
+        ` : ''}
+
+        ${hostContext || ':host([size])'} {
+            max-height: calc(
+                (var(--size) * ${heightNumber} + (${designUnit} * ${strokeWidth} * 2)) * 1px
+            );
+            overflow-y: auto;
+        }
+
+        :host([size="0"]) ${hostContext} {
+            max-height: none;
+        }
+    `.withBehaviors(
+        forcedColorsStylesheetBehavior(
+            css`
+                :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected="true"]),
+                :host([multiple]:${focusVisible}) ::slotted(${ListboxOptionTag}[aria-checked="true"]) {
+                    border-color: ${SystemColors.ButtonText};
+                    box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
+                }
+
+                :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected="true"]) {
+                    background: ${SystemColors.Highlight};
+                    color: ${SystemColors.HighlightText};
+                    fill: currentcolor;
+                }
+
+                ::slotted(${ListboxOptionTag}[aria-selected="true"]:not([aria-checked="true"])) {
+                    background: ${SystemColors.Highlight};
+                    border-color: ${SystemColors.HighlightText};
+                    color: ${SystemColors.HighlightText};
+                }
+            `
+        )
+    );
+};