From f5846d52a7b04a5f9185d7a5c6153d78b8610108 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 5 May 2025 13:20:21 -0500
Subject: [PATCH 01/18] Allow rich-text mention listbox to open above the
 cursor

---
 .../src/rich-text/mention-listbox/index.ts                  | 6 ++++--
 .../src/rich-text/mention-listbox/template.ts               | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index e288d81d45..db35164406 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -108,9 +108,11 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
-        const listboxTop = options.anchorNode.getBoundingClientRect().bottom;
+        const anchorRect = options.anchorNode.getBoundingClientRect();
+        const availableSpaceBelow = window.innerHeight - anchorRect.bottom;
+        const availableSpaceAbove = anchorRect.top;
         this.availableViewportHeight = Math.trunc(
-            window.innerHeight - listboxTop
+            Math.max(availableSpaceAbove, availableSpaceBelow)
         );
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/template.ts b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
index a7fd972e05..2d16ddd980 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/template.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
@@ -14,7 +14,7 @@ export const template = html<RichTextMentionListbox>`
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="bottom"
-            vertical-positioning-mode="locktodefault"
+            vertical-positioning-mode="dynamic"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"

From cb401746e35388633694d69cbb1f02c60d742bf6 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 5 May 2025 13:20:43 -0500
Subject: [PATCH 02/18] Change files

---
 ...le-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json

diff --git a/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
new file mode 100644
index 0000000000..45fc02f1ac
--- /dev/null
+++ b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Allow rich-text mention listbox to open above the cursor",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 82f818fafc0075dad80ef3bbc6758df17b549d25 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 6 May 2025 12:37:02 -0500
Subject: [PATCH 03/18] Align to listbox implementation

---
 .../nimble-components/src/combobox/index.ts   | 68 +++++++++----------
 .../src/rich-text/mention-listbox/index.ts    | 27 ++++++--
 .../nimble-components/src/select/index.ts     | 16 ++---
 3 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/packages/nimble-components/src/combobox/index.ts b/packages/nimble-components/src/combobox/index.ts
index e8f036e52b..e25698e77a 100644
--- a/packages/nimble-components/src/combobox/index.ts
+++ b/packages/nimble-components/src/combobox/index.ts
@@ -3,7 +3,6 @@ import {
     DesignSystem,
     type ComboboxOptions,
     ComboboxAutocomplete,
-    SelectPosition,
     ListboxOption,
     DelegatesARIACombobox,
     applyMixins,
@@ -28,6 +27,7 @@ import { styles } from './styles';
 import { mixinErrorPattern } from '../patterns/error/types';
 import {
     DropdownAppearance,
+    DropdownPosition,
     type DropdownPattern
 } from '../patterns/dropdown/types';
 import type { AnchoredRegion } from '../anchored-region';
@@ -69,7 +69,7 @@ export class Combobox
      * The placement for the listbox when the combobox is open.
      */
     @attr({ attribute: 'position' })
-    public positionAttribute?: SelectPosition;
+    public positionAttribute?: DropdownPosition;
 
     /**
      * The open attribute.
@@ -92,7 +92,7 @@ export class Combobox
      * @public
      */
     @observable
-    public position?: SelectPosition;
+    public position?: DropdownPosition;
 
     /**
      * @internal
@@ -620,37 +620,6 @@ export class Combobox
         }
     }
 
-    /**
-     * @internal
-     */
-    public setPositioning(): void {
-        // Workaround for https://github.com/microsoft/fast/issues/5123
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
-        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.availableViewportHeight = this.position === SelectPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
-    }
-
     /**
      * Focus the control and scroll the first selected option into view.
      *
@@ -729,8 +698,8 @@ export class Combobox
     }
 
     protected positionChanged(
-        _: SelectPosition | undefined,
-        next: SelectPosition | undefined
+        _: DropdownPosition | undefined,
+        next: DropdownPosition | undefined
     ): void {
         this.positionAttribute = next;
         this.setPositioning();
@@ -759,6 +728,33 @@ export class Combobox
         this.updateInputAriaLabel();
     }
 
+    private setPositioning(): void {
+        if (!this.$fastController.isConnected) {
+            // Don't call setPositioning() until we're connected,
+            // since this.forcedPosition isn't initialized yet.
+            return;
+        }
+        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 = DropdownPosition.above;
+        } else {
+            this.position = DropdownPosition.below;
+        }
+
+        this.positionAttribute = this.forcedPosition
+            ? this.positionAttribute
+            : this.position;
+
+        this.availableViewportHeight = this.position === DropdownPosition.above
+            ? Math.trunc(currentBox.top)
+            : Math.trunc(availableBottom);
+    }
+
     /**
      * Sets the value and to match the first selected option.
      */
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index db35164406..bd07f64ec8 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -12,6 +12,7 @@ import type { AnchoredRegion } from '../../anchored-region';
 import { diacriticInsensitiveStringNormalizer } from '../../utilities/models/string-normalizers';
 import type { ListOption } from '../../list-option';
 import type { MentionListboxShowOptions } from './types';
+import { DropdownPosition } from '../../patterns/dropdown/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -108,12 +109,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
-        const anchorRect = options.anchorNode.getBoundingClientRect();
-        const availableSpaceBelow = window.innerHeight - anchorRect.bottom;
-        const availableSpaceAbove = anchorRect.top;
-        this.availableViewportHeight = Math.trunc(
-            Math.max(availableSpaceAbove, availableSpaceBelow)
-        );
+        this.setPositioning(options);
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -289,6 +285,25 @@ export class RichTextMentionListbox extends FoundationListbox {
     private setOpen(value: boolean): void {
         this.open = value;
     }
+
+    // Aligns with select / combobox
+    // Modified to remove forced position concept
+    private setPositioning(options: MentionListboxShowOptions): void {
+        const currentBox = options.anchorNode.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const availableBottom = viewportHeight - currentBox.bottom;
+
+        let position;
+        if (currentBox.top > availableBottom) {
+            position = DropdownPosition.above;
+        } else {
+            position = DropdownPosition.below;
+        }
+
+        this.availableViewportHeight = position === DropdownPosition.above
+            ? Math.trunc(currentBox.top)
+            : Math.trunc(availableBottom);
+    }
 }
 
 const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts
index e6e5d2fe48..67bc64568e 100644
--- a/packages/nimble-components/src/select/index.ts
+++ b/packages/nimble-components/src/select/index.ts
@@ -6,7 +6,6 @@ import {
     Select as FoundationSelect,
     ListboxOption,
     type SelectOptions,
-    SelectPosition,
     applyMixins,
     StartEnd,
     DelegatesARIASelect
@@ -26,6 +25,7 @@ import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 import {
     DropdownAppearance,
+    DropdownPosition,
     type ListOptionOwner
 } from '../patterns/dropdown/types';
 import { errorTextTemplate } from '../patterns/error/template';
@@ -83,7 +83,7 @@ export class Select
      * @public
      */
     @attr({ attribute: 'position' })
-    public positionAttribute?: SelectPosition;
+    public positionAttribute?: DropdownPosition;
 
     @attr({ attribute: 'filter-mode' })
     public filterMode: FilterMode = FilterMode.none;
@@ -112,7 +112,7 @@ export class Select
      * @public
      */
     @observable
-    public position?: SelectPosition;
+    public position?: DropdownPosition;
 
     /**
      * The ref to the internal `.control` element.
@@ -884,8 +884,8 @@ export class Select
     }
 
     protected positionChanged(
-        _: SelectPosition | undefined,
-        next: SelectPosition | undefined
+        _: DropdownPosition | undefined,
+        next: DropdownPosition | undefined
     ): void {
         this.positionAttribute = next;
         this.setPositioning();
@@ -1080,16 +1080,16 @@ export class Select
         if (this.forcedPosition) {
             this.position = this.positionAttribute;
         } else if (currentBox.top > availableBottom) {
-            this.position = SelectPosition.above;
+            this.position = DropdownPosition.above;
         } else {
-            this.position = SelectPosition.below;
+            this.position = DropdownPosition.below;
         }
 
         this.positionAttribute = this.forcedPosition
             ? this.positionAttribute
             : this.position;
 
-        this.availableViewportHeight = this.position === SelectPosition.above
+        this.availableViewportHeight = this.position === DropdownPosition.above
             ? Math.trunc(currentBox.top)
             : Math.trunc(availableBottom);
     }

From 3614999f0701916f4282b1fd966d4a68078eedd8 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 9 May 2025 18:56:57 -0500
Subject: [PATCH 04/18] Fix inconsistency with select/combobox

---
 .../src/rich-text/mention-listbox/index.ts          | 13 +++++++++----
 .../src/rich-text/mention-listbox/template.ts       |  5 +++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index bd07f64ec8..af5fffda8a 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -36,6 +36,12 @@ export class RichTextMentionListbox extends FoundationListbox {
     @observable
     public region?: AnchoredRegion;
 
+    /**
+     * @internal
+     */
+    @observable
+    public position?: DropdownPosition;
+
     /**
      * The space available in the viewport for the listbox when opened.
      *
@@ -293,14 +299,13 @@ export class RichTextMentionListbox extends FoundationListbox {
         const viewportHeight = window.innerHeight;
         const availableBottom = viewportHeight - currentBox.bottom;
 
-        let position;
         if (currentBox.top > availableBottom) {
-            position = DropdownPosition.above;
+            this.position = DropdownPosition.above;
         } else {
-            position = DropdownPosition.below;
+            this.position = DropdownPosition.below;
         }
 
-        this.availableViewportHeight = position === DropdownPosition.above
+        this.availableViewportHeight = this.position === DropdownPosition.above
             ? Math.trunc(currentBox.top)
             : Math.trunc(availableBottom);
     }
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/template.ts b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
index 2d16ddd980..92ada94529 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/template.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
@@ -3,6 +3,7 @@ import { Listbox } from '@ni/fast-foundation';
 import type { RichTextMentionListbox } from '.';
 import { anchoredRegionTag } from '../../anchored-region';
 import { filterNoResultsLabel } from '../../label-provider/core/label-tokens';
+import { DropdownPosition } from '../../patterns/dropdown/types';
 
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
@@ -13,8 +14,8 @@ export const template = html<RichTextMentionListbox>`
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
-            vertical-default-position="bottom"
-            vertical-positioning-mode="dynamic"
+            vertical-default-position="${x => (x.position === DropdownPosition.above ? 'top' : 'bottom')}"
+            vertical-positioning-mode="${x => (!x.position ? 'dynamic' : 'locktodefault')}"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"

