@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-autocomplete.mjs

@@ -1,18 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, forwardRef, ViewContainerRef, ChangeDetectorRef, NgZone, input, afterNextRender, Input, DestroyRef, viewChild, TemplateRef, contentChildren, numberAttribute, output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, forwardRef, ViewContainerRef, ChangeDetectorRef, NgZone, Injector, input, booleanAttribute, output, Renderer2, signal, afterNextRender, effect, untracked, isWritableSignal, DestroyRef, viewChild, TemplateRef, contentChildren, numberAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ScrollDispatcher, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom, _getEventTarget } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
 import { toObservable, outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { KBQ_WINDOW, KbqOptionSelectionChange, ESCAPE, ENTER, TAB, DOWN_ARROW, UP_ARROW, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, kbqResolvePanelWidth, kbqGetPanelWidthOrigin, kbqSiblingPopupProvider, KbqOptgroup, KBQ_PANEL_DEFAULT_MIN_WIDTH, ActiveDescendantKeyManager, KbqOption, KBQ_OPTION_PARENT_COMPONENT, KbqOptionModule } from '@koobiq/components/core';
-import { KBQ_FORM_FIELD } from '@koobiq/components/form-field';
-import { defer, merge, Subscription, Subject, of, fromEvent } from 'rxjs';
-import { take, switchMap, filter, map, tap, delay } from 'rxjs/operators';
+import { kbqRepositionScrollStrategyFactory, KBQ_OVERLAY_LAYERS, kbqOptionalNumberAttribute, kbqCreateCaretOrigin, KBQ_WINDOW, KbqOptionSelectionChange, ESCAPE, UP_ARROW, DOWN_ARROW, ENTER, TAB, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, kbqGetCaretRect, kbqResolvePanelWidth, kbqGetPanelWidthOrigin, kbqGetTextQuery, kbqListenForCaretMoves, hasModifierKey, RIGHT_ARROW, kbqCreateTextMirror, kbqIsTextLaidOutFromStart, kbqSiblingPopupProvider, kbqInjectNativeElement, KbqOption, kbqQueryListFrom, KbqOptgroup, KBQ_PANEL_DEFAULT_MIN_WIDTH, ActiveDescendantKeyManager, KBQ_OPTION_PARENT_COMPONENT, KbqOptionModule } from '@koobiq/components/core';
+import { KBQ_FORM_FIELD, KbqFormFieldControl } from '@koobiq/components/form-field';
+import { merge, EMPTY, Subscription, Subject, of, fromEvent, Observable } from 'rxjs';
+import { filter, switchMap, map, startWith, tap, delay, take } from 'rxjs/operators';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
 
 /**
  * Directive applied to an element to make it usable
@@ -22,10 +23,10 @@ class KbqAutocompleteOrigin {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAutocompleteOrigin, isStandalone: true, selector: "[kbqAutocompleteOrigin]", exportAs: ["kbqAutocompleteOrigin"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAutocompleteOrigin, isStandalone: true, selector: "[kbqAutocompleteOrigin]", exportAs: ["kbqAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAutocompleteOrigin]',
@@ -33,14 +34,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 
-/**
- * The total height of the autocomplete panel.
- *
- * @deprecated Unused — the panel is capped by `--kbq-autocomplete-size-panel-max-height` and reveals its
- * active option through `KbqOption.focus`, so nothing computes a scroll offset from this. Will be removed
- * in the next major release.
- */
-const AUTOCOMPLETE_PANEL_HEIGHT = 256;
 /**
  * Injection token that determines the scroll handling while the autocomplete panel is open. The root default
  * keeps the trigger usable outside `KbqAutocompleteModule`'s injector; providing the token anywhere still wins
@@ -48,18 +41,25 @@ const AUTOCOMPLETE_PANEL_HEIGHT = 256;
  */
 const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken('kbq-autocomplete-scroll-strategy', {
     providedIn: 'root',
-    factory: () => KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+    factory: () => KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(inject(ScrollDispatcher))
 });
-function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
+/** @docs-private */
+function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(scrollDispatcher) {
+    return kbqRepositionScrollStrategyFactory(scrollDispatcher);
 }
+/**
+ * Redundant to the root factory of the token; kept so an app can restore the default under its own override (#DS-2196).
+ *
+ * @docs-private
+ */
 const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: KBQ_AUTOCOMPLETE_SCROLL_STRATEGY,
-    deps: [Overlay],
+    deps: [ScrollDispatcher],
     useFactory: KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY
 };
 /**
  * Provider that allows the autocomplete to register as a ControlValueAccessor.
+ *
  * @docs-private
  */
 const KBQ_AUTOCOMPLETE_VALUE_ACCESSOR = {
@@ -67,9 +67,17 @@ const KBQ_AUTOCOMPLETE_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => KbqAutocompleteTrigger),
     multi: true
 };
+/** Class of the layer that draws the inline hint over the field. */
+const INLINE_HINT_CLASS = 'kbq-autocomplete-inline-hint';
+/**
+ * `type` of the fields whose native role, `textbox` or `searchbox`, supports `aria-autocomplete` and
+ * `aria-activedescendant`. A textarea reports `textarea`.
+ */
+const TEXT_FIELD_TYPES = new Set(['text', 'search', 'email', 'tel', 'url', 'textarea']);
 /**
  * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
- * @docs-private
+ *
+ * @internal
  */
 function getKbqAutocompleteMissingPanelError() {
     return Error('Attempting to open an undefined instance of `kbq-autocomplete`. ' +
@@ -82,45 +90,42 @@ class KbqAutocompleteTrigger {
         return this.autocomplete()?.keyManager?.activeItem;
     }
     get panelOpen() {
-        return this.overlayAttached && this.autocomplete().showPanel;
+        return this.overlayAttached() && this.autocomplete().showPanel();
     }
     /** Whether the autocomplete panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
     get isAttached() {
-        return this.overlayAttached;
+        return this.overlayAttached();
     }
     /**
-     * Whether the autocomplete is disabled. When disabled, the element will
-     * act as a regular input and the user won't be able to open the panel.
+     * Whether the host takes the `combobox` role. ARIA in HTML allows it on a text input only: a textarea and the
+     * other text fields keep their native role.
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get autocompleteDisabled() {
-        return this._autocompleteDisabled;
+    get isCombobox() {
+        return this.exposesPanel && this.elementRef.nativeElement.type === 'text';
     }
-    set autocompleteDisabled(value) {
-        this._autocompleteDisabled = coerceBooleanProperty(value);
+    /**
+     * Whether the host exposes the panel to assistive technology: a text field with the autocomplete enabled. Other
+     * fields, such as a number input, keep their native semantics.
+     */
+    get exposesPanel() {
+        return !this.autocompleteDisabled() && TEXT_FIELD_TYPES.has(this.elementRef.nativeElement.type);
     }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.overlay = inject(Overlay);
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
         this.zone = inject(NgZone);
+        this.injector = inject(Injector);
         this.dir = inject(Directionality, { optional: true });
         this.formField = inject(KBQ_FORM_FIELD, { optional: true, host: true });
         this.viewportRuler = inject(ViewportRuler);
         this.document = inject(DOCUMENT);
-        this.optionSelections = defer(() => {
-            const autocomplete = this.autocomplete();
-            if (autocomplete && autocomplete.options) {
-                return merge(...autocomplete.options.map((option) => option.onSelectionChange));
-            }
-            // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
-            // Return a stream that we'll replace with the real one once everything is in place.
-            return this.zone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelections));
-        });
         /** The autocomplete panel to be attached to this trigger. */
