@ni/nimble-components 21.4.0 → 21.5.0

package/dist/all-components-bundle.js

@@ -12570,12 +12570,12 @@
    *
    * @internal
    */
-  class FormAssociatedSelect extends FormAssociated(_Select) {
+  let FormAssociatedSelect$1 = class FormAssociatedSelect extends FormAssociated(_Select) {
       constructor() {
           super(...arguments);
           this.proxy = document.createElement("select");
       }
-  }
+  };
 
   /**
    * A Select Custom HTML Element.
@@ -12596,7 +12596,7 @@
    *
    * @public
    */
-  let Select$1 = class Select extends FormAssociatedSelect {
+  let Select$2 = class Select extends FormAssociatedSelect$1 {
       constructor() {
           super(...arguments);
           /**
@@ -13031,22 +13031,22 @@
   };
   __decorate([
       attr({ attribute: "open", mode: "boolean" })
-  ], Select$1.prototype, "open", void 0);
+  ], Select$2.prototype, "open", void 0);
   __decorate([
       volatile
-  ], Select$1.prototype, "collapsible", null);
+  ], Select$2.prototype, "collapsible", null);
   __decorate([
       observable
-  ], Select$1.prototype, "control", void 0);
+  ], Select$2.prototype, "control", void 0);
   __decorate([
       attr({ attribute: "position" })
-  ], Select$1.prototype, "positionAttribute", void 0);
+  ], Select$2.prototype, "positionAttribute", void 0);
   __decorate([
       observable
-  ], Select$1.prototype, "position", void 0);
+  ], Select$2.prototype, "position", void 0);
   __decorate([
       observable
-  ], Select$1.prototype, "maxHeight", void 0);
+  ], Select$2.prototype, "maxHeight", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA select role.
    *
@@ -13058,7 +13058,7 @@
       observable
   ], DelegatesARIASelect.prototype, "ariaControls", void 0);
   applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
-  applyMixins(Select$1, StartEnd, DelegatesARIASelect);
+  applyMixins(Select$2, StartEnd, DelegatesARIASelect);
 
   class _Switch extends FoundationElement {
   }
@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 14 Feb 2024 20:48:02 GMT
+   * Generated on Thu, 15 Feb 2024 20:33:21 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -18576,10 +18576,15 @@
 
   const styles$P = css `
     :host {
-        contain: layout;
+        /* Avoid using the 'display' helper to customize hidden behavior */
         display: block;
+        contain: layout;
         z-index: ${ZIndexLevels.zIndex1000};
     }
+
+    :host([hidden]) {
+        visibility: hidden;
+    }
 `;
 
   // When the anchor element changes position on the page, it is the client's responsibility to update the position
@@ -19730,7 +19735,9 @@
       numericDecrementLabel: 'Decrement',
       errorIconLabel: 'Error',
       warningIconLabel: 'Warning',
-      informationIconLabel: 'Information'
+      informationIconLabel: 'Information',
+      filterSearchLabel: 'Search',
+      filterNoResultsLabel: 'No items found'
   };
 
   const popupDismissLabel = DesignToken.create({
@@ -19757,6 +19764,14 @@
       name: 'information-icon-label',
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.informationIconLabel);
+  const filterSearchLabel = DesignToken.create({
+      name: 'filter-search-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterSearchLabel);
+  const filterNoResultsLabel = DesignToken.create({
+      name: 'filter-no-results-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
 
   // prettier-ignore
   const template$x = html `
@@ -20643,10 +20658,6 @@
         border-bottom-color: ${failColor};
     }
 
-    .anchored-region[hidden] {
-        visibility: hidden;
-    }
-
     .listbox {
         box-sizing: border-box;
         display: inline-flex;
@@ -20793,6 +20804,19 @@
     }
 `;
 
+  /**
+   * Types of dropdown appearance.
+   * @public
+   */
+  /**
+   * Types of select filter mode.
+   * @public
+   */
+  const FilterMode = {
+      none: undefined,
+      standard: 'standard'
+  };
+
   const styles$D = css `
     ${styles$F}
     ${styles$E}
@@ -23135,6 +23159,7 @@
       }
   }
   registerIcon('icon-magnifying-glass', IconMagnifyingGlass);
