@flywheel-io/vision 19.5.8 → 19.6.0

package/components/dialog/dialog.component.d.ts

@@ -24,6 +24,7 @@ export declare class FwDialogComponent {
     close: EventEmitter<void>;
     private isClosing;
     constructor(dialogRef: DialogRef, elementRef: ElementRef);
+    get hostTitle(): null;
     get classes(): {
         [key: string]: boolean;
     };

package/components/layouts/context/context.component.d.ts

@@ -12,6 +12,7 @@ export declare class FwLayoutContextComponent {
     iconColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success';
     title?: string;
     description?: string;
+    get hostTitle(): null;
     get classes(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutContextComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutContextComponent, "fw-layout-context", never, { "width": { "alias": "width"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, ["[slot='description']", "fw-button"], true, never>;

package/components/menu/menu-container/menu-container.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { FwTextInputComponent } from '../../text-input/text-input.component';
 import { FwMenuComponent } from '../menu.component';
@@ -10,6 +10,11 @@ import * as i1 from "@angular/cdk/coercion";
 export type MenuFilterFn = (filter: string, menuItems: readonly FwMenuItemComponent[]) => FwMenuItemComponent[];
 export declare class FwMenuContainerComponent implements AfterViewInit {
     private sanitizer;
+    private ngZone;
+    menuWrapperRef: ElementRef<HTMLElement>;
+    canScrollUp: import("@angular/core").WritableSignal<boolean>;
+    canScrollDown: import("@angular/core").WritableSignal<boolean>;
+    private scrollInterval;
     width?: string;
     maxHeight?: string;
     minHeight?: string;
@@ -37,8 +42,11 @@ export declare class FwMenuContainerComponent implements AfterViewInit {
     keyHandler: (event: KeyboardEvent) => void;
     get classes(): string;
     get style(): SafeStyle;
-    constructor(sanitizer: DomSanitizer);
+    constructor(sanitizer: DomSanitizer, ngZone: NgZone);
     ngAfterViewInit(): void;
+    updateScrollState(): void;
+    startScroll(direction: 'up' | 'down'): void;
+    stopScroll(): void;
     noResults: import("@angular/core").WritableSignal<boolean>;
     handleFilterClick(event: Event): void;
     handleFilterInput(event: Event): void;

package/components/select-menu/select-menu.component.d.ts

@@ -35,6 +35,7 @@ export declare class FwSelectMenuComponent implements OnInit, OnDestroy, Control
     textInput: FwTextInputComponent;
     menu: import("@angular/core").Signal<FwMenuComponent>;
     menuItems: import("@angular/core").Signal<readonly FwMenuItemComponent[]>;
+    viewMenuItems: import("@angular/core").Signal<readonly FwMenuItemComponent[]>;
     menuItemGroups: import("@angular/core").Signal<readonly FwMenuItemGroupComponent[]>;
     menuSeparators: import("@angular/core").Signal<readonly FwMenuSeparatorComponent[]>;
     change: EventEmitter<any>;
@@ -63,6 +64,7 @@ export declare class FwSelectMenuComponent implements OnInit, OnDestroy, Control
     private _value;
     constructor(ngControl: NgControl);
     ngOnInit(): void;
+    private findRenderedMenuItem;
     selectTitle: import("@angular/core").WritableSignal<string>;
     private subscribeToMenuItems;
     private menuItemsWatcher;

package/components/wrapped-input/wrapped-input.component.d.ts

@@ -7,6 +7,7 @@ export declare class FwWrappedInputComponent {
     helperText?: string;
     errorText?: string;
     required?: boolean;
+    get hostTitle(): null;
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwWrappedInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FwWrappedInputComponent, "fw-wrapped-input", never, { "title": { "alias": "title"; "required": false; }; "status": { "alias": "status"; "required": false; }; "statusColor": { "alias": "statusColor"; "required": false; }; "description": { "alias": "description"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, ["fw-form-heading", "fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select"], true, never>;

package/fesm2022/flywheel-io-vision.mjs

@@ -1,7 +1,7 @@
 import * as i1$5 from '@angular/common';
 import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, untracked, Host, ViewChildren, linkedSignal, Self, TemplateRef, viewChildren } from '@angular/core';
+import { HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, untracked, Host, ViewChildren, viewChildren, linkedSignal, Self, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
@@ -422,6 +422,7 @@ class FwLayoutContextComponent {
         this.width = LayoutWidth.Small;
         this.iconColor = 'secondary';
     }
+    get hostTitle() { return null; }
     get classes() {
         const classes = ['fw-layout-context'];
         classes.push(`context-width-${this.width}`);
@@ -432,7 +433,7 @@ class FwLayoutContextComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "@if (icon) {\n  <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n  <h3>{{ title }}</h3>\n}\n\n@if (description) {\n  <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n  <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.title": "this.hostTitle", "attr.class": "this.classes" } }, ngImport: i0, template: "@if (icon) {\n  <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n  <h3>{{ title }}</h3>\n}\n\n@if (description) {\n  <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n  <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
             type: Component,
@@ -451,6 +452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], description: [{
                 type: Input
+            }], hostTitle: [{
+                type: HostBinding,
+                args: ['attr.title']
             }], classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -3045,6 +3049,7 @@ class FwDialogComponent {
         this.close = new EventEmitter();
         this.isClosing = false;
     }
+    get hostTitle() { return null; }
     get classes() {
         const classes = {
             [`dialog-width-${this.width}`]: true,
@@ -3085,7 +3090,7 @@ class FwDialogComponent {
         }, 300);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$1.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwDialogComponent, decorators: [{
             type: Component,
@@ -3111,6 +3116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['class']
             }], close: [{
                 type: Output
+            }], hostTitle: [{
+                type: HostBinding,
+                args: ['attr.title']
             }], classes: [{
                 type: HostBinding,
                 args: ['class']
@@ -5084,8 +5092,12 @@ class FwMenuContainerComponent {
       margin-top: ${this.offset};
     `);
     }
-    constructor(sanitizer) {
+    constructor(sanitizer, ngZone) {
         this.sanitizer = sanitizer;
+        this.ngZone = ngZone;
+        this.canScrollUp = signal(false);
+        this.canScrollDown = signal(false);
+        this.scrollInterval = null;
         this.width = 'inherit';
         this.maxHeight = 'auto';
         this.minHeight = 'auto';
@@ -5129,6 +5141,35 @@ class FwMenuContainerComponent {
         // Ensure filteredMenuItemChange fires on init so consumers
         // that depend on it (e.g. displayedOptions) are populated
         untracked(() => this.onFilterChange(this.filterText()));
+        setTimeout(() => this.updateScrollState());
+    }
+    updateScrollState() {
+        const el = this.menuWrapperRef?.nativeElement;
+        if (!el) {
+            return;
+        }
+        // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+        this.canScrollUp.set(el.scrollTop > 0);
+        // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+        this.canScrollDown.set(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
+    }
+    startScroll(direction) {
+        // eslint-disable-next-line @rx-angular/no-zone-run-apis
+        this.ngZone.runOutsideAngular(() => {
+            this.scrollInterval = setInterval(() => {
+                const el = this.menuWrapperRef?.nativeElement;
+                if (el) {
+                    // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                    el.scrollBy({ top: direction === 'down' ? 80 : -80 });
+                }
+            }, 40);
+        });
+    }
+    stopScroll() {
+        if (this.scrollInterval !== null) {
+            clearInterval(this.scrollInterval);
+            this.scrollInterval = null;
+        }
     }
     handleFilterClick(event) {
         // stops filters in menus from closing the parent menu
@@ -5145,15 +5186,14 @@ class FwMenuContainerComponent {
         const filterFn = this.filterFn();
         this.filteredMenuItems = filterFn(filter, allMenuItems);
         allMenuItems.forEach(menuItem => {
-            const shouldBeHidden = !this.filteredMenuItems.includes(menuItem);
-            menuItem.hidden = shouldBeHidden;
+            menuItem.hidden = !this.filteredMenuItems.includes(menuItem);
         });
         // Hide separators whenever a filter is active
         const isFiltering = Boolean(filter && filter.trim() !== '');
         [...this.childSeparators(), ...this.additionalSeparators()].forEach(separator => {
             separator.hidden = isFiltering;
         });
-        // Hide groups whose every child menu item is hidden
+        // Hide groups where every child menu item is hidden
         [...this.childGroups(), ...this.additionalGroups()].forEach(group => {
             group.hidden = group.allItemsHidden;
         });
@@ -5161,9 +5201,10 @@ class FwMenuContainerComponent {
         const allHidden = allMenuItems.length > 0 && allMenuItems.every(item => item.hidden);
         this.noResults.set(hasFilter && (allHidden || allMenuItems.length === 0));
         this.filteredMenuItemChange.emit(this.filteredMenuItems);
+        setTimeout(() => this.updateScrollState());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: false, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "childMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "childSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }, { propertyName: "childGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], viewQueries: [{ propertyName: "filterRef", first: true, predicate: ["menuFilter"], descendants: true }], ngImport: i0, template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    (click)=\"handleFilterClick($event)\"\n    #menuFilter\n    (keydown)=\"keyHandler?.($event)\"\n    placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n    [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n  </fw-text-input>\n  <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div class=\"menu-wrapper\">\n  @if (noResults()) {\n    <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: false, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "childMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "childSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }, { propertyName: "childGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], viewQueries: [{ propertyName: "menuWrapperRef", first: true, predicate: ["menuWrapper"], descendants: true }, { propertyName: "filterRef", first: true, predicate: ["menuFilter"], descendants: true }], ngImport: i0, template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    (click)=\"handleFilterClick($event)\"\n    #menuFilter\n    (keydown)=\"keyHandler?.($event)\"\n    placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n    [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n  </fw-text-input>\n  <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div\n  class=\"scroll-indicator scroll-indicator-top\"\n  [class.scroll-indicator-visible]=\"canScrollUp()\"\n  (mouseenter)=\"canScrollUp() && startScroll('up')\"\n  (mouseleave)=\"stopScroll()\">\n  <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n  @if (noResults()) {\n    <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n  class=\"scroll-indicator scroll-indicator-bottom\"\n  [class.scroll-indicator-visible]=\"canScrollDown()\"\n  (mouseenter)=\"canScrollDown() && startScroll('down')\"\n  (mouseleave)=\"stopScroll()\">\n  <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
             type: Component,
@@ -5172,8 +5213,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         CdkMenuBar,
                         FwTextInputComponent,
                         FwMenuItemComponent,
-                    ], template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    (click)=\"handleFilterClick($event)\"\n    #menuFilter\n    (keydown)=\"keyHandler?.($event)\"\n    placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n    [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n  </fw-text-input>\n  <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div class=\"menu-wrapper\">\n  @if (noResults()) {\n    <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { width: [{
+                        FwIconComponent,
+                    ], template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    (click)=\"handleFilterClick($event)\"\n    #menuFilter\n    (keydown)=\"keyHandler?.($event)\"\n    placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n    [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n  </fw-text-input>\n  <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div\n  class=\"scroll-indicator scroll-indicator-top\"\n  [class.scroll-indicator-visible]=\"canScrollUp()\"\n  (mouseenter)=\"canScrollUp() && startScroll('up')\"\n  (mouseleave)=\"stopScroll()\">\n  <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n  @if (noResults()) {\n    <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n  class=\"scroll-indicator scroll-indicator-bottom\"\n  [class.scroll-indicator-visible]=\"canScrollDown()\"\n  (mouseenter)=\"canScrollDown() && startScroll('down')\"\n  (mouseleave)=\"stopScroll()\">\n  <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.NgZone }], propDecorators: { menuWrapperRef: [{
+                type: ViewChild,
+                args: ['menuWrapper']
+            }], width: [{
                 type: Input
             }], maxHeight: [{
                 type: Input
@@ -6361,11 +6406,12 @@ class FwSelectMenuComponent {
         this.width = input('200px');
         this.optionsWidth = input(undefined);
         this.minOptionsHeight = input(undefined);
-        this.maxOptionsHeight = input(undefined);
+        this.maxOptionsHeight = input('400px');
         this.size = input('medium');
         this.placeholder = input('Select something...');
         this.menu = viewChild(FwMenuComponent);
         this.menuItems = contentChildren(FwMenuItemComponent, { descendants: true });
+        this.viewMenuItems = viewChildren(FwMenuItemComponent);
         this.menuItemGroups = contentChildren(FwMenuItemGroupComponent, { descendants: true });
         this.menuSeparators = contentChildren(FwMenuSeparatorComponent, { descendants: true });
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -6462,13 +6508,22 @@ class FwSelectMenuComponent {
     }
     ngOnInit() {
         const onOpenSub = this.trigger.opened.subscribe(() => {
-            const focusedMenuItem = this.menuItems().find(item => item.value === this.selectValue());
+            // Initialize navigation state synchronously so the first arrow key press
+            // navigates relative to the selected item rather than being swallowed by setup
+            this.inFocusOpen = true;
+            this.preFocusValue = this.value;
+            this.initializeFocusedIndex();
+            const currentValue = this.selectValue();
             setTimeout(() => {
-                focusedMenuItem?.scrollIntoView({ behavior: 'instant', block: 'start' });
+                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                this.findRenderedMenuItem(currentValue)?.scrollIntoView({ behavior: 'instant', block: 'center' });
             });
         });
         this.subscriptions.push(onOpenSub);
     }
+    findRenderedMenuItem(value) {
+        return [...this.viewMenuItems(), ...this.menuItems()].find(item => item.value === value);
+    }
     subscribeToMenuItems() {
         // Clear old subscriptions
         this.menuItemClickSubscriptions.forEach(sub => sub.unsubscribe());
@@ -6580,7 +6635,7 @@ class FwSelectMenuComponent {
                 const vProp = this.valueProperty();
                 const itemValue = this.useFullOptionAsValue()
                     ? JSON.stringify(item)
-                    : item[vProp];
+                    : item[vProp]?.toString();
                 return itemValue === currentValue();
             }
         });
@@ -6630,15 +6685,7 @@ class FwSelectMenuComponent {
                 input.select();
             }, 0);
         }
-        // Initialize highlighting when dropdown opens via click
-        // Use setTimeout to ensure menu is rendered before we try to update it
-        setTimeout(() => {
-            if (this.trigger?.isOpen()) {
-                this.inFocusOpen = true;
-                this.preFocusValue = this.value;
-                this.initializeFocusedIndex();
-            }
-        }, 0);
+        // Navigation state is initialized in the trigger.opened subscription
     }
     handleKeyDown(event) {
         // Handle Enter key when typing
@@ -6744,6 +6791,7 @@ class FwSelectMenuComponent {
                             const selectedItem = availableItems[this.focused];
                             // Handle both options (objects) and menuItems (FwMenuItemComponent)
                             if (selectedItem instanceof FwMenuItemComponent) {
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
                                 selectedItem.scrollIntoView();
                                 this.selectValue.set(selectedItem.value || '');
                                 // Manually update selected state for all menu items
@@ -6762,6 +6810,8 @@ class FwSelectMenuComponent {
                                 this.selectValue.set(newValue);
                                 // Update highlighting to show the focused item
                                 this.updateHighlighting();
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                                this.findRenderedMenuItem(newValue)?.scrollIntoView();
                                 // Don't call updateValue during arrow navigation while typing
                                 // Just update selectValue for highlighting, actual value update happens on Enter
                                 if (!this.isTyping()) {
@@ -6781,6 +6831,7 @@ class FwSelectMenuComponent {
                             const selectedItem = availableItems[this.focused];
                             // Handle both options (objects) and menuItems (FwMenuItemComponent)
                             if (selectedItem instanceof FwMenuItemComponent) {
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
                                 selectedItem.scrollIntoView();
                                 this.selectValue.set(selectedItem.value || '');
                                 // Manually update selected state for all menu items
@@ -6799,6 +6850,8 @@ class FwSelectMenuComponent {
                                 this.selectValue.set(newValue);
                                 // Update highlighting to show the focused item
                                 this.updateHighlighting();
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                                this.findRenderedMenuItem(newValue)?.scrollIntoView();
                                 // Don't call updateValue during arrow navigation while typing
                                 // Just update selectValue for highlighting, actual value update happens on Enter
                                 if (!this.isTyping()) {
@@ -6963,7 +7016,7 @@ class FwSelectMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i1$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterFn]=\"filterFn()\"\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue()\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"$any(item.raw[descriptionProperty()])\"\n                [value]=\"item.value\"\n                [icon]=\"$any(item.raw[iconProperty()])\"\n                [disabled]=\"$any(item.raw).disabled\"\n              />\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "viewMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterFn]=\"filterFn()\"\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue()\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"$any(item.raw[descriptionProperty()])\"\n                [value]=\"item.value\"\n                [icon]=\"$any(item.raw[iconProperty()])\"\n                [disabled]=\"$any(item.raw).disabled\"\n              />\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
@@ -9981,8 +10034,9 @@ class FwWrappedInputComponent {
         this.statusColor = 'slate';
         this.class = true;
     }
+    get hostTitle() { return null; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwWrappedInputComponent, isStandalone: true, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading\n    *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n    [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n  </fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwWrappedInputComponent, isStandalone: true, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "attr.title": "this.hostTitle", "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading\n    *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n    [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n  </fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
             type: Component,
@@ -10001,6 +10055,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], required: [{
                 type: Input
+            }], hostTitle: [{
+                type: HostBinding,
+                args: ['attr.title']
             }], class: [{
                 type: HostBinding,
                 args: ['class.fw-wrapped-input']