Select placeholder (#1842)

# Pull Request

## 🤨 Rationale

- #350

change/@ni-nimble-components-c05b4e64-fa32-40e9-b6a1-d7680dd0dbeb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding placeholder behavior for Select",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/list-option/index.ts

@@ -2,7 +2,7 @@ import {
     DesignSystem,
     ListboxOption as FoundationListboxOption
 } from '@microsoft/fast-foundation';
-import { observable } from '@microsoft/fast-element';
+import { observable, attr } from '@microsoft/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 
@@ -19,6 +19,27 @@ export class ListOption extends FoundationListboxOption {
     /** @internal */
     public contentSlot!: HTMLSlotElement;
 
+    /**
+     * The hidden state of the element.
+     *
+     * @public
+     * @defaultValue - false
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    @attr({ mode: 'boolean' })
+    public override hidden = false;
+
+    /**
+     * @internal
+     * This attribute is required to allow use-cases that offer dynamic filtering
+     * (like the Select) to visually hide options that are filtered out, but still
+     * allow users to use the native 'hidden' attribute without it being affected
+     * by the filtering process.
+     */
+    @attr({ attribute: 'visually-hidden', mode: 'boolean' })
+    public visuallyHidden = false;
+
     /** @internal */
     @observable
     public hasOverflow = false;

packages/nimble-components/src/list-option/styles.ts

@@ -22,17 +22,6 @@ export const styles = css`
         height: ${controlHeight};
     }
 
-    [part='start'] {
-        display: none;
-    }
-
-    .content {
-        padding: 8px 4px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
     :host([aria-selected='true']) {
         box-shadow: none;
         outline: none;
@@ -69,6 +58,21 @@ export const styles = css`
         cursor: default;
     }
 
+    :host([visually-hidden]) {
+        display: none;
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .content {
+        padding: 8px 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     .content[disabled] {
         box-shadow: none;
         outline: none;