@ni/nimble-components 21.8.1 → 21.9.0

package/dist/esm/list-option/index.d.ts

@@ -10,6 +10,23 @@ declare global {
 export declare class ListOption extends FoundationListboxOption {
     /** @internal */
     contentSlot: HTMLSlotElement;
+    /**
+     * The hidden state of the element.
+     *
+     * @public
+     * @defaultValue - false
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * @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.
+     */
+    visuallyHidden: boolean;
     /** @internal */
     hasOverflow: boolean;
     /** @internal */

package/dist/esm/list-option/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 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';
 /**
@@ -9,6 +9,23 @@ import { template } from './template';
 export class ListOption extends FoundationListboxOption {
     constructor() {
         super(...arguments);
+        /**
+         * The hidden state of the element.
+         *
+         * @public
+         * @defaultValue - false
+         * @remarks
+         * HTML Attribute: hidden
+         */
+        this.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.
+         */
+        this.visuallyHidden = false;
         /** @internal */
         this.hasOverflow = false;
     }
@@ -20,6 +37,12 @@ export class ListOption extends FoundationListboxOption {
             .join(' ');
     }
 }
+__decorate([
+    attr({ mode: 'boolean' })
+], ListOption.prototype, "hidden", void 0);
+__decorate([
+    attr({ attribute: 'visually-hidden', mode: 'boolean' })
+], ListOption.prototype, "visuallyHidden", void 0);
 __decorate([
     observable
 ], ListOption.prototype, "hasOverflow", void 0);

package/dist/esm/list-option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAS/B,CAAC;IAPG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;CACJ;AATG;IADC,UAAU;+CACgB;AAW/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAS/B,CAAC;IAPG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;CACJ;AAvBG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAI9B;IADC,UAAU;+CACgB;AAW/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}

package/dist/esm/list-option/styles.js

@@ -12,17 +12,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;
@@ -59,6 +48,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;

