@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-dropdown.mjs

@@ -1,19 +1,20 @@
-import { trigger, state, transition, style, animate, group, query } from '@angular/animations';
+import { trigger, state, style, transition, animate, group, query } from '@angular/animations';
 import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, InjectionToken, ElementRef, booleanAttribute, Input, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, contentChild, input, EventEmitter, QueryList, Output, ContentChildren, ChangeDetectorRef, Renderer2, output, numberAttribute, NgModule } from '@angular/core';
-import { Subject, Subscription, merge, of, asapScheduler } from 'rxjs';
+import { inject, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, InjectionToken, ElementRef, effect, contentChild, input, booleanAttribute, signal, Input, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, DestroyRef, contentChildren, computed, numberAttribute, EventEmitter, QueryList, untracked, Output, ContentChildren, ChangeDetectorRef, Renderer2, output, NgModule } from '@angular/core';
+import { Subject, Subscription, merge, timer, of, asapScheduler } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { KbqComponentColors, KBQ_TITLE_TEXT_REF, FocusKeyManager, RIGHT_ARROW, LEFT_ARROW, ESCAPE, KBQ_WINDOW, ENTER, SPACE, DOWN_ARROW as DOWN_ARROW$1, defaultOffsetY } from '@koobiq/components/core';
+import { TAB, UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
+import { KBQ_PANEL_DEFAULT_MIN_WIDTH, KbqComponentColors, KBQ_TITLE_TEXT_REF, ESCAPE, LEFT_ARROW, RIGHT_ARROW, isPointInRect, isPointInTriangle, ActiveDescendantKeyManager, FocusKeyManager, getSafeTriangleVertices, ENTER as ENTER$1, SPACE, DOWN_ARROW as DOWN_ARROW$1, defaultOffsetY, kbqResolvePanelWidth, kbqGetPanelWidthOrigin, kbqSiblingPopupProvider } from '@koobiq/components/core';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
+import { KBQ_FORM_FIELD, KBQ_FORM_FIELD_DEFAULT_OPTIONS, KbqFormField } from '@koobiq/components/form-field';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
-import { startWith, switchMap, take, filter, takeUntil, delay } from 'rxjs/operators';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { take, startWith, switchMap, filter, delay, map, takeUntil } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
-import { KbqFormField } from '@koobiq/components/form-field';
 
 /**
  * Animations used by the kbq-dropdown component.
@@ -100,10 +101,10 @@ class KbqDropdownContent {
     ngOnDestroy() {
         this.outlet?.dispose();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDropdownContent, isStandalone: true, selector: "ng-template[kbqDropdownContent]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDropdownContent, isStandalone: true, selector: "ng-template[kbqDropdownContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqDropdownContent]'
@@ -138,6 +139,99 @@ function throwKbqDropdownInvalidPositionY() {
     throw Error(`yPosition value must be either 'above' or below'.
       Example: <kbq-dropdown [yPosition]="'above'" #dropdown="kbqDropdown"></kbq-dropdown>`);
 }
+/**
+ * Throws an exception for the case when `kbqDropdownSearch` is applied to a form field that doesn't
+ * host a `kbqInput`.
+ * @docs-private
+ */
+function throwKbqDropdownSearchMissingInputError() {
+    throw Error(`kbqDropdownSearch: must be applied to a kbq-form-field containing an input[kbqInput].
+    Example:
+      <kbq-form-field kbqDropdownSearch>
+          <input kbqInput [formControl]="control" />
+      </kbq-form-field>`);
+}
+/**
+ * Throws an exception for the case when `kbqDropdownSearch`'s input isn't bound to a form control, so
+ * there is no query to react to.
+ * @docs-private
+ */
+function throwKbqDropdownSearchMissingNgControlError() {
+    throw Error(`kbqDropdownSearch: the input must be bound to a form control.
+    Example:
+      <kbq-form-field kbqDropdownSearch>
+          <input kbqInput [formControl]="control" />
+      </kbq-form-field>`);
+}
+
+/** @docs-private */
+const KBQ_DROPDOWN_ITEM_ACTION_HOST = new InjectionToken('kbqDropdownItemAction-host');
+/**
+ * Marks a secondary, independently-focusable/clickable element (e.g. a settings link) projected
+ * inside a `kbq-dropdown-item` alongside the item's own primary action. Requires the item's host
+ * element to be non-interactive (e.g. `<div kbq-dropdown-item>`), since interactive content
+ * cannot validly nest inside another interactive element.
+ */
+class KbqDropdownItemAction {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.dropdownItem = inject(KBQ_DROPDOWN_ITEM_ACTION_HOST);
+        /**
+         * The `tabindex` this element had before `isInactive()` first forced it to `-1`, so it can be
+         * restored instead of left removed. Plain `[attr.tabindex]` can't do this: co-located host
+         * bindings for the same attribute (e.g. `KbqIconButton`'s own `tabindex`) apply in directive
+         * order and the last one always wins outright, so writing `null` here on the active branch
+         * would strip whatever tabindex the host component set, not just leave it alone.
+         */
+        this.originalTabindex = null;
+        effect(() => {
+            const el = this.elementRef.nativeElement;
+            if (this.isInactive()) {
+                if (this.originalTabindex === null)
+                    this.originalTabindex = el.getAttribute('tabindex');
+                el.setAttribute('tabindex', '-1');
+            }
+            else if (this.originalTabindex !== null) {
+                el.setAttribute('tabindex', this.originalTabindex);
+                this.originalTabindex = null;
+            }
+        });
+    }
+    /** Returns the host DOM element. */
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** `progress` takes priority over the action, same as `disabled`. */
+    isInactive() {
+        return this.dropdownItem.disabled || this.dropdownItem.progress();
+    }
+    /**
+     * Always stops the click from bubbling to the item's own primary click handler.
+     * Additionally, blocks the action's own default behavior when the parent item is
+     * disabled/loading — `<a>` has no native `disabled`.
+     */
+    onClick(event) {
+        event.stopPropagation();
+        if (this.isInactive()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownItemAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDropdownItemAction, isStandalone: true, selector: "[kbqDropdownItemAction]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.kbq-disabled": "isInactive()", "attr.aria-disabled": "isInactive() || null" }, classAttribute: "kbq-dropdown-item__action" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownItemAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownItemAction]',
+                    host: {
+                        class: 'kbq-dropdown-item__action',
+                        '[class.kbq-disabled]': 'isInactive()',
+                        '[attr.aria-disabled]': 'isInactive() || null',
+                        '(click)': 'onClick($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Injection token used to provide the parent dropdown to dropdown-specific components.
@@ -157,7 +251,13 @@ function KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY() {
         xPosition: 'after',
         yPosition: 'below',
         backdropClass: 'cdk-overlay-transparent-backdrop',
-        hasBackdrop: false
+        hasBackdrop: false,
+        safeArea: true,
+        // Reproduces the pre-existing CSS-driven sizing: grow with content, never narrower than the
+        // trigger or `--kbq-dropdown-size-container-width-min`, capped by the token.
+        panelWidth: null,
+        panelMinWidth: KBQ_PANEL_DEFAULT_MIN_WIDTH,
+        panelMaxWidth: null
     };
 }
 
@@ -166,39 +266,47 @@ function KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY() {
  * It exists mostly to set the role attribute.
  */
 class KbqDropdownItem {
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== this.disabled) {
+            this._disabled = value;
+        }
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.focusMonitor = inject(FocusMonitor);
         this.parentDropdownPanel = inject(KBQ_DROPDOWN_PANEL, { optional: true });
+        /** Secondary, independently-focusable icon action projected into the item (e.g. a settings link). */
+        this.itemAction = contentChild(KbqDropdownItemAction, ...(ngDevMode ? [{ debugName: "itemAction" }] : []));
         this._disabled = false;
+        /** Whether the dropdown item is in a loading state. */
+        this.progress = input(false, ...(ngDevMode ? [{ debugName: "progress", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Stream that emits when the dropdown item is hovered. */
         this.hovered = new Subject();
         /** Stream that emits when the menu item is focused. */
         this.focused = new Subject();
         /** Whether the dropdown item is highlighted. */
         this.highlighted = false;
+        /** Whether the item is the panel's active item while DOM focus is held elsewhere. */
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
         /** Whether the dropdown item acts as a trigger for a nested dropdown. */
         this.isNested = false;
         /** @docs-private */
         this.componentColors = KbqComponentColors;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-        }
-    }
-    ngAfterViewInit() {
-        if (this.focusMonitor) {
-            // Start monitoring the element so it gets the appropriate focused classes. We want
-            // to show the focus style for menu items only when the focus was not caused by a
-            // mouse or touch interaction.
-            this.focusMonitor.monitor(this.elementRef, false);
-        }
+        effect(() => {
+            // Start monitoring the element so it gets the appropriate focused classes. We want to
+            // show the focus style for menu items only when the focus was not caused by a mouse or
+            // touch interaction. When `itemAction` is present, focus can land on it instead of the
+            // host, so children must be checked too for the focused classes to still be applied to
+            // the host. `monitor()` doesn't update `checkChildren` on an already-monitored element,
+            // so this restarts monitoring whenever `itemAction()` changes to keep it in sync.
+            this.focusMonitor.stopMonitoring(this.elementRef);
+            this.focusMonitor.monitor(this.elementRef, !!this.itemAction());
+        });
     }
     ngOnDestroy() {
         if (this.focusMonitor) {
@@ -210,15 +318,35 @@ class KbqDropdownItem {
     resetStyles() {
         this.getHostElement().classList.remove('cdk-keyboard-focused');
     }
-    /** Focuses the dropdown item. */
+    /** Styles the item as active without focusing it. */
+    setActiveStyles() {
+        this.active.set(true);
+    }
+    /** Removes the styles applied by `setActiveStyles`. */
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    /**
+     * Focuses the dropdown item and reveals it.
+     *
+     * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers
+     * it to a later rendering update, where it lands after — and undoes — any scrolling the reader did in
+     * the meantime. `preventScroll` is therefore always forced on, overriding `options`.
+     */
     focus(origin, options) {
         if (this.disabled)
             return;
+        const element = this.getHostElement();
+        const focusOptions = { ...options, preventScroll: true };
         if (this.focusMonitor && origin) {
-            this.focusMonitor.focusVia(this.getHostElement(), origin, options);
+            this.focusMonitor.focusVia(element, origin, focusOptions);
         }
         else {
-            this.getHostElement().focus(options);
+            element.focus(focusOptions);
+        }
+        // With the pointer already on this item, revealing it would shift the list out from under it.
+        if (origin !== 'mouse') {
+            element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
         }
         this.focused.next(this);
     }
@@ -240,98 +368,227 @@ class KbqDropdownItem {
     /** Emits to the hover stream. Bound via `host` metadata. */
     handleMouseEnter() {
         this.hovered.next(this);
+        // In search mode the panel makes the hovered item active instead, keeping the caret in the query.
+        if (this.parentDropdownPanel?.inSearchMode?.())
+            return;
         this.focus('mouse');
     }
+    /**
+     * Lets Tab move focus between the host and `itemAction` without leaving the dropdown
+     * (`stopPropagation` only — the browser's native focus move still happens). Any other Tab
+     * press, i.e. actually leaving the item, is left untouched and still closes the dropdown via
+     * the panel's `FocusKeyManager.tabOut`. Bound via `host` metadata.
+     */
+    handleActionKeydown(event) {
+        const action = this.itemAction();
+        if (!action || event.keyCode !== TAB || this.disabled || this.progress())
+            return;
+        const target = event.target;
+        const hostEl = this.getHostElement();
+        const actionEl = action.getHostElement();
+        const movesToAction = !event.shiftKey && target === hostEl;
+        const movesBackToHost = event.shiftKey && target === actionEl;
+        if (movesToAction || movesBackToHost) {
+            event.stopPropagation();
+        }
+    }
     /** Gets the label to be used when determining whether the option should be focused. */
     getLabel() {
         const clone = this.getHostElement().cloneNode(true);
-        const icons = clone.querySelectorAll('[kbq-icon], .kbq-icon');
-        // Strip away icons so they don't show up in the text.
-        for (let i = 0; i < icons.length; i++) {
-            const icon = icons[i];
-            icon.parentNode?.removeChild(icon);
+        const stripped = clone.querySelectorAll('[kbq-icon], .kbq-icon, [kbqDropdownItemAction]');
+        // Strip away icons and the action so they don't show up in the text.
+        for (let i = 0; i < stripped.length; i++) {
+            const node = stripped[i];
+            node.parentNode?.removeChild(node);
         }
         return clone.textContent?.trim() || '';
     }
     haltDisabledEvents(event) {
-        if (this.disabled) {
+        if (this.disabled || this.progress()) {
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqDropdownItem, isStandalone: true, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "checkDisabled($event)", "mouseenter": "handleMouseEnter()" }, properties: { "class.kbq-dropdown-item_with-icon": "icon", "class.kbq-dropdown-item_highlighted": "highlighted", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabindex": "getTabIndex()" }, classAttribute: "kbq-dropdown-item" }, providers: [
-            { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
-        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true, static: true }], exportAs: ["kbqDropdownItem"], ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqDropdownItem, isStandalone: true, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "checkDisabled($event)", "mouseenter": "handleMouseEnter()", "keydown": "handleActionKeydown($event)" }, properties: { "class.kbq-dropdown-item_with-icon": "icon", "class.kbq-dropdown-item_highlighted": "highlighted", "class.kbq-dropdown-item_active": "active()", "class.kbq-disabled": "disabled", "class.kbq-progress": "progress()", "class.kbq-dropdown-item_has-action": "!!itemAction()", "attr.disabled": "disabled || null", "attr.tabindex": "getTabIndex()" }, classAttribute: "kbq-dropdown-item" }, providers: [
+            { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem },
+            { provide: KBQ_DROPDOWN_ITEM_ACTION_HOST, useExisting: KbqDropdownItem }
+        ], queries: [{ propertyName: "itemAction", first: true, predicate: KbqDropdownItemAction, descendants: true, isSignal: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqDropdownItem"], ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n<ng-content select=\"[kbqDropdownItemAction]\" />\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown-item_has-action{align-items:center}.kbq-dropdown-item_has-action>.kbq-dropdown-item__action{position:relative;z-index:1;flex:0 0 auto}.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite;inset:calc(-1 * var(--kbq-size-3xs))}@media(prefers-reduced-motion:reduce){.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{animation:none}}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-dropdown-item, [kbq-dropdown-item]', imports: [
                         KbqIcon
                     ], providers: [
-                        { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
+                        { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem },
+                        { provide: KBQ_DROPDOWN_ITEM_ACTION_HOST, useExisting: KbqDropdownItem }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-dropdown-item',
                         '[class.kbq-dropdown-item_with-icon]': 'icon',
                         '[class.kbq-dropdown-item_highlighted]': 'highlighted',
+                        '[class.kbq-dropdown-item_active]': 'active()',
                         '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-progress]': 'progress()',
+                        '[class.kbq-dropdown-item_has-action]': '!!itemAction()',
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'getTabIndex()',
                         '(click)': 'checkDisabled($event)',
-                        '(mouseenter)': 'handleMouseEnter()'
-                    }, exportAs: 'kbqDropdownItem', template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], propDecorators: { textElement: [{
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(keydown)': 'handleActionKeydown($event)'
+                    }, exportAs: 'kbqDropdownItem', template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n<ng-content select=\"[kbqDropdownItemAction]\" />\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown-item_has-action{align-items:center}.kbq-dropdown-item_has-action>.kbq-dropdown-item__action{position:relative;z-index:1;flex:0 0 auto}.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite;inset:calc(-1 * var(--kbq-size-3xs))}@media(prefers-reduced-motion:reduce){.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{animation:none}}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textElement: [{
                 type: ViewChild,
-                args: ['kbqTitleText', { static: true }]
+                args: ['kbqTitleText']
             }], icon: [{
                 type: ContentChild,
                 args: [KbqIcon]
-            }], disabled: [{
+            }], itemAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownItemAction), { isSignal: true }] }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }] } });
+            }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
+/**
+ * Marks a `kbq-form-field` projected into a `kbq-dropdown` as the panel's search field.
+ *
+ * The panel keeps DOM focus in the field, so arrow keys move the highlighted item while the query
+ * stays editable.
+ */
+class KbqDropdownSearch {
+    constructor() {
+        this.formField = inject(KBQ_FORM_FIELD);
+        /**
+         * Panel this field searches. A nested panel declared inside its parent's content shares the view with
+         * it, so the parent has to be able to tell which of the projected fields is its own.
+         * @docs-private
+         */
+        this.panel = inject(KBQ_DROPDOWN_PANEL, { optional: true });
+    }
+    /** The form control the query is bound to. */
+    get ngControl() {
+        return this.formField.control().ngControl;
+    }
+    ngAfterContentInit() {
+        if (this.formField.control().controlType !== 'input') {
+            throwKbqDropdownSearchMissingInputError();
+        }
+        if (!this.ngControl) {
+            throwKbqDropdownSearchMissingNgControlError();
+        }
+    }
+    /** Focuses the search field. */
+    focus() {
+        this.formField.focus();
+    }
+    /** Clears the search query. */
+    reset() {
+        this.ngControl?.reset();
+    }
+    /** The current search query. */
+    value() {
+        return this.formField.control().value;
+    }
+    /** @docs-private */
+    handleClick(event) {
+        event.stopPropagation();
+    }
+    /** @docs-private */
+    handleKeydown(event) {
+        // The panel owns ESCAPE: the first press clears the query, the second closes the dropdown. This
+        // handler runs before the cleaner's own listener on the same element, so the field is already
+        // empty by the time the cleaner looks at the key.
+        if (event.keyCode === ESCAPE && this.value()) {
+            this.reset();
+            event.stopPropagation();
+            return;
+        }
+        // A nested panel closes on the horizontal arrow that points back at its trigger, so the key is
+        // only kept while the caret still has somewhere to go — the top-level panel ignores it anyway.
+        if (this.movesCaret(event)) {
+            event.stopPropagation();
+        }
+    }
+    /** Whether the key still has caret to travel inside the field, rather than acting on the panel. */
+    movesCaret(event) {
+        const { keyCode, target } = event;
+        if (keyCode !== LEFT_ARROW && keyCode !== RIGHT_ARROW)
+            return false;
+        // The keydown starts on the input and bubbles to this host, so the target is the field itself.
+        const { selectionStart, selectionEnd, value } = target;
+        if (selectionStart === null || selectionEnd === null)
+            return true;
+        const edge = keyCode === LEFT_ARROW ? 0 : value.length;
+        return selectionStart !== edge || selectionEnd !== edge;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDropdownSearch, isStandalone: true, selector: "[kbqDropdownSearch]", host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)" } }, providers: [
+            {
+                // Merged, not replaced: the field still inherits whatever defaults the app configures.
+                provide: KBQ_FORM_FIELD_DEFAULT_OPTIONS,
+                useFactory: (() => ({
+                    ...inject(KBQ_FORM_FIELD_DEFAULT_OPTIONS, { optional: true, skipSelf: true }),
+                    noBorders: true,
+                    inOverlay: true
+                }))
+            }
+        ], exportAs: ["kbqDropdownSearch"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownSearch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownSearch]',
+                    providers: [
+                        {
+                            // Merged, not replaced: the field still inherits whatever defaults the app configures.
+                            provide: KBQ_FORM_FIELD_DEFAULT_OPTIONS,
+                            useFactory: (() => ({
+                                ...inject(KBQ_FORM_FIELD_DEFAULT_OPTIONS, { optional: true, skipSelf: true }),
+                                noBorders: true,
+                                inOverlay: true
+                            }))
+                        }
+                    ],
+                    host: {
+                        '(click)': 'handleClick($event)',
+                        '(keydown)': 'handleKeydown($event)'
+                    },
+                    exportAs: 'kbqDropdownSearch'
+                }]
+        }] });
+
+/** Options for binding a passive event listener. */
+const passiveEventListenerOptions$1 = normalizePassiveListenerOptions({ passive: true });
+/**
+ * Grace period before switching to a different nested trigger hovered while a safe area is
+ * protecting the currently open submenu. Without it, sweeping the pointer down a long list of
+ * nested triggers on the way to the submenu would flicker each row's submenu open and closed.
+ */
+const NESTED_HOVER_SWITCH_DELAY = 50;
+/** Class applied to the panel while its safe area is protecting an open submenu, see `activateSafeArea`. */
+const SAFE_AREA_ACTIVE_CLASS = 'kbq-dropdown__panel_safe-area-active';
 class KbqDropdownStaticContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownStaticContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDropdownStaticContent, isStandalone: true, selector: "[kbqDropdownStaticContent]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownStaticContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDropdownStaticContent, isStandalone: true, selector: "[kbqDropdownStaticContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownStaticContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownStaticContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDropdownStaticContent]'
                 }]
         }] });