-        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete", alias: 'kbqAutocomplete' }] : [{ alias: 'kbqAutocomplete' }]));
+        this.autocomplete = input(undefined, { ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'kbqAutocomplete' });
+        /** The bound panel, replayed to every subscriber: it may be bound, or rendered, after they subscribe. */
+        this.autocompleteChanges = toObservable(this.autocomplete);
         /**
          * Emits `true` when the panel opens and `false` when it closes. Part of the `KbqSiblingPopup`
          * contract.
@@ -128,29 +133,85 @@ class KbqAutocompleteTrigger {
          * Built on top of the `autocomplete` signal rather than read once: the panel is bound after the consumers
          * of this stream are created (a tooltip on the same element subscribes in its constructor).
          */
-        this.openedChange = toObservable(this.autocomplete).pipe(filter(Boolean), switchMap((autocomplete) => merge(outputToObservable(autocomplete.opened).pipe(map(() => true)), outputToObservable(autocomplete.closed).pipe(map(() => false)))));
+        this.openedChange = this.autocompleteChanges.pipe(filter(Boolean), switchMap((autocomplete) => merge(outputToObservable(autocomplete.opened).pipe(map(() => true)), outputToObservable(autocomplete.closed).pipe(map(() => false)))));
+        // Follows the bound panel and its options rather than reading them once: either may arrive after a subscriber.
+        this.optionSelections = this.autocompleteChanges.pipe(switchMap((autocomplete) => {
+            if (!autocomplete)
+                return EMPTY;
+            const { options } = autocomplete;
+            return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map((option) => option.onSelectionChange))));
+        }));
         /**
          * Reference relative to which to position the autocomplete panel.
          * Defaults to the autocomplete trigger element.
          */