From fe2e3e07131c62cbd0da5c536dca69b00e0f3b19 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 21 May 2025 16:25:10 -0500
Subject: [PATCH 05/18] Make combobox and select use AR's dynamic vertical
 positioning

---
 .../src/anchored-region/index.ts              | 10 ++-
 .../nimble-components/src/combobox/index.ts   | 85 +++++++++++--------
 .../src/combobox/template.ts                  |  2 +-
 .../src/patterns/dropdown/styles.ts           | 38 +++++----
 .../src/patterns/dropdown/utility.ts          | 10 +++
 .../src/rich-text/mention-listbox/index.ts    | 27 ------
 .../src/rich-text/mention-listbox/template.ts |  1 -
 .../nimble-components/src/select/index.ts     | 77 ++++++++++-------
 .../nimble-components/src/select/template.ts  |  8 +-
 9 files changed, 140 insertions(+), 118 deletions(-)
 create mode 100644 packages/nimble-components/src/patterns/dropdown/utility.ts

diff --git a/packages/nimble-components/src/anchored-region/index.ts b/packages/nimble-components/src/anchored-region/index.ts
index 1df8c8d2c8..ee3488a261 100644
--- a/packages/nimble-components/src/anchored-region/index.ts
+++ b/packages/nimble-components/src/anchored-region/index.ts
@@ -1,7 +1,9 @@
+import { observable } from '@ni/fast-element';
 import {
     DesignSystem,
     AnchoredRegion as FoundationAnchoredRegion,
-    anchoredRegionTemplate as template
+    anchoredRegionTemplate as template,
+    type AnchoredRegionPositionLabel
 } from '@ni/fast-foundation';
 import { styles } from './styles';
 