+/** Footer that is rendered below the dropdown options panel. */
+class KbqDropdownFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDropdownFooter, isStandalone: true, selector: "[kbqDropdownFooter], kbq-dropdown-footer", host: { classAttribute: "kbq-dropdown-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownFooter], kbq-dropdown-footer',
+                    host: { class: 'kbq-dropdown-footer' }
+                }]
+        }] });
 class KbqDropdown {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.ngZone = inject(NgZone);
-        this.defaultOptions = inject(KBQ_DROPDOWN_DEFAULT_OPTIONS);
-        this.search = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "search" }] : []));
-        this.navigationWithWrap = input(false, ...(ngDevMode ? [{ debugName: "navigationWithWrap" }] : []));
-        this._xPosition = this.defaultOptions.xPosition;
-        this._yPosition = this.defaultOptions.yPosition;
-        this._overlapTriggerX = this.defaultOptions.overlapTriggerX;
-        this._overlapTriggerY = this.defaultOptions.overlapTriggerY;
-        this._hasBackdrop = this.defaultOptions.hasBackdrop;
-        /** Config object to be passed into the dropdown panel's `[class]` binding */
-        this.classList = {};
-        /** Current state of the panel animation. */
-        this.panelAnimationState = 'void';
-        /** Emits whenever an animation on the dropdown completes. */
-        this.animationDone = new Subject();
-        /** Class to be added to the backdrop element. */
-        // TODO: Skipped for migration because:
-        //  This input overrides a field from a superclass, while the superclass field
-        //  is not migrated.
-        this.backdropClass = this.defaultOptions.backdropClass;
-        /** Event emitted when the dropdown is closed. */
-        this.closed = new EventEmitter();
-        /** Only the direct descendant menu items. */
-        this.directDescendantItems = new QueryList();
-        /** Subscription to tab events on the dropdown panel */
-        this.tabSubscription = Subscription.EMPTY;
-    }
     /** Position of the dropdown in the X axis. */
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
@@ -407,34 +664,258 @@ class KbqDropdown {
         // Reassign a new object reference so the native `[class]` binding picks up the change.
         this.classList = classList;
     }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.document = inject(DOCUMENT);