package/dist/esm/list-option/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa;;;;;;;;;;;;;;;;;4BAiBH,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;;;;;CAYrC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverSelectedColor,\n    fillHoverColor,\n    bodyFont,\n    bodyDisabledFontColor,\n    controlHeight\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        cursor: pointer;\n        justify-content: left;\n        height: ${controlHeight};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        padding: 8px 4px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host([aria-selected='true']) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([aria-selected='true']:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover):host([disabled]) {\n        box-shadow: none;\n        background-color: transparent;\n    }\n\n    :host(:${focusVisible}) {\n        box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;\n        outline: 1px solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    :host(:active) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .content[disabled] {\n        box-shadow: none;\n        outline: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa;;;;;;4BAMH,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverSelectedColor,\n    fillHoverColor,\n    bodyFont,\n    bodyDisabledFontColor,\n    controlHeight\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        cursor: pointer;\n        justify-content: left;\n        height: ${controlHeight};\n    }\n\n    :host([aria-selected='true']) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([aria-selected='true']:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover):host([disabled]) {\n        box-shadow: none;\n        background-color: transparent;\n    }\n\n    :host(:${focusVisible}) {\n        box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;\n        outline: 1px solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    :host(:active) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    :host([visually-hidden]) {\n        display: none;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        padding: 8px 4px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .content[disabled] {\n        box-shadow: none;\n        outline: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/select/index.d.ts

@@ -30,6 +30,10 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     errorText: string | undefined;
     errorVisible: boolean;
     filterMode: FilterMode;
+    /**
+     * @internal
+     */
+    displayPlaceholder: boolean;
     /**
      * @internal
      */
@@ -83,7 +87,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     /**
      * @internal
      */
-    committedSelectedOption: ListboxOption | undefined;
+    committedSelectedOption?: ListboxOption;
     /**
      * The max height for the listbox when opened.
      *
@@ -103,16 +107,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     connectedCallback(): void;
-    /**
-     * The list of options. This mirrors FAST's override implementation for this
-     * member for the Combobox to support a filtered list in the dropdown.
-     *
-     * @public
-     * @remarks
-     * Overrides `Listbox.options`.
-     */
-    get options(): ListboxOption[];
-    set options(value: ListboxOption[]);
     get value(): string;
     set value(next: string);
     /**
@@ -200,7 +194,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      *
      * @internal
      */
-    selectedIndexChanged(prev: number | undefined, next: number): void;
+    selectedIndexChanged(_: number | undefined, __: number): void;
     /**
      * Synchronize the `aria-disabled` property when the `disabled` property changes.
      *
@@ -216,6 +210,8 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     formResetCallback(): void;
+    selectNextOption(): void;
+    selectPreviousOption(): void;
     protected setSelectedOptions(): void;
     protected focusAndScrollOptionIntoView(): void;
     protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void;
@@ -239,7 +235,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @override
      * @internal
      */
-    protected selectedOptionsChanged(prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
+    protected selectedOptionsChanged(_prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
     /**
      * Sets the selected index to match the first option with the selected attribute, or
      * the first selectable option.
@@ -248,6 +244,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     protected setDefaultSelectedOption(): void;
+    private committedSelectedOptionChanged;
     private setPositioning;
     /**
      * Filter available options by text value.
@@ -274,7 +271,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     private maxHeightChanged;
     private initializeOpenState;
     private updateListboxMaxHeightCssVariable;
-    private updateSelectedIndexFromFilteredSet;
 }
 export declare const selectTag = "nimble-select";
 export {};

package/dist/esm/select/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.ts
 import { attr, html, observable, Observable, volatile } from '@microsoft/fast-element';
-import { DesignSystem, Select as FoundationSelect, SelectPosition, applyMixins, StartEnd, DelegatesARIASelect, Listbox } from '@microsoft/fast-foundation';
+import { DesignSystem, Select as FoundationSelect, SelectPosition, applyMixins, StartEnd, DelegatesARIASelect } from '@microsoft/fast-foundation';
 import { keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from '@microsoft/fast-web-utilities';
 import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
@@ -9,9 +9,13 @@ import { DropdownAppearance } from '../patterns/dropdown/types';
 import { errorTextTemplate } from '../patterns/error/template';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import { template } from './template';
+import { ListOption } from '../list-option';
 import { FilterMode } from './types';
 import { diacriticInsensitiveStringNormalizer } from '../utilities/models/string-normalizers';
 import { FormAssociatedSelect } from './models/select-form-associated';
+const isNimbleListOption = (el) => {
+    return el instanceof ListOption;
+};
 /**
  * A nimble-styled HTML select.
  */
@@ -21,6 +25,10 @@ export class Select extends FormAssociatedSelect {
         this.appearance = DropdownAppearance.underline;
         this.errorVisible = false;
         this.filterMode = FilterMode.none;
+        /**
+         * @internal
+         */
+        this.displayPlaceholder = false;
         /**
          * @internal
          */
@@ -41,10 +49,6 @@ export class Select extends FormAssociatedSelect {
          * @internal
          */
         this.filter = '';
-        /**
-         * @internal
-         */
-        this.committedSelectedOption = undefined;
         /**
          * The max height for the listbox when opened.
          *
@@ -70,24 +74,6 @@ export class Select extends FormAssociatedSelect {
         this.forcedPosition = !!this.positionAttribute;
         this.initializeOpenState();
     }
-    /**
-     * The list of options. This mirrors FAST's override implementation for this
-     * member for the Combobox to support a filtered list in the dropdown.
-     *
-     * @public
-     * @remarks
-     * Overrides `Listbox.options`.
-     */
-    get options() {
-        Observable.track(this, 'options');
-        return this.filteredOptions?.length
-            ? this.filteredOptions
-            : this._options;
-    }
-    set options(value) {
-        this._options = value;
-        Observable.notify(this, 'options');
-    }
     get value() {
         Observable.track(this, 'value');
         return this._value;
@@ -95,8 +81,6 @@ export class Select extends FormAssociatedSelect {
     set value(next) {
         const prev = this._value;
         let newValue = next;
-        // use 'options' here instead of '_options' as 'selectedIndex' may be relative
-        // to filtered set
         if (this.options?.length) {
             const newValueIndex = this.options.findIndex(el => el.value === newValue);
             const prevSelectedValue = this.options[this.selectedIndex]?.value ?? null;
@@ -112,7 +96,7 @@ export class Select extends FormAssociatedSelect {
             this._value = newValue;
             super.valueChanged(prev, newValue);
             if (!this.open) {
-                this.committedSelectedOption = this._options.find(o => o.value === newValue);
+                this.committedSelectedOption = this.options.find(o => o.value === newValue);
             }
             Observable.notify(this, 'value');
             if (this.collapsible) {
@@ -148,14 +132,18 @@ export class Select extends FormAssociatedSelect {
      */
     slottedOptionsChanged(prev, next) {
         const value = this.value;
-        this._options.forEach(o => {
+        this.options.forEach(o => {
             const notifier = Observable.getNotifier(o);
             notifier.unsubscribe(this, 'value');
+            notifier.unsubscribe(this, 'hidden');
+            notifier.unsubscribe(this, 'disabled');
         });
         super.slottedOptionsChanged(prev, next);
-        this._options.forEach(o => {
+        this.options.forEach(o => {
             const notifier = Observable.getNotifier(o);
             notifier.subscribe(this, 'value');
+            notifier.subscribe(this, 'hidden');
+            notifier.subscribe(this, 'disabled');
         });
         this.setProxyOptions();
         this.updateValue();
@@ -177,9 +165,6 @@ export class Select extends FormAssociatedSelect {
         }
         if (this.open) {
             const captured = e.target.closest('option,[role=option]');
-            if (!captured?.disabled) {
-                this.updateSelectedIndexFromFilteredSet();
-            }
             if (captured?.disabled) {
                 return;
             }
@@ -200,9 +185,34 @@ export class Select extends FormAssociatedSelect {
      * @override
      */
     handleChange(source, propertyName) {
-        super.handleChange(source, propertyName);
-        if (propertyName === 'value') {
-            this.updateValue();
+        // don't call super.handleChange so hidden options can be selected programmatically
+        const sourceElement = source;
+        switch (propertyName) {
+            case 'value': {
+                this.updateValue();
+                break;
+            }
+            case 'selected': {
+                if (isNimbleListOption(sourceElement)) {
+                    this.selectedIndex = this.options.indexOf(sourceElement);
+                }
+                this.setSelectedOptions();
+                this.updateDisplayValue();
+                break;
+            }
+            case 'hidden': {
+                if (isNimbleListOption(sourceElement)) {
+                    sourceElement.visuallyHidden = sourceElement.hidden;
+                }
+                this.updateDisplayValue();
+                break;
+            }
+            case 'disabled': {
+                this.updateDisplayValue();
+                break;
+            }
+            default:
+                break;
         }
     }
     /**
@@ -253,6 +263,14 @@ export class Select extends FormAssociatedSelect {
      * @internal
      */
     updateDisplayValue() {
+        if (this.committedSelectedOption?.disabled
+            && this.committedSelectedOption?.hidden
+            && this.committedSelectedOption?.selected) {
+            this.displayPlaceholder = true;
+        }
+        else {
+            this.displayPlaceholder = false;
+        }
         if (this.collapsible) {
             Observable.notify(this, 'displayValue');
         }
@@ -265,14 +283,9 @@ export class Select extends FormAssociatedSelect {
      */
     inputHandler(e) {
         this.filter = this.filterInput?.value ?? '';
-        if (!this.committedSelectedOption) {
-            this.committedSelectedOption = this._options.find(option => option.selected);
-        }
         this.clearSelection();
         this.filterOptions();
-        if (this.filteredOptions.length > 0
-            && this.committedSelectedOption
-            && !this.filteredOptions.includes(this.committedSelectedOption)) {
+        if (this.filteredOptions.length > 0) {
             const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
             if (enabledOptions.length > 0) {
                 enabledOptions[0].selected = true;
@@ -296,7 +309,6 @@ export class Select extends FormAssociatedSelect {
      * @internal
      */
     focusoutHandler(e) {
-        this.updateSelectedIndexFromFilteredSet();
         super.focusoutHandler(e);
         if (!this.open) {
             return true;
@@ -308,6 +320,9 @@ export class Select extends FormAssociatedSelect {
         }
         if (!this.options?.includes(focusTarget)) {
             this.open = false;
+            if (this.selectedIndex === -1) {
+                this.selectedIndex = this.indexWhenOpened;
+            }
             if (this.indexWhenOpened !== this.selectedIndex) {
                 this.updateValue(true);
             }
@@ -349,7 +364,6 @@ export class Select extends FormAssociatedSelect {
                     || this.filteredOptions.every(o => o.disabled)) {
                     return false;
                 }
-                this.updateSelectedIndexFromFilteredSet();
                 this.open = !this.open;
                 if (!this.open) {
                     this.focus();
@@ -357,21 +371,16 @@ export class Select extends FormAssociatedSelect {
                 break;
             }
             case keyEscape: {
-                // clear filter as update to "selectedIndex" will result in processing
-                // "options" and not "_options"
-                this.filter = '';
-                if (this.committedSelectedOption) {
-                    this.clearSelection();
-                    this.selectedIndex = this._options.indexOf(this.committedSelectedOption);
+                if (!this.open) {
+                    break;
                 }
                 if (this.collapsible && this.open) {
                     e.preventDefault();
                     this.open = false;
                 }
-                // reset 'selected' state otherwise the selected state doesn't stick.
-                const selectedOption = this._options[this.selectedIndex];
-                if (selectedOption) {
-                    selectedOption.selected = true;
+                if (this.selectedIndex !== this.indexWhenOpened) {
+                    this.options[this.selectedIndex].selected = false;
+                    this.selectedIndex = this.indexWhenOpened;
                 }
                 this.focus();
                 break;
@@ -401,8 +410,12 @@ export class Select extends FormAssociatedSelect {
      *
      * @internal
      */
-    selectedIndexChanged(prev, next) {
-        super.selectedIndexChanged(prev, next);
+    selectedIndexChanged(_, __) {
+        // Don't call super.selectedIndexChanged as this will disallow disabled options
+        // from being valid initial selected values. Our setDefaultSelectedOption
+        // implementation handles skipping non-selected disabled options for the initial
+        // selected value.
+        this.setSelectedOptions();
         this.updateValue();
     }
     /**
@@ -433,6 +446,26 @@ export class Select extends FormAssociatedSelect {
             this.selectedIndex = 0;
         }
     }
+    selectNextOption() {
+        // don't call super.selectNextOption as that relies on side-effecty
+        // behavior to not select disabled option (which no longer works)
+        for (let i = this.selectedIndex + 1; i < this.options.length; i++) {
+            if (!this.options[i]?.disabled) {
+                this.selectedIndex = i;
+                break;
+            }
+        }
+    }
+    selectPreviousOption() {
+        // don't call super.selectPreviousOption as that relies on side-effecty
+        // behavior to not select disabled option (which no longer works)
+        for (let i = this.selectedIndex - 1; i >= 0; i--) {
+            if (!this.options[i]?.disabled) {
+                this.selectedIndex = i;
+                break;
+            }
+        }
+    }
     // Prevents parent classes from resetting selectedIndex to a positive
     // value while filtering, which can result in a disabled option being
     // selected.
@@ -494,9 +527,14 @@ export class Select extends FormAssociatedSelect {
      * @override
      * @internal
      */
-    selectedOptionsChanged(prev, next) {
-        super.selectedOptionsChanged(prev, next);
+    selectedOptionsChanged(_prev, next) {
+        // don't call super.selectedOptionsChanged so we don't filter out hidden elements
+        // when updating 'selected' state (copied relevant super implementation)
         this.options?.forEach((o, i) => {
+            const notifier = Observable.getNotifier(o);
+            notifier.unsubscribe(this, 'selected');
+            o.selected = next.includes(o);
+            notifier.subscribe(this, 'selected');
             const proxyOption = this.proxy?.options.item(i);
             if (proxyOption) {
                 proxyOption.selected = o.selected;
@@ -512,15 +550,37 @@ export class Select extends FormAssociatedSelect {
      */
     setDefaultSelectedOption() {
         const options = this.options
-            ?? Array.from(this.children).filter(o => Listbox.slottedOptionFilter(o));
-        const selectedIndex = options?.findIndex(el => el.hasAttribute('selected')
-            || el.selected
-            || el.value === this.value);
+            ?? Array.from(this.children).filter(o => isNimbleListOption(o));
+        const optionIsSelected = (option) => {
+            return option.hasAttribute('selected') || option.selected;
+        };
+        const optionIsDisabled = (option) => {
+            return option.hasAttribute('disabled') || option.disabled;
+        };
+        let selectedIndex = -1;
+        let firstValidOptionIndex = -1;
+        for (let i = 0; i < options?.length; i++) {
+            const option = options[i];
+            if (optionIsSelected(option) || option?.value === this.value) {
+                selectedIndex = i;
+            }
+            if (firstValidOptionIndex === -1 && !optionIsDisabled(option)) {
+                firstValidOptionIndex = i;
+            }
+        }
         if (selectedIndex !== -1) {
             this.selectedIndex = selectedIndex;
-            return;
         }
-        this.selectedIndex = 0;
+        else if (firstValidOptionIndex !== -1) {
+            this.selectedIndex = firstValidOptionIndex;
+        }
+        else {
+            this.selectedIndex = 0;
+        }
+        this.committedSelectedOption = options[this.selectedIndex];
+    }
+    committedSelectedOptionChanged() {
+        this.updateDisplayValue();
     }
     setPositioning() {
         if (!this.$fastController.isConnected) {
@@ -556,15 +616,24 @@ export class Select extends FormAssociatedSelect {
     filterOptions() {
         const filter = this.filter.toLowerCase();
         if (filter) {
-            this.filteredOptions = this._options.filter(option => {
-                return diacriticInsensitiveStringNormalizer(option.text).includes(diacriticInsensitiveStringNormalizer(filter));
+            this.filteredOptions = this.options.filter(option => {
+                const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
+                return (!option.hidden
+                    && diacriticInsensitiveStringNormalizer(option.text).includes(normalizedFilter));
             });
         }
         else {
-            this.filteredOptions = this._options;
+            this.filteredOptions = this.options.filter(option => !option.hidden);
         }
-        this._options.forEach(o => {
-            o.hidden = !this.filteredOptions.includes(o);
+        this.options.forEach(o => {
+            if (isNimbleListOption(o)) {
+                if (!this.filteredOptions.includes(o)) {
+                    o.visuallyHidden = true;
+                }
+                else {
+                    o.visuallyHidden = false;
+                }
+            }
         });
     }
     /**
@@ -622,7 +691,7 @@ export class Select extends FormAssociatedSelect {
             this.ariaControls = '';
             return;
         }
-        this.committedSelectedOption = this._options[this.selectedIndex];
+        this.committedSelectedOption = this.options[this.selectedIndex];
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';
         this.setPositioning();
@@ -633,24 +702,6 @@ export class Select extends FormAssociatedSelect {
             this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
         }
     }
-    updateSelectedIndexFromFilteredSet() {
-        const selectedItem = this.filteredOptions.length > 0
-            ? this.options[this.selectedIndex]
-                ?? this.committedSelectedOption
-            : this.committedSelectedOption;
-        if (!selectedItem) {
-            return;
-        }
-        // Clear filter so any logic resolving against 'this.options' resolves against all options,
-        // since selectedIndex should be relative to entire set.
-        this.filter = '';
-        // translate selectedIndex for filtered list to selectedIndex for all items
-        this.selectedIndex = this._options.indexOf(selectedItem);
-        // force selected to true again if the selection hasn't actually changed
-        if (selectedItem === this.committedSelectedOption) {
-            selectedItem.selected = true;
-        }
-    }
 }
 __decorate([
     attr
@@ -667,6 +718,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'filter-mode' })
 ], Select.prototype, "filterMode", void 0);
+__decorate([
+    observable
+], Select.prototype, "displayPlaceholder", void 0);
 __decorate([
     attr({ attribute: 'open', mode: 'boolean' })
 ], Select.prototype, "open", void 0);
@@ -703,6 +757,9 @@ __decorate([
 __decorate([
     volatile
 ], Select.prototype, "collapsible", null);
+__decorate([
+    volatile
+], Select.prototype, "displayValue", null);
 const nimbleSelect = Select.compose({
     baseName: 'select',
     baseClass: FoundationSelect,