@raintonic/formaui 0.4.0 → 0.9.0

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

@@ -1,26 +1,25 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, ChangeDetectorRef, input, computed, output, signal, contentChildren, ElementRef, NgZone, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgForm, FormGroupDirective, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DOCUMENT } from '@angular/common';
-import { Subject, Subscription, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, output, signal, computed, contentChildren, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i1 from '@raintonic/formaui/cdk/form-field';
+import { FuiPopupOverlayDirective, FuiFormControlSyncDirective, injectNgControl } from '@raintonic/formaui/cdk/form-field';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
-import { FuiButtonDirective } from '@raintonic/formaui/components/button';
-import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
-import { FuiOptionComponent } from '@raintonic/formaui/components/select';
-import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { FUI_FORM_FIELD, FuiFormFieldComponent, FuiPrefixDirective } from '@raintonic/formaui/components/form-field';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+import { FuiIntlBase, isEmpty, noop, computeMultiDisplayValue, syncMultiOptions, applyOptionSelection, getEnabledOptions, computePagedActiveOptionIndex, computeNextActiveOptionIndex, scrollOptionIntoView, findInitialActiveOptionIndex, computeActiveDescendant, announceMessage, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FUI_OPTION, FUI_SELECT } from '@raintonic/formaui/components/select';
 
 class FuiAutocompleteIntl extends FuiIntlBase {
-    addButtonLabel = 'Add New';
-    refreshButtonLabel = 'Refresh';
-    noOptionsText = 'No options found';
+    /** Placeholder text for the search input inside the panel. */
     searchPlaceholder = 'Search...';
+    /** Aria label for the clear selection button. */
     clearSelectionAriaLabel = 'Clear selection';
-    noResultsAvailableText = 'No results available.';
+    /** Text shown when the search filter has no matching options. */
+    noResultsText = 'No results found';
+    /** Announced via live region when panel opens, indicating how many results are available. */
     resultsAvailableText(count) {
-        return `${count} results available.`;
+        return count === 1 ? '1 result available.' : `${count} results available.`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteIntl, providedIn: 'root' });
@@ -30,131 +29,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-/**
- * Injection token used to provide the parent autocomplete to options
- */
 const FUI_AUTOCOMPLETE = new InjectionToken('FUI_AUTOCOMPLETE');
 /**
  * # fui-autocomplete Component
  *
- * An autocomplete component designed to work seamlessly with fui-form-field.
- * Similar to Angular Material's mat-autocomplete integration with mat-form-field.
- * Provides full Reactive Forms support with validation, filtering, and optional
- * add/refresh actions.
+ * An autocomplete component that works inside fui-form-field.
+ * Options are content-projected as `<fui-option>` children — same API as `<fui-select>`.
+ * Search filtering is always enabled, CSS-hiding non-matching options.
  *
  * ## Features
- * - Works inside fui-form-field like mat-autocomplete
- * - Full Reactive Forms integration (ControlValueAccessor)
- * - Options via projected content (fui-option)
- * - Built-in search/filter input in the panel
- * - Optional "Add New" and "Refresh" action buttons
- * - Disabled and readonly states
- * - Full accessibility support
- * - Full keyboard navigation (Arrow keys, Enter, Escape, Home, End, PageUp, PageDown)
- * - Uses overlay service for proper positioning
+ * - Content-projected `<fui-option>` children matching the `<fui-select>` API
+ * - Built-in search filtering — CSS-hides non-matching options
+ * - Single and multiple selection
+ * - Full keyboard navigation
+ * - Full Reactive Forms integration
  *
  * ## Usage
  *
- * ### Basic Autocomplete with Form Field
+ * ### Basic Autocomplete
  * ```html
  * <fui-form-field>
- *   <label>Country</label>
- *   <fui-autocomplete placeholder="Search countries...">
- *     <fui-option value="us">United States</fui-option>
- *     <fui-option value="ca">Canada</fui-option>
- *     <fui-option value="mx">Mexico</fui-option>
+ *   <label>Framework</label>
+ *   <fui-autocomplete placeholder="Select a framework" formControlName="framework">
+ *     @for (fw of frameworks; track fw) {
+ *       <fui-option [value]="fw">{{ fw.label }}</fui-option>
+ *     }
  *   </fui-autocomplete>
  * </fui-form-field>
  * ```
  *
- * ### With Reactive Forms and Validation
- * ```html
- * <form [formGroup]="form">
- *   <fui-form-field>
- *     <label>Country</label>
- *     <fui-autocomplete formControlName="country" placeholder="Select a country">
- *       <fui-option value="us">United States</fui-option>
- *       <fui-option value="ca">Canada</fui-option>
- *     </fui-autocomplete>
- *     <fui-error *ngIf="form.get('country')?.hasError('required')">
- *       Country is required
- *     </fui-error>
- *   </fui-form-field>
- * </form>
- * ```
- *
- * ### With Add/Refresh Buttons
+ * ### Multiple Selection
  * ```html
- * <fui-form-field>
- *   <label>Category</label>
- *   <fui-autocomplete
- *     placeholder="Search categories..."
- *     [showAddButton]="true"
- *     [showRefreshButton]="true"
- *     (addNew)="openAddCategoryDialog()"
- *     (refresh)="refreshCategories()">
- *     @for (category of categories; track category.id) {
- *       <fui-option [value]="category.id">{{ category.name }}</fui-option>
- *     }
- *   </fui-autocomplete>
- * </fui-form-field>
+ * <fui-autocomplete [multiple]="true" placeholder="Select tags" formControlName="tags">
+ *   @for (tag of tags; track tag) {
+ *     <fui-option [value]="tag">{{ tag }}</fui-option>
+ *   }
+ * </fui-autocomplete>
  * ```
  */
 class FuiAutocompleteComponent {
-    // Static properties
     static nextId = 0;
     controlType = 'fui-autocomplete';
-    // Injected dependencies required by input resolvers (must be declared before computed fields below)
+    // Injected dependencies
+    _popup = inject(FuiPopupOverlayDirective);
+    _formSync = inject(FuiFormControlSyncDirective);
+    _parentFormField = inject(FUI_FORM_FIELD, { optional: true });
     intl = inject(FuiAutocompleteIntl);
-    _cdr = inject(ChangeDetectorRef);
-    // Inputs using signal-based API
+    // --- Inputs ---
     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 */ []));