+  const iconMagnifyingGlassTag = 'nimble-icon-magnifying-glass';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -23920,7 +23945,9 @@
       numericIncrement: numericIncrementLabel,
       errorIcon: errorIconLabel,
       warningIcon: warningIconLabel,
-      informationIcon: informationIconLabel
+      informationIcon: informationIconLabel,
+      filterSearch: filterSearchLabel,
+      filterNoResults: filterNoResultsLabel
   };
   /**
    * Core label provider for Nimble
@@ -23949,6 +23976,12 @@
   __decorate$1([
       attr({ attribute: 'information-icon' })
   ], LabelProviderCore.prototype, "informationIcon", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-search' })
+  ], LabelProviderCore.prototype, "filterSearch", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-no-results' })
+  ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core'
   });
@@ -57724,13 +57757,97 @@ img.ProseMirror-separator {
     [part='end'] {
         display: contents;
     }
+
+    .listbox {
+        overflow-x: clip;
+    }
+
+    .listbox.empty slot {
+        display: none;
+    }
+
+    .listbox.above {
+        flex-flow: column-reverse;
+    }
+
+    .filter-field {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: ${controlHeight};
+        background: transparent;
+    }
+
+    .filter-field::before {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field.above::before {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-field::after {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field:not(.above)::after {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-icon {
+        padding-left: ${smallPadding};
+    }
+
+    .filter-input {
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        height: var(--ni-nimble-control-height);
+        padding: 0 ${smallPadding} 0 ${mediumPadding};
+        width: 100%;
+    }
+
+    .filter-input::placeholder {
+        color: ${placeholderFontColor};
+    }
+
+    .filter-input${focusVisible} {
+        outline: 0px;
+    }
+
+    .scrollable-region {
+        overflow: auto;
+    }
+
+    .no-results-label {
+        color: ${placeholderFontColor};
+        height: ${controlHeight};
+        display: inline-flex;
+        align-items: center;
+        padding: ${smallPadding} ${mediumPadding};
+    }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
             :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
+        `), themeBehavior(Theme.color, css `
+            .filter-field,
+            .no-results-label {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
         `));
 
+  /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$l = (context, definition) => html `
     <template
@@ -57739,11 +57856,9 @@ img.ProseMirror-separator {
     x.collapsible && x.open && 'open',
     x.disabled && 'disabled',
     x.collapsible && x.position,
-]
-    .filter(Boolean)
-    .join(' ')}"
-        aria-activedescendant="${x => x.ariaActiveDescendant}"
-        aria-controls="${x => x.ariaControls}"
+].filter(Boolean).join(' ')}"
+        aria-activedescendant="${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}"
+        aria-controls="${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}"
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
@@ -57752,34 +57867,36 @@ img.ProseMirror-separator {
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
+        @change="${x => x.changeValueHandler()}"
+        @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
         ${when(x => x.collapsible, html `
-                <div
-                    class="control"
-                    part="control"
-                    ?disabled="${x => x.disabled}"
-                    ${ref('control')}
-                >
-                    ${startSlotTemplate(context, definition)}
-                    <slot name="button-container">
-                        <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
-                            <slot name="selected-value">${x => x.displayValue}</slot>
-                        </div>
-                        <div aria-hidden="true" class="indicator" part="indicator">
-                            <slot name="indicator">
-                                ${definition.indicator || ''}
-                            </slot>
-                        </div>
-                    </slot>
-                    ${endSlotTemplate(context, definition)}
-                </div>
-                `)}
+            <div
+                class="control"
+                part="control"
+                ?disabled="${x => x.disabled}"
+                ${ref('control')}
+            >
+                ${startSlotTemplate(context, definition)}
+                <slot name="button-container">
+                    <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
+                        <slot name="selected-value">${x => x.displayValue}</slot>
+                    </div>
+                    <div aria-hidden="true" class="indicator" part="indicator">
+                        <slot name="indicator">
+                            ${definition.indicator || ''}
+                        </slot>
+                    </div>
+                </slot>
+                ${endSlotTemplate(context, definition)}
+            </div>
+            `)}
         <${anchoredRegionTag}
-            ${ref('region')}
+            ${ref('anchoredRegion')}
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
@@ -57788,93 +57905,766 @@ img.ProseMirror-separator {
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
+            @loaded="${x => x.regionLoadedHandler()}"
             ?hidden="${x => (x.collapsible ? !x.open : false)}">
-            <div
-                class="listbox"
-                id="${x => x.listboxId}"
-                part="listbox"
-                role="listbox"
-                ?disabled="${x => x.disabled}"
-                ${ref('listbox')}
-            >
-                <slot
-                    ${slotted({
+            <div class="listbox-background">
+                <div
+                    class="
+                        listbox 
+                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
+                        ${x => x.positionAttribute}
+                    "
+                    id="${x => x.listboxId}"
+                    part="listbox"
+                    role="listbox"
+                    ?disabled="${x => x.disabled}"
+                    ${ref('listbox')}
+                >
+                    ${when(x => x.filterMode !== FilterMode.none, html `
+                        <div class="filter-field ${x => x.positionAttribute}">
+                            <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
+                            <input
+                                ${ref('filterInput')}
+                                class="filter-input"
+                                aria-controls="${x => x.ariaControls}"
+                                aria-activedescendant="${x => x.ariaActiveDescendant}"
+                                @input="${(x, c) => x.inputHandler(c.event)}"
+                                @click="${(x, c) => x.inputClickHandler(c.event)}"
+                                placeholder="${x => filterSearchLabel.getValueFor(x)}"
+                                value="${x => x.filter}"
+                            />
+                        </div>
+                    `)}
+                    <div ${ref('scrollableRegion')}
+                        class="scrollable-region">
+                        <slot
+                            ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
-                ></slot>
+                        ></slot>
+                    </div>
+                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html `
+                        <span class="no-results-label ${x => x.positionAttribute}">
+                            ${x => filterNoResultsLabel.getValueFor(x)}
+                        </span>
+                    `)}
+                </div>
             </div>
         </${anchoredRegionTag}>
     </template>
 `;
 
+  // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts
+  /* eslint-disable max-classes-per-file */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  let Select$1 = class Select extends ListboxElement {
+  };
+  /**
+   * A form-associated base class for the Select component. This was copied from the
+   * FAST FormAssociatedSelect (which is not exported by fast-foundation)
+   *
+   * @internal
+   */
+  class FormAssociatedSelect extends FormAssociated(Select$1) {
+      constructor() {
+          super(...arguments);
+          this.proxy = document.createElement('select');
+      }
+  }
+
   /**
-   * A nimble-styled HTML select
+   * A nimble-styled HTML select.
    */
