@raintonic/formaui 0.4.0 → 0.9.2

package/fesm2022/raintonic-formaui-components-select.mjs

@@ -1,58 +1,43 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, output, signal, inject, ElementRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, contentChildren, NgZone, effect, ViewChild } from '@angular/core';
-import { Subject, Subscription, fromEvent } from 'rxjs';
-import { NgForm, FormGroupDirective, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DOCUMENT } from '@angular/common';
-import { filter } from 'rxjs/operators';
-import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
-import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
-import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { InjectionToken, input, output, signal, inject, ElementRef, HostListener, Directive, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, effect, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { FuiCheckboxComponent } from '@raintonic/formaui/components/checkbox';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@raintonic/formaui/cdk/form-field';
+import { FuiPopupOverlayDirective, FuiFormControlSyncDirective, injectNgControl } from '@raintonic/formaui/cdk/form-field';
+import { isEmpty, computeMultiDisplayValue, syncMultiOptions, applyOptionSelection, computePagedActiveOptionIndex, computeNextActiveOptionIndex, scrollOptionIntoView, findInitialActiveOptionIndex, getEnabledOptions, computeActiveDescendant, announceMessage, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FUI_FORM_FIELD } from '@raintonic/formaui/components/form-field';
 
 /**
  * Injection token used to provide the parent select to options.
  */
 const FUI_SELECT = new InjectionToken('FUI_SELECT');
+/**
+ * Vertical offset (px) between the select trigger bottom and overlay panel top.
+ * The default popup positions use 4px, but the select needs 16px for better
+ * visual spacing between the trigger and the dropdown panel.
+ */
+const FUI_SELECT_OVERLAY_OFFSET = 16;
 
 /**
- * # FuiOption Component
- *
- * Individual option component for use within fui-select.
- * Works like Angular Material's mat-option with full accessibility support.
- *
- * ## Features
- * - Disabled state support
- * - Selection state management
- * - Full accessibility support (ARIA attributes)
- * - Keyboard navigation support
- * - Custom content projection
- * - Smooth hover animations
+ * Injection token for querying all option-like components
+ * via contentChildren from parent components.
  *
- * ## Usage
+ * FuiOptionComponent provides this token so a single
+ * contentChildren(FUI_OPTION) query captures all options.
+ */
+const FUI_OPTION = new InjectionToken('FUI_OPTION');
+/**
+ * Abstract base class for FuiOptionComponent.
  *
- * ### Basic Option
- * ```html
- * <fui-select placeholder="Select a status">
- *   <fui-option value="active">Active</fui-option>
- *   <fui-option value="inactive">Inactive</fui-option>
- *   <fui-option value="pending" [disabled]="true">Pending (Disabled)</fui-option>
- * </fui-select>
- * ```
+ * Defines the contract that parent components rely on.
+ * FuiOptionComponent provides FUI_OPTION for DI-based querying.
  *
- * ### Option with Custom Content
- * ```html
- * <fui-select placeholder="Select a country">
- *   <fui-option value="us">
- *     <fui-icon name="flag-us"></fui-icon>
- *     United States
- *   </fui-option>
- *   <fui-option value="ca">
- *     <fui-icon name="flag-ca"></fui-icon>
- *     Canada
- *   </fui-option>
- * </fui-select>
- * ```
+ * Uses @Directive() so Angular recognises input()/output()/signal()/HostListener
+ * calls as valid (they are only valid on @Component or @Directive classes).
  */
-class FuiOptionComponent {
+class FuiOptionBase {
     static nextId = 0;
     /**
      * The value of the option
@@ -73,16 +58,10 @@ class FuiOptionComponent {
     stateChanges = new Subject();
     // Element reference
     _element = inject(ElementRef);
-    // Parent select (optional - may not exist if used standalone)
+    // Parent select (optional — may not exist if used standalone)
     _parentSelect = inject(FUI_SELECT, { optional: true });
     // Unique ID
-    id = `fui-option-${FuiOptionComponent.nextId++}`;
-    // Show checkmark only in multiple mode when selected
-    _showCheckmark = signal(false, ...(ngDevMode ? [{ debugName: "_showCheckmark" }] : /* istanbul ignore next */ []));
-    ngAfterViewInit() {
-        // Update checkmark visibility based on parent select's multiple mode
-        this._updateCheckmarkVisibility();
-    }
+    id = `fui-option-${FuiOptionBase.nextId++}`;
     ngOnDestroy() {
         this.stateChanges.complete();
     }
@@ -99,7 +78,7 @@ class FuiOptionComponent {
                 this._parentSelect._onOptionSelected(this);
             }
             else {
-                // Standalone usage - emit event
+                // Standalone usage — emit event
                 this._emitSelectionChangeEvent();
             }
         }