-        this.connectedTo = input(undefined, ...(ngDevMode ? [{ debugName: "connectedTo", alias: 'kbqAutocompleteConnectedTo' }] : [{ alias: 'kbqAutocompleteConnectedTo' }]));
+        this.connectedTo = input(undefined, { ...(ngDevMode ? { debugName: "connectedTo" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteConnectedTo' });
         /**
          * `autocomplete` attribute to be set on the input element.
+         *
          * @docs-private
          */
-        this.autocompleteAttribute = input('off', ...(ngDevMode ? [{ debugName: "autocompleteAttribute", alias: 'autocomplete' }] : [{ alias: 'autocomplete' }]));
+        this.autocompleteAttribute = input('off', { ...(ngDevMode ? { debugName: "autocompleteAttribute" } : /* istanbul ignore next */ {}), alias: 'autocomplete' });
+        /**
+         * Whether the autocomplete is disabled. When disabled, the element will
+         * act as a regular input and the user won't be able to open the panel.
+         */
+        this.autocompleteDisabled = input(false, { ...(ngDevMode ? { debugName: "autocompleteDisabled" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteDisabled',
+            transform: booleanAttribute });
         /**
          * Event handler for input blur events.
          * Determines whether the blur event is triggered outside the specific target
+         *
          * @returns A boolean indicating if the blur event happened outside the target element
          */
         this.onInputBlur = input((event) => {
             const target = event.relatedTarget;
             return !target || target.tagName !== 'KBQ-OPTION';
-        }, ...(ngDevMode ? [{ debugName: "onInputBlur", alias: 'kbqAutocompleteOnBlur' }] : [{ alias: 'kbqAutocompleteOnBlur' }]));
-        this._autocompleteDisabled = false;
-        this.overlayAttached = false;
-        this.componentDestroyed = false;
+        }, { ...(ngDevMode ? { debugName: "onInputBlur" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteOnBlur' });
+        /**
+         * Whether the panel opens from the text caret instead of the field: its left edge at the caret, right below the
+         * caret's line, following the caret while it moves. The panel is only as wide as its options — `panelMinWidth`
+         * does not apply there, an explicit `panelWidth` still does.
+         */
+        this.relativeToCaret = input(false, { ...(ngDevMode ? { debugName: "relativeToCaret" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteRelativeToCaret',
+            transform: booleanAttribute });
+        /**
+         * Whether the autocomplete completes the text at the caret instead of the whole value. The query is the word
+         * before the caret, or the text after one of `kbqAutocompleteTriggers`; choosing an option replaces the query,
+         * trigger included, with the option. The form value stays the whole text.
+         */
+        this.textMode = input(false, { ...(ngDevMode ? { debugName: "textMode" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteTextMode',
+            transform: booleanAttribute });
+        /** Strings that start a query in text mode, such as `/` or `@`. When empty, the query is the word before the caret. */
+        this.queryTriggers = input([], { ...(ngDevMode ? { debugName: "queryTriggers" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteTriggers' });
+        /** Shortest query that opens the panel in text mode. Defaults to `1` for a word and to `0` after a trigger. */
+        this.queryMinLength = input(undefined, { ...(ngDevMode ? { debugName: "queryMinLength" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteMinLength',
+            transform: kbqOptionalNumberAttribute });
+        /**
+         * Whether text mode draws the rest of the active option after the caret, to be accepted with `Tab` or `→`. The
+         * field has to be inside `kbq-form-field`.
+         */
+        this.inlineHint = input(true, { ...(ngDevMode ? { debugName: "inlineHint" } : /* istanbul ignore next */ {}), alias: 'kbqAutocompleteInlineHint',
+            transform: booleanAttribute });
+        /**
+         * Emits the query at the caret in text mode whenever it changes, or `null` once there is none. The query is read
+         * again as the user types or clicks in the field, and as the caret moves while the panel is open. It carries the
+         * trigger it starts with, which tells apart the options to show for each trigger.
+         */
+        this.queryChange = output({ alias: 'kbqAutocompleteQueryChange' });
+        this.renderer = inject(Renderer2);
+        /** Origin of a caret-anchored panel, measured again whenever the panel is positioned. */
+        this.caretOrigin = kbqCreateCaretOrigin(() => this.measureCaretOrigin());
+        /** Query at the caret in text mode, or `null` while there is none. */
+        this.query = null;
+        /** Stops the listeners that follow the caret while the panel is open. */
+        this.stopCaretListeners = null;
+        /** Layer that draws the inline hint, created the first time there is a hint to draw. */
+        this.textMirror = null;
+        /** Inline hint drawn after the caret, or `''` while there is none. */
+        this.inlineHintText = '';
+        /** Whether the overlay is attached. A signal: host bindings read it, and it changes outside any listener. */
+        this.overlayAttached = signal(false, ...(ngDevMode ? [{ debugName: "overlayAttached" }] : /* istanbul ignore next */ []));
         /** Subscription to viewport size changes. */
         this.viewportSubscription = Subscription.EMPTY;
         /**
@@ -162,9 +223,17 @@ class KbqAutocompleteTrigger {
         /** Stream of keyboard events that can close the panel. */
         this.closeKeyEventStream = new Subject();
         this.window = inject(KBQ_WINDOW);
-        /** `View -> model callback called when value changes` */
+        /**
+         * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onChange = () => { };
-        /** `View -> model callback called when autocomplete has been touched` */
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onTouched = () => { };
         /**
          * Event handler for when the window is blurred. Needs to be an
@@ -181,6 +250,13 @@ class KbqAutocompleteTrigger {
         afterNextRender(() => {
             zone.runOutsideAngular(() => this.window.addEventListener('blur', this.windowBlurHandler));
         });
+        // A hint drawn before text mode, the hint or the autocomplete itself was switched off must not stay behind.
+        effect(() => {
+            this.textMode();
+            this.inlineHint();
+            this.autocompleteDisabled();
+            untracked(() => this.updateInlineHint());
+        });
         this.scrollStrategy = scrollStrategy;
     }
     ngAfterViewInit() {
@@ -188,10 +264,13 @@ class KbqAutocompleteTrigger {
         if (autocomplete) {
             autocomplete.keyManager?.change.subscribe(() => {
                 const autocompleteValue = this.autocomplete();
+                // The host binding that announces the active option is not checked otherwise when this view is OnPush.
+                this.changeDetectorRef.markForCheck();
                 if (this.panelOpen) {
                     this.scrollActiveOptionIntoView();
                     // Focus returns to the input on every arrow key; it must not drag the scroll with it.
                     this.elementRef.nativeElement.focus({ preventScroll: true });
+                    this.updateInlineHint();
                 }
                 else if (!this.panelOpen && autocompleteValue.keyManager.activeItem) {
                     autocompleteValue.keyManager.activeItem?.selectViaInteraction();
@@ -202,58 +281,66 @@ class KbqAutocompleteTrigger {
     ngOnDestroy() {
         this.window.removeEventListener('blur', this.windowBlurHandler);
         this.viewportSubscription.unsubscribe();
-        this.componentDestroyed = true;
         this.destroyPanel();
+        this.textMirror?.destroy();
         this.closeKeyEventStream.complete();
     }
     /** Opens the autocomplete suggestion panel. */
     open() {
-        this.attachOverlay();
+        // Untracked, like `closePanel()` and `updatePosition()`: called from a consumer's `effect()`, the state read
+        // on the way — whether the overlay is attached, the panel's options, the inputs — would make the effect run
+        // again on every open and close.
+        untracked(() => this.attachOverlay());
     }
     closePanel() {
-        if (!this.overlayAttached) {
-            return;
-        }
-        if (this.panelOpen) {
-            // TODO: The 'emit' function requires a mandatory void argument
-            this.autocomplete().closed.emit();
-        }
-        this.autocomplete().isOpen = this.overlayAttached = false;
-        if (this.overlayRef && this.overlayRef.hasAttached()) {
-            this.overlayRef.detach();
-            this.closingActionsSubscription.unsubscribe();
-        }
-        // Note that in some cases this can end up being called after the component is destroyed.
-        // Add a check to ensure that we don't try to run change detection on a destroyed view.
-        if (!this.componentDestroyed) {
-            // We need to trigger change detection manually, because
-            // `fromEvent` doesn't seem to do it at the proper time.
-            // This ensures that the label is reset when the
-            // user clicks outside.
-            this.changeDetectorRef.detectChanges();
-        }
+        untracked(() => {
+            if (!this.overlayAttached()) {
+                return;
+            }
+            if (this.panelOpen) {
+                this.autocomplete().closed.emit();
+            }
+            this.stopFollowingCaret();
+            this.inlineHintText = '';
+            this.textMirror?.hide();
+            this.overlayAttached.set(false);
+            this.autocomplete().attached.set(false);
+            if (this.overlayRef && this.overlayRef.hasAttached()) {
+                this.overlayRef.detach();
+                this.closingActionsSubscription.unsubscribe();
+            }
+        });
     }
     /**
      * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
      * within the viewport.
      */
     updatePosition() {
-        if (this.overlayAttached) {
-            this.overlayRef.updatePosition();
-        }
+        untracked(() => {
+            if (this.overlayAttached()) {
+                this.overlayRef.updatePosition();
+            }
+        });
     }
     /**
      * A stream of actions that should close the autocomplete panel, including
      * when an option is selected, on blur, and when TAB is pressed.
      */
     get panelClosingActions() {
-        return merge(this.optionSelections, this.autocomplete().keyManager.tabOut.pipe(filter(() => this.overlayAttached)), this.closeKeyEventStream, this.getOutsideClickStream(), this.overlayRef ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached)) : of()).pipe(
+        return merge(this.optionSelections, this.autocomplete().keyManager.tabOut.pipe(filter(() => this.overlayAttached())), this.closeKeyEventStream, this.getOutsideClickStream(), this.overlayRef ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached())) : of()).pipe(
         // Normalize the output so we return a consistent type.
         map((event) => (event instanceof KbqOptionSelectionChange ? event : null)));
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
-        Promise.resolve(null).then(() => this.setTriggerValue(value));
+        Promise.resolve(null).then(() => {
+            this.setTriggerValue(value);
+            // The text changed without an input event: the query, its options and its hint belong to the old text.
+            if (this.textMode()) {
+                this.setQuery(null);
+                this.closePanel();
+            }
+        });
     }
     // Implemented as part of ControlValueAccessor.
     // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -271,14 +358,28 @@ class KbqAutocompleteTrigger {
     }
     handleKeydown(event) {
         const keyCode = event.keyCode;
-        // Prevent the default action on all escape key presses. This is here primarily to bring IE
-        // in line with other browsers. By default, pressing escape on IE will cause it to revert
-        // the input value to the one that it had on focus, however it won't dispatch any events
-        // which means that the model value will be out of sync with the view.
-        if (keyCode === ESCAPE) {
+        // The overlay closes the panel once the key reaches `body`. Consumed only when there is a panel
+        // to close, so a dialog around the input still takes the key.
+        if (keyCode === ESCAPE && this.panelOpen) {
             event.preventDefault();
         }
         const autocomplete = this.autocomplete();
+        // In text mode Shift with an arrow selects text, as in any other text, instead of walking the options.
+        if (this.textMode() && event.shiftKey && (keyCode === UP_ARROW || keyCode === DOWN_ARROW))
+            return;
+        if (this.acceptsInlineHint(event)) {
+            event.preventDefault();
+            this.activeOption.selectViaInteraction();
+            return;
+        }
+        // The active option is re-resolved a task after the options change, so an Enter right after a keystroke can
+        // find it pointing at an option the new query filtered out: resolve it now rather than pick a stale one.
+        if (keyCode === ENTER &&
+            this.panelOpen &&
+            this.activeOption &&
+            !autocomplete.options.toArray().includes(this.activeOption)) {
+            this.resetActiveItem();
+        }
         if (this.activeOption && keyCode === ENTER && this.panelOpen) {
             this.activeOption.selectViaInteraction();
             this.resetActiveItem();
@@ -289,7 +390,8 @@ class KbqAutocompleteTrigger {
             if (this.panelOpen || keyCode === TAB) {
                 autocomplete.onKeydown(event);
             }
-            else if (!this.panelOpen && keyCode === DOWN_ARROW && this.canOpen()) {
+            else if (!this.panelOpen && keyCode === DOWN_ARROW && this.canOpen() && !this.textMode()) {
+                // In text mode the arrow moves the caret to the next line, as it does in any other text.
                 this.open();
             }
             const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
@@ -313,22 +415,44 @@ class KbqAutocompleteTrigger {
         if (this.previousValue !== value) {
             this.previousValue = value;
             this.onChange(value);
-            if (this.canOpen() && _getFocusedElementPierceShadowDom() === target) {
+            if (this.textMode()) {
+                this.refreshQuery(true);
+            }
+            else if (this.canOpen() && _getFocusedElementPierceShadowDom() === target) {
                 this.open();
             }
         }
     }
+    /**
+     * Keeps `openOnFocus` from opening the panel the next time the input is focused. Lets a host that
+     * restores focus itself — after clearing, say — do so without the panel springing open.
+     *
+     * @docs-private
+     */
+    suppressOpenOnNextFocus() {
+        this.canOpenOnNextFocus = false;
+    }
     handleFocus() {
         if (!this.canOpenOnNextFocus) {
             this.canOpenOnNextFocus = true;
         }
-        else if (!this.panelOpen && this.canOpen() && this.autocomplete().openOnFocus) {
+        else if (!this.panelOpen && this.canOpen() && this.autocomplete().openOnFocus()) {
             this.previousValue = this.elementRef.nativeElement.value;
-            this.attachOverlay();
+            if (this.textMode()) {
+                this.refreshQuery(true);
+            }
+            else {
+                this.attachOverlay();
+            }
         }
     }
     handleClick($event) {
-        if (!this.panelOpen && this.canOpen() && _getFocusedElementPierceShadowDom() === $event.target) {
+        if (_getFocusedElementPierceShadowDom() !== $event.target)
+            return;
+        if (this.textMode()) {
+            this.refreshQuery(true);
+        }
+        else if (!this.panelOpen && this.canOpen()) {
             this.open();
         }
     }
@@ -342,7 +466,7 @@ class KbqAutocompleteTrigger {
             const formField = this.formField ? this.formField.elementRef.nativeElement : null;
             const connectedTo = this.connectedTo();
             const customOrigin = connectedTo ? connectedTo.elementRef.nativeElement : null;
-            return (this.overlayAttached &&
+            return (this.overlayAttached() &&
                 clickTarget !== this.elementRef.nativeElement &&
                 (!formField || !formField.contains(clickTarget)) &&
                 (!customOrigin || !customOrigin.contains(clickTarget)) &&
@@ -355,20 +479,30 @@ class KbqAutocompleteTrigger {
      * stream every time the option list changes.
      */
     subscribeToClosingActions() {
-        const firstStable = this.zone.onStable.asObservable().pipe(take(1));
+        const firstRender = new Observable((subscriber) => {
+            const ref = afterNextRender(() => subscriber.next(), { injector: this.injector });
+            return () => ref.destroy();
+        });
         const optionChanges = this.autocomplete().options.changes.pipe(tap(() => this.positionStrategy.reapplyLastPosition()), 
         // Defer emitting to the stream until the next tick, because changing
         // bindings in here will cause "changed after checked" errors.
         delay(0));
-        // When the zone is stable initially, and when the option list changes...
-        return (merge(firstStable, optionChanges)
+        // When the options are initially rendered, and when the option list changes...
+        return (merge(firstRender, optionChanges)
             .pipe(
         // create a new stream of panelClosingActions, replacing any previous streams
         // that were created, and flatten it so our stream only emits closing events...
         switchMap(() => {
             const wasOpen = this.panelOpen;
-            this.resetActiveItem();
+            // Visibility first: the key manager reports the new active option to a handler that selects
+            // it whenever the panel is not open, and a panel whose options arrived after it was attached
+            // is not open until the visibility is updated.
             this.autocomplete().setVisibility();
+            this.resetActiveItem();
+            // The active option can stay at the same index while the option behind it changes, which
+            // the key manager does not report.
+            this.changeDetectorRef.markForCheck();
+            this.updateInlineHint();
             if (this.panelOpen) {
                 this.overlayRef.updatePosition();
                 // If the `panelOpen` state changed, we need to make sure to emit the `opened`
@@ -376,7 +510,6 @@ class KbqAutocompleteTrigger {
                 // can happen if the users opens the panel and there are no options, but the
                 // options come in slightly later or as a result of the value changing.
                 if (wasOpen !== this.panelOpen) {
-                    // TODO: The 'emit' function requires a mandatory void argument
                     this.autocomplete().opened.emit();
                 }
             }
@@ -397,29 +530,38 @@ class KbqAutocompleteTrigger {
     }
     setTriggerValue(value) {
         const autocomplete = this.autocomplete();
-        const toDisplay = autocomplete && autocomplete.displayWith ? autocomplete.displayWith(value) : value;
+        const displayWith = autocomplete?.displayWith();
+        // In text mode the value is the text itself, and `displayWith` maps options, not the text around them.
+        const toDisplay = displayWith && !this.textMode() ? displayWith(value) : value;
         // Simply falling back to an empty string if the display value is falsy does not work properly.
         // The display value can also be the number zero and shouldn't fall back to an empty string.
         const inputValue = toDisplay != null ? toDisplay : '';
-        // If it's used within a `MatFormField`, we should set it through the property so it can go
-        // through change detection.
-        if (this.formField) {
-            this.formField.control().value = inputValue;
-        }
-        else {
-            this.elementRef.nativeElement.value = inputValue;
+        // Written at once, because the text is read back from the element right after. The control on the element is
+        // told as well: it would otherwise pick the change up only at its next check. Not the control of the form
+        // field, which is the tag list when the input adds tags. Looked up here: `KbqInput` injects the `NgControl`
+        // that injects this directive.
+        this.elementRef.nativeElement.value = inputValue;
+        const controlValue = this.injector.get(KbqFormFieldControl, null, { self: true })?.value;
+        if (isWritableSignal(controlValue)) {
+            controlValue.set(inputValue);
         }
         this.previousValue = inputValue;
     }
-    /** This method closes the panel, and if a value is specified, also sets the associated
+    /**
+     * This method closes the panel, and if a value is specified, also sets the associated
      * control to that value. It will also mark the control as dirty if this interaction
      * stemmed from the user.
      */
     setValueAndClose(event) {
         if (event?.source) {
             this.clearPreviousSelectedOption(event.source);
-            this.setTriggerValue(event.source.value);
-            this.onChange(event.source.value);
+            if (this.textMode()) {
+                this.insertOption(event.source);
+            }
+            else {
+                this.setTriggerValue(event.source.value);
+                this.onChange(event.source.value);
+            }
             this.elementRef.nativeElement.focus();
             this.autocomplete().emitSelectEvent(event.source);
         }
@@ -443,6 +585,7 @@ class KbqAutocompleteTrigger {
             this.portal = new TemplatePortal(autocomplete.template(), this.viewContainerRef);
             overlayRef = this.overlay.create(this.getOverlayConfig());
             this.overlayRef = overlayRef;
+            this.overlayLayers.adopt(overlayRef, this.elementRef.nativeElement);
             // Use the `keydownEvents` in order to take advantage of
             // the overlay event targeting provided by the CDK overlay.
             overlayRef.keydownEvents().subscribe((event) => {
@@ -464,32 +607,34 @@ class KbqAutocompleteTrigger {
         else {
             const position = overlayRef.getConfig().positionStrategy;
             // Update the trigger, panel width and direction, in case anything has changed.
-            position.setOrigin(this.getConnectedElement());
+            position.setOrigin(this.getPositionOrigin()).withPositions(this.getPanelPositions());
             overlayRef.updateSize(this.getOverlaySize());
         }
         if (overlayRef && !overlayRef.hasAttached()) {
             overlayRef.attach(this.portal);
             this.closingActionsSubscription = this.subscribeToClosingActions();
+            this.startFollowingCaret();
         }
         const wasOpen = this.panelOpen;
+        autocomplete.listboxName.set(this.getListboxName());
         autocomplete.setVisibility();
-        autocomplete.isOpen = this.overlayAttached = true;
+        this.overlayAttached.set(true);
+        autocomplete.attached.set(true);
         // We need to do an extra `panelOpen` check in here, because the
         // autocomplete won't be shown if there are no options.
         if (this.panelOpen && wasOpen !== this.panelOpen) {
-            // TODO: The 'emit' function requires a mandatory void argument
             autocomplete.opened.emit();
         }
-        this.zone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
+        afterNextRender(() => {
+            // Closed before the render: the key manager selects an option made active on a closed panel.
+            if (!this.overlayAttached())
+                return;
             this.resetActiveItem();
-            // Overlay width may not be final on first open, so re-measure when the layout is stable.
+            // Overlay width may not be final on first open, so re-measure once the panel is rendered.
             if (this.panelOpen && this.overlayRef) {
                 this.overlayRef.updateSize(this.getOverlaySize());
             }
-        });
+        }, { injector: this.injector });
     }
     getOverlayConfig() {
         return new OverlayConfig({
@@ -502,7 +647,7 @@ class KbqAutocompleteTrigger {
     getOverlayPosition() {
         this.positionStrategy = this.overlay
             .position()
-            .flexibleConnectedTo(this.getConnectedElement())
+            .flexibleConnectedTo(this.getPositionOrigin())
             .withFlexibleDimensions(false)
             .withPush(false)
             // CDK measures the pane before the trigger↔panel gap padding (kbq-connected-overlay-gap) is
@@ -510,22 +655,7 @@ class KbqAutocompleteTrigger {
             // it a margin at least as big as the gap (defaultOffsetY) keeps the fit check conservative
             // enough to absorb the padding that lands afterwards.
             .withViewportMargin(defaultOffsetY)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
-            }
-        ]);
+            .withPositions(this.getPanelPositions());
         return this.positionStrategy;
     }
     getConnectedElement() {
@@ -535,34 +665,250 @@ class KbqAutocompleteTrigger {
         }
         return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
     }
+    /**
+     * Positions of the panel, below and then above its origin, starting where the origin starts. A panel opened from
+     * the caret may also end at the caret: nothing else holds it on screen when the caret is near the right edge.
+     */
+    getPanelPositions() {
+        const below = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
+        };
+        const above = {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
+        };
+        return this.relativeToCaret()
+            ? [below, above, { ...below, overlayX: 'end' }, { ...above, overlayX: 'end' }]
+            : [below, above];
+    }
+    /** What the panel is positioned against: the caret when anchored to the caret, otherwise the field. */
+    getPositionOrigin() {
+        return this.relativeToCaret() ? this.caretOrigin : this.getConnectedElement();
+    }
+    /** The caret's line, or the field when the caret cannot be located. */
+    measureCaretOrigin() {
+        const caret = kbqGetCaretRect(this.elementRef.nativeElement);
+        if (caret)
+            return caret;
+        const { left, top, width, height } = this.getConnectedElement().nativeElement.getBoundingClientRect();
+        return { x: left, y: top, width, height };
+    }
     getOverlaySize() {
         const autocomplete = this.autocomplete();
+        // A caret has no width to match, and a panel opened from it is meant to be only as wide as its options.
+        if (this.relativeToCaret()) {
+            return kbqResolvePanelWidth(autocomplete.panelWidth(), 0, 0);
+        }
         return kbqResolvePanelWidth(autocomplete.panelWidth(), autocomplete.panelMinWidth(), this.getHostWidth());
     }
     getHostWidth() {
         return kbqGetPanelWidthOrigin(this.getConnectedElement());
     }
+    /**
+     * Name of the option list, taken from what names the field, in the order its own name is computed:
+     * `aria-labelledby`, `aria-label`, its labels, `title`, the placeholder.
+     */
+    getListboxName() {
+        const element = this.elementRef.nativeElement;
+        const ariaLabelledby = element.getAttribute('aria-labelledby')?.trim();
+        if (ariaLabelledby)
+            return { labelledby: ariaLabelledby, label: null };
+        const ariaLabel = element.getAttribute('aria-label')?.trim();
+        if (ariaLabel)
+            return { labelledby: null, label: ariaLabel };
+        const labels = Array.from(element.labels ?? []);
+        // Labels are referenced when every one of them can be; a label without an id, which a plain `<label for>` or
+        // a wrapping label may be, lends its text instead.
+        if (labels.length && labels.every(({ id }) => id)) {
+            return { labelledby: labels.map(({ id }) => id).join(' '), label: null };
+        }
+        const labelText = labels
+            .map(({ textContent }) => textContent?.trim())
+            .filter(Boolean)
+            .join(' ');
+        return { labelledby: null, label: labelText || element.title || element.placeholder || null };
+    }
     /**
      * Resets the active item to -1 so arrow events will activate the
      * correct options, or to 0 if the consumer opted into it.
      */
     resetActiveItem() {
         const autocomplete = this.autocomplete();
-        if (autocomplete.autoActiveFirstOption) {
+        if (autocomplete.autoActiveFirstOption()) {
             autocomplete.keyManager.setFirstItemActive();
         }
         else {
             autocomplete.keyManager.setActiveItem(-1);
         }
     }
+    /**
+     * Re-reads the query at the caret in text mode and closes the panel once there is none. `open` lets a query open
+     * the panel: typing, focusing and clicking do, moving the caret through the text does not.
+     */
+    refreshQuery(open) {
+        const query = this.readQuery();
+        this.setQuery(query);
+        if (!query) {
+            this.closePanel();
+            return;
+        }
+        if (open &&
+            !this.overlayAttached() &&
+            this.canOpen() &&
+            _getFocusedElementPierceShadowDom() === this.elementRef.nativeElement) {
+            this.attachOverlay();
+        }
+        this.updateInlineHint();
+    }
+    /** Query at the caret, or `null` when there is none — including while text is selected, which is no caret. */
+    readQuery() {
+        const { selectionStart, selectionEnd, value } = this.elementRef.nativeElement;
+        if (selectionStart === null || selectionStart !== selectionEnd)
+            return null;
+        return kbqGetTextQuery(value, selectionStart, {
+            triggers: this.queryTriggers(),
+            minLength: this.queryMinLength()
+        });
+    }
+    /** Stores the query and reports it when it differs from the stored one. */
+    setQuery(query) {
+        const previous = this.query;
+        this.query = query;
+        if (query?.text !== previous?.text ||
+            query?.trigger !== previous?.trigger ||
+            query?.start !== previous?.start) {
+            this.queryChange.emit(query);
+        }
+    }
+    /**
+     * Follows the caret while the panel is open, outside the zone and at most once per attach: text mode re-reads the
+     * query, and a caret-anchored panel is positioned again, which measures the caret anew.
+     */
+    startFollowingCaret() {
+        if (this.stopCaretListeners || !(this.relativeToCaret() || this.textMode()))
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.stopCaretListeners = kbqListenForCaretMoves(this.renderer, this.elementRef.nativeElement, () => {
+                if (this.textMode()) {
+                    this.zone.run(() => this.refreshQuery(false));
+                }
+                if (this.relativeToCaret() && this.overlayAttached()) {
+                    this.overlayRef?.updatePosition();
+                }
+            });
+        });
+    }
+    stopFollowingCaret() {
+        this.stopCaretListeners?.();
+        this.stopCaretListeners = null;
+    }
+    /**
+     * Replaces the query at the caret, trigger included, with the option, and puts the caret right after it. Without a
+     * query — the panel was opened with `open()`, or text is selected — the option goes in at the caret, over the
+     * selection. The query is read from the field again: the text may have changed since it was last read.
+     *
+     * `setRangeText` dispatches no `input`, and `KbqTextarea` grows on that event, so it is dispatched by hand — with
+     * `previousValue` already updated, so that `handleInput` does not take it for the user typing a new query.
+     */
+    insertOption(option) {
+        const element = this.elementRef.nativeElement;
+        const text = this.getOptionText(option);
+        const { selectionStart, selectionEnd } = element;
+        if (selectionStart === null || selectionEnd === null) {
+            // A field without a text selection, such as an `email` input, has no position to insert at.
+            this.setTriggerValue(text);
+        }
+        else {
+            const query = this.readQuery();
+            element.setRangeText(text, query?.start ?? selectionStart, query?.end ?? selectionEnd, 'end');
+        }
+        this.setQuery(null);
+        this.previousValue = element.value;
+        this.onChange(element.value);
+        // Selection state means nothing for an option that was inserted into the text, and a selected option would
+        // look chosen the next time the panel opens.
+        option.deselect(false);
+        // The panel closes right after; following the caret into the inserted text would read it as a new query.
+        this.stopFollowingCaret();
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    /** Text the option puts into the field. */
+    getOptionText(option) {
+        const displayWith = this.autocomplete().displayWith();
+        const text = displayWith ? displayWith(option.value) : option.value;
+        return text != null ? `${text}` : '';
+    }
+    /**
+     * Whether `event` accepts the inline hint. The hint is checked against the field again first: the text can change
+     * without an input event, and a hint drawn for the old text would write the option into the new one.
+     */
+    acceptsInlineHint(event) {
+        if (!this.inlineHintText || hasModifierKey(event) || (event.keyCode !== TAB && event.keyCode !== RIGHT_ARROW)) {
+            return false;
+        }
+        this.refreshQuery(false);
+        return !!this.inlineHintText;
+    }
+    /** Draws the rest of the active option after the caret, or hides the hint when there is none to draw. */
+    updateInlineHint() {
+        const hint = this.resolveInlineHint();
+        this.inlineHintText = hint;
+        if (!hint) {
+            this.textMirror?.hide();
+            return;
+        }
+        const element = this.elementRef.nativeElement;
+        const { value } = element;
+        const caret = this.query.end;
+        this.textMirror ??= kbqCreateTextMirror(element, INLINE_HINT_CLASS);
+        // A hint the field would lay out elsewhere, or outside the part of the field in view, is not a hint to accept.
+        if (!this.textMirror.update(value.slice(0, caret), hint, value.slice(caret))) {
+            this.inlineHintText = '';
+        }
+    }
+    /**
+     * Rest of the active option to draw after the caret, or `''`. A hint is only drawn where accepting it produces the
+     * text drawn: the option has to continue the text it replaces, and nothing may follow the caret on its line, where
+     * the hint would be drawn over it.
+     */
+    resolveInlineHint() {
+        const query = this.query;
+        const option = this.activeOption;
+        if (!this.textMode() ||
+            !this.inlineHint() ||
+            this.autocompleteDisabled() ||
+            !this.formField ||
+            !query ||
+            !option ||
+            !this.panelOpen) {
+            return '';
+        }
+        const element = this.elementRef.nativeElement;
+        const { value } = element;
+        const nextCharacter = value.charAt(query.end);
+        if ((nextCharacter && nextCharacter !== '\n') ||
+            !kbqIsTextLaidOutFromStart(this.window.getComputedStyle(element))) {
+            return '';
+        }
+        const text = this.getOptionText(option);
+        const replaced = value.slice(query.start, query.end);
+        return text.toLocaleLowerCase().startsWith(replaced.toLocaleLowerCase()) ? text.slice(replaced.length) : '';
+    }
     canOpen() {
         const element = this.elementRef.nativeElement;
-        return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
+        return !element.readOnly && !element.disabled && !this.autocompleteDisabled();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqAutocompleteTrigger, isStandalone: true, selector: "input[kbqAutocomplete], textarea[kbqAutocomplete]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "kbqAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "kbqAutocompleteConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, autocompleteAttribute: { classPropertyName: "autocompleteAttribute", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autocompleteDisabled: { classPropertyName: "autocompleteDisabled", publicName: "kbqAutocompleteDisabled", isSignal: false, isRequired: false, transformFunction: null }, onInputBlur: { classPropertyName: "onInputBlur", publicName: "kbqAutocompleteOnBlur", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "handleFocus()", "blur": "onTouched()", "input": "handleInput($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "attr.autocomplete": "autocompleteAttribute()" }, classAttribute: "kbq-autocomplete-trigger" }, providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, kbqSiblingPopupProvider(KbqAutocompleteTrigger)], exportAs: ["kbqAutocompleteTrigger"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqAutocompleteTrigger, isStandalone: true, selector: "input[kbqAutocomplete], textarea[kbqAutocomplete]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "kbqAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "kbqAutocompleteConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, autocompleteAttribute: { classPropertyName: "autocompleteAttribute", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autocompleteDisabled: { classPropertyName: "autocompleteDisabled", publicName: "kbqAutocompleteDisabled", isSignal: true, isRequired: false, transformFunction: null }, onInputBlur: { classPropertyName: "onInputBlur", publicName: "kbqAutocompleteOnBlur", isSignal: true, isRequired: false, transformFunction: null }, relativeToCaret: { classPropertyName: "relativeToCaret", publicName: "kbqAutocompleteRelativeToCaret", isSignal: true, isRequired: false, transformFunction: null }, textMode: { classPropertyName: "textMode", publicName: "kbqAutocompleteTextMode", isSignal: true, isRequired: false, transformFunction: null }, queryTriggers: { classPropertyName: "queryTriggers", publicName: "kbqAutocompleteTriggers", isSignal: true, isRequired: false, transformFunction: null }, queryMinLength: { classPropertyName: "queryMinLength", publicName: "kbqAutocompleteMinLength", isSignal: true, isRequired: false, transformFunction: null }, inlineHint: { classPropertyName: "inlineHint", publicName: "kbqAutocompleteInlineHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "kbqAutocompleteQueryChange" }, host: { listeners: { "focusin": "handleFocus()", "blur": "onTouched()", "input": "handleInput($event)", "keydown": "handleKeydown($any($event))", "click": "handleClick($event)" }, properties: { "attr.autocomplete": "autocompleteAttribute()", "attr.role": "isCombobox ? \"combobox\" : null", "attr.aria-expanded": "isCombobox ? panelOpen : null", "attr.aria-autocomplete": "exposesPanel ? (textMode() && inlineHint() ? \"both\" : \"list\") : null", "attr.aria-controls": "exposesPanel && panelOpen ? autocomplete().listboxId : null", "attr.aria-activedescendant": "exposesPanel && panelOpen ? activeOption?.id : null" }, classAttribute: "kbq-autocomplete-trigger" }, providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, kbqSiblingPopupProvider(KbqAutocompleteTrigger)], exportAs: ["kbqAutocompleteTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqAutocomplete], textarea[kbqAutocomplete]`,
@@ -570,32 +916,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     host: {
                         class: 'kbq-autocomplete-trigger',
                         '[attr.autocomplete]': 'autocompleteAttribute()',
+                        // WAI-ARIA 1.2 combobox. A field that cannot take the role (see `isCombobox`) keeps its native one, which does
+                        // not support `aria-expanded`.
+                        '[attr.role]': 'isCombobox ? "combobox" : null',
+                        '[attr.aria-expanded]': 'isCombobox ? panelOpen : null',
+                        '[attr.aria-autocomplete]': 'exposesPanel ? (textMode() && inlineHint() ? "both" : "list") : null',
+                        '[attr.aria-controls]': 'exposesPanel && panelOpen ? autocomplete().listboxId : null',
+                        '[attr.aria-activedescendant]': 'exposesPanel && panelOpen ? activeOption?.id : null',
                         // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
                         // a little earlier. This avoids issues where IE delays the focusing of the input.
                         '(focusin)': 'handleFocus()',
                         '(blur)': 'onTouched()',
                         '(input)': 'handleInput($event)',
-                        '(keydown)': 'handleKeydown($event)',
+                        '(keydown)': 'handleKeydown($any($event))',
                         '(click)': 'handleClick($event)'
                     },
                     exportAs: 'kbqAutocompleteTrigger'
                 }]
-        }], ctorParameters: () => [], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocomplete", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteConnectedTo", required: false }] }], autocompleteAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autocompleteDisabled: [{
-                type: Input,
-                args: ['kbqAutocompleteDisabled']
-            }], onInputBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteOnBlur", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocomplete", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteConnectedTo", required: false }] }], autocompleteAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autocompleteDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteDisabled", required: false }] }], onInputBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteOnBlur", required: false }] }], relativeToCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteRelativeToCaret", required: false }] }], textMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteTextMode", required: false }] }], queryTriggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteTriggers", required: false }] }], queryMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteMinLength", required: false }] }], inlineHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteInlineHint", required: false }] }], queryChange: [{ type: i0.Output, args: ["kbqAutocompleteQueryChange"] }] } });
 
-/**
- * Autocomplete IDs need to be unique across components, so this counter exists outside of
- * the component definition.
- */
-let uniqueAutocompleteIdCounter = 0;
 /** Footer that is rendered below the autocomplete options panel. */
 class KbqAutocompleteFooter {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAutocompleteFooter, isStandalone: true, selector: "[kbqAutocompleteFooter], kbq-autocomplete-footer", host: { classAttribute: "kbq-autocomplete-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAutocompleteFooter, isStandalone: true, selector: "[kbqAutocompleteFooter], kbq-autocomplete-footer", host: { classAttribute: "kbq-autocomplete-footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAutocompleteFooter], kbq-autocomplete-footer',
@@ -616,96 +961,134 @@ const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken('kbq-autocomplete-de
 function KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
     return { autoActiveFirstOption: true };
 }
+/** Everything Angular's `[class]` binding accepts, flattened to the space-separated string form. */
+function normalizeClassInput(value) {
+    if (!value)
+        return '';
+    if (typeof value === 'string')
+        return value;
+    if (Array.isArray(value))
+        return value.join(' ');
+    if (value instanceof Set)
+        return [...value].join(' ');
+    return Object.entries(value)
+        .filter(([, present]) => present)
+        .map(([className]) => className)
+        .join(' ');
+}
 class KbqAutocomplete {
-    /**
-     * Takes classes set on the host kbq-autocomplete element and applies them to the panel
-     * inside the overlay container to allow for easy styling.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get classList() {
-        return this._classList;
-    }
-    set classList(value) {
-        if (value && value.length) {
-            const classList = { ...this._classList };
-            value.split(' ').forEach((className) => (classList[className.trim()] = true));
-            // Reassign a new object reference so the native `[class]` binding picks up the change.
-            this._classList = classList;
-            this.elementRef.nativeElement.className = '';
-        }
-    }
-    /**
-     * Whether the first option should be highlighted when the autocomplete panel is opened.
-     * Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get autoActiveFirstOption() {
-        return this._autoActiveFirstOption;
-    }
-    set autoActiveFirstOption(value) {
-        this._autoActiveFirstOption = coerceBooleanProperty(value);
-    }
-    get isOpen() {
-        return this._isOpen && this.showPanel;
-    }
-    set isOpen(value) {
-        this._isOpen = value;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get openOnFocus() {
-        return this._openOnFocus;
-    }
-    set openOnFocus(value) {
-        this._openOnFocus = value;
+    get options() {
+        return this.optionsList();
     }
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.elementRef = inject(ElementRef);
+        this.nativeElement = kbqInjectNativeElement();
         this.parentFormField = inject(KBQ_FORM_FIELD, { host: true, optional: true });
         this.destroyRef = inject(DestroyRef);
-        /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
-        this.id = `kbq-autocomplete-${uniqueAutocompleteIdCounter++}`;
-        /** Whether the autocomplete panel should be visible, depending on option length. */
-        this.showPanel = false;
+        this.defaultOptions = inject(KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS);
+        /** Unique id, rendered as the panel element's `id`. */
+        this.id = inject(_IdGenerator).getId('kbq-autocomplete-');
+        /**
+         * Id of the option list, which the trigger's `aria-controls` points at while the panel is open.
+         *
+         * @docs-private
+         */
+        this.listboxId = `${this.id}-listbox`;
+        /**
+         * Whether the autocomplete panel should be visible, depending on option length.
+         *
+         * @docs-private
+         */
+        this.showPanel = signal(false, ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
         this.template = viewChild.required(TemplateRef);
         this.panel = viewChild.required('panel');
-        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
+        this.scrollbarViewport = viewChild(KbqScrollbarViewport, ...(ngDevMode ? [{ debugName: "scrollbarViewport" }] : /* istanbul ignore next */ []));
+        this.optionsQuery = contentChildren(KbqOption, { ...(ngDevMode ? { debugName: "optionsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.optionsList = kbqQueryListFrom(this.optionsQuery);
+        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
         /** Function that maps an option's control value to its display value in the trigger. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.displayWith = null;
+        this.displayWith = input(null, ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
         /**
          * Specify the width of the autocomplete panel. If set to `auto`, the panel will match the width of
          * its host, but will never be narrower than `panelMinWidth`. Any other CSS sizing value is used as an
          * exact width, and `panelMinWidth` is not applied. When not set, the panel sizes to its content and is
          * at least as wide as its host.
          */
-        this.panelWidth = input(undefined, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+        this.panelWidth = input(undefined, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
         /**
          * Minimum width of the panel in pixels.
          * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
          */
-        this.panelMinWidth = input(KBQ_PANEL_DEFAULT_MIN_WIDTH, ...(ngDevMode ? [{ debugName: "panelMinWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMinWidth = input(KBQ_PANEL_DEFAULT_MIN_WIDTH, { ...(ngDevMode ? { debugName: "panelMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
          * the panel narrower than its host, and never clamps an explicit `panelWidth`.
          * When null, the `--kbq-panel-size-width-max` token applies.
          */
-        this.panelMaxWidth = input(null, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMaxWidth = input(null, { ...(ngDevMode ? { debugName: "panelMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** Event that is emitted whenever an option from the list is selected. */
         this.optionSelected = output();
         /** Event that is emitted when the autocomplete panel is opened. */
         this.opened = output();
         /** Event that is emitted when the autocomplete panel is closed. */
         this.closed = output();
-        this._classList = {};
-        this._isOpen = false;
-        this._openOnFocus = true;
-        const defaults = inject(KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS);
-        this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
+        /**
+         * Classes set on the host `kbq-autocomplete` element. They are applied to the panel inside the
+         * overlay container instead, to allow for easy styling.
+         *
+         * Accepts every shape Angular's own `[class]` binding does. The binding value arrives here raw:
+         * Angular converts it to a string before handing it to a styling-shadowing input only when the element
+         * carries a static `class` attribute, which `<kbq-autocomplete>` does not.
+         */
+        this.hostClass = input('', { ...(ngDevMode ? { debugName: "hostClass" } : /* istanbul ignore next */ {}), alias: 'class', transform: normalizeClassInput });
+        /**
+         * Whether the first option should be highlighted when the autocomplete panel is opened.
+         * Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
+         */
+        this.autoActiveFirstOption = input(!!this.defaultOptions.autoActiveFirstOption, { ...(ngDevMode ? { debugName: "autoActiveFirstOption" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the panel opens as soon as the trigger receives focus. */
+        this.openOnFocus = input(true, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the trigger has attached the panel overlay. It is not the same thing as the panel being
+         * visible — see `isOpen`.
+         *
+         * @docs-private
+         */
+        this.attached = signal(false, ...(ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible name of the option list: the ids of the elements that name it, or the name itself. The trigger
+         * copies it from its field on attaching the panel, so the list is announced under the field's name.
+         *
+         * @docs-private
+         */
+        this.listboxName = signal({
+            labelledby: null,
+            label: null
+        }, ...(ngDevMode ? [{ debugName: "listboxName" }] : /* istanbul ignore next */ []));
+        /** Whether the panel is visible: attached by the trigger and holding at least one option. */
+        this.isOpen = computed(() => this.attached() && this.showPanel(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Whether the trigger's form field currently holds keyboard focus. */
+        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.classList = computed(() => ({
+            ...Object.fromEntries(this.hostClass()
+                .split(' ')
+                .map((className) => className.trim())
+                .filter(Boolean)
+                .map((className) => [className, true])),
+            'kbq-autocomplete_visible': this.showPanel(),
+            'kbq-autocomplete_hidden': !this.showPanel(),
+            'cdk-keyboard-focused': this.keyboardFocused()
+        }), ...(ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []));
+        // The host is `display: none` and only carries the template portal, so the classes written on it
+        // belong to the panel inside the overlay. Move them off the host once they have been read.
+        effect(() => {
+            if (this.hostClass()) {
+                this.nativeElement.className = '';
+            }
+        });
+        outputToObservable(this.opened)
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.scrollbarViewport()?.flashScrollIndicators());
     }
     ngAfterContentInit() {
         this.keyManager = new ActiveDescendantKeyManager(this.options);
@@ -717,51 +1100,47 @@ class KbqAutocomplete {
             this.options.filter(({ selected }) => selected).forEach((option) => option.deselect(false));
         });
     }
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.optionsList();
+    }
+    /** @docs-private */
     setScrollTop(scrollTop) {
-        const panel = this.panel();
-        if (panel) {
-            panel.nativeElement.scrollTop = scrollTop;
-        }
+        this.scrollbarViewport()?.scrollTo({ top: scrollTop });
     }
+    /** @docs-private */
     getScrollTop() {
-        const panel = this.panel();
-        return panel ? panel.nativeElement.scrollTop : 0;
+        return this.scrollbarViewport()?.getNativeElement().scrollTop ?? 0;
     }
+    /** @docs-private */
     setVisibility() {
-        this.showPanel = !!this.options.length;
-        this._classList = {
-            ...this._classList,
-            'kbq-autocomplete_visible': this.showPanel,
-            'kbq-autocomplete_hidden': !this.showPanel
-        };
+        this.showPanel.set(!!this.options.length);
         this.updateFocusClass();
-        this.changeDetectorRef.markForCheck();
     }
+    /** @docs-private */
     emitSelectEvent(option) {
         const event = new KbqAutocompleteSelectedEvent(this, option);
         this.optionSelected.emit(event);
     }
+    /** @docs-private */
     onKeydown(event) {
         this.keyManager.onKeydown(event);
         this.updateFocusClass();
     }
     updateFocusClass() {
-        this._classList = {
-            ...this._classList,
-            'cdk-keyboard-focused': this.parentFormField?.focusOrigin === 'keyboard'
-        };
+        this.keyboardFocused.set(this.parentFormField?.focusOrigin === 'keyboard');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAutocomplete, isStandalone: true, selector: "kbq-autocomplete", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, autoActiveFirstOption: { classPropertyName: "autoActiveFirstOption", publicName: "autoActiveFirstOption", isSignal: false, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none", classAttribute: "kbq-autocomplete" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqAutocomplete, isStandalone: true, selector: "kbq-autocomplete", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, hostClass: { classPropertyName: "hostClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoActiveFirstOption: { classPropertyName: "autoActiveFirstOption", publicName: "autoActiveFirstOption", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none", classAttribute: "kbq-autocomplete" }, providers: [
             {
                 provide: KBQ_OPTION_PARENT_COMPONENT,
                 useExisting: KbqAutocomplete
             }
-        ], queries: [{ propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["kbqAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList\" [style.max-width.px]=\"panelMaxWidth()\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:var(--kbq-panel-size-width-max, 640px);border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionsQuery", predicate: KbqOption, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }], exportAs: ["kbqAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList()\" [style.max-width.px]=\"panelMaxWidth()\">\n        <div #panel kbqScrollbarViewport class=\"kbq-autocomplete-panel__content\">\n            <!-- Keep the injected scrollbar outside the listbox's permitted option/group children. -->\n            <div\n                role=\"listbox\"\n                class=\"kbq-autocomplete-panel__listbox\"\n                [id]=\"listboxId\"\n                [attr.aria-labelledby]=\"listboxName().labelledby\"\n                [attr.aria-label]=\"listboxName().label\"\n            >\n                <ng-content />\n            </div>\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:var(--kbq-panel-size-width-max, 640px);border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-autocomplete-panel{corner-shape:squircle;border-radius:clamp(var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-autocomplete-panel{max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-inline-hint__hint{color:var(--kbq-form-field-default-placeholder)}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-autocomplete', imports: [], providers: [
+            args: [{ selector: 'kbq-autocomplete', imports: [KbqScrollbarViewport], providers: [
                         {
                             provide: KBQ_OPTION_PARENT_COMPONENT,
                             useExisting: KbqAutocomplete
@@ -771,24 +1150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         // Remove the empty TemplatePortal host from layout entirely — it would otherwise contribute an
                         // inline box in normal flow, or a phantom item in a flex/grid container.
                         style: 'display: none'
-                    }, exportAs: 'kbqAutocomplete', template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList\" [style.max-width.px]=\"panelMaxWidth()\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:var(--kbq-panel-size-width-max, 640px);border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], options: [{
-                type: ContentChildren,
-                args: [KbqOption, { descendants: true }]
-            }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], displayWith: [{
-                type: Input
-            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], classList: [{
-                type: Input,
-                args: ['class']
-            }], autoActiveFirstOption: [{
-                type: Input
-            }], openOnFocus: [{
-                type: Input
-            }] } });
+                    }, exportAs: 'kbqAutocomplete', template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList()\" [style.max-width.px]=\"panelMaxWidth()\">\n        <div #panel kbqScrollbarViewport class=\"kbq-autocomplete-panel__content\">\n            <!-- Keep the injected scrollbar outside the listbox's permitted option/group children. -->\n            <div\n                role=\"listbox\"\n                class=\"kbq-autocomplete-panel__listbox\"\n                [id]=\"listboxId\"\n                [attr.aria-labelledby]=\"listboxName().labelledby\"\n                [attr.aria-label]=\"listboxName().label\"\n            >\n                <ng-content />\n            </div>\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:var(--kbq-panel-size-width-max, 640px);border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-autocomplete-panel{corner-shape:squircle;border-radius:clamp(var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-autocomplete-panel{max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-inline-hint__hint{color:var(--kbq-form-field-default-placeholder)}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], scrollbarViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], optionsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOption), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], hostClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoActiveFirstOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoActiveFirstOption", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }] } });
 
 class KbqAutocompleteModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
             OverlayModule,
             KbqAutocomplete,
             KbqAutocompleteTrigger,
@@ -798,10 +1165,10 @@ class KbqAutocompleteModule {
             KbqAutocompleteTrigger,
             KbqAutocompleteOrigin,
             KbqAutocompleteFooter] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
             OverlayModule, KbqOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -826,5 +1193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_PANEL_HEIGHT, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, KbqAutocomplete, KbqAutocompleteFooter, KbqAutocompleteModule, KbqAutocompleteOrigin, KbqAutocompleteSelectedEvent, KbqAutocompleteTrigger, getKbqAutocompleteMissingPanelError };
+export { KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, KbqAutocomplete, KbqAutocompleteFooter, KbqAutocompleteModule, KbqAutocompleteOrigin, KbqAutocompleteSelectedEvent, KbqAutocompleteTrigger, getKbqAutocompleteMissingPanelError };
 //# sourceMappingURL=koobiq-components-autocomplete.mjs.map