-  class Select extends Select$1 {
+  class Select extends FormAssociatedSelect {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          this.filterMode = FilterMode.none;
+          /**
+           * @internal
+           */
+          this.open = false;
+          /**
+           * The unique id for the internal listbox element.
+           *
+           * @internal
+           */
+          this.listboxId = uniqueId('listbox-');
           /** @internal */
           this.hasOverflow = false;
+          /**
+           * @internal
+           */
+          this.filteredOptions = [];
+          /**
+           * @internal
+           */
+          this.filter = '';
+          /**
+           * @internal
+           */
+          this.committedSelectedOption = undefined;
+          /**
+           * The max height for the listbox when opened.
+           *
+           * @internal
+           */
+          this.maxHeight = 0;
+          this._value = '';
+          this.forcedPosition = false;
+      }
+      /**
+       * The component is collapsible when in single-selection mode with no size attribute.
+       *
+       * @internal
+       */
+      get collapsible() {
+          return !(this.multiple || typeof this.size === 'number');
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          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;
+      }
+      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;
+              const nextSelectedValue = this.options[newValueIndex]?.value ?? null;
+              if (newValueIndex === -1
+                  || prevSelectedValue !== nextSelectedValue) {
+                  newValue = '';
+                  this.selectedIndex = newValueIndex;
+              }
+              newValue = this.firstSelectedOption?.value ?? newValue;
+          }
+          if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+              this._value = newValue;
+              super.valueChanged(prev, newValue);
+              if (!this.open) {
+                  this.committedSelectedOption = this._options.find(o => o.value === newValue);
+              }
+              Observable.notify(this, 'value');
+              if (this.collapsible) {
+                  Observable.notify(this, 'displayValue');
+              }
+          }
+      }
+      /**
+       * @internal
+       */
+      get displayValue() {
+          Observable.track(this, 'displayValue');
+          return this.committedSelectedOption?.text ?? '';
+      }
+      /**
+       * @internal
+       */
+      anchoredRegionChanged(_prev, _next) {
+          if (this.anchoredRegion && this.control) {
+              this.anchoredRegion.anchorElement = this.control;
+          }
+      }
+      /**
+       * @internal
+       */
+      controlChanged(_prev, _next) {
+          if (this.anchoredRegion && this.control) {
+              this.anchoredRegion.anchorElement = this.control;
+          }
+      }
+      /**
+       * @internal
+       */
+      slottedOptionsChanged(prev, next) {
+          const value = this.value;
+          this._options.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.unsubscribe(this, 'value');
+          });
+          super.slottedOptionsChanged(prev, next);
+          this._options.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.subscribe(this, 'value');
+          });
+          this.setProxyOptions();
+          this.updateValue();
+          // We need to force an update to the filteredOptions observable
+          // (by calling 'filterOptions()) so that the template correctly updates.
+          this.filterOptions();
+          if (value) {
+              this.value = value;
+          }
+          this.committedSelectedOption = this.options[this.selectedIndex];
+      }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          // do nothing if the select is disabled
+          if (this.disabled) {
+              return;
+          }
+          if (this.open) {
+              const captured = e.target.closest('option,[role=option]');
+              if (!captured?.disabled) {
+                  this.updateSelectedIndexFromFilteredSet();
+              }
+              if (captured?.disabled) {
+                  return;
+              }
+          }
+          super.clickHandler(e);
+          this.open = this.collapsible && !this.open;
+          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+              this.updateValue(true);
+          }
+      }
+      /**
+       * Updates the value when an option's value changes.
+       *
+       * @param source - the source object
+       * @param propertyName - the property to evaluate
+       *
+       * @internal
+       * @override
+       */
+      handleChange(source, propertyName) {
+          super.handleChange(source, propertyName);
+          if (propertyName === 'value') {
+              this.updateValue();
+          }
+      }
+      /**
+       * Prevents focus when size is set and a scrollbar is clicked.
+       *
+       * @param e - the mouse event object
+       *
+       * @override
+       * @internal
+       */
+      mousedownHandler(e) {
+          if (e.offsetX >= 0 && e.offsetX <= this.listbox?.scrollWidth) {
+              return super.mousedownHandler(e);
+          }
+          return this.collapsible;
+      }
+      /**
+       * @internal
+       */
+      regionLoadedHandler() {
+          this.focusAndScrollOptionIntoView();
+      }
+      /**
+       * Sets the multiple property on the proxy element.
+       *
+       * @param prev - the previous multiple value
+       * @param next - the current multiple value
+       */
+      multipleChanged(prev, next) {
+          super.multipleChanged(prev, next);
+          if (this.proxy) {
+              this.proxy.multiple = next;
+          }
+      }
+      /**
+       * @internal
+       */
+      inputClickHandler(e) {
+          e.stopPropagation(); // clicking in filter input shouldn't close dropdown
+      }
+      /**
+       * @internal
+       */
+      changeValueHandler() {
+          this.committedSelectedOption = this.options.find(option => option.selected);
+      }
+      /**
+       * @internal
+       */
+      updateDisplayValue() {
+          if (this.collapsible) {
+              Observable.notify(this, 'displayValue');
+          }
+      }
+      /**
+       * Handle content changes on the control input.
+       *
+       * @param e - the input event
+       * @internal
+       */
+      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)) {
+              const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+              if (enabledOptions.length > 0) {
+                  enabledOptions[0].selected = true;
+              }
+              else {
+                  // only filtered option is disabled
+                  this.selectedOptions = [];
+                  this.selectedIndex = -1;
+              }
+          }
+          else if (this.committedSelectedOption) {
+              this.committedSelectedOption.selected = true;
+          }
+          if (e.inputType.includes('deleteContent') || !this.filter.length) {
+              return true;
+          }
+          e.stopPropagation();
+          return true;
+      }
+      /**
+       * @internal
+       */
+      focusoutHandler(e) {
+          this.updateSelectedIndexFromFilteredSet();
+          super.focusoutHandler(e);
+          if (!this.open) {
+              return true;
+          }
+          const focusTarget = e.relatedTarget;
+          if (this.isSameNode(focusTarget)) {
+              this.focus();
+              return true;
+          }
+          if (!this.options?.includes(focusTarget)) {
+              this.open = false;
+              if (this.indexWhenOpened !== this.selectedIndex) {
+                  this.updateValue(true);
+              }
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
+      keydownHandler(e) {
+          super.keydownHandler(e);
+          const key = e.key;
+          if (e.ctrlKey || e.shiftKey) {
+              return true;
+          }
+          switch (key) {
+              case keySpace: {
+                  // when dropdown is open allow user to enter a space for filter text
+                  if (this.open && this.filterMode !== FilterMode.none) {
+                      break;
+                  }
+                  e.preventDefault();
+                  if (this.collapsible && this.typeAheadExpired) {
+                      this.open = !this.open;
+                  }
+                  if (!this.open) {
+                      this.focus();
+                  }
+                  break;
+              }
+              case keyHome:
+              case keyEnd: {
+                  e.preventDefault();
+                  break;
+              }
+              case keyEnter: {
+                  e.preventDefault();
+                  if (this.filteredOptions.length === 0
+                      || this.filteredOptions.every(o => o.disabled)) {
+                      return false;
+                  }
+                  this.updateSelectedIndexFromFilteredSet();
+                  this.open = !this.open;
+                  if (!this.open) {
+                      this.focus();
+                  }
+                  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.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;
+                  }
+                  this.focus();
+                  break;
+              }
+              case keyTab: {
+                  if (this.collapsible && this.open) {
+                      e.preventDefault();
+                      this.open = false;
+                  }
+                  return true;
+              }
+          }
+          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+              this.updateValue(true);
+              this.indexWhenOpened = this.selectedIndex;
+          }
+          return !(key === keyArrowDown || key === keyArrowUp);
+      }
+      /**
+       * Updates the proxy value when the selected index changes.
+       *
+       * @param prev - the previous selected index
+       * @param next - the next selected index
+       *
+       * @internal
+       */
+      selectedIndexChanged(prev, next) {
+          super.selectedIndexChanged(prev, next);
+          this.updateValue();
+      }
+      /**
+       * Synchronize the `aria-disabled` property when the `disabled` property changes.
+       *
+       * @param prev - The previous disabled value
+       * @param next - The next disabled value
+       *
+       * @internal
+       */
+      disabledChanged(prev, next) {
+          if (super.disabledChanged) {
+              super.disabledChanged(prev, next);
+          }
+          this.ariaDisabled = this.disabled ? 'true' : 'false';
+      }
+      /**
+       * Reset the element to its first selectable option when its parent form is reset.
+       *
+       * @internal
+       */
+      formResetCallback() {
+          this.setProxyOptions();
+          // Call the base class's implementation setDefaultSelectedOption instead of the select's
+          // override, in order to reset the selectedIndex without using the value property.
+          super.setDefaultSelectedOption();
+          if (this.selectedIndex === -1) {
+              this.selectedIndex = 0;
+          }
+      }
+      // Prevents parent classes from resetting selectedIndex to a positive
+      // value while filtering, which can result in a disabled option being
+      // selected.
+      setSelectedOptions() {
+          if (this.open && this.selectedIndex === -1) {
+              return;
+          }
+          super.setSelectedOptions();
+      }
+      focusAndScrollOptionIntoView() {
+          super.focusAndScrollOptionIntoView();
+          if (this.open) {
+              window.requestAnimationFrame(() => {
+                  this.filterInput?.focus();
+              });
+          }
+      }
+      positionChanged(_, next) {
+          this.positionAttribute = next;
+          this.setPositioning();
+      }
+      /**
+       * Updates the proxy's size property when the size attribute changes.
+       *
+       * @param prev - the previous size
+       * @param next - the current size
+       *
+       * @override
+       * @internal
+       */
+      sizeChanged(prev, next) {
+          super.sizeChanged(prev, next);
+          if (this.proxy) {
+              this.proxy.size = next;
+          }
+      }
+      openChanged() {
+          if (!this.collapsible) {
+              return;
+          }
+          if (this.open) {
+              this.initializeOpenState();
+              this.indexWhenOpened = this.selectedIndex;
+              return;
+          }
+          this.filter = '';
+          if (this.filterInput) {
+              this.filterInput.value = '';
+          }
+          this.ariaControls = '';
+          this.ariaExpanded = 'false';
+      }
+      /**
+       * Updates the selectedness of each option when the list of selected options changes.
+       *
+       * @param prev - the previous list of selected options
+       * @param next - the current list of selected options
+       *
+       * @override
+       * @internal
+       */
+      selectedOptionsChanged(prev, next) {
+          super.selectedOptionsChanged(prev, next);
+          this.options?.forEach((o, i) => {
+              const proxyOption = this.proxy?.options.item(i);
+              if (proxyOption) {
+                  proxyOption.selected = o.selected;
+              }
+          });
+      }
+      /**
+       * Sets the selected index to match the first option with the selected attribute, or
+       * the first selectable option.
+       *
+       * @override
+       * @internal
+       */
+      setDefaultSelectedOption() {
+          const options = this.options
+              ?? Array.from(this.children).filter(o => Listbox$1.slottedOptionFilter(o));
+          const selectedIndex = options?.findIndex(el => el.hasAttribute('selected')
+              || el.selected
+              || el.value === this.value);
+          if (selectedIndex !== -1) {
+              this.selectedIndex = selectedIndex;
+              return;
+          }
+          this.selectedIndex = 0;
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5123
       setPositioning() {
           if (!this.$fastController.isConnected) {
               // Don't call setPositioning() until we're connected,
               // since this.forcedPosition isn't initialized yet.
               return;
           }
-          super.setPositioning();
+          const currentBox = this.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+          const availableBottom = viewportHeight - currentBox.bottom;
+          if (this.forcedPosition) {
+              this.position = this.positionAttribute;
+          }
+          else if (currentBox.top > availableBottom) {
+              this.position = SelectPosition.above;
+          }
+          else {
+              this.position = SelectPosition.below;
+          }
+          this.positionAttribute = this.forcedPosition
+              ? this.positionAttribute
+              : this.position;
+          this.maxHeight = this.position === SelectPosition.above
+              ? Math.trunc(currentBox.top)
+              : Math.trunc(availableBottom);
           this.updateListboxMaxHeightCssVariable();
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5773
-      slottedOptionsChanged(prev, next) {
-          const value = this.value;
-          super.slottedOptionsChanged(prev, next);
-          if (value) {
-              this.value = value;
+      /**
+       * Filter available options by text value.
+       *
+       * @public
+       */
+      filterOptions() {
+          const filter = this.filter.toLowerCase();
+          if (filter) {
+              this.filteredOptions = this._options.filter(option => {
+                  return diacriticInsensitiveStringNormalizer(option.text).includes(diacriticInsensitiveStringNormalizer(filter));
+              });
+          }
+          else {
+              this.filteredOptions = this._options;
           }
+          this._options.forEach(o => {
+              o.hidden = !this.filteredOptions.includes(o);
+          });
       }
-      regionChanged(_prev, _next) {
-          if (this.region && this.control) {
-              this.region.anchorElement = this.control;
+      /**
+       * Sets the value and display value to match the first selected option.
+       *
+       * @param shouldEmit - if true, the input and change events will be emitted
+       *
+       * @internal
+       */
+      updateValue(shouldEmit) {
+          if (this.$fastController.isConnected) {
+              this.value = this.firstSelectedOption?.value ?? '';
+          }
+          if (shouldEmit) {
+              this.$emit('input');
+              this.$emit('change', this, {
+                  bubbles: true,
+                  composed: undefined
+              });
           }
       }
-      controlChanged(_prev, _next) {
-          if (this.region && this.control) {
-              this.region.anchorElement = this.control;
+      /**
+       * Resets and fills the proxy to match the component's options.
+       *
+       * @internal
+       */
+      setProxyOptions() {
+          if (this.proxy instanceof HTMLSelectElement && this.options) {
+              this.proxy.options.length = 0;
+              this.options.forEach(option => {
+                  const proxyOption = option.proxy
+                      || (option instanceof HTMLOptionElement
+                          ? option.cloneNode()
+                          : null);
+                  if (proxyOption) {
+                      this.proxy.options.add(proxyOption);
+                  }
+              });
           }
       }
+      clearSelection() {
+          this.options.forEach(option => {
+              option.selected = false;
+          });
+      }
+      filterChanged() {
+          this.filterOptions();
+      }
       maxHeightChanged() {
           this.updateListboxMaxHeightCssVariable();
       }
+      initializeOpenState() {
+          if (!this.open) {
+              this.ariaExpanded = 'false';
+              this.ariaControls = '';
+              return;
+          }
+          this.committedSelectedOption = this._options[this.selectedIndex];
+          this.ariaControls = this.listboxId;
+          this.ariaExpanded = 'true';
+          this.setPositioning();
+          this.focusAndScrollOptionIntoView();
+      }
       updateListboxMaxHeightCssVariable() {
           if (this.listbox) {
               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$1([
       attr
   ], Select.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'position' })
+  ], Select.prototype, "positionAttribute", void 0);
   __decorate$1([
       attr({ attribute: 'error-text' })
   ], Select.prototype, "errorText", void 0);
   __decorate$1([
       attr({ attribute: 'error-visible', mode: 'boolean' })
   ], Select.prototype, "errorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-mode' })
+  ], Select.prototype, "filterMode", void 0);
+  __decorate$1([
+      attr({ attribute: 'open', mode: 'boolean' })
+  ], Select.prototype, "open", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "position", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "control", void 0);
   __decorate$1([
       observable
-  ], Select.prototype, "region", void 0);
+  ], Select.prototype, "scrollableRegion", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filterInput", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "anchoredRegion", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filteredOptions", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filter", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "committedSelectedOption", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "maxHeight", void 0);
+  __decorate$1([
+      volatile
+  ], Select.prototype, "collapsible", null);
   const nimbleSelect = Select.compose({
       baseName: 'select',
-      baseClass: Select$1,
+      baseClass: Select$2,
       template: template$l,
       styles: styles$o,
       indicator: arrowExpanderDown16X16.data,
@@ -57886,6 +58676,7 @@ img.ProseMirror-separator {
         ${errorTextTemplate}
     `
   });
+  applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
   const styles$n = css `