-    showAddButton = input(false, ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
-    showRefreshButton = input(false, ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
-    addButtonLabel = input(undefined, ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
-    refreshButtonLabel = input(undefined, ...(ngDevMode ? [{ debugName: "refreshButtonLabel" }] : /* istanbul ignore next */ []));
-    noOptionsText = input(undefined, ...(ngDevMode ? [{ debugName: "noOptionsText" }] : /* istanbul ignore next */ []));
-    searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
-    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
-    // Resolved i18n labels: per-instance input wins, Intl service is fallback
-    resolvedAddButtonLabel = computed(() => this.addButtonLabel() ?? this.intl.addButtonLabel, ...(ngDevMode ? [{ debugName: "resolvedAddButtonLabel" }] : /* istanbul ignore next */ []));
-    resolvedRefreshButtonLabel = computed(() => this.refreshButtonLabel() ?? this.intl.refreshButtonLabel, ...(ngDevMode ? [{ debugName: "resolvedRefreshButtonLabel" }] : /* istanbul ignore next */ []));
-    resolvedNoOptionsText = computed(() => this.noOptionsText() ?? this.intl.noOptionsText, ...(ngDevMode ? [{ debugName: "resolvedNoOptionsText" }] : /* istanbul ignore next */ []));
-    resolvedSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.intl.searchPlaceholder, ...(ngDevMode ? [{ debugName: "resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly', transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * 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 */ []));
-    // Outputs
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // --- Outputs ---
     valueChange = output();
     selectionChange = output();
     openedChange = output();
-    addNew = output();
-    refresh = output();
     searchChange = output();
-    // Internal state signals
+    // --- Internal state ---
     _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-autocomplete-${FuiAutocompleteComponent.nextId++}`;
     _ariaDescribedby = null;
     // Error state
     _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);
+    // Form control
     _ngControlRef = injectNgControl();
     get ngControl() {
         return this._ngControlRef.ngControl;
     }
-    // Interface implementation
+    // Computed interface properties
     placeholder = computed(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
     required = this._required;
@@ -162,69 +116,39 @@ class FuiAutocompleteComponent {
     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;
-    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    readonly = computed(() => this.readonlyInput() || this._readOnly(), ...(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
+    // --- View refs ---
     trigger;
     panel;
     searchInput;
-    // 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 */ []));
-    // Search term for filtering
+    // --- Content-projected options ---
+    options = contentChildren(FUI_OPTION, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    // --- Panel state ---
+    panelOpen = computed(() => this._popup.panelOpen(), ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    // --- Search ---
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-    // Active option index for keyboard navigation
-    activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
-    // Live announcement for screen readers
-    _liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "_liveAnnouncement" }] : /* istanbul ignore next */ []));
-    _announce(message) {
-        this._liveAnnouncement.set('');
-        setTimeout(() => {
-            this._liveAnnouncement.set(message);
-        }, 50);
-    }
-    // Overlay reference
-    _overlayRef = null;
-    _overlaySubscriptions = new Subscription();
-    // Services
-    _overlayService = inject(FuiOverlayService);
-    _elementRef = inject(ElementRef);
-    _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
-    _outsideClickSub;
-    // ControlValueAccessor callbacks
-    _onChange = () => {
-        // Intentionally empty: will be replaced by Angular forms
-    };
-    _onTouched = () => {
-        // 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 '';
-        }
-        const selectedOption = opts.find((opt) => this.compareWith()(opt.value(), currentValue));
-        return selectedOption ? selectedOption.getLabel() : String(currentValue);
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-    // Filtered options based on search term
-    filteredOptions = computed(() => {
+    // --- Active option index ---
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    // --- Visible (not filtered-out) options — single source of truth for search filtering ---
+    _visibleOptions = computed(() => {
+        const term = this.searchTerm();
         const opts = this.options();
-        const term = this.searchTerm().toLowerCase().trim();
-        if (!term) {
-            return opts.filter((opt) => !opt.disabled());
+        if (!term.trim()) {
+            return opts;
         }
-        return opts.filter((opt) => !opt.disabled() && opt.getLabel().toLowerCase().includes(term));
-    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
-    hasFilteredOptions = computed(() => {
-        return this.filteredOptions().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasFilteredOptions" }] : /* istanbul ignore next */ []));
+        const lower = term.toLowerCase().trim();
+        return opts.filter((o) => o.getLabel().toLowerCase().includes(lower));
+    }, ...(ngDevMode ? [{ debugName: "_visibleOptions" }] : /* istanbul ignore next */ []));
+    _visibleOptionCount = computed(() => this._visibleOptions().length, ...(ngDevMode ? [{ debugName: "_visibleOptionCount" }] : /* istanbul ignore next */ []));
+    // --- Live announcement ---
+    _liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "_liveAnnouncement" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor callbacks ---
+    _onChange = noop;
+    _onTouched = noop;
+    // --- Computed ---
+    displayValue = computed(() => computeMultiDisplayValue(this), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     constructor() {
         // Set valueAccessor after NgControl is resolved
         void Promise.resolve().then(() => {
@@ -232,14 +156,12 @@ class FuiAutocompleteComponent {
                 this._ngControlRef.ngControl.valueAccessor = this;
             }
         });
-        // Subscribe to Intl changes to trigger re-render when labels mutate at runtime
-        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
-        // Effect to emit state changes
+        // State changes effect
         effect(() => {
-            // Track all reactive inputs and internal signals
             this.placeholderInput();
             this.readonly();
             this.disabledInput();
+            this.multiple();
             this.errorStateMatcher();
             this._focused();
             this._disabled();
@@ -247,41 +169,76 @@ class FuiAutocompleteComponent {
             this._ngControlDisabled();
             this._required();
             this._errorState();
-            // Emit state change
             this.stateChanges.next();
         });
-        // Effect to update options selected state when value changes
+        // Sync option states when value or options change
         effect(() => {
-            const currentValue = this._value();
-            const opts = this.options();
-            const compareFn = this.compareWith();
-            opts.forEach((option) => {
-                const optValue = option.value();
-                const isSelected = compareFn(currentValue, optValue);
-                if (isSelected) {
-                    option.select();
-                }
-                else {
-                    option.deselect();
-                }
-            });
-            // Notify form-field that state may have changed
+            syncMultiOptions(this);
             this.stateChanges.next();
         });
+        // Sync DOM visibility to match _visibleOptions computed signal
+        // One-way sync: computed signal is the source of truth, DOM is updated to match
+        effect(() => {
+            const term = this.searchTerm();
+            const opts = this.options();
+            const visible = this._visibleOptions();
+            const visibleSet = new Set(visible);
+            for (const opt of opts) {
+                opt._getHostElement().style.display = visibleSet.has(opt) ? '' : 'none';
+            }
+        });
+        // Announce visible results count when search term or panel state changes
+        effect(() => {
+            const term = this.searchTerm();
+            const visible = this._visibleOptions();
+            const isOpen = this._popup.panelOpen();
+            // Only announce when the panel is open and search filtering is active
+            if (isOpen && term.trim()) {
+                this._announce(this.intl.resultsAvailableText(visible.length));
+            }
+        });
+        // Focus management: move focus to search input when panel opens
+        let _panelInitialized = false;
+        effect(() => {
+            const isOpen = this._popup.panelOpen();
+            if (!_panelInitialized) {
+                _panelInitialized = true;
+                return;
+            }
+            if (isOpen) {
+                queueMicrotask(() => {
+                    this.searchInput?.nativeElement.focus();
+                });
+            }
+        });
     }
-    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);
+    ngAfterViewInit() {
+        this._popup.setTrigger(this.trigger ?? null);
+        this._popup.setPanel(this.panel ?? null);
+        this._popup.panelClass.set(['fui-autocomplete-overlay-panel']);
+        this._popup.backdropClass.set('fui-autocomplete-backdrop');
+        this._popup.positions.set([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 16,
+            },
+        ]);
+        if (this._parentFormField) {
+            this._popup.widthElement.set(this._parentFormField.getConnectedOverlayOrigin());
         }
+        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);
     }
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._outsideClickSub?.unsubscribe();
-        this._disposeOverlay();
     }
-    // ControlValueAccessor implementation
+    // --- ControlValueAccessor ---
     writeValue(value) {
         this._value.set(value ?? null);
         this.stateChanges.next();
@@ -296,11 +253,13 @@ class FuiAutocompleteComponent {
         this._disabled.set(isDisabled);
         this.stateChanges.next();
     }
-    // FuiFormFieldControl implementation
+    // --- FuiFormFieldControl ---
     onContainerClick(_event) {
-        if (!this.disabled()) {
-            this.toggle();
-        }
+        if (this.disabled())
+            return;
+        if (this.multiple() && this.panelOpen())
+            return;
+        this.toggle();
     }
     setDescribedByIds(ids) {
         this._ariaDescribedby = ids.length ? ids.join(' ') : null;
@@ -308,7 +267,8 @@ class FuiAutocompleteComponent {
     setReadOnly(readOnly) {
         this._readOnly.set(readOnly);
     }
-    // Public methods
+    // --- Public API ---
+    /** Clears the current value. */
     clear(event) {
         event.stopPropagation();
         this._value.set(null);
@@ -323,122 +283,88 @@ class FuiAutocompleteComponent {
     blur() {
         this.trigger?.nativeElement.blur();
     }
-    // Toggle panel open/close
-    toggle() {
-        if (this.disabled())
-            return;
-        if (this.panelOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    // Open the dropdown panel
+    /** Opens the panel. */
     open() {
-        if (this.disabled() || this.readonly() || this.panelOpen())
+        if (this.disabled() || this.readonly() || this._popup.panelOpen())
             return;
-        this.panelOpen.set(true);
         this._focused.set(true);
         this.searchTerm.set('');
-        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._popup.open();
+        if (this._popup.panelOpen()) {
             this._scrollToActiveOption();
-            this._listenForOutsideClicks();
-            // Focus the search input
-            this.searchInput?.nativeElement.focus();
-        }, 0);
+            this.openedChange.emit(true);
+            // Announce how many results are available
+            this._announce(this.intl.resultsAvailableText(this.options().length));
+        }
     }
-    // Close the dropdown panel
-    close() {
-        if (!this.panelOpen())
+    /** Closes the panel. */
+    close(restoreFocus = true) {
+        if (!this._popup.panelOpen())
             return;
-        this._outsideClickSub?.unsubscribe();
-        this.panelOpen.set(false);
         this._focused.set(false);
-        this.activeOptionIndex.set(-1);
+        this.activeIndex.set(-1);
         this.searchTerm.set('');
-        this._disposeOverlay();
-        this.openedChange.emit(false);
         this._onTouched();
-        // Clear active state on all options
-        this.options().forEach((opt) => {
-            opt.setInactive();
-        });
-        // Return focus to trigger
-        setTimeout(() => {
+        this._popup.close();
+        this.openedChange.emit(false);
+        if (restoreFocus) {
             this.trigger?.nativeElement.focus();
-        }, 0);
+        }
+    }
+    /** Toggles the panel. */
+    toggle() {
+        if (this.disabled() || this.readonly())
+            return;
+        this._popup.toggle();
     }
-    // Handle option selection (called by FuiOptionComponent or internally)
+    // --- Selection ---
+    /**
+     * Called by fui-option via FUI_SELECT._onOptionSelected.
+     * Implements FuiSelectParent.
+     */
     _onOptionSelected(option) {
-        const newValue = option.value();
-        // Deselect previous option
-        const opts = this.options();
-        opts.forEach((opt) => {
-            if (opt !== option) {
-                opt.deselect();
-            }
-        });
-        option.select();
+        const result = applyOptionSelection(this, option);
+        const newValue = result.newValue;
         this._value.set(newValue);
         this._onChange(newValue);
         this.valueChange.emit(newValue);
         this.selectionChange.emit({ source: this, value: newValue });
-        this._announce(`${option.getLabel()} selected`);
-        this.close();
         this.stateChanges.next();
+        if (result.wasSelected) {
+            this._announce(`${option.getLabel()} deselected`);
+        }
+        else {
+            this._announce(`${option.getLabel()} selected`);
+        }
+        if (!this.multiple()) {
+            this.close();
+        }
     }
-    // Handle search input
+    // --- Search ---
     onSearchInput(event) {
         const target = event.target;
         const term = target.value;
         this.searchTerm.set(term);
         this.searchChange.emit(term);
-        // Reset active index when search changes
-        const filtered = this.filteredOptions();
-        if (filtered.length > 0) {
-            this._setActiveOptionIndex(0);
-        }
-        else {
-            this.activeOptionIndex.set(-1);
-        }
-    }
-    // Handle add new action
-    onAddNew() {
-        this.close();
-        this.addNew.emit();
-    }
-    // Handle refresh action
-    onRefresh() {
-        this.refresh.emit();
-        // Keep panel open and clear search
-        this.searchTerm.set('');
-    }
-    // Get display value for trigger
-    _getDisplayValue() {
-        return this.displayValue();
+        // Reset active index to first visible enabled option
+        const enabled = getEnabledOptions(this._visibleOptions());
+        this.activeIndex.set(enabled.length > 0 ? 0 : -1);
     }
-    // Handle keyboard navigation
+    // --- Keyboard Navigation ---
+    /** Entry point for trigger keydown */
     _handleKeydown(event) {
         if (this.disabled())
             return;
-        const isOpen = this.panelOpen();
-        if (!isOpen) {
+        if (!this.panelOpen()) {
             this._handleClosedKeydown(event);
         }
         else {
-            this._handleOpenKeydown(event);
+            this._handlePanelKeydown(event);
         }
     }
-    // Handle keydown when panel is closed
     _handleClosedKeydown(event) {
-        const key = event.key;
-        switch (key) {
+        switch (event.key) {
             case 'Enter':
             case ' ':
             case 'ArrowDown':
@@ -448,254 +374,104 @@ class FuiAutocompleteComponent {
                 break;
         }
     }
-    // Handle keydown when panel is open (for search input)
+    /** Handle keydown inside the panel (search input or item list) */
     _handlePanelKeydown(event) {
         if (this.disabled())
             return;
-        const key = event.key;
-        const opts = this.filteredOptions();
-        const activeIndex = this.activeOptionIndex();
-        switch (key) {
+        const opts = this._getVisibleEnabledOptions();
+        const activeIdx = this.activeIndex();
+        switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this._setNextActiveOption(1);
+                this._setActiveOptionIndex(computeNextActiveOptionIndex(opts.length, activeIdx, 1));
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this._setNextActiveOption(-1);
+                this._setActiveOptionIndex(computeNextActiveOptionIndex(opts.length, activeIdx, -1));
                 break;
             case 'Home':
                 event.preventDefault();
-                if (opts.length > 0) {
-                    this._setActiveOptionIndex(0);
-                }
+                this._setActiveOptionIndex(0);
                 break;
             case 'End':
                 event.preventDefault();
-                if (opts.length > 0) {
-                    this._setActiveOptionIndex(opts.length - 1);
-                }
+                this._setActiveOptionIndex(opts.length - 1);
                 break;
             case 'PageDown':
                 event.preventDefault();
                 if (opts.length > 0) {
-                    const pageSize = Math.min(10, opts.length);
-                    const newIndex = Math.min(activeIndex + pageSize, opts.length - 1);
-                    this._setActiveOptionIndex(newIndex);
+                    this._setActiveOptionIndex(computePagedActiveOptionIndex(opts.length, activeIdx, 1));
                 }
                 break;
             case 'PageUp':
                 event.preventDefault();
                 if (opts.length > 0) {
-                    const pageSize = Math.min(10, opts.length);
-                    const newIndex = Math.max(activeIndex - pageSize, 0);
-                    this._setActiveOptionIndex(newIndex);
+                    this._setActiveOptionIndex(computePagedActiveOptionIndex(opts.length, activeIdx, -1));
                 }
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (activeIndex >= 0 && activeIndex < opts.length) {
-                    this._onOptionSelected(opts[activeIndex]);
+                if (activeIdx >= 0 && activeIdx < opts.length) {
+                    this._onOptionSelected(opts[activeIdx]);
                 }
                 break;
             case 'Escape':
                 event.preventDefault();
+                event.stopPropagation();
                 this.close();
                 break;
             case 'Tab':
-                // Allow tab to close and move to next element
                 this.close();
                 break;
         }
     }
-    // Handle keydown when panel is open (for trigger)
-    _handleOpenKeydown(event) {
-        // Delegate to panel keydown handler
-        this._handlePanelKeydown(event);
-    }
-    // Set the next active option based on delta
-    _setNextActiveOption(delta) {
-        const opts = this.filteredOptions();
-        if (opts.length === 0)
-            return;
-        let currentIndex = this.activeOptionIndex();
-        if (currentIndex < 0) {
-            currentIndex = delta > 0 ? -1 : opts.length;
-        }
-        let newIndex = currentIndex + delta;
-        // Wrap around
-        if (newIndex < 0) {
-            newIndex = opts.length - 1;
-        }
-        else if (newIndex >= opts.length) {
-            newIndex = 0;
-        }
-        this._setActiveOptionIndex(newIndex);
-    }
-    // Set the active option index
     _setActiveOptionIndex(index) {
-        const opts = this.filteredOptions();
+        const opts = this._getVisibleEnabledOptions();
         if (index < 0 || index >= opts.length)
             return;
-        // Update active state on options
-        const allOpts = this.options();
-        allOpts.forEach((opt) => {
+        // Deactivate all visible options
+        this.options().forEach((opt) => {
             opt.setInactive();
         });
         const activeOption = opts[index];
         activeOption.setActive();
-        this.activeOptionIndex.set(index);
-        this._scrollToActiveOption();
-        this._announce(`${activeOption.getLabel()}, ${index + 1} of ${opts.length}`);
+        this.activeIndex.set(index);
+        scrollOptionIntoView(activeOption._getHostElement(), this.panel?.nativeElement, '.fui-autocomplete__options');
+        // Announce active item
+        const label = activeOption.getLabel();
+        this._announce(`${label}, ${index + 1} of ${opts.length}`);
     }
-    // Set initial active option when opening
     _setInitialActiveOption() {
-        const opts = this.filteredOptions();
+        const opts = this._getVisibleEnabledOptions();
         if (opts.length === 0) {
-            this.activeOptionIndex.set(-1);
+            this.activeIndex.set(-1);
             return;
         }
-        const currentValue = this._value();
-        const compareFn = this.compareWith();
-        // Find the selected option
-        let selectedIndex = -1;
-        if (currentValue !== null && currentValue !== undefined) {
-            selectedIndex = opts.findIndex((opt) => compareFn(opt.value(), currentValue));
-        }
-        const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        const initialIndex = findInitialActiveOptionIndex(opts, this._value(), this.multiple(), this.compareWith());
         this._setActiveOptionIndex(initialIndex);
     }
-    // Scroll to active option
     _scrollToActiveOption() {
-        const opts = this.filteredOptions();
-        const activeIndex = this.activeOptionIndex();
-        if (activeIndex < 0 || activeIndex >= opts.length)
+        const opts = this._getVisibleEnabledOptions();
+        const activeIdx = this.activeIndex();
+        if (activeIdx < 0 || activeIdx >= opts.length)
             return;
-        const activeOption = opts[activeIndex];
-        const element = activeOption._getHostElement();
-        const panelElement = this.panel?.nativeElement;
-        if (element && panelElement) {
-            const optionsContainer = panelElement.querySelector('.fui-autocomplete__options');
-            if (optionsContainer) {
-                const optionTop = element.offsetTop - optionsContainer.offsetTop;
-                const optionBottom = optionTop + element.offsetHeight;
-                const containerTop = optionsContainer.scrollTop;
-                const containerBottom = containerTop + optionsContainer.clientHeight;
-                if (optionTop < containerTop) {
-                    optionsContainer.scrollTop = optionTop;
-                }
-                else if (optionBottom > containerBottom) {
-                    optionsContainer.scrollTop = optionBottom - optionsContainer.clientHeight;
-                }
-            }
-        }
+        scrollOptionIntoView(opts[activeIdx]._getHostElement(), this.panel?.nativeElement, '.fui-autocomplete__options');
     }
-    // Start listening for outside clicks when panel opens
-    _listenForOutsideClicks() {
-        this._outsideClickSub?.unsubscribe();
-        this._ngZone.runOutsideAngular(() => {
-            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();
-                    });
-                });
-            });
-        });
+    /** Get visible (non-hidden) enabled options for keyboard navigation */
+    _getVisibleEnabledOptions() {
+        return getEnabledOptions(this._visibleOptions());
     }
-    // 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 = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 4,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -4,
-            },
-        ];
-        const positionStrategy = this._overlayService
-            .position()
-            .connectedTo(triggerElement, positions)
-            .withPush(true)
-            .withViewportMargin(8);
-        this._overlayRef = this._overlayService.create({
-            positionStrategy,
-            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'fui-autocomplete-backdrop',
-            backdropClickBehavior: 'close',
-            panelClass: ['fui-autocomplete-overlay-panel'],
-            minWidth: 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;
-        }
-    }
-    // Get the active option's id for aria-activedescendant
+    /** aria-activedescendant */
     _getActiveDescendant() {
-        const opts = this.filteredOptions();
-        const activeIndex = this.activeOptionIndex();
-        if (activeIndex >= 0 && activeIndex < opts.length) {
-            return opts[activeIndex].id;
-        }
-        return null;
-    }
-    // Set active option by index (for template use)
-    setActiveOption(index, option) {
-        const allOpts = this.options();
-        allOpts.forEach((opt) => {
-            opt.setInactive();
-        });
-        option.setActive();
-        this.activeOptionIndex.set(index);
+        const opts = this._getVisibleEnabledOptions();
+        return computeActiveDescendant(opts, this.activeIndex());
     }
-    // Mat-autocomplete compatibility methods
-    get selected() {
-        return this.value;
+    // --- Announcement ---
+    _announce(message) {
+        announceMessage(this._liveAnnouncement, message);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAutocompleteComponent, isStandalone: true, selector: "fui-autocomplete", 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 }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonLabel: { classPropertyName: "refreshButtonLabel", publicName: "refreshButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", 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", addNew: "addNew", refresh: "refresh", searchChange: "searchChange" }, host: { properties: { "attr.id": "id", "class.fui-autocomplete--open": "panelOpen()", "class.fui-autocomplete--disabled": "disabled()", "class.fui-autocomplete--focused": "focused()", "class.fui-autocomplete--error": "errorState()", "class.fui-autocomplete--readonly": "_readOnly()" }, classAttribute: "fui-autocomplete" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAutocompleteComponent, isStandalone: true, selector: "fui-autocomplete", 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", searchChange: "searchChange" }, host: { properties: { "attr.id": "id", "class.fui-autocomplete--open": "panelOpen()", "class.fui-autocomplete--disabled": "disabled()", "class.fui-autocomplete--focused": "focused()", "class.fui-autocomplete--error": "errorState()", "class.fui-autocomplete--readonly": "readonly()", "class.fui-autocomplete--multiple": "multiple()", "attr.aria-readonly": "readonly() ? \"true\" : null" }, classAttribute: "fui-autocomplete" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FuiAutocompleteComponent,
@@ -709,18 +485,31 @@ class FuiAutocompleteComponent {
                 provide: FUI_AUTOCOMPLETE,
                 useExisting: FuiAutocompleteComponent,
             },
-        ], 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__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  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" [attr.aria-label]=\"intl.clearSelectionAriaLabel\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"resolvedSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"resolvedSearchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ intl.resultsAvailableText(filteredOptions().length) }}\r\n      } @else {\r\n        {{ intl.noResultsAvailableText }}\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ resolvedAddButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ resolvedRefreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ resolvedNoOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\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-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-04);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-04);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            {
+                provide: FUI_SELECT,
+                useExisting: FuiAutocompleteComponent,
+            },
+        ], queries: [{ propertyName: "options", predicate: FUI_OPTION, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: 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: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  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  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" 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 so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\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\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__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:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: FuiPrefixDirective, selector: "[fuiPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-autocomplete', standalone: true, imports: [FuiIconComponent, ReactiveFormsModule, FuiButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'fui-autocomplete', standalone: true, imports: [ReactiveFormsModule, FuiIconComponent, FuiFormFieldComponent, FuiInputDirective, FuiPrefixDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: FuiPopupOverlayDirective,
+                            inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],
+                            outputs: ['openedChange', 'escapeKey'],
+                        },
+                        FuiFormControlSyncDirective,
+                    ], host: {
                         class: 'fui-autocomplete',
                         '[attr.id]': 'id',
                         '[class.fui-autocomplete--open]': 'panelOpen()',
                         '[class.fui-autocomplete--disabled]': 'disabled()',
                         '[class.fui-autocomplete--focused]': 'focused()',
                         '[class.fui-autocomplete--error]': 'errorState()',
-                        '[class.fui-autocomplete--readonly]': '_readOnly()',
+                        '[class.fui-autocomplete--readonly]': 'readonly()',
+                        '[class.fui-autocomplete--multiple]': 'multiple()',
+                        '[attr.aria-readonly]': 'readonly() ? "true" : null',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -735,17 +524,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_AUTOCOMPLETE,
                             useExisting: FuiAutocompleteComponent,
                         },
-                    ], template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__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  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" [attr.aria-label]=\"intl.clearSelectionAriaLabel\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"resolvedSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"resolvedSearchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ intl.resultsAvailableText(filteredOptions().length) }}\r\n      } @else {\r\n        {{ intl.noResultsAvailableText }}\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ resolvedAddButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ resolvedRefreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ resolvedNoOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\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-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-04);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-04);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}.fui-autocomplete-overlay-panel .fui-autocomplete__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 }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], refreshButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshButtonLabel", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", 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"] }], addNew: [{ type: i0.Output, args: ["addNew"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], trigger: [{
+                        {
+                            provide: FUI_SELECT,
+                            useExisting: FuiAutocompleteComponent,
+                        },
+                    ], template: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  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  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" 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 so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\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\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__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:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__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"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { static: false }]
             }], panel: [{
                 type: ViewChild,
-                args: ['panel', { static: false }]
+                args: ['panel', { static: true }]
             }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput', { static: false }]
-            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FUI_OPTION), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.