+        this.defaultOptions = inject(KBQ_DROPDOWN_DEFAULT_OPTIONS);
+        this.destroyRef = inject(DestroyRef);
+        this.panelFormField = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "panelFormField" }] : []));
+        /**
+         * Signal content queries carry `descendants: true`, and a nested panel declared inside this one's
+         * content is part of the same view — so the match has to be narrowed to the fields this panel owns,
+         * the way `updateDirectDescendants` narrows the items.
+         */
+        this.searches = contentChildren(KbqDropdownSearch, ...(ngDevMode ? [{ debugName: "searches", descendants: true }] : [{ descendants: true }]));
+        this.search = computed(() => this.searches().find((search) => search.panel === this), ...(ngDevMode ? [{ debugName: "search" }] : []));
+        /** Whether the dropdown projects a search form-field. @docs-private */
+        this.hasSearch = computed(() => !!this.panelFormField(), ...(ngDevMode ? [{ debugName: "hasSearch" }] : []));
+        /** Whether the panel highlights the active item instead of focusing it. @docs-private */
+        this.inSearchMode = computed(() => !!this.search(), ...(ngDevMode ? [{ debugName: "inSearchMode" }] : []));
+        this.navigationWithWrap = input(false, ...(ngDevMode ? [{ debugName: "navigationWithWrap" }] : []));
+        this._xPosition = this.defaultOptions.xPosition;
+        this._yPosition = this.defaultOptions.yPosition;
+        this._overlapTriggerX = this.defaultOptions.overlapTriggerX;
+        this._overlapTriggerY = this.defaultOptions.overlapTriggerY;
+        this._hasBackdrop = this.defaultOptions.hasBackdrop;
+        /** Config object to be passed into the dropdown panel's `[class]` binding */
+        this.classList = {};
+        /** Current state of the panel animation. */
+        this.panelAnimationState = 'void';
+        /** Emits whenever an animation on the dropdown completes. */
+        this.animationDone = new Subject();
+        /** Class to be added to the backdrop element. */
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.backdropClass = this.defaultOptions.backdropClass;
+        /**
+         * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
+         * narrower than `panelMinWidth`. If set to null, the panel will grow to match its content.
+         * Any other value is used as an exact width, and `panelMinWidth` is not applied.
+         */
+        this.panelWidth = input(this.defaultOptions.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+        /**
+         * Minimum width of the panel in pixels. The panel is never narrower than this, nor than its trigger.
+         */
+        this.panelMinWidth = input(this.defaultOptions.panelMinWidth === undefined
+            ? KBQ_PANEL_DEFAULT_MIN_WIDTH
+            : this.defaultOptions.panelMinWidth, ...(ngDevMode ? [{ debugName: "panelMinWidth", transform: numberAttribute }] : [{ 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 the trigger, and never clamps an explicit `panelWidth`.
+         * When null, the `--kbq-dropdown-size-container-width-max` token applies.
+         */
+        this.panelMaxWidth = input(this.defaultOptions.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * Whether nested dropdowns opened from this dropdown's items use a "safe area": while the
+         * pointer moves from a trigger toward its open submenu, sibling items it crosses over on the way
+         * don't prematurely close the submenu.
+         */
+        this.safeArea = input(this.defaultOptions.safeArea ?? true, ...(ngDevMode ? [{ debugName: "safeArea", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * `panelMinWidth` rendered as a CSS length for the `--kbq-dropdown-size-container-width-min`
+         * token, so the panel's CSS `min-width` floor tracks the input — mirroring how `panelMaxWidth`
+         * drives `max-width`. Non-finite input (e.g. `null`) leaves the token's static default in place.
+         * @docs-private
+         */
+        this.panelMinWidthToken = computed(() => {
+            const minWidth = this.panelMinWidth();
+            return Number.isFinite(minWidth) ? `${minWidth}px` : null;
+        }, ...(ngDevMode ? [{ debugName: "panelMinWidthToken" }] : []));
+        /** Event emitted when the dropdown is closed. */
+        this.closed = new EventEmitter();
+        this.focusOrigin = 'program';
+        /** Only the direct descendant menu items. */
+        this.directDescendantItems = new QueryList();
+        /** Subscription to tab events on the dropdown panel */
+        this.tabSubscription = Subscription.EMPTY;
+        /** Cleans up the safe-area `mousemove` listener. `null` when no safe area is being tracked. */
+        this.safeAreaCleanup = null;
+        /** The nested trigger currently protected by the active safe area, if any. */
+        this.safeAreaOwner = null;
+        /**
+         * The most recently hovered item, tracked independently of the safe area so that leaving it
+         * straight onto a sibling's nested trigger can switch to it immediately instead of waiting for a
+         * `mouseenter` that already happened.
+         */
+        this.currentHovered = null;
+        /** Emits when the pointer reaches the panel the active safe area protects. */
+        this.panelReached = new Subject();
+        /** Emits the sibling trigger that should open once a forced switch has closed the current one. */
+        this.switchTarget = new Subject();
+        /** Watches for a forced switch to a sibling trigger while a safe area is active. */
+        this.switchTargetSubscription = Subscription.EMPTY;
+        // The search field can show up long after content init — rendered by `kbqDropdownContent` when
+        // the panel first opens, or revealed by a structural directive — so the key manager follows the
+        // mode instead of being decided once.
+        effect(() => {
+            const inSearchMode = this.inSearchMode();
+            if (!this.keyManager || this.keyManagerInstalledForSearch() === inSearchMode)
+                return;
+            this.initKeyManager();
+            // A flip while the panel is open leaves focus wherever the previous mode put it: on an item
+            // the new manager will not track, or on an input that is being destroyed. Hand it over the
+            // same way opening does, deferred so the write lands outside this change detection pass.
+            if (this.panelAnimationState === 'enter') {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => this.applyInitialFocus(this.focusOrigin));
+            }
+        });
+    }
     ngOnInit() {
         this.setPositionClasses();
     }
     ngAfterContentInit() {
         this.updateDirectDescendants();
-        this.keyManager = new FocusKeyManager(this.directDescendantItems).withTypeAhead();
-        if (this.navigationWithWrap()) {
-            this.keyManager.withWrap();
-        }
-        this.tabSubscription = this.keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
+        this.initKeyManager();
         // If a user manually (programmatically) focuses a menu item, we need to reflect that focus
         // change back to the key manager. Note that we don't need to unsubscribe here because focused
         // is internal and we know that it gets completed on destroy.
         this.directDescendantItems.changes
             .pipe(startWith(this.directDescendantItems), switchMap((items) => merge(...items.map((item) => item.focused))))
             .subscribe((focusedItem) => this.keyManager.updateActiveItem(focusedItem));
-        this.search()?.inOverlay.set(true);
+        this.panelFormField()?.inOverlay.set(true);
+        // Driven by the item list rather than by the query, because consumers commonly debounce their
+        // own filtering. `delay(0)` keeps the write out of the pass that reported the new items.
+        this.directDescendantItems.changes
+            .pipe(filter(() => !!this.search()), delay(0), filter(() => this.isActiveItemStale()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            // An item the highlight sat on is gone. With a query in the field the top result takes
+            // over, so that ENTER picks it; with the field cleared nothing is highlighted — but the
+            // stale instance still has to be dropped, or ENTER would replay a click on a detached
+            // element and the arrows would resume from its index.
+            if (this.search()?.value()) {
+                this.keyManager.setFirstItemActive();
+            }
+            else {
+                this.resetActiveItem();
+            }
+        });
+        // Internal and completes with the items on destroy, so no explicit unsubscribe is needed.
+        this.hovered().subscribe((item) => {
+            this.currentHovered = item;
+            // Hovering doesn't focus the item in search mode, so arrowing on has to resume from it.
+            // Disabled items are skipped, the same way the key manager skips them for the arrows.
+            if (this.inSearchMode() && !item.disabled) {
+                this.keyManager.setActiveItem(item);
+            }
+        });
     }
     ngOnDestroy() {
         this.directDescendantItems.destroy();
         this.tabSubscription.unsubscribe();
         this.closed.complete();
+        this.deactivateSafeArea();
+        this.panelReached.complete();
+        this.switchTarget.complete();
     }
     /** Stream that emits whenever the hovered dropdown item changes. */
     hovered() {
         const itemChanges = this.directDescendantItems.changes;
         return itemChanges.pipe(startWith(this.directDescendantItems), switchMap((items) => merge(...items.map((item) => item.hovered))));
     }
+    /**
+     * Tracks the pointer against `triangle` to protect `owner`'s open submenu, closing it via
+     * `onExit` if the pointer leaves the triangle without first reaching `panelRect`. Meanwhile, if a
+     * different nested trigger is hovered, `switchTarget()` emits it — immediately if it's outside
+     * the triangle, otherwise after a grace period (see `NESTED_HOVER_SWITCH_DELAY`). Replaces any
+     * safe area already being tracked.
+     * @docs-private
+     */
+    activateSafeArea(owner, triangle, panelRect, onExit) {
+        this.deactivateSafeArea();
+        this.safeAreaOwner = owner;
+        this.classList = { ...this.classList, [SAFE_AREA_ACTIVE_CLASS]: true };
+        this.safeAreaCleanup = this.ngZone.runOutsideAngular(() => {
+            const listener = (event) => {
+                const point = { x: event.clientX, y: event.clientY };
+                if (isPointInRect(point, panelRect)) {
+                    this.panelReached.next();
+                    this.deactivateSafeArea();
+                    return;
+                }
+                if (!isPointInTriangle(point, triangle)) {
+                    const switchTo = this.currentHovered?.isNested && this.currentHovered !== owner && !this.currentHovered.disabled
+                        ? this.currentHovered
+                        : null;
+                    this.deactivateSafeArea();
+                    this.ngZone.run(() => {
+                        onExit();
+                        if (switchTo) {
+                            this.switchTarget.next(switchTo);
+                        }
+                    });
+                }
+            };
+            this.document.addEventListener('mousemove', listener, passiveEventListenerOptions$1);
+            return () => this.document.removeEventListener('mousemove', listener, passiveEventListenerOptions$1);
+        });
+        this.switchTargetSubscription = this.hovered()
+            .pipe(filter((active) => active.isNested && active !== owner && !active.disabled), switchMap((active) => timer(NESTED_HOVER_SWITCH_DELAY).pipe(map(() => active), takeUntil(this.panelReached))))
+            .subscribe((active) => {
+            this.deactivateSafeArea();
+            onExit();
+            this.switchTarget.next(active);
+        });
+    }
+    /**
+     * Stops tracking the current safe area, if any.
+     * @docs-private
+     */
+    deactivateSafeArea() {
+        this.safeAreaCleanup?.();
+        this.safeAreaCleanup = null;
+        this.safeAreaOwner = null;
+        this.switchTargetSubscription.unsubscribe();
+        this.switchTargetSubscription = Subscription.EMPTY;
+        if (this.classList[SAFE_AREA_ACTIVE_CLASS]) {
+            // The mousemove listener that can reach this runs outside the Angular zone, so re-enter it
+            // to make sure the `classList` update is picked up by change detection.
+            this.ngZone.run(() => {
+                this.classList = { ...this.classList, [SAFE_AREA_ACTIVE_CLASS]: false };
+            });
+        }
+    }
+    /**
+     * Whether a safe area is currently being tracked.
+     * @docs-private
+     */
+    isSafeAreaActive() {
+        return this.safeAreaCleanup !== null;
+    }
+    /**
+     * Whether `item` is the nested trigger currently protected by an active safe area.
+     * @docs-private
+     */
+    isSafeAreaOwner(item) {
+        return this.safeAreaOwner === item;
+    }
+    /**
+     * Stream that emits when the pointer reaches the panel the active safe area protects (as opposed
+     * to leaving the safe area, which closes the panel instead).
+     * @docs-private
+     */
+    onPanelReached() {
+        return this.panelReached.asObservable();
+    }
+    /**
+     * Stream that emits the sibling trigger that should open once a forced safe-area switch has
+     * closed the trigger it was protecting.
+     * @docs-private
+     */
+    onSwitchTarget() {
+        return this.switchTarget.asObservable();
+    }
     /** Handle a keyboard event from the dropdown, delegating to the appropriate action. */
     handleKeydown(event) {
         const keyCode = event.keyCode;
@@ -452,11 +933,29 @@ class KbqDropdown {
                     this.closed.emit('keydown');
                 }
                 break;
+            case ENTER:
+                // The highlighted item never sees the key event itself, so replay it as a click and let
+                // consumer handlers and nested triggers behave exactly as they do for the mouse.
+                if (this.inSearchMode() && this.keyManager.activeItem) {
+                    event.preventDefault();
+                    // The click can close the dropdown synchronously, unregistering the overlay from the
+                    // CDK keyboard dispatcher before this keydown reaches `body` — where it would be
+                    // handed to whichever overlay was opened earlier.
+                    event.stopPropagation();
+                    this.keyManager.activeItem.getHostElement().click();
+                }
+                return;
             default:
+                // Only the vertical arrows move the highlight in search mode; every other key that the
+                // search field lets through would otherwise scroll the list back on each keystroke.
                 if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
-                    this.keyManager.setFocusOrigin('keyboard');
+                    this.setFocusOrigin('keyboard');
+                    this.keyManager.onKeydown(event);
+                    this.revealActiveItem();
+                }
+                else {
+                    this.keyManager.onKeydown(event);
                 }
-                this.keyManager.onKeydown(event);
                 return;
         }
         // Don't allow the event to propagate if we've already handled it, or it may
@@ -464,7 +963,7 @@ class KbqDropdown {
         event.stopPropagation();
     }
     /**
-     * Focus the first item in the dropdown.
+     * Applies the panel's initial focus, see `applyInitialFocus`.
      * @param origin Action from which the focus originated. Used to set the correct styling.
      */
     focusFirstItem(origin = 'program') {
@@ -477,28 +976,50 @@ class KbqDropdown {
         }
     }
     /**
-     * Applies focus when the dropdown is opened. When opened by mouse or touch, the first item
-     * should not be highlighted, so the panel itself is focused instead — keyboard events still
-     * reach the panel and the first arrow key press will highlight the first item.
+     * Applies focus when the dropdown is opened.
+     *
+     * A projected search field takes the caret for every origin and keeps it: the first arrow key press
+     * only highlights an item. Without one, opening by mouse or touch focuses the panel rather than an
+     * item, so that nothing is highlighted while keyboard events still reach the panel; any other origin
+     * highlights the first item. A submenu of a search panel focuses nothing at all, so that hovering it
+     * does not pull the caret out of the query.
      */
     applyInitialFocus(origin) {
         // The origin should be set even when no item gets activated,
         // since `close` relies on it to emit the correct close reason.
-        this.keyManager.setFocusOrigin(origin);
-        if (origin === 'mouse' || origin === 'touch') {
+        this.setFocusOrigin(origin);
+        const search = this.search();
+        if (search) {
+            search.focus();
+        }
+        else if (this.parent?.inSearchMode?.()) {
+            return;
+        }
+        else if (origin === 'mouse' || origin === 'touch') {
             this.focusPanel();
         }
         else {
             this.keyManager.setFirstItemActive();
         }
     }
+    /**
+     * Moves focus back into the projected search field, reporting whether there was one. A nested panel
+     * restores focus through this instead of onto its trigger item, which would strand the caret outside
+     * the query.
+     * @docs-private
+     */
+    restoreFocus() {
+        const search = this.search();
+        search?.focus();
+        return !!search;
+    }
     /** Moves DOM focus onto the dropdown panel so that keydown events keep being handled. */
     focusPanel() {
         // The panel is rendered into the overlay through a `TemplatePortal`, so it can't be
         // queried with a `ViewChild`. If there are no rendered items, focus stays on the trigger,
         // same as `setFirstItemActive` no-ops in that case.
         const panel = this.directDescendantItems.first?.getHostElement().closest('.kbq-dropdown__panel');
-        panel?.focus();
+        panel?.focus({ preventScroll: true });
     }
     /**
      * Resets the active item in the dropdown. This is used when the dropdown is opened, allowing
@@ -552,8 +1073,57 @@ class KbqDropdown {
         }
     }
     close() {
-        const focusOrigin = this.keyManager.getFocusOrigin() === 'keyboard' ? 'keydown' : 'click';
-        this.closed.emit(focusOrigin);
+        this.closed.emit(this.focusOrigin === 'keyboard' ? 'keydown' : 'click');
+    }
+    /**
+     * With a search field the caret has to stay in the input, so the active item is only highlighted and
+     * typeahead is left off — it would race the query the user is typing.
+     */
+    initKeyManager() {
+        // The forked `ListKeyManager` subscribes to the item list in its constructor and has no teardown,
+        // so a manager is built once per mode and kept — rebuilding on every switch would strand the
+        // previous one, twice per open/close cycle with lazy content. The outgoing manager's highlight
+        // has to go with it: the incoming one will never call `setInactiveStyles` on an item it does not
+        // know about.
+        if (this.keyManager) {
+            this.resetActiveItem();
+        }
+        if (this.inSearchMode()) {
+            this.activeDescendantKeyManager ??= this.configureKeyManager(new ActiveDescendantKeyManager(this.directDescendantItems));
+            this.keyManager = this.activeDescendantKeyManager;
+        }
+        else {
+            this.focusKeyManager ??= this.configureKeyManager(new FocusKeyManager(this.directDescendantItems).withTypeAhead());
+            this.keyManager = this.focusKeyManager;
+        }
+        this.tabSubscription.unsubscribe();
+        this.tabSubscription = this.keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
+    }
+    /** Which mode the installed key manager serves; the wanted one is `inSearchMode()`. */
+    keyManagerInstalledForSearch() {
+        return this.keyManager === this.activeDescendantKeyManager;
+    }
+    configureKeyManager(keyManager) {
+        return untracked(this.navigationWithWrap) ? keyManager.withWrap() : keyManager;
+    }
+    setFocusOrigin(origin) {
+        this.focusOrigin = origin;
+        if (this.keyManager instanceof FocusKeyManager) {
+            this.keyManager.setFocusOrigin(origin);
+        }
+    }
+    isActiveItemStale() {
+        const activeItem = this.keyManager.activeItem;
+        return !activeItem || !this.directDescendantItems.some((item) => item === activeItem);
+    }
+    /**
+     * Reveals the highlighted item, which the browser only does on its own for real focus. Mirrors the
+     * reveal `kbqFocusAndReveal` performs for focused elements.
+     */
+    revealActiveItem() {
+        if (!this.inSearchMode())
+            return;
+        this.keyManager.activeItem?.getHostElement().scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
     }
     /**
      * Sets up a stream that will keep track of any newly-added menu items and will update the list
@@ -567,23 +1137,26 @@ class KbqDropdown {
             this.directDescendantItems.notifyOnChanges();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqDropdown, isStandalone: true, selector: "kbq-dropdown", inputs: { navigationWithWrap: { classPropertyName: "navigationWithWrap", publicName: "navigationWithWrap", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: false, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: false, isRequired: false, transformFunction: null }, overlapTriggerY: { classPropertyName: "overlapTriggerY", publicName: "overlapTriggerY", isSignal: false, isRequired: false, transformFunction: null }, overlapTriggerX: { classPropertyName: "overlapTriggerX", publicName: "overlapTriggerX", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqDropdown, isStandalone: true, selector: "kbq-dropdown", inputs: { navigationWithWrap: { classPropertyName: "navigationWithWrap", publicName: "navigationWithWrap", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: false, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: false, isRequired: false, transformFunction: null }, overlapTriggerY: { classPropertyName: "overlapTriggerY", publicName: "overlapTriggerY", isSignal: false, isRequired: false, transformFunction: null }, overlapTriggerX: { classPropertyName: "overlapTriggerX", publicName: "overlapTriggerX", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", 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 }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { styleAttribute: "display: contents" }, providers: [
             { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-        ], queries: [{ propertyName: "search", first: true, predicate: KbqFormField, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: KbqDropdownContent, descendants: true }, { propertyName: "items", predicate: KbqDropdownItem, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["kbqDropdown"], ngImport: i0, template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [class]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box;padding:var(--kbq-size-xxs)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], animations: [
+        ], queries: [{ propertyName: "panelFormField", first: true, predicate: KbqFormField, descendants: true, isSignal: true }, { propertyName: "searches", predicate: KbqDropdownSearch, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: KbqDropdownContent, descendants: true }, { propertyName: "items", predicate: KbqDropdownItem, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["kbqDropdown"], ngImport: i0, template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [class]=\"classList\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.--kbq-dropdown-size-container-width-min]=\"panelMinWidthToken()\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqDropdownFooter], kbq-dropdown-footer\" />\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-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:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item.kbq-progress:after{background:none;animation:none}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column;padding:var(--kbq-size-xxs)}.kbq-dropdown-footer{border-color:var(--kbq-line-contrast-less)}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.kbq-dropdown-item_active:not(.kbq-disabled),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.kbq-dropdown-item_active:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item .kbq-dropdown__panel_safe-area-active.cdk-focused:not(.kbq-dropdown-item_highlighted,.kbq-selected,.kbq-disabled){background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown__panel_safe-area-active.cdk-focused:not(.kbq-dropdown-item_highlighted,.kbq-selected,.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item:active:not(.kbq-disabled),.kbq-dropdown-item.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-active-container-background)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.kbq-dropdown-item_active:not(.kbq-disabled),.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.kbq-dropdown-item_active:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected:active:not(.kbq-disabled),.kbq-dropdown-item.kbq-selected.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-selected-active-container-background)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active):has(+:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active)+:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: var(--kbq-panel-size-width-max, 640px);--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}\n"], animations: [
             kbqDropdownAnimations.transformDropdown,
             kbqDropdownAnimations.fadeInItems
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-dropdown', imports: [], providers: [
                         { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        // Remove the TemplatePortal host box from layout while keeping kbqDropdownStaticContent in the document flow.
+                        style: 'display: contents'
+                    }, animations: [
                         kbqDropdownAnimations.transformDropdown,
                         kbqDropdownAnimations.fadeInItems
-                    ], exportAs: 'kbqDropdown', template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [class]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box;padding:var(--kbq-size-xxs)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
-        }], propDecorators: { search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqFormField), { isSignal: true }] }], navigationWithWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationWithWrap", required: false }] }], xPosition: [{
+                    ], exportAs: 'kbqDropdown', template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [class]=\"classList\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.--kbq-dropdown-size-container-width-min]=\"panelMinWidthToken()\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqDropdownFooter], kbq-dropdown-footer\" />\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-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:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item.kbq-progress:after{background:none;animation:none}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column;padding:var(--kbq-size-xxs)}.kbq-dropdown-footer{border-color:var(--kbq-line-contrast-less)}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.kbq-dropdown-item_active:not(.kbq-disabled),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.kbq-dropdown-item_active:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item .kbq-dropdown__panel_safe-area-active.cdk-focused:not(.kbq-dropdown-item_highlighted,.kbq-selected,.kbq-disabled){background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown__panel_safe-area-active.cdk-focused:not(.kbq-dropdown-item_highlighted,.kbq-selected,.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item:active:not(.kbq-disabled),.kbq-dropdown-item.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-active-container-background)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.kbq-dropdown-item_active:not(.kbq-disabled),.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.kbq-dropdown-item_active:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected:active:not(.kbq-disabled),.kbq-dropdown-item.kbq-selected.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-selected-active-container-background)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active):has(+:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active)+:is(.kbq-selected,.cdk-focused,.kbq-dropdown-item_active){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: var(--kbq-panel-size-width-max, 640px);--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelFormField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqFormField), { isSignal: true }] }], searches: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqDropdownSearch), { ...{ descendants: true }, isSignal: true }] }], navigationWithWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationWithWrap", required: false }] }], xPosition: [{
                 type: Input
             }], yPosition: [{
                 type: Input
@@ -598,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ['class']
             }], backdropClass: [{
                 type: Input
-            }], templateRef: [{
+            }], 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 }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: false }]
             }], items: [{
@@ -611,8 +1184,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }] } });
 
-/** Injection token that determines the scroll handling while the dropdown is open. */
-const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while the dropdown is open. The root default keeps the
+ * trigger usable outside `KbqDropdownModule`'s injector; providing the token anywhere still wins over it.
+ */
+const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+});
 /** @docs-private */
 function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
@@ -693,6 +1272,16 @@ class KbqDropdownTrigger {
     get opened() {
         return this._opened;
     }
+    /**
+     * Whether the dropdown overlay is currently attached. Part of the `KbqSiblingPopup` contract.
+     *
+     * `opened` is set synchronously right after the overlay is attached and, on close, only once the exit
+     * animation is done — i.e. it stays `true` for the whole time the trigger is busy with its panel,
+     * including the moment `destroy()` restores focus to the trigger.
+     */
+    get isAttached() {
+        return this._opened;
+    }
     constructor() {
         this.overlay = inject(Overlay);
         this.elementRef = inject(ElementRef);
@@ -705,8 +1294,8 @@ class KbqDropdownTrigger {
         this.focusMonitor = inject(FocusMonitor);
         this.overlayContainer = inject(OverlayContainer);
         this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
         this.isBrowser = inject(Platform).isBrowser;
-        this.window = inject(KBQ_WINDOW);
         this.host = inject(KBQ_DROPDOWN_HOST, { optional: true });
         // TODO: Skipped for migration because:
         //  Your application code writes to the input. This prevents migration.
@@ -735,10 +1324,13 @@ class KbqDropdownTrigger {
          * KBQ_OPTION_ACTION_PARENT contract, which an `OutputEmitterRef` does not support — see #DS-5079.
          */
         this.dropdownClosed = new EventEmitter();
+        /** Emits `true` when the dropdown opens and `false` when it closes. Part of the `KbqSiblingPopup` contract. */
+        this.openedChange = merge(outputToObservable(this.dropdownOpened).pipe(map(() => true)), this.dropdownClosed.pipe(map(() => false)));
         this._opened = false;
         this.overlayRef = null;
         this.closeSubscription = Subscription.EMPTY;
         this.hoverSubscription = Subscription.EMPTY;
+        this.widthLockSubscription = Subscription.EMPTY;
         this.classAddedToOverlayContainer = false;
         /**
          * Handles touch start events on the trigger.
@@ -785,6 +1377,11 @@ class KbqDropdownTrigger {
         const overlayConfig = overlayRef.getConfig();
         this.setPosition(overlayConfig.positionStrategy);
         overlayConfig.hasBackdrop = this.dropdown.hasBackdrop ? !this.isNested() : this.dropdown.hasBackdrop;
+        // The overlay is created once and reused, so the trigger has to be re-measured on every open
+        // to keep up with layout changes between them.
+        if (this.shouldMatchTriggerWidth) {
+            overlayRef.updateSize(this.getOverlaySize());
+        }
         overlayRef.attach(this.getPortal());
         if (this.dropdown.lazyContent) {
             this.dropdown.lazyContent.detach();
@@ -796,6 +1393,7 @@ class KbqDropdownTrigger {
             this.dropdown.startAnimation();
         }
         this.addClassToOverlayContainer();
+        this.lockOverlayWidthForSearch();
     }
     /** Closes the dropdown. */
     close() {
@@ -806,6 +1404,10 @@ class KbqDropdownTrigger {
      * Focuses the dropdown trigger.
      */
     focus(origin, options) {
+        // The trigger of a nested panel is an item of a search panel: the caret belongs to the query,
+        // not to the item, so hand it back to the field instead of focusing this element.
+        if (this.isNested() && this.parent.restoreFocus?.())
+            return;
         if (this.focusMonitor && origin) {
             this.focusMonitor.focusVia(this.elementRef.nativeElement, origin, options);
         }
@@ -825,10 +1427,22 @@ class KbqDropdownTrigger {
             event.preventDefault();
         }
     }
+    /**
+     * Starts safe-area protection when the pointer leaves a trigger whose submenu is open, so a
+     * sibling item crossed on the way to the submenu doesn't prematurely close it.
+     */
+    handleMouseLeave(event) {
+        if (!this.isNested() || !this._opened || !this.isBrowser || !this.parent.safeArea() || !this.overlayRef) {
+            return;
+        }
+        const panelRect = this.overlayRef.overlayElement.getBoundingClientRect();
+        const triangle = getSafeTriangleVertices({ x: event.clientX, y: event.clientY }, panelRect);
+        this.parent.activateSafeArea(this.dropdownItemInstance, triangle, panelRect, () => this.close());
+    }
     /** Handles key presses on the trigger. */
     handleKeydown(event) {
         const keyCode = event.keyCode;
-        if (keyCode === ENTER || keyCode === SPACE) {
+        if (keyCode === ENTER$1 || keyCode === SPACE) {
             this.openedBy = 'keyboard';
             event.preventDefault();
             if (this.isNested()) {
@@ -865,8 +1479,12 @@ class KbqDropdownTrigger {
             return;
         }
         this.lastDestroyReason = reason;
+        if (this.isNested()) {
+            this.parent.deactivateSafeArea();
+        }
         this.dropdown.resetActiveItem();
         this.closeSubscription.unsubscribe();
+        this.widthLockSubscription.unsubscribe();
         this.overlayRef.detach();
         if (this.restoreFocus && (reason === 'keydown' || !this.openedBy || !this.isNested())) {
             this.focus(this.openedBy);
@@ -956,12 +1574,16 @@ class KbqDropdownTrigger {
         }
         return this.overlayRef;
     }
+    /** Whether the panel should be at least as wide as its trigger. */
+    get shouldMatchTriggerWidth() {
+        const isVerticalTrigger = this.dropdown.overlapTriggerY && !this.dropdown.overlapTriggerX;
+        return !this.isNested() && !isVerticalTrigger;
+    }
     /**
      * This method builds the configuration object needed to create the overlay, the OverlayState.
      * @returns OverlayConfig
      */
     getOverlayConfig() {
-        const isVerticalTrigger = this.dropdown.overlapTriggerY && !this.dropdown.overlapTriggerX;
         return new OverlayConfig({
             positionStrategy: this.overlay
                 .position()
@@ -971,7 +1593,7 @@ class KbqDropdownTrigger {
             backdropClass: this.dropdown.backdropClass || 'cdk-overlay-transparent-backdrop',
             scrollStrategy: this.scrollStrategy(),
             direction: this.dir,
-            ...(!this.isNested() && !isVerticalTrigger && { minWidth: this.getWidth() })
+            ...(this.shouldMatchTriggerWidth && this.getOverlaySize())
         });
     }
     /**
@@ -1055,6 +1677,7 @@ class KbqDropdownTrigger {
     cleanUpSubscriptions() {
         this.closeSubscription.unsubscribe();
         this.hoverSubscription.unsubscribe();
+        this.widthLockSubscription.unsubscribe();
     }
     /** Returns a stream that emits whenever an action that should close the dropdown occurs. */
     closingActions() {
@@ -1063,7 +1686,13 @@ class KbqDropdownTrigger {
         const detachments = this.overlayRef.detachments();
         const parentClose = this.parent ? this.parent.closed : of();
         const hover = this.parent
-            ? this.parent.hovered().pipe(filter((active) => active !== this.dropdownItemInstance), filter(() => this._opened))
+            ? this.parent.hovered().pipe(filter((active) => active !== this.dropdownItemInstance), filter(() => this._opened), 
+            // While a safe area protects this dropdown, closing is driven by the safe area
+            // itself instead: either it resolves on its own (see `handleMouseLeave()`), or a
+            // forced switch to a different nested trigger closes this one via `onExit` — always
+            // before the new trigger opens, so the two don't race over animation state shared by
+            // triggers pointing at the same dropdown (see `KbqDropdown.activateSafeArea()`).
+            filter(() => !this.parent.isSafeAreaActive()))
             : of();
         return merge(backdrop, outsidePointerEvents, parentClose, hover, detachments);
     }
@@ -1073,13 +1702,21 @@ class KbqDropdownTrigger {
         if (!this.isNested()) {
             return;
         }
-        this.hoverSubscription = this.parent
-            .hovered()
+        this.hoverSubscription = merge(this.parent.hovered().pipe(filter((active) => active === this.dropdownItemInstance && !active.disabled), 
+        // While a *different* trigger's safe area is active, opening is deferred to
+        // `onSwitchTarget()` below, which only fires once that trigger has actually closed.
+        // Hovering the trigger that owns the active safe area (coming back to it) still
+        // passes through immediately — `open()` is a no-op there, but it lets the safe area be
+        // cancelled below.
+        filter(() => !this.parent.isSafeAreaActive() || this.parent.isSafeAreaOwner(this.dropdownItemInstance))), this.parent.onSwitchTarget().pipe(filter((active) => active === this.dropdownItemInstance)))
             // Since we might have multiple competing triggers for the same dropdown (e.g. a nested dropdown
             // with different data and triggers), we have to delay it by a tick to ensure that
             // it won't be closed immediately after it is opened.
-            .pipe(filter((active) => active === this.dropdownItemInstance && !active.disabled), delay(0, asapScheduler))
+            .pipe(delay(0, asapScheduler))
             .subscribe(() => {
+            // Coming back to this trigger cancels any safe-area protection left over from a
+            // previous `mouseleave`.
+            this.parent.deactivateSafeArea();
             this.openedBy = 'mouse';
             // If the same dropdown is used between multiple triggers, it might still be animating
             // while the new trigger tries to re-open it. Wait for the animation to finish
@@ -1107,12 +1744,40 @@ class KbqDropdownTrigger {
         }
         return this.portal;
     }
-    getWidth() {
-        if (!this.isBrowser)
-            return '';
-        const nativeElement = this.elementRef.nativeElement;
-        const { width, borderRightWidth, borderLeftWidth } = this.window.getComputedStyle(nativeElement);
-        return `${parseInt(width) - parseInt(borderRightWidth) - parseInt(borderLeftWidth)}px`;
+    getOverlaySize() {
+        return kbqResolvePanelWidth(this.dropdown.panelWidth?.(), this.dropdown.panelMinWidth?.(), this.isBrowser ? kbqGetPanelWidthOrigin(this.widthOrigin ?? this.elementRef) : 0);
+    }
+    /**
+     * When the panel hosts a search field, its content-sized width would jump as the field's cleaner
+     * appears or options are filtered. Freeze the width at the opened (empty) state so it stays stable
+     * — mirrors `KbqAbstractSelect.lockOverlayWidthForSearch`.
+     */
+    lockOverlayWidthForSearch() {
+        if (!this.isBrowser ||
+            !this.shouldMatchTriggerWidth ||
+            !(this.dropdown instanceof KbqDropdown) ||
+            !this.dropdown.hasSearch()) {
+            return;
+        }
+        this.widthLockSubscription = this.ngZone.onStable
+            .asObservable()
+            .pipe(take(1))
+            .subscribe(() => this.pinOverlayWidth());
+    }
+    /** Freezes the overlay pane at its rendered width. */
+    pinOverlayWidth() {
+        if (!this._opened || !this.overlayRef)
+            return;
+        // An explicit or `'auto'` panelWidth already fixes the pane; only pin content-sized panels.
+        if (this.getOverlaySize().width !== '')
+            return;
+        // Measure the pane, not `.kbq-dropdown__panel`: the panel scales in via `@transformDropdown`,
+        // so its `getBoundingClientRect()` can read a mid-animation (scaled) width. The pane is
+        // transform-immune and the panel fills it.
+        const width = this.overlayRef.overlayElement.getBoundingClientRect().width;
+        if (width) {
+            this.overlayRef.updateSize({ width });
+        }
     }
     addClassToOverlayContainer() {
         if (!this.demoteOverlay)
@@ -1128,17 +1793,19 @@ class KbqDropdownTrigger {
             this.renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", type: KbqDropdownTrigger, isStandalone: true, selector: "[kbqDropdownTriggerFor]", inputs: { offsetX: ["offsetX", "offsetX", numberAttribute], offsetY: ["offsetY", "offsetY", numberAttribute], data: ["kbqDropdownTriggerData", "data"], openByArrowDown: "openByArrowDown", demoteOverlay: ["demoteOverlay", "demoteOverlay", booleanAttribute], restoreFocus: ["kbqDropdownTriggerRestoreFocus", "restoreFocus"], dropdown: ["kbqDropdownTriggerFor", "dropdown"] }, outputs: { dropdownOpened: "dropdownOpened", dropdownClosed: "dropdownClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "class.kbq-pressed": "opened" }, classAttribute: "kbq-dropdown-trigger" }, exportAs: ["kbqDropdownTrigger"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqDropdownTrigger, isStandalone: true, selector: "[kbqDropdownTriggerFor]", inputs: { offsetX: ["offsetX", "offsetX", numberAttribute], offsetY: ["offsetY", "offsetY", numberAttribute], data: ["kbqDropdownTriggerData", "data"], openByArrowDown: "openByArrowDown", demoteOverlay: ["demoteOverlay", "demoteOverlay", booleanAttribute], restoreFocus: ["kbqDropdownTriggerRestoreFocus", "restoreFocus"], dropdown: ["kbqDropdownTriggerFor", "dropdown"] }, outputs: { dropdownOpened: "dropdownOpened", dropdownClosed: "dropdownClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "mouseleave": "handleMouseLeave($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "class.kbq-pressed": "opened" }, classAttribute: "kbq-dropdown-trigger" }, providers: [kbqSiblingPopupProvider(KbqDropdownTrigger)], exportAs: ["kbqDropdownTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbqDropdownTriggerFor]`,
+                    providers: [kbqSiblingPopupProvider(KbqDropdownTrigger)],
                     host: {
                         class: 'kbq-dropdown-trigger',
                         '[class.kbq-pressed]': 'opened',
                         '(mousedown)': 'handleMousedown($event)',
+                        '(mouseleave)': 'handleMouseLeave($event)',
                         '(keydown)': 'handleKeydown($event)',
                         '(click)': 'handleClick($event)'
                     },
@@ -1169,23 +1836,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqDropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
             KbqIconModule,
             KbqDropdownStaticContent,
             KbqDropdown,
             KbqDropdownItem,
+            KbqDropdownItemAction,
             KbqDropdownTrigger,
-            KbqDropdownContent], exports: [KbqDropdown,
+            KbqDropdownContent,
+            KbqDropdownFooter,
+            KbqDropdownSearch], exports: [KbqDropdown,
             KbqDropdownItem,
+            KbqDropdownItemAction,
             KbqDropdownTrigger,
             KbqDropdownContent,
-            KbqDropdownStaticContent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownModule, providers: [KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
+            KbqDropdownStaticContent,
+            KbqDropdownFooter,
+            KbqDropdownSearch] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
             KbqIconModule,
             KbqDropdownItem] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1194,16 +1867,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqDropdownStaticContent,
                         KbqDropdown,
                         KbqDropdownItem,
+                        KbqDropdownItemAction,
                         KbqDropdownTrigger,
-                        KbqDropdownContent
+                        KbqDropdownContent,
+                        KbqDropdownFooter,
+                        KbqDropdownSearch
                     ],
-                    providers: [KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER],
                     exports: [
                         KbqDropdown,
                         KbqDropdownItem,
+                        KbqDropdownItemAction,
                         KbqDropdownTrigger,
                         KbqDropdownContent,
-                        KbqDropdownStaticContent
+                        KbqDropdownStaticContent,
+                        KbqDropdownFooter,
+                        KbqDropdownSearch
                     ]
                 }]
         }] });
@@ -1212,5 +1890,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_DROPDOWN_DEFAULT_OPTIONS, KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY, KBQ_DROPDOWN_HOST, KBQ_DROPDOWN_PANEL, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqDropdown, KbqDropdownContent, KbqDropdownItem, KbqDropdownModule, KbqDropdownStaticContent, KbqDropdownTrigger, NESTED_PANEL_LEFT_PADDING, NESTED_PANEL_TOP_PADDING, fadeInItems, kbqDropdownAnimations, throwKbqDropdownInvalidPositionX, throwKbqDropdownInvalidPositionY, throwKbqDropdownMissingError, transformDropdown };
+export { KBQ_DROPDOWN_DEFAULT_OPTIONS, KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY, KBQ_DROPDOWN_HOST, KBQ_DROPDOWN_PANEL, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqDropdown, KbqDropdownContent, KbqDropdownFooter, KbqDropdownItem, KbqDropdownItemAction, KbqDropdownModule, KbqDropdownSearch, KbqDropdownStaticContent, KbqDropdownTrigger, NESTED_HOVER_SWITCH_DELAY, NESTED_PANEL_LEFT_PADDING, NESTED_PANEL_TOP_PADDING, fadeInItems, kbqDropdownAnimations, throwKbqDropdownInvalidPositionX, throwKbqDropdownInvalidPositionY, throwKbqDropdownMissingError, throwKbqDropdownSearchMissingInputError, throwKbqDropdownSearchMissingNgControlError, transformDropdown };
 //# sourceMappingURL=koobiq-components-dropdown.mjs.map