@@ -118,7 +97,6 @@ class FuiOptionComponent {
     select() {
         if (!this._selected()) {
             this._selected.set(true);
-            this._updateCheckmarkVisibility();
             this.stateChanges.next();
         }
     }
@@ -128,7 +106,6 @@ class FuiOptionComponent {
     deselect() {
         if (this._selected()) {
             this._selected.set(false);
-            this._updateCheckmarkVisibility();
             this.stateChanges.next();
         }
     }
@@ -171,43 +148,121 @@ class FuiOptionComponent {
     _getHostElement() {
         return this._element.nativeElement;
     }
-    /** Update checkmark visibility based on selection and multiple mode */
-    _updateCheckmarkVisibility() {
-        const isMultiple = this._parentSelect?.multiple() ?? false;
-        this._showCheckmark.set(isMultiple && this._selected());
-    }
     /** Emits the selection change event */
     _emitSelectionChangeEvent() {
         this.selectionChange.emit({ source: this, value: this.value() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiOptionComponent, isStandalone: true, selector: "fui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()" }, properties: { "class.fui-option--selected": "_selected()", "class.fui-option--disabled": "disabled()", "class.fui-option--active": "_active()", "attr.id": "id", "attr.aria-selected": "_selected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1" }, classAttribute: "fui-option" }, ngImport: i0, template: `
-    @if (_showCheckmark()) {
-      <span class="fui-option__checkmark">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-          <path d="M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z" />
-        </svg>
-      </span>
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiOptionBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionBase, decorators: [{
+            type: Directive
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], _handleMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], _handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * # FuiOption Component
+ *
+ * Individual option component for use within fui-select.
+ * Works like Angular Material's mat-option with full accessibility support.
+ *
+ * ## Features
+ * - Disabled state support
+ * - Selection state management
+ * - Full accessibility support (ARIA attributes)
+ * - Keyboard navigation support
+ * - Custom content projection
+ * - Smooth hover animations
+ *
+ * ## Usage
+ *
+ * ### Basic Option
+ * ```html
+ * <fui-select placeholder="Select a status">
+ *   <fui-option value="active">Active</fui-option>
+ *   <fui-option value="inactive">Inactive</fui-option>
+ *   <fui-option value="pending" [disabled]="true">Pending (Disabled)</fui-option>
+ * </fui-select>
+ * ```
+ *
+ * ### Option with Custom Content
+ * ```html
+ * <fui-select placeholder="Select a country">
+ *   <fui-option value="us">
+ *     <fui-icon name="flag-us"></fui-icon>
+ *     United States
+ *   </fui-option>
+ *   <fui-option value="ca">
+ *     <fui-icon name="flag-ca"></fui-icon>
+ *     Canada
+ *   </fui-option>
+ * </fui-select>
+ * ```
+ *
+ * ### Multi-Select Options
+ * When `fui-select` has `[multiple]="true"`, `<fui-option>` automatically renders
+ * a checkbox indicator:
+ * ```html
+ * <fui-select [multiple]="true" placeholder="Select skills">
+ *   <fui-option value="js">JavaScript</fui-option>
+ *   <fui-option value="ts">TypeScript</fui-option>
+ *   <fui-option value="py">Python</fui-option>
+ * </fui-select>
+ * ```
+ */
+class FuiOptionComponent extends FuiOptionBase {
+    /** Whether the parent select is in multi-select mode */
+    _isMultiParent = computed(() => this._parentSelect?.multiple() ?? false, ...(ngDevMode ? [{ debugName: "_isMultiParent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiOptionComponent, isStandalone: true, selector: "fui-option", host: { attributes: { "role": "option" }, properties: { "class.fui-option--selected": "_selected()", "class.fui-option--disabled": "disabled()", "class.fui-option--active": "_active()", "attr.id": "id", "attr.aria-selected": "_selected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1" }, classAttribute: "fui-option" }, providers: [
+            {
+                provide: FUI_OPTION,
+                useExisting: FuiOptionComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if (_isMultiParent()) {
+      <fui-checkbox
+        class="fui-option__checkbox"
+        [checked]="_selected()"
+        [disabled]="disabled()"
+        [tabIndex]="-1"
+        aria-hidden="true"
+      />
+    } @else if (_selected()) {}
     <span class="fui-option__content">
       <ng-content></ng-content>
     </span>
-  `, isInline: true, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-option{position:relative;display:flex;align-items:center;min-height:2.5rem;margin:0 var(--fui-spacing-02);padding:0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-primary);background-color:transparent;transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-surface-02)}.fui-option--selected{color:var(--fui-primary);background-color:var(--fui-primary-10)}.fui-option--selected:hover:not(.fui-option--disabled){background-color:var(--fui-primary-20)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus,.fui-option--active{background-color:var(--fui-surface-01)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary);transition:transform,opacity var(--fui-duration-fast-02) var(--fui-ease-expressive) 0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-font-size-01);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}.fui-theme-dark .fui-option--selected{background-color:rgba(var(--fui-primary-rgb),.15)}.fui-theme-dark .fui-option--selected:hover:not(.fui-option--disabled){background-color:rgba(var(--fui-primary-rgb),.25)}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-option{position:relative;display:flex;font-size:var(--fui-text-base);align-items:center;margin:0 var(--fui-spacing-2);padding:var(--fui-spacing-3) var(--fui-spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-radius-xs);color:var(--fui-text-primary);background-color:transparent;transition-property:background-color,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-primary-muted)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus{background-color:var(--fui-bg-default)}.fui-option--active:not(.fui-option--disabled){background-color:var(--fui-primary-muted)}.fui-option--selected:not(.fui-option--disabled){background-color:var(--fui-bg-subtle)}.fui-option--selected:not(.fui-option--disabled):hover{background-color:color-mix(in srgb,var(--fui-bg-subtle) 100%,var(--fui-primary-muted) 100%)}.fui-option.fui-option--selected.fui-option--active{background-color:color-mix(in srgb,var(--fui-bg-subtle) 100%,var(--fui-primary-muted) 100%)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary-fg);transition-property:transform,opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-emphasized);transition-delay:0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-text-sm);font-weight:var(--fui-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-border-primary);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: FuiCheckboxComponent, selector: "fui-checkbox", inputs: ["readonly", "checked", "disabled", "indeterminate", "required", "labelPosition", "name", "value", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "errorStateMatcher"], outputs: ["change", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-option', standalone: true, imports: [], template: `
-    @if (_showCheckmark()) {
-      <span class="fui-option__checkmark">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-          <path d="M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z" />
-        </svg>
-      </span>
-    }
+            args: [{ selector: 'fui-option', standalone: true, imports: [FuiCheckboxComponent], template: `
+    @if (_isMultiParent()) {
+      <fui-checkbox
+        class="fui-option__checkbox"
+        [checked]="_selected()"
+        [disabled]="disabled()"
+        [tabIndex]="-1"
+        aria-hidden="true"
+      />
+    } @else if (_selected()) {}
     <span class="fui-option__content">
       <ng-content></ng-content>
     </span>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+  `, providers: [
+                        {
+                            provide: FUI_OPTION,
+                            useExisting: FuiOptionComponent,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-option',
                         '[class.fui-option--selected]': '_selected()',
                         '[class.fui-option--disabled]': 'disabled()',
@@ -217,17 +272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.aria-selected]': '_selected()',
                         '[attr.aria-disabled]': 'disabled()',
                         '[attr.tabindex]': '-1',
-                    }, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-option{position:relative;display:flex;align-items:center;min-height:2.5rem;margin:0 var(--fui-spacing-02);padding:0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-primary);background-color:transparent;transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-surface-02)}.fui-option--selected{color:var(--fui-primary);background-color:var(--fui-primary-10)}.fui-option--selected:hover:not(.fui-option--disabled){background-color:var(--fui-primary-20)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus,.fui-option--active{background-color:var(--fui-surface-01)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary);transition:transform,opacity var(--fui-duration-fast-02) var(--fui-ease-expressive) 0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-font-size-01);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}.fui-theme-dark .fui-option--selected{background-color:rgba(var(--fui-primary-rgb),.15)}.fui-theme-dark .fui-option--selected:hover:not(.fui-option--disabled){background-color:rgba(var(--fui-primary-rgb),.25)}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _handleClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], _handleMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], _handleMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
+                    }, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-option{position:relative;display:flex;font-size:var(--fui-text-base);align-items:center;margin:0 var(--fui-spacing-2);padding:var(--fui-spacing-3) var(--fui-spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-radius-xs);color:var(--fui-text-primary);background-color:transparent;transition-property:background-color,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-primary-muted)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus{background-color:var(--fui-bg-default)}.fui-option--active:not(.fui-option--disabled){background-color:var(--fui-primary-muted)}.fui-option--selected:not(.fui-option--disabled){background-color:var(--fui-bg-subtle)}.fui-option--selected:not(.fui-option--disabled):hover{background-color:color-mix(in srgb,var(--fui-bg-subtle) 100%,var(--fui-primary-muted) 100%)}.fui-option.fui-option--selected.fui-option--active{background-color:color-mix(in srgb,var(--fui-bg-subtle) 100%,var(--fui-primary-muted) 100%)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary-fg);transition-property:transform,opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-emphasized);transition-delay:0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-text-sm);font-weight:var(--fui-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-border-primary);outline-offset:-2px}}\n"] }]
+        }] });
 
 /**
  * # fui-select Component
@@ -292,16 +338,23 @@ class FuiSelectComponent {
     // Static properties
     static nextId = 0;
     controlType = 'fui-select';
+    // Injected host directives
+    _popup = inject(FuiPopupOverlayDirective);
+    _formSync = inject(FuiFormControlSyncDirective);
+    // Optional parent form-field (null when used standalone)
+    _parentFormField = inject(FUI_FORM_FIELD, { optional: true });
     // Inputs using new signal-based API
     placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     /**
-     * Whether to compare option values using object identity or deep equality
+     * Comparison function for option values.
+     * Defaults to strict equality (`===`). Override when options use object
+     * values and you need to match by a property (e.g. comparing by `id`).
      */
     compareWith = input((o1, o2) => o1 === o2, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     // Outputs
     valueChange = output();
     selectionChange = output();
@@ -310,7 +363,6 @@ class FuiSelectComponent {
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
     _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
-    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
     // FuiFormFieldControl implementation
     stateChanges = new Subject();
     _uid = `fui-select-${FuiSelectComponent.nextId++}`;
@@ -319,9 +371,6 @@ class FuiSelectComponent {
     _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
     errorState = this._errorState;
     // Form control references
-    _parentForm = inject(NgForm, { optional: true });
-    _parentFormGroup = inject(FormGroupDirective, { optional: true });
-    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
     _ngControlRef = injectNgControl();
     get ngControl() {
         return this._ngControlRef.ngControl;
@@ -334,35 +383,24 @@ class FuiSelectComponent {
     focused = this._focused;
     _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
     disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    empty = computed(() => {
-        const val = this._value();
-        return val === null || val === undefined || (this.isArray(val) && val.length === 0);
-    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    readonly = computed(() => this.readonlyInput(), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    empty = computed(() => isEmpty(this._value()), ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
     id = this._uid;
     // ViewChild for trigger and panel
     trigger;
     panel;
     // ContentChildren for options
-    options = contentChildren(FuiOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
-    // Panel open/close state
-    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    options = contentChildren(FUI_OPTION, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    // Panel open/close state — projected from the popup overlay directive
+    panelOpen = computed(() => this._popup.panelOpen(), ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
     // Active option index for keyboard navigation
     _activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeOptionIndex" }] : /* istanbul ignore next */ []));
     activeOptionIndex = this._activeOptionIndex.asReadonly();
     // Live announcement for screen readers
     _liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "_liveAnnouncement" }] : /* istanbul ignore next */ []));
-    // Overlay reference
-    _overlayRef = null;
-    _overlaySubscriptions = new Subscription();
-    // Services
-    _overlayService = inject(FuiOverlayService);
-    _elementRef = inject(ElementRef);
-    _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
-    _outsideClickSub;
     // Type-ahead search
-    _typeaheadBuffer = '';
-    _typeaheadTimeout = null;
+    _typeaheadBuffer = signal('', ...(ngDevMode ? [{ debugName: "_typeaheadBuffer" }] : /* istanbul ignore next */ []));
+    _typeaheadResetTimer = null;
     TYPE_AHEAD_DEBOUNCE = 200;
     // ControlValueAccessor callbacks
     _onChange = () => {
@@ -372,26 +410,7 @@ class FuiSelectComponent {
         // Intentionally empty: will be replaced by Angular forms
     };
     // Computed properties
-    displayValue = computed(() => {
-        const currentValue = this.value();
-        const opts = this.options();
-        if (currentValue === null || currentValue === undefined) {
-            return '';
-        }
-        // Filter out options that don't have a value set yet
-        const validOpts = opts.filter((opt) => opt.value() !== undefined);
-        if (this.multiple()) {
-            if (this.isArray(currentValue)) {
-                const selectedOptions = validOpts.filter((opt) => currentValue.some((v) => this.compareWith()(v, opt.value())));
-                return selectedOptions.map((opt) => opt.getLabel()).join(', ');
-            }
-            return '';
-        }
-        else {
-            const selectedOption = validOpts.find((opt) => this.compareWith()(opt.value(), currentValue));
-            return selectedOption ? selectedOption.getLabel() : String(currentValue);
-        }
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => computeMultiDisplayValue(this), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     constructor() {
         // Set valueAccessor after NgControl is resolved
         void Promise.resolve().then(() => {
@@ -418,107 +437,84 @@ class FuiSelectComponent {
         });
         // Effect to update options selected state when value or options change
         effect(() => {
-            const currentValue = this._value();
-            const opts = this.options();
-            const isMultiple = this.multiple();
-            const compareFn = this.compareWith();
-            opts.forEach((option) => {
-                const optValue = option.value();
-                // Skip options that don't have a value set yet
-                if (optValue === undefined) {
-                    return;
-                }
-                let isSelected = false;
-                if (isMultiple && this.isArray(currentValue)) {
-                    isSelected = currentValue.some((v) => compareFn(v, optValue));
-                }
-                else {
-                    isSelected = compareFn(currentValue, optValue);
-                }
-                if (isSelected) {
-                    option.select();
-                }
-                else {
-                    option.deselect();
-                }
-            });
+            syncMultiOptions(this);
             // Notify form-field that state may have changed (for display value updates)
             this.stateChanges.next();
         });
     }
-    ngDoCheck() {
-        if (this.ngControl) {
-            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
-            syncRequiredState(this.ngControl, this._required, this.stateChanges);
-            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
-        }
-    }
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._outsideClickSub?.unsubscribe();
-        this._disposeOverlay();
-        if (this._typeaheadTimeout) {
-            clearTimeout(this._typeaheadTimeout);
+        if (this._typeaheadResetTimer) {
+            clearTimeout(this._typeaheadResetTimer);
         }
     }
     ngAfterContentInit() {
         // Set up initial selection based on value
         this._syncOptionsSelection();
     }
+    ngAfterViewInit() {
+        // Wire popup-overlay directive. Both trigger and panel use static:true so refs are
+        // resolved here regardless of panel open state (panel is always rendered via [hidden]).
+        this._popup.setTrigger(this.trigger ?? null);
+        this._popup.setPanel(this.panel ?? null);
+        this._popup.panelClass.set(['fui-select-overlay-panel']);
+        this._popup.backdropClass.set('fui-select-backdrop');
+        // Position the overlay panel 16px below the form-field wrapper (or trigger).
+        // This gives visual breathing room between the trigger and the dropdown.
+        this._popup.positions.set([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: FUI_SELECT_OVERLAY_OFFSET,
+            },
+        ]);
+        // When inside a form-field, use the form-field wrapper as the width reference for
+        // the overlay panel so the dropdown spans the full width (including prefix/suffix).
+        if (this._parentFormField) {
+            this._popup.widthElement.set(this._parentFormField.getConnectedOverlayOrigin());
+        }
+        // Wire form-control-sync directive signals
+        this._formSync.errorState.set(this._errorState);
+        this._formSync.errorStateMatcher.set(this.errorStateMatcher());
+        this._formSync.required.set(this._required);
+        this._formSync.ngControlDisabled.set(this._ngControlDisabled);
+        this._formSync.stateChanges.set(this.stateChanges);
+    }
     // ControlValueAccessor implementation
+    /** Sets the select value from the form model. Null/undefined coerces to null. */
     writeValue(value) {
         this._value.set(value ?? null);
-        //this._syncOptionsSelection();
         this.stateChanges.next();
     }
+    /** Registers the callback Angular calls when the value should propagate to the model. */
     registerOnChange(fn) {
         this._onChange = fn;
     }
+    /** Registers the callback Angular calls when the control should be marked as touched. */
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    /** Enables or disables the control programmatically; mirrors the `disabled` form-control state. */
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
         this.stateChanges.next();
     }
     // FuiFormFieldControl implementation
+    /** Opens the panel when the form-field container is clicked, unless disabled or readonly. */
     onContainerClick(_event) {
         if (!this.disabled() && !this.readonly()) {
             this.toggle();
         }
     }
+    /** Stores the space-separated list of IDs for the aria-describedby attribute. */
     setDescribedByIds(ids) {
         this._ariaDescribedby = ids.length ? ids.join(' ') : null;
     }
-    setReadOnly(readOnly) {
-        this._readOnly.set(readOnly);
-    }
     // Sync options selection state with current value
     _syncOptionsSelection() {
-        const currentValue = this._value();
-        const opts = this.options();
-        const isMultiple = this.multiple();
-        const compareFn = this.compareWith();
-        opts.forEach((option) => {
-            const optValue = option.value();
-            // Skip options that don't have a value set yet
-            if (optValue === undefined) {
-                return;
-            }
-            let isSelected = false;
-            if (isMultiple && this.isArray(currentValue)) {
-                isSelected = currentValue.some((v) => compareFn(v, optValue));
-            }
-            else if (currentValue !== null && currentValue !== undefined) {
-                isSelected = compareFn(currentValue, optValue);
-            }
-            if (isSelected) {
-                option.select();
-            }
-            else {
-                option.deselect();
-            }
-        });
+        syncMultiOptions(this);
     }
     // Focus/blur event handlers from template
     _onFocus() {
@@ -530,7 +526,7 @@ class FuiSelectComponent {
             // Check if focus moved to the overlay panel (e.g. clicking an option).
             // In that case, don't close — the user is interacting with the dropdown.
             const relatedTarget = event?.relatedTarget;
-            const overlayElement = this._overlayRef?.overlayElement;
+            const overlayElement = this._popup.overlayRef()?.overlayElement;
             if (relatedTarget && overlayElement?.contains(relatedTarget)) {
                 return;
             }
@@ -542,54 +538,48 @@ class FuiSelectComponent {
         this.stateChanges.next();
     }
     // Public methods
+    /** Focuses the select trigger element. */
     focus() {
         this.trigger?.nativeElement.focus();
     }
+    /** Blurs the select trigger element. */
     blur() {
         this.trigger?.nativeElement.blur();
     }
-    // Toggle panel open/close
+    /** Toggles the select panel. No-op if disabled. */
     toggle() {
         if (this.disabled())
             return;
-        if (this.panelOpen()) {
+        if (this._popup.panelOpen()) {
             this.close();
         }
         else {
             this.open();
         }
     }
-    // Open the dropdown panel
+    /** Opens the select panel. No-op if disabled, readonly, or already open. */
     open() {
-        if (this.disabled() || this.readonly() || this.panelOpen())
+        if (this.disabled() || this.readonly() || this._popup.panelOpen())
             return;
         // Ensure DOM focus is on the trigger so blur/Tab work correctly
         this.trigger?.nativeElement.focus();
-        requestAnimationFrame(() => {
-            this.panelOpen.set(true);
-            this._focused.set(true);
+        this._focused.set(true);
+        this._setInitialActiveOption();
+        this._popup.open();
+        if (this._popup.panelOpen()) {
+            this._scrollToActiveOption();
             this.openedChange.emit(true);
-            // Set active option to currently selected or first option
-            this._setInitialActiveOption();
-            // Create overlay after the view updates
-            setTimeout(() => {
-                this._createOverlay();
-                this._scrollToActiveOption();
-                this._listenForOutsideClicks();
-            });
-        });
+        }
     }
-    // Close the dropdown panel
+    /** Closes the select panel and restores focus to the trigger unless `restoreFocus` is false. No-op if already closed. */
     close(restoreFocus = true) {
-        if (!this.panelOpen())
+        if (!this._popup.panelOpen())
             return;
-        this._outsideClickSub?.unsubscribe();
-        this.panelOpen.set(false);
         this._focused.set(false);
         this._activeOptionIndex.set(-1);
-        this._disposeOverlay();
-        this.openedChange.emit(false);
         this._onTouched();
+        this._popup.close();
+        this.openedChange.emit(false);
         // Return focus to trigger only when explicitly requested (e.g. Escape, backdrop click).
         // When closing via Tab, let the browser move focus naturally.
         // Focus synchronously to avoid race conditions with Tab key presses.
@@ -599,51 +589,21 @@ class FuiSelectComponent {
     }
     // Handle option selection (called by FuiOptionComponent)
     _onOptionSelected(option) {
-        const newValue = option.value();
-        if (this.multiple()) {
-            const raw = this._value();
-            const currentValue = this.isArray(raw) ? [...raw] : [];
-            const compareFn = this.compareWith();
-            const index = currentValue.findIndex((v) => compareFn(v, newValue));
-            if (index > -1) {
-                currentValue.splice(index, 1);
-                option.deselect();
-            }
-            else {
-                currentValue.push(newValue);
-                option.select();
-            }
-            this._value.set(currentValue);
-            this._onChange(currentValue);
-            this.valueChange.emit(currentValue);
-            this.selectionChange.emit({ source: this, value: currentValue });
-            // Announce for screen readers
-            const label = option.getLabel();
-            const action = index > -1 ? 'deselected' : 'selected';
-            this._announce(`${label} ${action}`);
+        const result = applyOptionSelection(this, option);
+        this._value.set(result.newValue);
+        this._onChange(result.newValue);
+        this.valueChange.emit(result.newValue);
+        this.selectionChange.emit({ source: this, value: result.newValue });
+        this.stateChanges.next();
+        if (result.wasSelected) {
+            this._announce(`${option.getLabel()} deselected`);
         }
         else {
-            // Deselect previous option
-            const opts = this.options();
-            opts.forEach((opt) => {
-                if (opt !== option) {
-                    opt.deselect();
-                }
-            });
-            option.select();
-            this._value.set(newValue);
-            this._onChange(newValue);
-            this.valueChange.emit(newValue);
-            this.selectionChange.emit({ source: this, value: newValue });
-            // Announce for screen readers
             this._announce(`${option.getLabel()} selected`);
+        }
+        if (!this.multiple()) {
             this.close();
         }
-        this.stateChanges.next();
-    }
-    // Get display value for trigger
-    _getDisplayValue() {
-        return this.displayValue();
     }
     // Handle keyboard navigation
     _handleKeydown(event) {
@@ -686,7 +646,6 @@ class FuiSelectComponent {
     }
     // Handle keydown when panel is open
     _handleOpenKeydown(event) {
-        const PAGE_SIZE = 5;
         const key = event.key;
         const opts = this._getEnabledOptions();
         const activeIndex = this._activeOptionIndex();
@@ -710,15 +669,13 @@ class FuiSelectComponent {
             case 'PageDown':
                 event.preventDefault();
                 if (opts.length > 0) {
-                    const newIndex = Math.min(activeIndex + PAGE_SIZE, opts.length - 1);
-                    this._setActiveOptionIndex(newIndex);
+                    this._setActiveOptionIndex(computePagedActiveOptionIndex(opts.length, activeIndex, 1));
                 }
                 break;
             case 'PageUp':
                 event.preventDefault();
                 if (opts.length > 0) {
-                    const newIndex = Math.max(activeIndex - PAGE_SIZE, 0);
-                    this._setActiveOptionIndex(newIndex);
+                    this._setActiveOptionIndex(computePagedActiveOptionIndex(opts.length, activeIndex, -1));
                 }
                 break;
             case 'Enter':
@@ -730,6 +687,7 @@ class FuiSelectComponent {
                 break;
             case 'Escape':
                 event.preventDefault();
+                event.stopPropagation();
                 this.close();
                 break;
             case 'Tab':
@@ -750,16 +708,7 @@ class FuiSelectComponent {
         const opts = this._getEnabledOptions();
         if (opts.length === 0)
             return;
-        const currentIndex = this._activeOptionIndex();
-        let newIndex = currentIndex + delta;
-        // Wrap around
-        if (newIndex < 0) {
-            newIndex = opts.length - 1;
-        }
-        else if (newIndex >= opts.length) {
-            newIndex = 0;
-        }
-        this._setActiveOptionIndex(newIndex);
+        this._setActiveOptionIndex(computeNextActiveOptionIndex(opts.length, this._activeOptionIndex(), delta));
     }
     // Set the active option index
     _setActiveOptionIndex(index) {
@@ -774,11 +723,11 @@ class FuiSelectComponent {
         const activeOption = opts[index];
         activeOption.setActive();
         this._activeOptionIndex.set(index);
-        this._scrollToActiveOption();
+        scrollOptionIntoView(activeOption._getHostElement(), this.panel?.nativeElement);
         // Announce active option for screen readers (when panel is open and using keyboard)
         if (this.panelOpen()) {
             const label = activeOption.getLabel();
-            const selectedState = activeOption._selected() ? ', selected' : '';
+            const selectedState = activeOption._selected ? (activeOption._selected() ? ', selected' : '') : '';
             this._announce(`${label}${selectedState}, ${index + 1} of ${opts.length}`);
         }
     }
@@ -789,17 +738,7 @@ class FuiSelectComponent {
             this._activeOptionIndex.set(-1);
             return;
         }
-        const currentValue = this._value();
-        const compareFn = this.compareWith();
-        // Find the first selected option
-        let selectedIndex = -1;
-        if (!this.multiple() && currentValue !== null && currentValue !== undefined) {
-            selectedIndex = opts.findIndex((opt) => compareFn(opt.value(), currentValue));
-        }
-        else if (this.multiple() && this.isArray(currentValue) && currentValue.length > 0) {
-            selectedIndex = opts.findIndex((opt) => currentValue.some((v) => compareFn(v, opt.value())));
-        }
-        const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        const initialIndex = findInitialActiveOptionIndex(opts, this._value(), this.multiple(), this.compareWith());
         this._setActiveOptionIndex(initialIndex);
     }
     // Scroll to active option
@@ -808,32 +747,18 @@ class FuiSelectComponent {
         const activeIndex = this._activeOptionIndex();
         if (activeIndex < 0 || activeIndex >= opts.length)
             return;
-        const activeOption = opts[activeIndex];
-        const element = activeOption._getHostElement();
-        const panel = this.panel?.nativeElement;
-        if (element && panel) {
-            const optionTop = element.offsetTop;
-            const optionBottom = optionTop + element.offsetHeight;
-            const panelTop = panel.scrollTop;
-            const panelBottom = panelTop + panel.clientHeight;
-            if (optionTop < panelTop) {
-                panel.scrollTop = optionTop;
-            }
-            else if (optionBottom > panelBottom) {
-                panel.scrollTop = optionBottom - panel.clientHeight;
-            }
-        }
+        scrollOptionIntoView(opts[activeIndex]._getHostElement(), this.panel?.nativeElement);
     }
     // Handle type-ahead search
     _handleTypeahead(char) {
-        // Clear timeout and add to buffer
-        if (this._typeaheadTimeout) {
-            clearTimeout(this._typeaheadTimeout);
+        // Clear timer and append char to buffer
+        if (this._typeaheadResetTimer) {
+            clearTimeout(this._typeaheadResetTimer);
         }
-        this._typeaheadBuffer += char.toLowerCase();
+        this._typeaheadBuffer.update((b) => b + char.toLowerCase());
         // Find matching option
         const opts = this._getEnabledOptions();
-        const matchIndex = opts.findIndex((opt) => opt.getLabel().toLowerCase().startsWith(this._typeaheadBuffer));
+        const matchIndex = opts.findIndex((opt) => opt.getLabel().toLowerCase().startsWith(this._typeaheadBuffer()));
         if (matchIndex >= 0) {
             if (this.panelOpen()) {
                 this._setActiveOptionIndex(matchIndex);
@@ -844,8 +769,8 @@ class FuiSelectComponent {
             }
         }
         // Clear buffer after debounce
-        this._typeaheadTimeout = setTimeout(() => {
-            this._typeaheadBuffer = '';
+        this._typeaheadResetTimer = setTimeout(() => {
+            this._typeaheadBuffer.set('');
         }, this.TYPE_AHEAD_DEBOUNCE);
     }
     // Select first non-disabled option
@@ -864,113 +789,25 @@ class FuiSelectComponent {
     }
     // Get all non-disabled options
     _getEnabledOptions() {
-        return this.options().filter((opt) => !opt.disabled());
-    }
-    // Start listening for outside clicks when panel opens
-    _listenForOutsideClicks() {
-        this._outsideClickSub?.unsubscribe();
-        // Run outside Angular zone to avoid triggering change detection on every document click
-        this._ngZone.runOutsideAngular(() => {
-            // Use setTimeout to skip the current click event that opened the panel
-            setTimeout(() => {
-                this._outsideClickSub = fromEvent(this._document, 'click')
-                    .pipe(filter(() => this.panelOpen()), filter((event) => {
-                    const target = event.target;
-                    const triggerElement = this.trigger?.nativeElement;
-                    const panelElement = this.panel?.nativeElement;
-                    const overlayElement = this._overlayRef?.overlayElement;
-                    return (!triggerElement?.contains(target) &&
-                        !panelElement?.contains(target) &&
-                        !overlayElement?.contains(target));
-                }))
-                    .subscribe(() => {
-                    this._ngZone.run(() => {
-                        this.close();
-                    });
-                });
-            });
-        });
-    }
-    // Create overlay for panel
-    _createOverlay() {
-        if (this._overlayRef || !this.panel || !this.trigger)
-            return;
-        const triggerElement = this.trigger.nativeElement;
-        const triggerWidth = triggerElement.getBoundingClientRect().width;
-        const positions = [
-            // Primary: open below
-            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-            // Fallback: open above if no space below
-            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-        ];
-        const positionStrategy = this._overlayService
-            .position()
-            .connectedTo(triggerElement, positions)
-            .withPush(false)
-            .withFlexibleDimensions(true)
-            .withViewportMargin(8);
-        this._overlayRef = this._overlayService.create({
-            positionStrategy,
-            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'fui-select-backdrop',
-            backdropClickBehavior: 'close',
-            panelClass: ['fui-select-overlay-panel'],
-            width: triggerWidth,
-        });
-        // Track overlay subscriptions for proper cleanup
-        this._overlaySubscriptions.unsubscribe();
-        this._overlaySubscriptions = new Subscription();
-        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
-            this.close();
-        }));
-        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
-            if (event.key === 'Escape') {
-                this.close();
-            }
-        }));
-        // Attach panel to overlay
-        const panelElement = this.panel.nativeElement;
-        this._overlayRef.attach(panelElement);
-    }
-    // Dispose overlay
-    _disposeOverlay() {
-        this._overlaySubscriptions.unsubscribe();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
+        return getEnabledOptions(this.options());
     }
     // Get the active option's id for aria-activedescendant
     _getActiveDescendant() {
-        const opts = this._getEnabledOptions();
-        const activeIndex = this._activeOptionIndex();
-        if (activeIndex >= 0 && activeIndex < opts.length) {
-            return opts[activeIndex].id;
-        }
-        return null;
+        return computeActiveDescendant(this._getEnabledOptions(), this._activeOptionIndex());
     }
-    /**
-     * Announces a message to screen readers via the aria-live region.
-     * Clears the message after a brief delay to allow repeated announcements.
-     */
     _announce(message) {
-        // Clear first to ensure repeated identical messages are announced
-        this._liveAnnouncement.set('');
-        setTimeout(() => {
-            this._liveAnnouncement.set(message);
-        }, 50);
+        announceMessage(this._liveAnnouncement, message);
     }
     // Mat-select compatibility methods
     get selected() {
         return this.value;
     }
-    // Helper method to check if value is array
+    /** @internal Helper to check if a value is an array. Used by tests. */
     isArray(value) {
         return Array.isArray(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSelectComponent, isStandalone: true, selector: "fui-select", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-select--open": "panelOpen()", "class.fui-select--disabled": "disabled()", "class.fui-select--multiple": "multiple()", "class.fui-select--readonly": "_readOnly()" }, classAttribute: "fui-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSelectComponent, isStandalone: true, selector: "fui-select", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-select--open": "panelOpen()", "class.fui-select--disabled": "disabled()", "class.fui-select--multiple": "multiple()", "class.fui-select--readonly": "readonly()", "attr.aria-readonly": "readonly() ? \"true\" : null" }, classAttribute: "fui-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FuiSelectComponent,
@@ -984,17 +821,25 @@ class FuiSelectComponent {
                 provide: FUI_SELECT,
                 useExisting: FuiSelectComponent,
             },
-        ], queries: [{ propertyName: "options", predicate: FuiOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<!-- Select Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-select__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\r\n  aria-autocomplete=\"none\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n  (focus)=\"_onFocus()\"\r\n  (blur)=\"_onBlur($event)\"\r\n>\r\n  <span class=\"fui-select__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-select__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #panel\r\n    [id]=\"id + '-panel'\"\r\n    class=\"fui-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-select{display:inline-block;width:100%;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fui-spacing-02);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__arrow svg{width:1rem;height:1rem}.fui-select--open .fui-select__arrow{transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{position:fixed;opacity:0;pointer-events:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-border-radius-md);--fui-select-panel-shadow: var(--fui-shadow-04);--fui-select-panel-bg: var(--fui-surface-00);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-02) 0;transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: FUI_OPTION, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Select Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-select__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\r\n  aria-autocomplete=\"none\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n  (focus)=\"_onFocus()\"\r\n  (blur)=\"_onBlur($event)\"\r\n>\r\n  <span class=\"fui-select__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-select__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    <span class=\"fui-select__arrow\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered; hidden when closed so #panel ViewChild is always available) -->\r\n<div\r\n  #panel\r\n  [hidden]=\"false\"\r\n  [id]=\"id + '-panel'\"\r\n  class=\"fui-select__panel\"\r\n  role=\"listbox\"\r\n  [attr.aria-multiselectable]=\"multiple()\"\r\n  [attr.aria-label]=\"placeholder()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-select{display:inline-block;width:100%;min-width:8rem;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition-property:color,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-select--open .fui-select__arrow{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{display:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-radius-md);--fui-select-panel-shadow: var(--fui-shadow-lg);--fui-select-panel-bg: var(--fui-bg-default);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-2) 0;transform-origin:top center;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-select', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'fui-select', standalone: true, imports: [ReactiveFormsModule, FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: FuiPopupOverlayDirective,
+                            inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],
+                            outputs: ['openedChange', 'escapeKey'],
+                        },
+                        FuiFormControlSyncDirective,
+                    ], host: {
                         class: 'fui-select',
                         '[attr.id]': 'id',
                         '[class.fui-select--open]': 'panelOpen()',
                         '[class.fui-select--disabled]': 'disabled()',
                         '[class.fui-select--multiple]': 'multiple()',
-                        '[class.fui-select--readonly]': '_readOnly()',
+                        '[class.fui-select--readonly]': 'readonly()',
+                        '[attr.aria-readonly]': 'readonly() ? "true" : null',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1009,18 +854,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_SELECT,
                             useExisting: FuiSelectComponent,
                         },
-                    ], template: "<!-- Select Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-select__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\r\n  aria-autocomplete=\"none\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n  (focus)=\"_onFocus()\"\r\n  (blur)=\"_onBlur($event)\"\r\n>\r\n  <span class=\"fui-select__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-select__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #panel\r\n    [id]=\"id + '-panel'\"\r\n    class=\"fui-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-select{display:inline-block;width:100%;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fui-spacing-02);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__arrow svg{width:1rem;height:1rem}.fui-select--open .fui-select__arrow{transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{position:fixed;opacity:0;pointer-events:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-border-radius-md);--fui-select-panel-shadow: var(--fui-shadow-04);--fui-select-panel-bg: var(--fui-surface-00);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-02) 0;transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{
+                    ], template: "<!-- Select Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-select__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\r\n  aria-autocomplete=\"none\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n  (focus)=\"_onFocus()\"\r\n  (blur)=\"_onBlur($event)\"\r\n>\r\n  <span class=\"fui-select__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-select__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    <span class=\"fui-select__arrow\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered; hidden when closed so #panel ViewChild is always available) -->\r\n<div\r\n  #panel\r\n  [hidden]=\"false\"\r\n  [id]=\"id + '-panel'\"\r\n  class=\"fui-select__panel\"\r\n  role=\"listbox\"\r\n  [attr.aria-multiselectable]=\"multiple()\"\r\n  [attr.aria-label]=\"placeholder()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-select{display:inline-block;width:100%;min-width:8rem;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition-property:color,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-select--open .fui-select__arrow{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{display:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-radius-md);--fui-select-panel-shadow: var(--fui-shadow-lg);--fui-select-panel-bg: var(--fui-bg-default);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-2) 0;transform-origin:top center;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{
                 type: ViewChild,
-                args: ['trigger', { static: false }]
+                args: ['trigger', { static: true }]
             }], panel: [{
                 type: ViewChild,
-                args: ['panel', { static: false }]
-            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+                args: ['panel', { static: true }]
+            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FUI_OPTION), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FUI_SELECT, FuiOptionComponent, FuiSelectComponent };
+export { FUI_OPTION, FUI_SELECT, FuiOptionBase, FuiOptionComponent, FuiSelectComponent };
 //# sourceMappingURL=raintonic-formaui-components-select.mjs.map