@@ -22,7 +24,11 @@ declare global {
 /**
  * A nimble-styled anchored region control.
  */
-export class AnchoredRegion extends FoundationAnchoredRegion {}
+export class AnchoredRegion extends FoundationAnchoredRegion {
+    /* @internal */
+    @observable
+    public override verticalPosition: AnchoredRegionPositionLabel | undefined;
+}
 
 const nimbleAnchoredRegion = AnchoredRegion.compose({
     baseName: 'anchored-region',
diff --git a/packages/nimble-components/src/combobox/index.ts b/packages/nimble-components/src/combobox/index.ts
index e25698e77a..ae83c660eb 100644
--- a/packages/nimble-components/src/combobox/index.ts
+++ b/packages/nimble-components/src/combobox/index.ts
@@ -1,4 +1,12 @@
-import { DOM, Observable, attr, html, observable, ref } from '@ni/fast-element';
+import {
+    attr,
+    DOM,
+    html,
+    observable,
+    Observable,
+    ref,
+    type Notifier
+} from '@ni/fast-element';
 import {
     DesignSystem,
     type ComboboxOptions,
@@ -30,6 +38,7 @@ import {
     DropdownPosition,
     type DropdownPattern
 } from '../patterns/dropdown/types';
+import { anchoredRegionPositionToDropdownPosition } from '../patterns/dropdown/utility';
 import type { AnchoredRegion } from '../anchored-region';
 import { template } from './template';
 import { FormAssociatedCombobox } from './models/combobox-form-associated';
@@ -206,11 +215,7 @@ export class Combobox
     private valueBeforeTextUpdate?: string;
     private _value = '';
     private filter = '';
-
-    /**
-     * The initial state of the position attribute.
-     */
-    private forcedPosition = false;
+    private anchoredRegionNotifier?: Notifier;
 
     private get isAutocompleteInline(): boolean {
         return (
@@ -245,11 +250,10 @@ export class Combobox
 
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.forcedPosition = !!this.positionAttribute;
         if (this.value) {
             this.initialValue = this.value;
         }
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
         this.updateInputAriaLabel();
     }
 
@@ -620,6 +624,16 @@ export class Combobox
         }
     }
 
+    /* @internal */
+    public override handleChange(source: unknown, propertyName: string): void {
+        super.handleChange(source, propertyName);
+        if (propertyName === 'verticalPosition') {
+            this.position = anchoredRegionPositionToDropdownPosition(
+                this.region?.verticalPosition
+            );
+        }
+    }
+
     /**
      * Focus the control and scroll the first selected option into view.
      *
@@ -647,7 +661,7 @@ export class Combobox
             this.ariaControls = this.listboxId;
             this.ariaExpanded = 'true';
 
-            this.setPositioning();
+            this.updateAvailableViewportHeight();
             this.focusAndScrollOptionIntoView();
 
             // focus is directed to the element when `open` is changed programmatically
@@ -698,19 +712,24 @@ export class Combobox
     }
 
     protected positionChanged(
-        _: DropdownPosition | undefined,
-        next: DropdownPosition | undefined
+        _prev: DropdownPosition | undefined,
+        _next: DropdownPosition | undefined
     ): void {
-        this.positionAttribute = next;
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
     }
 
     private regionChanged(
         _prev: AnchoredRegion | undefined,
         _next: AnchoredRegion | undefined
     ): void {
+        if (this.anchoredRegionNotifier) {
+            this.anchoredRegionNotifier?.unsubscribe(this, 'verticalPosition');
+            this.anchoredRegionNotifier = undefined;
+        }
         if (this.region && this.controlWrapper) {
             this.region.anchorElement = this.controlWrapper;
+            this.anchoredRegionNotifier = Observable.getNotifier(this.region);
+            this.anchoredRegionNotifier.subscribe(this, 'verticalPosition');
         }
     }
 
@@ -728,31 +747,27 @@ export class Combobox
         this.updateInputAriaLabel();
     }
 
-    private setPositioning(): void {
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
+    private updateAvailableViewportHeight(): void {
         const currentBox = this.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const availableBottom = viewportHeight - currentBox.bottom;
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
 
-        if (this.forcedPosition) {
-            this.position = this.positionAttribute;
-        } else if (currentBox.top > availableBottom) {
-            this.position = DropdownPosition.above;
-        } else {
-            this.position = DropdownPosition.below;
+        switch (this.positionAttribute) {
+            case DropdownPosition.above:
+                this.availableViewportHeight = availableSpaceAbove;
+                break;
+            case DropdownPosition.below:
+                this.availableViewportHeight = availableSpaceBelow;
+                break;
+            default:
+                this.availableViewportHeight = Math.max(
+                    availableSpaceAbove,
+                    availableSpaceBelow
+                );
         }
-
-        this.positionAttribute = this.forcedPosition
-            ? this.positionAttribute
-            : this.position;
-
-        this.availableViewportHeight = this.position === DropdownPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
     }
 
     /**
diff --git a/packages/nimble-components/src/combobox/template.ts b/packages/nimble-components/src/combobox/template.ts
index c4eacb369c..b108cc3238 100644
--- a/packages/nimble-components/src/combobox/template.ts
+++ b/packages/nimble-components/src/combobox/template.ts
@@ -70,7 +70,7 @@ ComboboxOptions
         </div>
         <${anchoredRegionTag}
             ${ref('region')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
index 65fe892686..ed0475cfdd 100644
--- a/packages/nimble-components/src/patterns/dropdown/styles.ts
+++ b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -202,12 +202,9 @@ export const styles = css`
         margin-inline-start: auto;
     }
 
-    :host([open][position='above']) .anchored-region {
-        padding-bottom: ${smallPadding};
-    }
-
-    :host([open][position='below']) .anchored-region {
+    :host([open]) .anchored-region {
         padding-top: ${smallPadding};
+        padding-bottom: ${smallPadding};
     }
 
     .listbox {
@@ -219,23 +216,28 @@ export const styles = css`
         --ni-private-listbox-padding: ${smallPadding};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
+        --ni-private-listbox-ideal-height: calc(
+            var(--ni-private-listbox-anchor-element-gap) + 
+            2 * ${borderWidth} + 
+            var(--ni-private-listbox-padding) +
+            ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
+            var(--ni-private-listbox-filter-height) +
+            var(--ni-private-listbox-loading-indicator-height)
+        );
+        max-height: var(--ni-private-listbox-ideal-height);
+        box-shadow: ${elevation2BoxShadow};
+        border: ${borderWidth} solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+    }
+
+    .anchored-region.confined-to-view .listbox {
         max-height: min(
-            calc(
-                var(--ni-private-listbox-anchor-element-gap) + 
-                2 * ${borderWidth} + 
-                var(--ni-private-listbox-padding) +
-                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
-                var(--ni-private-listbox-filter-height) +
-                var(--ni-private-listbox-loading-indicator-height)
-            ),
+            var(--ni-private-listbox-ideal-height),
             calc(
                 var(--ni-private-listbox-available-viewport-height) - 
                 var(--ni-private-listbox-anchor-element-gap)
             )
         );
-        box-shadow: ${elevation2BoxShadow};
-        border: ${borderWidth} solid ${popupBorderColor};
-        background-color: ${applicationBackgroundColor};
     }
 
     .listbox:has(.filter-field) {
@@ -246,12 +248,12 @@ export const styles = css`
         --ni-private-listbox-loading-indicator-height: ${controlHeight};
     }
 
-    :host([open][position='above']) .listbox {
+    :host([open]) .listbox.top{
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    :host([open][position='below']) .listbox {
+    :host([open]) .listbox.bottom{
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }
diff --git a/packages/nimble-components/src/patterns/dropdown/utility.ts b/packages/nimble-components/src/patterns/dropdown/utility.ts
new file mode 100644
index 0000000000..ff1c892a61
--- /dev/null
+++ b/packages/nimble-components/src/patterns/dropdown/utility.ts
@@ -0,0 +1,10 @@
+import type { AnchoredRegionPositionLabel } from '@ni/fast-foundation';
+import { DropdownPosition } from './types';
+
+export function anchoredRegionPositionToDropdownPosition(
+    anchoredRegionPosition?: AnchoredRegionPositionLabel
+): DropdownPosition {
+    return anchoredRegionPosition === 'start'
+        ? DropdownPosition.above
+        : DropdownPosition.below;
+}
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index af5fffda8a..aac435deeb 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -42,14 +42,6 @@ export class RichTextMentionListbox extends FoundationListbox {
     @observable
     public position?: DropdownPosition;
 
-    /**
-     * The space available in the viewport for the listbox when opened.
-     *
-     * @internal
-     */
-    @observable
-    public availableViewportHeight = 0;
-
     /**
      * @internal
      */
@@ -115,7 +107,6 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
-        this.setPositioning(options);
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -291,24 +282,6 @@ export class RichTextMentionListbox extends FoundationListbox {
     private setOpen(value: boolean): void {
         this.open = value;
     }
-
-    // Aligns with select / combobox
-    // Modified to remove forced position concept
-    private setPositioning(options: MentionListboxShowOptions): void {
-        const currentBox = options.anchorNode.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const availableBottom = viewportHeight - currentBox.bottom;
-
-        if (currentBox.top > availableBottom) {
-            this.position = DropdownPosition.above;
-        } else {
-            this.position = DropdownPosition.below;
-        }
-
-        this.availableViewportHeight = this.position === DropdownPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
-    }
 }
 
 const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/template.ts b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
index 92ada94529..c4237615b1 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/template.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
@@ -30,7 +30,6 @@ export const template = html<RichTextMentionListbox>`
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
                 ?disabled="${x => x.disabled}"
-                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
                 ${ref('listbox')}
             >
                 <slot name="option"
diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts
index 67bc64568e..3ee11f80df 100644
--- a/packages/nimble-components/src/select/index.ts
+++ b/packages/nimble-components/src/select/index.ts
@@ -1,5 +1,12 @@
 // 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 '@ni/fast-element';
+import {
+    attr,
+    html,
+    observable,
+    Observable,
+    volatile,
+    type Notifier
+} from '@ni/fast-element';
 import {
     AnchoredRegion,
     DesignSystem,
@@ -28,6 +35,7 @@ import {
     DropdownPosition,
     type ListOptionOwner
 } from '../patterns/dropdown/types';
+import { anchoredRegionPositionToDropdownPosition } from '../patterns/dropdown/utility';
 import { errorTextTemplate } from '../patterns/error/template';
 import { mixinErrorPattern } from '../patterns/error/types';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
@@ -202,18 +210,18 @@ export class Select
     }
 
     private _value = '';
-    private forcedPosition = false;
     private openActiveIndex?: number;
     private readonly selectedOptionObserver? = new MutationObserver(() => {
         this.updateDisplayValue();
     });
 
+    private anchoredRegionNotifier?: Notifier;
+
     /**
      * @internal
      */
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.forcedPosition = !!this.positionAttribute;
         if (this.open) {
             this.initializeOpenState();
         }
@@ -277,8 +285,16 @@ export class Select
         _prev: AnchoredRegion | undefined,
         _next: AnchoredRegion | undefined
     ): void {
+        if (this.anchoredRegionNotifier) {
+            this.anchoredRegionNotifier?.unsubscribe(this, 'verticalPosition');
+            this.anchoredRegionNotifier = undefined;
+        }
         if (this.anchoredRegion && this.control) {
             this.anchoredRegion.anchorElement = this.control;
+            this.anchoredRegionNotifier = Observable.getNotifier(
+                this.anchoredRegion
+            );
+            this.anchoredRegionNotifier.subscribe(this, 'verticalPosition');
         }
     }
 
@@ -435,6 +451,12 @@ export class Select
                 );
                 break;
             }
+            case 'verticalPosition': {
+                this.position = anchoredRegionPositionToDropdownPosition(
+                    this.anchoredRegion?.verticalPosition
+                );
+                break;
+            }
             default:
                 break;
         }
@@ -884,11 +906,10 @@ export class Select
     }
 
     protected positionChanged(
-        _: DropdownPosition | undefined,
-        next: DropdownPosition | undefined
+        _prev: DropdownPosition | undefined,
+        _next: DropdownPosition | undefined
     ): void {
-        this.positionAttribute = next;
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
     }
 
     /**
@@ -1067,31 +1088,27 @@ export class Select
         return this.options.find(o => o.hidden && o.disabled) as ListOption;
     }
 
-    private setPositioning(): void {
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
+    private updateAvailableViewportHeight(): void {
         const currentBox = this.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const availableBottom = viewportHeight - currentBox.bottom;
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
 
-        if (this.forcedPosition) {
-            this.position = this.positionAttribute;
-        } else if (currentBox.top > availableBottom) {
-            this.position = DropdownPosition.above;
-        } else {
-            this.position = DropdownPosition.below;
+        switch (this.positionAttribute) {
+            case DropdownPosition.above:
+                this.availableViewportHeight = availableSpaceAbove;
+                break;
+            case DropdownPosition.below:
+                this.availableViewportHeight = availableSpaceBelow;
+                break;
+            default:
+                this.availableViewportHeight = Math.max(
+                    availableSpaceAbove,
+                    availableSpaceBelow
+                );
         }
-
-        this.positionAttribute = this.forcedPosition
-            ? this.positionAttribute
-            : this.position;
-
-        this.availableViewportHeight = this.position === DropdownPosition.above
-            ? Math.trunc(currentBox.top)
-            : Math.trunc(availableBottom);
     }
 
     private updateAdjacentSeparatorState(
@@ -1303,7 +1320,7 @@ export class Select
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';
 
-        this.setPositioning();
+        this.updateAvailableViewportHeight();
         this.focusAndScrollOptionIntoView();
     }
 
diff --git a/packages/nimble-components/src/select/template.ts b/packages/nimble-components/src/select/template.ts
index 853eaad88c..657b1191c5 100644
--- a/packages/nimble-components/src/select/template.ts
+++ b/packages/nimble-components/src/select/template.ts
@@ -108,7 +108,7 @@ SelectOptions
         }
         <${anchoredRegionTag}
             ${ref('anchoredRegion')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
             vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
@@ -123,7 +123,7 @@ SelectOptions
                     class="
                         listbox
                         ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
-                        ${x => x.positionAttribute}
+                        ${x => x.position || ''}
                     "
                     id="${x => x.listboxId}"
                     part="listbox"
@@ -133,7 +133,7 @@ SelectOptions
                     ${ref('listbox')}
                 >
                     ${when(x => x.filterMode !== FilterMode.none, html<Select>`
-                        <div class="filter-field ${x => x.positionAttribute}">
+                        <div class="filter-field ${x => x.position}">
                             <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
                             <input
                                 ${ref('filterInput')}
@@ -164,7 +164,7 @@ SelectOptions
                         `)}
                     </div>
                     ${when(x => x.loadingVisible, html<Select>`
-                        <div class="loading-container ${x => x.positionAttribute} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
+                        <div class="loading-container ${x => x.position} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
                             @click="${(x, c) => x.ignoreClickHandler(c.event as MouseEvent)}">
                             <span class="loading-label">
                                 ${x => loadingLabel.getValueFor(x)}

From 58f4d79da57b9707e78c5da3ae8c4aa56aaa3339 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 21 May 2025 16:25:26 -0500
Subject: [PATCH 06/18] Update stories and add visual test cases

---
 .../combobox-opened-position.stories.ts       | 58 +++++++++++++
 .../src/nimble/combobox/combobox.stories.ts   | 12 ++-
 .../mention-listbox-position.stories.ts       | 81 +++++++++++++++++++
 .../select/select-opened-position.stories.ts  | 59 ++++++++++++++
 .../src/nimble/select/select.stories.ts       | 17 +++-
 packages/storybook/src/utilities/storybook.ts |  2 +-
 6 files changed, 221 insertions(+), 8 deletions(-)
 create mode 100644 packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
 create mode 100644 packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
 create mode 100644 packages/storybook/src/nimble/select/select-opened-position.stories.ts

diff --git a/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
new file mode 100644
index 0000000000..4e20d6719f
--- /dev/null
+++ b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
@@ -0,0 +1,58 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '../../../../nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '../../../../nimble-components/src/list-option';
+import { comboboxTag } from '../../../../nimble-components/src/combobox';
+import { createStory } from '../../utilities/storybook';
+import { sharedMatrixParameters } from '../../utilities/matrix';
+
+const metadata: Meta = {
+    title: 'Tests/Combobox',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
+                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
+                + var(${smallPadding.cssCustomProperty}));
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
+            border-left: 2px solid green;"
+    >
+        <${comboboxTag}
+            open
+            style="margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${comboboxTag}>
+    </div>
+`;
+
+export const comboboxDefaultOpenSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
+export const comboboxDefaultOpenSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
+export const comboboxDefaultOpenSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
+export const comboboxDefaultOpenEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
+export const comboboxDefaultOpenMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
+export const comboboxDefaultOpenMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
diff --git a/packages/storybook/src/nimble/combobox/combobox.stories.ts b/packages/storybook/src/nimble/combobox/combobox.stories.ts
index 57f09cbd99..a52278589d 100644
--- a/packages/storybook/src/nimble/combobox/combobox.stories.ts
+++ b/packages/storybook/src/nimble/combobox/combobox.stories.ts
@@ -142,8 +142,14 @@ const metadata: Meta<ComboboxArgs> = {
         },
         dropDownPosition: {
             name: 'position',
-            options: [DropdownPosition.above, DropdownPosition.below],
-            control: { type: 'select' },
+            options: [undefined, ...Object.values(DropdownPosition)],
+            type: 'string',
+            control: {
+                type: 'radio',
+                labels: {
+                    undefined: 'default'
+                }
+            },
             description: dropdownPositionDescription({
                 componentName: 'combobox'
             }),
@@ -222,7 +228,7 @@ const metadata: Meta<ComboboxArgs> = {
     args: {
         label: 'Combobox',
         disabled: false,
-        dropDownPosition: 'below',
+        dropDownPosition: undefined,
         autocomplete: ComboboxAutocomplete.both,
         errorVisible: false,
         errorText: 'Value is invalid',
diff --git a/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
new file mode 100644
index 0000000000..175ff5967a
--- /dev/null
+++ b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
@@ -0,0 +1,81 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    bodyFont,
+    bodyFontLineHeight,
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '../../../../../nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '../../../../../nimble-components/src/list-option';
+import { richTextMentionListboxTag } from '../../../../../nimble-components/src/rich-text/mention-listbox';
+import { sharedMatrixParameters } from '../../../utilities/matrix';
+import { createStory } from '../../../utilities/storybook';
+
+const metadata: Meta = {
+    title: 'Tests/Rich Text Mention Listbox',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+const playFunction = (): void => {
+    const anchor = document.querySelector('.anchor');
+    const listbox = document.querySelector(richTextMentionListboxTag)!;
+    listbox.show({
+        anchorNode: anchor as HTMLElement,
+        filter: ''
+    });
+};
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
+                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})));
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${bodyFontLineHeight.cssCustomProperty}));
+            border-left: 2px solid green;"
+    >
+        <div
+            class='anchor'
+            style="
+                display: inline-block;
+                margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);
+                font: var(${bodyFont.cssCustomProperty});
+            "
+        >@</div>
+        <${richTextMentionListboxTag}
+            stylez="height: var(--ni-private-dropdown-delta-height);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${richTextMentionListboxTag}>
+    </div>
+`;
+
+export const richTextMentionListboxSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
+richTextMentionListboxSufficientRoomAboveAndBelow.play = playFunction;
+export const richTextMentionListboxSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
+richTextMentionListboxSufficientRoomAboveButNotBelow.play = playFunction;
+export const richTextMentionListboxSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
+richTextMentionListboxSufficientRoomBelowButNotAbove.play = playFunction;
+export const richTextMentionListboxEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
+richTextMentionListboxEquallyInsufficientRoomAboveAndBelow.play = playFunction;
+export const richTextMentionListboxMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
+richTextMentionListboxMoreInsufficientAboveThanBelow.play = playFunction;
+export const richTextMentionListboxMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
+richTextMentionListboxMoreInsufficientBelowThanAbove.play = playFunction;
diff --git a/packages/storybook/src/nimble/select/select-opened-position.stories.ts b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
new file mode 100644
index 0000000000..73bac31d00
--- /dev/null
+++ b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
@@ -0,0 +1,59 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, repeat, ViewTemplate } from '@ni/fast-element';
+import {
+    borderWidth,
+    controlHeight,
+    smallPadding
+} from '../../../../nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '../../../../nimble-components/src/list-option';
+import { selectTag } from '../../../../nimble-components/src/select';
+import { createStory } from '../../utilities/storybook';
+import { sharedMatrixParameters } from '../../utilities/matrix';
+
+const metadata: Meta = {
+    title: 'Tests/Select',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const numListOptions = 3;
+
+// prettier-ignore
+const component = (
+    aboveTooSmallByPixels: number,
+    belowTooSmallByPixels: number
+): ViewTemplate => html`
+    <style>
+        body.sb-show-main.sb-main-padded {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    </style>
+    <div
+        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
+                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
+                + var(${smallPadding.cssCustomProperty}));
+            height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
+            border-left: 2px solid green;"
+    >
+        <${selectTag}
+            open
+            filter-mode="standard"
+            style="margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);"
+        >
+            ${repeat(() => [...Array(numListOptions).keys()], html<number>`
+                <${listOptionTag} value="${x => x}">Option ${x => x + 1}</${listOptionTag}>
+            `)}
+        </${selectTag}>
+    </div>
+`;
+
+export const selectDefaultOpenSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
+export const selectDefaultOpenSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
+export const selectDefaultOpenSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
+export const selectDefaultOpenEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
+export const selectDefaultOpenMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
+export const selectDefaultOpenMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
diff --git a/packages/storybook/src/nimble/select/select.stories.ts b/packages/storybook/src/nimble/select/select.stories.ts
index 4d42ae2213..3d081db383 100644
--- a/packages/storybook/src/nimble/select/select.stories.ts
+++ b/packages/storybook/src/nimble/select/select.stories.ts
@@ -5,7 +5,10 @@ import { listOptionTag } from '@ni/nimble-components/dist/esm/list-option';
 import { listOptionGroupTag } from '@ni/nimble-components/dist/esm/list-option-group';
 import { selectTag } from '@ni/nimble-components/dist/esm/select';
 import { FilterMode } from '@ni/nimble-components/dist/esm/select/types';
-import { DropdownAppearance } from '@ni/nimble-components/dist/esm/patterns/dropdown/types';
+import {
+    DropdownAppearance,
+    DropdownPosition
+} from '@ni/nimble-components/dist/esm/patterns/dropdown/types';
 
 import {
     apiCategory,
@@ -191,8 +194,14 @@ const metadata: Meta<SelectArgs> = {
         },
         dropDownPosition: {
             name: 'position',
-            options: ['above', 'below'],
-            control: { type: 'select' },
+            options: [undefined, ...Object.values(DropdownPosition)],
+            type: 'string',
+            control: {
+                type: 'radio',
+                labels: {
+                    undefined: 'default'
+                }
+            },
             description: dropdownPositionDescription({
                 componentName: 'select'
             }),
@@ -296,7 +305,7 @@ const metadata: Meta<SelectArgs> = {
         errorVisible: false,
         errorText: 'Value is invalid',
         filterMode: 'none',
-        dropDownPosition: 'below',
+        dropDownPosition: undefined,
         appearance: DropdownAppearance.underline,
         optionsType: ExampleOptionsType.simpleOptions,
         clearable: false,
diff --git a/packages/storybook/src/utilities/storybook.ts b/packages/storybook/src/utilities/storybook.ts
index 872aab1ee4..effc82e2b2 100644
--- a/packages/storybook/src/utilities/storybook.ts
+++ b/packages/storybook/src/utilities/storybook.ts
@@ -207,7 +207,7 @@ export const requiredVisibleDescription = 'When set to `true`, an indicator will
 
 export const dropdownPositionDescription = (options: {
     componentName: string
-}): string => `Controls the position of the dropdown relative to the ${options.componentName}.`;
+}): string => `Controls the position of the dropdown relative to the ${options.componentName}. If unset, defaults to opening below when there is enough room and above otherwise.`;
 export const optionsDescription = (options: {
     includeGrouping: boolean
 }): string => `The \`${listOptionTag}\` items for the user to select from.${options.includeGrouping ? ` Each ${listOptionTag} can also be grouped using the \`${listOptionGroupTag}\` element.` : ''} `;

From a9b26795246fd6b2bf62a33e9ca6aa9abd2fccd2 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 21 May 2025 16:27:30 -0500
Subject: [PATCH 07/18] Update change file comment

---
 ...-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
index 45fc02f1ac..df0818759e 100644
--- a/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
+++ b/change/@ni-nimble-components-f4992b1c-b7f0-46e1-a684-b5afff8683f6.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Allow rich-text mention listbox to open above the cursor",
+  "comment": "Align positioning behavior of rich-text mention listbox, combobox, select, and menu button",
   "packageName": "@ni/nimble-components",
   "email": "7282195+m-akinc@users.noreply.github.com",
   "dependentChangeType": "patch"

From ec65b4118b1440f7eb3c73ee4f6109745322ac74 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 21 May 2025 16:42:29 -0500
Subject: [PATCH 08/18] Fix description

---
 packages/storybook/src/utilities/storybook.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/storybook/src/utilities/storybook.ts b/packages/storybook/src/utilities/storybook.ts
index effc82e2b2..1c7ae2302b 100644
--- a/packages/storybook/src/utilities/storybook.ts
+++ b/packages/storybook/src/utilities/storybook.ts
@@ -207,7 +207,7 @@ export const requiredVisibleDescription = 'When set to `true`, an indicator will
 
 export const dropdownPositionDescription = (options: {
     componentName: string
-}): string => `Controls the position of the dropdown relative to the ${options.componentName}. If unset, defaults to opening below when there is enough room and above otherwise.`;
+}): string => `Controls the position of the dropdown relative to the ${options.componentName}. If unset, defaults to opening below when there is enough space, otherwise opens to the side that has more space.`;
 export const optionsDescription = (options: {
     includeGrouping: boolean
 }): string => `The \`${listOptionTag}\` items for the user to select from.${options.includeGrouping ? ` Each ${listOptionTag} can also be grouped using the \`${listOptionGroupTag}\` element.` : ''} `;

From 9f637101fdb4ebf264b6707a6b3ae67415a7695b Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 28 May 2025 14:36:34 -0500
Subject: [PATCH 09/18] Avoid "undefined" in class list

---
 packages/nimble-components/src/select/template.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nimble-components/src/select/template.ts b/packages/nimble-components/src/select/template.ts
index 657b1191c5..d3430a5ce5 100644
--- a/packages/nimble-components/src/select/template.ts
+++ b/packages/nimble-components/src/select/template.ts
@@ -133,7 +133,7 @@ SelectOptions
                     ${ref('listbox')}
                 >
                     ${when(x => x.filterMode !== FilterMode.none, html<Select>`
-                        <div class="filter-field ${x => x.position}">
+                        <div class="filter-field ${x => x.position || ''}">
                             <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
                             <input
                                 ${ref('filterInput')}
@@ -164,7 +164,7 @@ SelectOptions
                         `)}
                     </div>
                     ${when(x => x.loadingVisible, html<Select>`
-                        <div class="loading-container ${x => x.position} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
+                        <div class="loading-container ${x => x.position || ''} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
                             @click="${(x, c) => x.ignoreClickHandler(c.event as MouseEvent)}">
                             <span class="loading-label">
                                 ${x => loadingLabel.getValueFor(x)}

From 9ecf56b7794f92ba4bb2fc7afb23fcf1eca33747 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 28 May 2025 14:38:38 -0500
Subject: [PATCH 10/18] Ensure document element takes up full viewport in
 headless browser tests

---
 .../src/utilities/tests/setup-configuration.ts                | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nimble-components/src/utilities/tests/setup-configuration.ts b/packages/nimble-components/src/utilities/tests/setup-configuration.ts
index 4f5c2bdbf5..072bfce3eb 100644
--- a/packages/nimble-components/src/utilities/tests/setup-configuration.ts
+++ b/packages/nimble-components/src/utilities/tests/setup-configuration.ts
@@ -6,3 +6,7 @@ console.error = (data: any): void => fail(data);
 // eslint-disable-next-line no-console, @typescript-eslint/no-explicit-any
 console.warn = (data: any): void => fail(data);
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+
+// Headless Chrome is missing some styles on the document element.
+// Without this, the <html> element has a height of 8px, which can cause some tests to fail.
+document.documentElement.style.setProperty('height', '100%');

From b39f755ad3a4792781e2a2f80b0ad3ef5dee4b82 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 28 May 2025 14:39:10 -0500
Subject: [PATCH 11/18] Remove stale comment

---
 .../src/utilities/tests/intersection-observer.ts              | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/intersection-observer.ts b/packages/nimble-components/src/utilities/tests/intersection-observer.ts
index dfc9df997c..249d4d1884 100644
--- a/packages/nimble-components/src/utilities/tests/intersection-observer.ts
+++ b/packages/nimble-components/src/utilities/tests/intersection-observer.ts
@@ -17,10 +17,6 @@ export async function checkFullyInViewport(
                     resolve(false);
                 }
             },
-            // As of now, passing a document as root is not supported on Safari:
-            // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility
-            // If we begin running these tests on Safari, we may need to skip those that use this function.
-            // This issue tracks expanding testing to Safari: https://github.com/ni/nimble/issues/990
             { threshold: 1.0, root: document }
         );
         intersectionObserver.observe(element);

From 5d67687cb732d071af189080e0caa51face68e58 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 30 Jun 2025 17:26:11 -0500
Subject: [PATCH 12/18] Adapt mention-listbox and update tests to wait for
 positioning

---
 .../combobox/testing/combobox.pageobject.ts   | 26 ++++++++++---------
 .../src/combobox/tests/combobox.spec.ts       |  2 +-
 .../src/rich-text/mention-listbox/index.ts    | 16 +++++++++++-
 .../src/rich-text/mention-listbox/template.ts |  8 +++---
 .../tests/mention-listbox.spec.ts             |  9 ++++---
 .../src/select/tests/select.spec.ts           | 10 ++++---
 .../src/utilities/testing/component.ts        | 10 +++++++
 7 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts b/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
index a37b281145..3c9ab0e5b4 100644
--- a/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
+++ b/packages/nimble-components/src/combobox/testing/combobox.pageobject.ts
@@ -3,8 +3,8 @@ import type { Combobox } from '..';
 import { listOptionTag } from '../../list-option';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { slotTextContent } from '../../utilities/models/slot-text-content';
 
@@ -13,11 +13,6 @@ import { slotTextContent } from '../../utilities/models/slot-text-content';
  * of querying and interacting with the component during tests.
  */
 export class ComboboxPageObject {
-    private readonly regionLoadedListener = waitForEvent(
-        this.comboboxElement,
-        'loaded'
-    );
-
     public constructor(protected readonly comboboxElement: Combobox) {}
 
     /**
@@ -31,7 +26,7 @@ export class ComboboxPageObject {
      * Sets the input text and commits the value by pressing Enter. Will emit a 'change' event.
      */
     public async commitValue(text: string): Promise<void> {
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         this.setInputText(text);
         this.pressEnterKey();
     }
@@ -76,7 +71,7 @@ export class ComboboxPageObject {
      */
     public async clickAndWaitForOpen(): Promise<void> {
         this.clickCombobox();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitForUpdatesAsync();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
@@ -95,7 +90,7 @@ export class ComboboxPageObject {
      */
     public async clickDropdownButtonAndWaitForOpen(): Promise<void> {
         this.clickDropdownButton();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
 
@@ -219,7 +214,14 @@ export class ComboboxPageObject {
         );
     }
 
-    private async waitForAnchoredRegionLoaded(): Promise<void> {
-        await this.regionLoadedListener;
+    /**
+     * @internal
+     */
+    public async waitForListboxPositioned(): Promise<void> {
+        await waitPredicate(
+            () => this.comboboxElement.region?.classList.contains(
+                'horizontal-center'
+            ) === true
+        );
     }
 }
diff --git a/packages/nimble-components/src/combobox/tests/combobox.spec.ts b/packages/nimble-components/src/combobox/tests/combobox.spec.ts
index 98ca34b24f..ab6320f870 100644
--- a/packages/nimble-components/src/combobox/tests/combobox.spec.ts
+++ b/packages/nimble-components/src/combobox/tests/combobox.spec.ts
@@ -508,7 +508,7 @@ describe('Combobox', () => {
         it('should set classes based on open, disabled, and position', async () => {
             const { element, connect, disconnect } = await setup();
             await connect();
-            await waitForUpdatesAsync();
+            await new ComboboxPageObject(element).waitForListboxPositioned();
 
             expect(element.classList.contains('open')).toBeTrue();
             expect(element.classList.contains('disabled')).toBeTrue();
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index aac435deeb..62e238f6b8 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -40,7 +40,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @internal
      */
     @observable
-    public position?: DropdownPosition;
+    public availableViewportHeight = 0;
 
     /**
      * @internal
@@ -107,6 +107,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
+        this.updateAvailableViewportHeight();
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -282,6 +283,19 @@ export class RichTextMentionListbox extends FoundationListbox {
     private setOpen(value: boolean): void {
         this.open = value;
     }
+
+    private updateAvailableViewportHeight(): void {
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
+        this.availableViewportHeight = Math.max(
+            availableSpaceAbove,
+            availableSpaceBelow
+        );
+    }
 }
 
 const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/template.ts b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
index c4237615b1..8356de4c7e 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/template.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/template.ts
@@ -3,7 +3,6 @@ import { Listbox } from '@ni/fast-foundation';
 import type { RichTextMentionListbox } from '.';
 import { anchoredRegionTag } from '../../anchored-region';
 import { filterNoResultsLabel } from '../../label-provider/core/label-tokens';
-import { DropdownPosition } from '../../patterns/dropdown/types';
 
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
@@ -11,11 +10,11 @@ export const template = html<RichTextMentionListbox>`
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
-            vertical-default-position="${x => (x.position === DropdownPosition.above ? 'top' : 'bottom')}"
-            vertical-positioning-mode="${x => (!x.position ? 'dynamic' : 'locktodefault')}"
+            vertical-default-position="bottom"
+            vertical-positioning-mode="dynamic"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
@@ -30,6 +29,7 @@ export const template = html<RichTextMentionListbox>`
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
                 ?disabled="${x => x.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
                 ${ref('listbox')}
             >
                 <slot name="option"
diff --git a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
index 3f349c3792..73c5084be8 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
@@ -4,8 +4,8 @@ import { waitForUpdatesAsync } from '../../../testing/async-helpers';
 import { type Fixture, fixture } from '../../../utilities/tests/fixture';
 import { listOptionTag } from '../../../list-option';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../../utilities/testing/component';
 import { checkFullyInViewport } from '../../../utilities/tests/intersection-observer';
 
@@ -49,12 +49,13 @@ describe('RichTextMentionListbox', () => {
     }
 
     async function showAndWaitForOpen(filter = ''): Promise<void> {
-        const regionLoadedPromise = waitForEvent(element, 'loaded');
         element.show({
             anchorNode: anchor,
             filter
         });
-        await regionLoadedPromise;
+        await waitPredicate(
+            () => element.region?.classList.contains('horizontal-center') === true
+        );
     }
 
     beforeEach(async () => {
diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts
index 2ecbecf809..a62ee9a5d8 100644
--- a/packages/nimble-components/src/select/tests/select.spec.ts
+++ b/packages/nimble-components/src/select/tests/select.spec.ts
@@ -12,7 +12,8 @@ import { checkFullyInViewport } from '../../utilities/tests/intersection-observe
 import { FilterMode, type SelectFilterInputEventDetail } from '../types';
 import {
     waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { filterSearchLabel } from '../../label-provider/core/label-tokens';
 import { ListOptionGroup, listOptionGroupTag } from '../../list-option-group';
@@ -107,9 +108,11 @@ async function setupWithGroups(): Promise<Fixture<Select>> {
 }
 
 async function clickAndWaitForOpen(select: Select): Promise<void> {
-    const regionLoadedPromise = waitForEvent(select, 'loaded');
     select.click();
-    await regionLoadedPromise;
+    await waitPredicate(
+        () => select.anchoredRegion?.classList.contains('horizontal-center')
+            === true
+    );
 }
 
 describe('Select', () => {
@@ -939,7 +942,6 @@ describe('Select', () => {
             await connect();
             element.focus();
             await clickAndWaitForOpen(element);
-            await waitForUpdatesAsync();
             await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
 
             expect(element.scrollableRegion.scrollTop).toBeGreaterThan(8000);
diff --git a/packages/nimble-components/src/utilities/testing/component.ts b/packages/nimble-components/src/utilities/testing/component.ts
index 1c8bff39f4..522c261a53 100644
--- a/packages/nimble-components/src/utilities/testing/component.ts
+++ b/packages/nimble-components/src/utilities/testing/component.ts
@@ -79,3 +79,13 @@ export async function waitTimeout(ms = 0): Promise<void> {
         window.setTimeout(() => resolve(undefined), ms);
     });
 }
+
+/**
+ * Waits for a predicate function to return truthy value (polls in loop of waitForUpdatesAsync calls).
+ */
+export async function waitPredicate(predicate: () => boolean): Promise<void> {
+    while (!predicate()) {
+        // eslint-disable-next-line no-await-in-loop
+        await waitForUpdatesAsync();
+    }
+}

From ce53d603827d527983e06ce4732e9f289201a076 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 30 Jun 2025 18:51:35 -0500
Subject: [PATCH 13/18] Update visual tests and implement minimum dropdown
 height

---
 .../src/combobox/template.ts                  |  2 +-
 .../src/patterns/dropdown/styles.ts           | 27 ++++++---
 .../combobox-opened-position.stories.ts       | 46 ++++++++++-----
 .../mention-listbox-position.stories.ts       | 56 ++++++++++++-------
 .../nimble/select/select-matrix.stories.ts    | 11 ++--
 .../select/select-opened-position.stories.ts  | 47 ++++++++++------
 6 files changed, 125 insertions(+), 64 deletions(-)

diff --git a/packages/nimble-components/src/combobox/template.ts b/packages/nimble-components/src/combobox/template.ts
index b108cc3238..a4f37a7eaf 100644
--- a/packages/nimble-components/src/combobox/template.ts
+++ b/packages/nimble-components/src/combobox/template.ts
@@ -28,7 +28,7 @@ ComboboxOptions
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
-        class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}"
+        class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position || ''}"
         ?open="${x => x.open}"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
index ed0475cfdd..54327b1e03 100644
--- a/packages/nimble-components/src/patterns/dropdown/styles.ts
+++ b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -212,18 +212,26 @@ export const styles = css`
         flex-direction: column;
         width: 100%;
         --ni-private-listbox-visible-option-count: 10.5;
+        --ni-private-listbox-minimum-visible-option-count: 1.5;
         --ni-private-listbox-anchor-element-gap: ${smallPadding};
         --ni-private-listbox-padding: ${smallPadding};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
-        --ni-private-listbox-ideal-height: calc(
+        --ni-private-listbox-boilerplate-height: calc(
             var(--ni-private-listbox-anchor-element-gap) + 
             2 * ${borderWidth} + 
             var(--ni-private-listbox-padding) +
-            ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
             var(--ni-private-listbox-filter-height) +
             var(--ni-private-listbox-loading-indicator-height)
         );
+        --ni-private-listbox-ideal-height: calc(
+            var(--ni-private-listbox-boilerplate-height) +
+            ${controlHeight} * var(--ni-private-listbox-visible-option-count)
+        );
+        --ni-private-listbox-minimum-height: calc(
+            var(--ni-private-listbox-boilerplate-height) +
+            ${controlHeight} * var(--ni-private-listbox-minimum-visible-option-count)
+        );
         max-height: var(--ni-private-listbox-ideal-height);
         box-shadow: ${elevation2BoxShadow};
         border: ${borderWidth} solid ${popupBorderColor};
@@ -231,12 +239,15 @@ export const styles = css`
     }
 
     .anchored-region.confined-to-view .listbox {
-        max-height: min(
-            var(--ni-private-listbox-ideal-height),
-            calc(
-                var(--ni-private-listbox-available-viewport-height) - 
-                var(--ni-private-listbox-anchor-element-gap)
-            )
+        max-height: max(
+            min(
+                var(--ni-private-listbox-ideal-height),
+                calc(
+                    var(--ni-private-listbox-available-viewport-height) - 
+                    var(--ni-private-listbox-anchor-element-gap)
+                )
+            ),
+            var(--ni-private-listbox-minimum-height)
         );
     }
 
diff --git a/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
index 4e20d6719f..6fbf836fc7 100644
--- a/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
+++ b/packages/storybook/src/nimble/combobox/combobox-opened-position.stories.ts
@@ -4,9 +4,9 @@ import {
     borderWidth,
     controlHeight,
     smallPadding
-} from '../../../../nimble-components/src/theme-provider/design-tokens';
-import { listOptionTag } from '../../../../nimble-components/src/list-option';
-import { comboboxTag } from '../../../../nimble-components/src/combobox';
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { comboboxTag } from '@ni/nimble-components/src/combobox';
 import { createStory } from '../../utilities/storybook';
 import { sharedMatrixParameters } from '../../utilities/matrix';
 
@@ -28,16 +28,20 @@ const component = (
 ): ViewTemplate => html`
     <style>
         body.sb-show-main.sb-main-padded {
-            padding-top: 0px;
-            padding-bottom: 0px;
+            padding: 0px;
         }
     </style>
     <div
-        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
-                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
-                + var(${smallPadding.cssCustomProperty}));
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})) +
+                var(${smallPadding.cssCustomProperty})
+            );
             height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
-            border-left: 2px solid green;"
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
     >
         <${comboboxTag}
             open
@@ -50,9 +54,21 @@ const component = (
     </div>
 `;
 
-export const comboboxDefaultOpenSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
-export const comboboxDefaultOpenSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
-export const comboboxDefaultOpenSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
-export const comboboxDefaultOpenEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
-export const comboboxDefaultOpenMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
-export const comboboxDefaultOpenMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
+export const openDefault$SufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+export const openDefault$SufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+export const openDefault$SufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+export const openDefault$AboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);
diff --git a/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
index 175ff5967a..9b2ef79465 100644
--- a/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
+++ b/packages/storybook/src/nimble/rich-text/mention-listbox/mention-listbox-position.stories.ts
@@ -6,9 +6,9 @@ import {
     borderWidth,
     controlHeight,
     smallPadding
-} from '../../../../../nimble-components/src/theme-provider/design-tokens';
-import { listOptionTag } from '../../../../../nimble-components/src/list-option';
-import { richTextMentionListboxTag } from '../../../../../nimble-components/src/rich-text/mention-listbox';
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { richTextMentionListboxTag } from '@ni/nimble-components/src/rich-text/mention-listbox';
 import { sharedMatrixParameters } from '../../../utilities/matrix';
 import { createStory } from '../../../utilities/storybook';
 
@@ -39,15 +39,19 @@ const component = (
 ): ViewTemplate => html`
     <style>
         body.sb-show-main.sb-main-padded {
-            padding-top: 0px;
-            padding-bottom: 0px;
+            padding: 0px;
         }
     </style>
     <div
-        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
-                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})));
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
+            );
             height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${bodyFontLineHeight.cssCustomProperty}));
-            border-left: 2px solid green;"
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
     >
         <div
             class='anchor'
@@ -67,15 +71,27 @@ const component = (
     </div>
 `;
 
-export const richTextMentionListboxSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
-richTextMentionListboxSufficientRoomAboveAndBelow.play = playFunction;
-export const richTextMentionListboxSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
-richTextMentionListboxSufficientRoomAboveButNotBelow.play = playFunction;
-export const richTextMentionListboxSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
-richTextMentionListboxSufficientRoomBelowButNotAbove.play = playFunction;
-export const richTextMentionListboxEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
-richTextMentionListboxEquallyInsufficientRoomAboveAndBelow.play = playFunction;
-export const richTextMentionListboxMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
-richTextMentionListboxMoreInsufficientAboveThanBelow.play = playFunction;
-export const richTextMentionListboxMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
-richTextMentionListboxMoreInsufficientBelowThanAbove.play = playFunction;
+export const sufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+sufficientSpaceAboveAndBelow.play = playFunction;
+export const sufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+sufficientSpaceAboveButNotBelow.play = playFunction;
+export const sufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+sufficientSpaceBelowButNotAbove.play = playFunction;
+export const aboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+aboveAndBelowEquallyTooSmall.play = playFunction;
+export const bothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+bothTooSmallButMoreSpaceBelow.play = playFunction;
+export const bothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);
+bothTooSmallButMoreSpaceAbove.play = playFunction;
diff --git a/packages/storybook/src/nimble/select/select-matrix.stories.ts b/packages/storybook/src/nimble/select/select-matrix.stories.ts
index eae2fd3691..52e66f5ddc 100644
--- a/packages/storybook/src/nimble/select/select-matrix.stories.ts
+++ b/packages/storybook/src/nimble/select/select-matrix.stories.ts
@@ -212,10 +212,13 @@ const playFunction = async (): Promise<void> => {
 };
 
 export const navigateToDifferentOption: StoryFn = createStory(
-    html`<${selectTag} open style="width: 250px;">
-        <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
-        <${listOptionTag}>Option 2</${listOptionTag}>
-    </${selectTag}>`
+    html`
+    <div style="height: 250px;">
+        <${selectTag} open style="width: 250px;">
+            <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
+            <${listOptionTag}>Option 2</${listOptionTag}>
+        </${selectTag}>
+    </div>`
 );
 
 navigateToDifferentOption.play = playFunction;
diff --git a/packages/storybook/src/nimble/select/select-opened-position.stories.ts b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
index 73bac31d00..7bd1b1f0d1 100644
--- a/packages/storybook/src/nimble/select/select-opened-position.stories.ts
+++ b/packages/storybook/src/nimble/select/select-opened-position.stories.ts
@@ -4,9 +4,9 @@ import {
     borderWidth,
     controlHeight,
     smallPadding
-} from '../../../../nimble-components/src/theme-provider/design-tokens';
-import { listOptionTag } from '../../../../nimble-components/src/list-option';
-import { selectTag } from '../../../../nimble-components/src/select';
+} from '@ni/nimble-components/src/theme-provider/design-tokens';
+import { listOptionTag } from '@ni/nimble-components/src/list-option';
+import { selectTag } from '@ni/nimble-components/src/select';
 import { createStory } from '../../utilities/storybook';
 import { sharedMatrixParameters } from '../../utilities/matrix';
 
@@ -28,20 +28,23 @@ const component = (
 ): ViewTemplate => html`
     <style>
         body.sb-show-main.sb-main-padded {
-            padding-top: 0px;
-            padding-bottom: 0px;
+            padding: 0px;
         }
     </style>
     <div
-        style="--ni-private-dropdown-delta-height: calc(${numListOptions} * var(${controlHeight.cssCustomProperty}) 
-                + 2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty}))
-                + var(${smallPadding.cssCustomProperty}));
+        style="--ni-private-dropdown-delta-height: calc(
+                ${numListOptions} * var(${controlHeight.cssCustomProperty}) +
+                2 * (var(${smallPadding.cssCustomProperty}) + var(${borderWidth.cssCustomProperty})) +
+                var(${smallPadding.cssCustomProperty})
+            );
             height: calc(2 * var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels + belowTooSmallByPixels}px + var(${controlHeight.cssCustomProperty}));
-            border-left: 2px solid green;"
+            width: fit-content;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-bottom: 2px solid green;"
     >
         <${selectTag}
             open
-            filter-mode="standard"
             style="margin-top: calc(var(--ni-private-dropdown-delta-height) - ${aboveTooSmallByPixels}px);"
         >
             ${repeat(() => [...Array(numListOptions).keys()], html<number>`
@@ -51,9 +54,21 @@ const component = (
     </div>
 `;
 
-export const selectDefaultOpenSufficientRoomAboveAndBelow: StoryFn = createStory(component(0, 0));
-export const selectDefaultOpenSufficientRoomAboveButNotBelow: StoryFn = createStory(component(0, 1));
-export const selectDefaultOpenSufficientRoomBelowButNotAbove: StoryFn = createStory(component(1, 0));
-export const selectDefaultOpenEquallyInsufficientRoomAboveAndBelow: StoryFn = createStory(component(1, 1));
-export const selectDefaultOpenMoreInsufficientAboveThanBelow: StoryFn = createStory(component(2, 1));
-export const selectDefaultOpenMoreInsufficientBelowThanAbove: StoryFn = createStory(component(1, 2));
+export const openDefault$SufficientSpaceAboveAndBelow: StoryFn = createStory(
+    component(0, 0)
+);
+export const openDefault$SufficientSpaceAboveButNotBelow: StoryFn = createStory(
+    component(0, 40)
+);
+export const openDefault$SufficientSpaceBelowButNotAbove: StoryFn = createStory(
+    component(40, 0)
+);
+export const openDefault$AboveAndBelowEquallyTooSmall: StoryFn = createStory(
+    component(40, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceBelow: StoryFn = createStory(
+    component(80, 40)
+);
+export const openDefault$BothTooSmallButMoreSpaceAbove: StoryFn = createStory(
+    component(40, 80)
+);

From 43a4983c6da78af6b57297a8fc4b38761ff64501 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 1 Jul 2025 13:32:09 -0500
Subject: [PATCH 14/18] Remove unused import

---
 .../nimble-components/src/rich-text/mention-listbox/index.ts     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nimble-components/src/rich-text/mention-listbox/index.ts b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
index 62e238f6b8..be7e85d605 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/index.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/index.ts
@@ -12,7 +12,6 @@ import type { AnchoredRegion } from '../../anchored-region';
 import { diacriticInsensitiveStringNormalizer } from '../../utilities/models/string-normalizers';
 import type { ListOption } from '../../list-option';
 import type { MentionListboxShowOptions } from './types';
-import { DropdownPosition } from '../../patterns/dropdown/types';
 
 declare global {
     interface HTMLElementTagNameMap {

From 9f905d3430d1e715254b9225b799b6486a290bf3 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 1 Jul 2025 13:56:19 -0500
Subject: [PATCH 15/18] Reduce size of containing div for two existing select
 visual tests

---
 packages/storybook/src/nimble/select/select-matrix.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/src/nimble/select/select-matrix.stories.ts b/packages/storybook/src/nimble/select/select-matrix.stories.ts
index 52e66f5ddc..e6d32fb629 100644
--- a/packages/storybook/src/nimble/select/select-matrix.stories.ts
+++ b/packages/storybook/src/nimble/select/select-matrix.stories.ts
@@ -213,7 +213,7 @@ const playFunction = async (): Promise<void> => {
 
 export const navigateToDifferentOption: StoryFn = createStory(
     html`
-    <div style="height: 250px;">
+    <div style="height: 120px; width: 250px;">
         <${selectTag} open style="width: 250px;">
             <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
             <${listOptionTag}>Option 2</${listOptionTag}>
@@ -225,7 +225,7 @@ navigateToDifferentOption.play = playFunction;
 
 export const navigateToDifferentOptionWithGroups: StoryFn = createStory(
     html`
-    <div style="height: 250px;">
+    <div style="height: 120px; width: 250px;">
         <${selectTag} open style="width: 250px;">
             <${listOptionGroupTag} label="Group 1">
                 <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>

From 326327ee28ffe0b318534a416134d4e8f94f359a Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 1 Jul 2025 14:21:59 -0500
Subject: [PATCH 16/18] Tweak div boundary

---
 packages/storybook/src/nimble/select/select-matrix.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/src/nimble/select/select-matrix.stories.ts b/packages/storybook/src/nimble/select/select-matrix.stories.ts
index e6d32fb629..6c8dcbe8a0 100644
--- a/packages/storybook/src/nimble/select/select-matrix.stories.ts
+++ b/packages/storybook/src/nimble/select/select-matrix.stories.ts
@@ -213,7 +213,7 @@ const playFunction = async (): Promise<void> => {
 
 export const navigateToDifferentOption: StoryFn = createStory(
     html`
-    <div style="height: 120px; width: 250px;">
+    <div style="height: 130px; width: 250px;">
         <${selectTag} open style="width: 250px;">
             <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>
             <${listOptionTag}>Option 2</${listOptionTag}>
@@ -225,7 +225,7 @@ navigateToDifferentOption.play = playFunction;
 
 export const navigateToDifferentOptionWithGroups: StoryFn = createStory(
     html`
-    <div style="height: 120px; width: 250px;">
+    <div style="height: 130px; width: 250px;">
         <${selectTag} open style="width: 250px;">
             <${listOptionGroupTag} label="Group 1">
                 <${listOptionTag} value="1" selected>Option 1</${listOptionTag}>

From e8d5c29365d337a037e1567dad4667b1fcfd7da9 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 1 Jul 2025 15:15:00 -0500
Subject: [PATCH 17/18] Update fast-react-wrapper, too

---
 package-lock.json                             | 20 +++++++++----------
 .../react-workspace/nimble-react/package.json |  2 +-
 .../spright-react/package.json                |  2 +-
 packages/storybook/package.json               |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9a6fd0e6d..6567d58a72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6219,9 +6219,9 @@
       "license": "MIT"
     },
     "node_modules/@ni/fast-foundation": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/@ni/fast-foundation/-/fast-foundation-10.0.2.tgz",
-      "integrity": "sha512-UJTjwtXOALLuje/5vJM/sZ+dGTsCCKUG9XOZzuguWd4igRWStrp0cTv87KQsiT1kZxzdHHorkfTL5FiHubrgvg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@ni/fast-foundation/-/fast-foundation-10.1.0.tgz",
+      "integrity": "sha512-msGrv9nJ4kWTFMyiRAU1Zju7Vw55cBKmm9dsODK2QBisYqBgPbMjgqWrQ/Y5f5TspidA23+TxGEohBYfUXNLyg==",
       "license": "MIT",
       "dependencies": {
         "@ni/fast-element": "^10.0.2",
@@ -6231,13 +6231,13 @@
       }
     },
     "node_modules/@ni/fast-react-wrapper": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ni/fast-react-wrapper/-/fast-react-wrapper-10.1.0.tgz",
-      "integrity": "sha512-iMvZuIYG+mB/A0mB98QlQz9dORdEFFSXqh4WQ+kjV/03jpHgLi0pQC3+saxj8JHs9QBsbDvPYKjDQSd0nTdMRA==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ni/fast-react-wrapper/-/fast-react-wrapper-10.1.1.tgz",
+      "integrity": "sha512-HqDu1kw9IA/Zgnnoc34N1wl1FnTDciAkloNVGV7rK2eJzjELq73v2XETi+Pa76Ms7CGdHG+6GYVEL6AQXevzjA==",
       "license": "MIT",
       "peerDependencies": {
         "@ni/fast-element": "^10.0.2",
-        "@ni/fast-foundation": "^10.0.2",
+        "@ni/fast-foundation": "^10.1.0",
         "react": "^16 || ^17 || ^18"
       }
     },
@@ -31466,7 +31466,7 @@
         "typescript": "~5.4.5"
       },
       "peerDependencies": {
-        "@ni/fast-react-wrapper": "^10.1.0",
+        "@ni/fast-react-wrapper": "^10.1.1",
         "@ni/nimble-components": "^33.11.1",
         "react": "^16 || ^17 || ^18"
       }
@@ -31500,7 +31500,7 @@
         "typescript": "~5.4.5"
       },
       "peerDependencies": {
-        "@ni/fast-react-wrapper": "^10.1.0",
+        "@ni/fast-react-wrapper": "^10.1.1",
         "@ni/spright-components": "^5.5.0",
         "react": "^16 || ^17 || ^18"
       }
@@ -31569,7 +31569,7 @@
         "@ni-private/eslint-config-nimble": "*",
         "@ni/fast-element": "^10.0.0",
         "@ni/fast-foundation": "^10.0.0",
-        "@ni/fast-react-wrapper": "^10.0.0",
+        "@ni/fast-react-wrapper": "^10.1.1",
         "@ni/fast-web-utilities": "^10.0.0",
         "@ni/nimble-components": "*",
         "@ni/nimble-react": "*",
diff --git a/packages/react-workspace/nimble-react/package.json b/packages/react-workspace/nimble-react/package.json
index 7ed1ac5b03..86742070e1 100644
--- a/packages/react-workspace/nimble-react/package.json
+++ b/packages/react-workspace/nimble-react/package.json
@@ -36,7 +36,7 @@
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
-    "@ni/fast-react-wrapper": "^10.1.0",
+    "@ni/fast-react-wrapper": "^10.1.1",
     "@ni/nimble-components": "^33.11.1",
     "react": "^16 || ^17 || ^18"
   }
diff --git a/packages/react-workspace/spright-react/package.json b/packages/react-workspace/spright-react/package.json
index c61d10ea69..e2e7663b73 100644
--- a/packages/react-workspace/spright-react/package.json
+++ b/packages/react-workspace/spright-react/package.json
@@ -28,7 +28,7 @@
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
-    "@ni/fast-react-wrapper": "^10.1.0",
+    "@ni/fast-react-wrapper": "^10.1.1",
     "@ni/spright-components": "^5.5.0",
     "react": "^16 || ^17 || ^18"
   }
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index c1229c970b..8e11273a7a 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -18,7 +18,7 @@
     "@ni-private/eslint-config-nimble": "*",
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.0.0",
-    "@ni/fast-react-wrapper": "^10.0.0",
+    "@ni/fast-react-wrapper": "^10.1.1",
     "@ni/fast-web-utilities": "^10.0.0",
     "@ni/nimble-components": "*",
     "@ni/nimble-react": "*",

From 2fdca650c80de670203dac2f9ed165724efc7cf4 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 1 Jul 2025 15:20:40 -0500
Subject: [PATCH 18/18] Revert "Update fast-react-wrapper, too"

This reverts commit e8d5c29365d337a037e1567dad4667b1fcfd7da9.
---
 package-lock.json                             | 20 +++++++++----------
 .../react-workspace/nimble-react/package.json |  2 +-
 .../spright-react/package.json                |  2 +-
 packages/storybook/package.json               |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6567d58a72..a9a6fd0e6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6219,9 +6219,9 @@
       "license": "MIT"
     },
     "node_modules/@ni/fast-foundation": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ni/fast-foundation/-/fast-foundation-10.1.0.tgz",
-      "integrity": "sha512-msGrv9nJ4kWTFMyiRAU1Zju7Vw55cBKmm9dsODK2QBisYqBgPbMjgqWrQ/Y5f5TspidA23+TxGEohBYfUXNLyg==",
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@ni/fast-foundation/-/fast-foundation-10.0.2.tgz",
+      "integrity": "sha512-UJTjwtXOALLuje/5vJM/sZ+dGTsCCKUG9XOZzuguWd4igRWStrp0cTv87KQsiT1kZxzdHHorkfTL5FiHubrgvg==",
       "license": "MIT",
       "dependencies": {
         "@ni/fast-element": "^10.0.2",
@@ -6231,13 +6231,13 @@
       }
     },
     "node_modules/@ni/fast-react-wrapper": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@ni/fast-react-wrapper/-/fast-react-wrapper-10.1.1.tgz",
-      "integrity": "sha512-HqDu1kw9IA/Zgnnoc34N1wl1FnTDciAkloNVGV7rK2eJzjELq73v2XETi+Pa76Ms7CGdHG+6GYVEL6AQXevzjA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@ni/fast-react-wrapper/-/fast-react-wrapper-10.1.0.tgz",
+      "integrity": "sha512-iMvZuIYG+mB/A0mB98QlQz9dORdEFFSXqh4WQ+kjV/03jpHgLi0pQC3+saxj8JHs9QBsbDvPYKjDQSd0nTdMRA==",
       "license": "MIT",
       "peerDependencies": {
         "@ni/fast-element": "^10.0.2",
-        "@ni/fast-foundation": "^10.1.0",
+        "@ni/fast-foundation": "^10.0.2",
         "react": "^16 || ^17 || ^18"
       }
     },
@@ -31466,7 +31466,7 @@
         "typescript": "~5.4.5"
       },
       "peerDependencies": {
-        "@ni/fast-react-wrapper": "^10.1.1",
+        "@ni/fast-react-wrapper": "^10.1.0",
         "@ni/nimble-components": "^33.11.1",
         "react": "^16 || ^17 || ^18"
       }
@@ -31500,7 +31500,7 @@
         "typescript": "~5.4.5"
       },
       "peerDependencies": {
-        "@ni/fast-react-wrapper": "^10.1.1",
+        "@ni/fast-react-wrapper": "^10.1.0",
         "@ni/spright-components": "^5.5.0",
         "react": "^16 || ^17 || ^18"
       }
@@ -31569,7 +31569,7 @@
         "@ni-private/eslint-config-nimble": "*",
         "@ni/fast-element": "^10.0.0",
         "@ni/fast-foundation": "^10.0.0",
-        "@ni/fast-react-wrapper": "^10.1.1",
+        "@ni/fast-react-wrapper": "^10.0.0",
         "@ni/fast-web-utilities": "^10.0.0",
         "@ni/nimble-components": "*",
         "@ni/nimble-react": "*",
diff --git a/packages/react-workspace/nimble-react/package.json b/packages/react-workspace/nimble-react/package.json
index 86742070e1..7ed1ac5b03 100644
--- a/packages/react-workspace/nimble-react/package.json
+++ b/packages/react-workspace/nimble-react/package.json
@@ -36,7 +36,7 @@
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
-    "@ni/fast-react-wrapper": "^10.1.1",
+    "@ni/fast-react-wrapper": "^10.1.0",
     "@ni/nimble-components": "^33.11.1",
     "react": "^16 || ^17 || ^18"
   }
diff --git a/packages/react-workspace/spright-react/package.json b/packages/react-workspace/spright-react/package.json
index e2e7663b73..c61d10ea69 100644
--- a/packages/react-workspace/spright-react/package.json
+++ b/packages/react-workspace/spright-react/package.json
@@ -28,7 +28,7 @@
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
-    "@ni/fast-react-wrapper": "^10.1.1",
+    "@ni/fast-react-wrapper": "^10.1.0",
     "@ni/spright-components": "^5.5.0",
     "react": "^16 || ^17 || ^18"
   }
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 8e11273a7a..c1229c970b 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -18,7 +18,7 @@
     "@ni-private/eslint-config-nimble": "*",
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.0.0",
-    "@ni/fast-react-wrapper": "^10.1.1",
+    "@ni/fast-react-wrapper": "^10.0.0",
     "@ni/fast-web-utilities": "^10.0.0",
     "@ni/nimble-components": "*",
     "@ni/nimble-react": "*",