@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-dropdown.mjs

@@ -1,60 +1,19 @@
-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, 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 { inject, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, InjectionToken, ElementRef, effect, viewChild, contentChild, input, booleanAttribute, computed, signal, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, Renderer2, DestroyRef, contentChildren, model, numberAttribute, output, QueryList, afterNextRender, NgModule } from '@angular/core';
 import { Subject, Subscription, merge, timer, of, asapScheduler } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
-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 { ENTER, SPACE, TAB, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import { KBQ_PANEL_DEFAULT_MIN_WIDTH, KbqComponentColors, kbqAnimationsDisabled, KBQ_TITLE_TEXT_REF, ESCAPE, LEFT_ARROW, RIGHT_ARROW, isExplicitPanelWidth, isPointInRect, isPointInTriangle, getSafeTriangleVertices, isVerticalMovement, ActiveDescendantKeyManager, FocusKeyManager, kbqRepositionScrollStrategyFactory, KBQ_OVERLAY_LAYERS, ENTER as ENTER$1, SPACE as SPACE$1, DOWN_ARROW as DOWN_ARROW$1, kbqIsElementOrigin, kbqResolveOverlayOrigin, defaultOffsetY, kbqGetPanelWidthOrigin, kbqResolvePanelWidth, 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 { ScrollDispatcher, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { normalizePassiveListenerOptions, Platform, _getEventTarget } from '@angular/cdk/platform';
 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';
-
-/**
- * Animations used by the kbq-dropdown component.
- * @docs-private
- */
-const kbqDropdownAnimations = {
-    /**
-     * This animation controls the dropdown panel's entry and exit from the page.
-     *
-     * When the dropdown panel is added to the DOM, it scales in and fades in its border.
-     *
-     * When the dropdown panel is removed from the DOM, it simply fades out after a brief
-     * delay to display the ripple.
-     */
-    transformDropdown: trigger('transformDropdown', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(0.8)'
-        })),
-        transition('void => enter', group([
-            query('.kbq-dropdown__content', animate('0ms linear', style({ opacity: 1 }))),
-            animate('0ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' }))
-        ])),
-        transition('* => void', animate('50ms 25ms linear', style({ opacity: 0 })))
-    ]),
-    /**
-     * This animation fades in the background color and content of the dropdown panel
-     * after its containing element is scaled in.
-     */
-    fadeInItems: trigger('fadeInItems', [
-        // now. Remove next time we do breaking changes.
-        state('showing', style({ opacity: 1 })),
-        transition('void => *', [
-            style({ opacity: 0 }),
-            animate('0ms 0ms cubic-bezier(0.55, 0, 0.55, 0.2)')
-        ])
-    ])
-};
-const fadeInItems = kbqDropdownAnimations.fadeInItems;
-const transformDropdown = kbqDropdownAnimations.transformDropdown;
+import { startWith, switchMap, filter, delay, map, takeUntil } from 'rxjs/operators';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
 
 /**
  * Dropdown content that will be rendered lazily once the dropdown is opened.
@@ -71,6 +30,7 @@ class KbqDropdownContent {
     }
     /**
      * Attaches the content with a particular context.
+     *
      * @docs-private
      */
     attach(context = {}) {
@@ -91,6 +51,7 @@ class KbqDropdownContent {
     }
     /**
      * Detaches the content.
+     *
      * @docs-private
      */
     detach() {
@@ -101,10 +62,10 @@ class KbqDropdownContent {
     ngOnDestroy() {
         this.outlet?.dispose();
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqDropdownContent, isStandalone: true, selector: "ng-template[kbqDropdownContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqDropdownContent]'
@@ -113,7 +74,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 
 /**
  * Throws an exception for the case when dropdown trigger doesn't have a valid kbq-dropdown instance
- * @docs-private
+ *
+ * @internal
  */
 function throwKbqDropdownMissingError() {
     throw Error(`kbqDropdownTriggerFor: must pass in an kbq-dropdown instance.
@@ -124,7 +86,8 @@ function throwKbqDropdownMissingError() {
 /**
  * Throws an exception for the case when dropdown's x-position value isn't valid.
  * In other words, it doesn't match 'before' or 'after'.
- * @docs-private
+ *
+ * @internal
  */
 function throwKbqDropdownInvalidPositionX() {
     throw Error(`xPosition value must be either 'before', 'after', or 'center'.
@@ -133,7 +96,8 @@ function throwKbqDropdownInvalidPositionX() {
 /**
  * Throws an exception for the case when dropdown's y-position value isn't valid.
  * In other words, it doesn't match 'above' or 'below'.
- * @docs-private
+ *
+ * @internal
  */
 function throwKbqDropdownInvalidPositionY() {
     throw Error(`yPosition value must be either 'above' or below'.
@@ -142,7 +106,8 @@ function throwKbqDropdownInvalidPositionY() {
 /**
  * Throws an exception for the case when `kbqDropdownSearch` is applied to a form field that doesn't
  * host a `kbqInput`.
- * @docs-private
+ *
+ * @internal
  */
 function throwKbqDropdownSearchMissingInputError() {
     throw Error(`kbqDropdownSearch: must be applied to a kbq-form-field containing an input[kbqInput].
@@ -154,7 +119,8 @@ function throwKbqDropdownSearchMissingInputError() {
 /**
  * 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
+ *
+ * @internal
  */
 function throwKbqDropdownSearchMissingNgControlError() {
     throw Error(`kbqDropdownSearch: the input must be bound to a form control.
@@ -203,7 +169,7 @@ class KbqDropdownItemAction {
     }
     /** `progress` takes priority over the action, same as `disabled`. */
     isInactive() {
-        return this.dropdownItem.disabled || this.dropdownItem.progress();
+        return this.dropdownItem.disabled() || this.dropdownItem.progress();
     }
     /**
      * Always stops the click from bubbling to the item's own primary click handler.
@@ -217,10 +183,10 @@ class KbqDropdownItemAction {
             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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItemAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItemAction, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDropdownItemAction]',
@@ -235,6 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 
 /**
  * Injection token used to provide the parent dropdown to dropdown-specific components.
+ *
  * @docs-private
  */
 const KBQ_DROPDOWN_PANEL = new InjectionToken('KBQ_DROPDOWN_PANEL');
@@ -261,42 +228,75 @@ function KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY() {
     };
 }
 
+/** Elements that carry no label text of their own and are skipped when reading an item's label. */
+const NON_LABEL_SELECTOR = '[kbq-icon], .kbq-icon, [kbqDropdownItemAction]';
+/** Hosts that already turn ENTER/SPACE into a click, or handle activation themselves (app-switcher items). */
+const SELF_ACTIVATING_HOST_SELECTOR = 'button, a[href], [role="menuitem"]';
+/** Secondary line of a `kbq-dropdown-item`, shown under the item's text. */
+class KbqDropdownItemCaption {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItemCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqDropdownItemCaption, isStandalone: true, selector: "[kbqDropdownItemCaption]", host: { classAttribute: "kbq-dropdown-item__caption" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItemCaption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownItemCaption]',
+                    host: { class: 'kbq-dropdown-item__caption' }
+                }]
+        }] });
 /**
  * This directive is intended to be used inside an kbq-dropdown tag.
- * It exists mostly to set the role attribute.
+ *
+ * Note that it sets no ARIA role: neither the panel nor its items currently carry menu semantics, so
+ * triggers must not advertise a popup they cannot describe.
  */
 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;
-        }
+    /** Element holding the text of the item, measured by `kbq-title`. */
+    get textElement() {
+        return this.textElementQuery();
+    }
+    /** Whether the dropdown item is highlighted. */
+    get highlighted() {
+        return this.highlightedState();
+    }
+    set highlighted(value) {
+        this.highlightedState.set(value);
     }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.focusMonitor = inject(FocusMonitor);
         this.parentDropdownPanel = inject(KBQ_DROPDOWN_PANEL, { optional: true });
+        this.textElementQuery = viewChild('kbqTitleText', ...(ngDevMode ? [{ debugName: "textElementQuery" }] : /* istanbul ignore next */ []));
+        this.icon = contentChild(KbqIcon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /** Secondary, independently-focusable icon action projected into the item (e.g. a settings link). */
-        this.itemAction = contentChild(KbqDropdownItemAction, ...(ngDevMode ? [{ debugName: "itemAction" }] : []));
-        this._disabled = false;
+        this.itemAction = contentChild(KbqDropdownItemAction, ...(ngDevMode ? [{ debugName: "itemAction" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown item is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the dropdown item is in a loading state. */
-        this.progress = input(false, ...(ngDevMode ? [{ debugName: "progress", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Value of the `disabled` and `aria-disabled` attributes.
+         *
+         * @internal
+         */
+        this.disabledAttribute = computed(() => this.disabled() || null, ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
         /** 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;
+        this.highlightedState = signal(false, ...(ngDevMode ? [{ debugName: "highlightedState" }] : /* istanbul ignore next */ []));
         /** Whether the item is the panel's active item while DOM focus is held elsewhere. */
-        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         /** Whether the dropdown item acts as a trigger for a nested dropdown. */
         this.isNested = false;
         /** @docs-private */
         this.componentColors = KbqComponentColors;
+        /**
+         * Whether the progress shimmer stands still.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
         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
@@ -334,7 +334,13 @@ class KbqDropdownItem {
      * the meantime. `preventScroll` is therefore always forced on, overriding `options`.
      */
     focus(origin, options) {
-        if (this.disabled)
+        // Untracked: called from a consumer's `effect()`, `disabled` and what the focus listeners read on the way would
+        // make the effect run again whenever they change.
+        untracked(() => this.focusItem(origin, options));
+    }
+    /** Body of `focus()`. */
+    focusItem(origin, options) {
+        if (this.disabled())
             return;
         const element = this.getHostElement();
         const focusOptions = { ...options, preventScroll: true };
@@ -356,11 +362,12 @@ class KbqDropdownItem {
     }
     /** Used to set the `tabindex`. */
     getTabIndex() {
-        return this.disabled ? '-1' : '0';
+        // The attributes' signal rather than `disabled`: the binding runs right after theirs.
+        return this.disabledAttribute() ? '-1' : '0';
     }
     /** Prevents the default element actions if it is disabled. Bound via `host` metadata. */
     checkDisabled(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -373,15 +380,38 @@ class KbqDropdownItem {
             return;
         this.focus('mouse');
     }
+    /** Handles key presses on the item. Bound via `host` metadata. */
+    handleKeydown(event) {
+        if (this.disabled() || this.progress())
+            return;
+        if (event.keyCode === ENTER || event.keyCode === SPACE) {
+            this.handleActivationKeydown(event);
+            return;
+        }
+        this.handleActionKeydown(event);
+    }
+    /** Replays ENTER/SPACE as a click on a non-interactive host (e.g. a `<div>` item with a secondary action). */
+    handleActivationKeydown(event) {
+        const hostElement = this.getHostElement();
+        // A nested trigger opens its submenu on these keys instead.
+        if (this.isNested || event.target !== hostElement)
+            return;
+        if (hostElement.matches(SELF_ACTIVATING_HOST_SELECTOR))
+            return;
+        event.preventDefault();
+        // SPACE must not also reach the panel's typeahead.
+        event.stopPropagation();
+        hostElement.click();
+    }
     /**
      * 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.
+     * the panel's `FocusKeyManager.tabOut`.
      */
     handleActionKeydown(event) {
         const action = this.itemAction();
-        if (!action || event.keyCode !== TAB || this.disabled || this.progress())
+        if (!action || event.keyCode !== TAB)
             return;
         const target = event.target;
         const hostEl = this.getHostElement();
@@ -394,29 +424,41 @@ class KbqDropdownItem {
     }
     /** Gets the label to be used when determining whether the option should be focused. */
     getLabel() {
-        const clone = this.getHostElement().cloneNode(true);
-        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() || '';
+        const hostElement = this.getHostElement();
+        const text = hostElement.textContent || '';
+        // Typeahead reads every label on each keystroke, so the walk is memoised on the raw text.
+        if (this.cachedLabel?.text !== text) {
+            this.cachedLabel = { text, label: this.readLabel(hostElement).trim() };
+        }
+        return this.cachedLabel.label;
+    }
+    /** Concatenates the item's own text, skipping icons and the projected action. */
+    readLabel(element) {
+        let label = '';
+        element.childNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                label += node.textContent;
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE && !node.matches(NON_LABEL_SELECTOR)) {
+                label += this.readLabel(node);
+            }
+        });
+        return label;
     }
     haltDisabledEvents(event) {
-        if (this.disabled || this.progress()) {
+        if (this.disabled() || this.progress()) {
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
         }
     }
-    /** @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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqDropdownItem, isStandalone: true, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "checkDisabled($event)", "mouseenter": "handleMouseEnter()", "keydown": "handleKeydown($event)" }, properties: { "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": "disabledAttribute()", "attr.aria-disabled": "disabledAttribute()", "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 }); }
+        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }, { propertyName: "itemAction", first: true, predicate: KbqDropdownItemAction, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElementQuery", first: true, predicate: ["kbqTitleText"], descendants: true, isSignal: 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\n    class=\"kbq-dropdown-item-overlay\"\n    [class.kbq-animations-disabled]=\"animationsDisabled\"\n    (click)=\"haltDisabledEvents($event)\"\n></div>\n", styles: ["@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius)}@supports (corner-shape: squircle){.kbq-dropdown-item{corner-shape:squircle;border-radius:clamp(var(--kbq-dropdown-item-border-radius) * 1.85,var(--kbq-dropdown-item-border-radius) * 2.3 - 3.6px,var(--kbq-dropdown-item-border-radius) * 2)}}.kbq-dropdown-item{-webkit-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;corner-shape: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;corner-shape: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))}.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{animation:none;transition:none}}.kbq-dropdown__group-header{-webkit-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}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-dropdown-item, [kbq-dropdown-item]', imports: [
                         KbqIcon
@@ -425,28 +467,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         { 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',
+                        // Only the class reads `disabled`, and the three attributes, which run back to back before every class
+                        // binding, read `disabledAttribute`: the host bindings of every item in a view run in that view's reactive
+                        // consumer, where a signal read again after others costs a scan of all it has read so far. A signal read twice
+                        // in a row costs none.
                         '[class.kbq-dropdown-item_highlighted]': 'highlighted',
                         '[class.kbq-dropdown-item_active]': 'active()',
-                        '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-disabled]': 'disabled()',
                         '[class.kbq-progress]': 'progress()',
                         '[class.kbq-dropdown-item_has-action]': '!!itemAction()',
-                        '[attr.disabled]': 'disabled || null',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        // `disabled` is inert on `<div>`/`<a>` hosts.
+                        '[attr.aria-disabled]': 'disabledAttribute()',
                         '[attr.tabindex]': 'getTabIndex()',
                         '(click)': 'checkDisabled($event)',
                         '(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']
-            }], icon: [{
-                type: ContentChild,
-                args: [KbqIcon]
-            }], 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 }] }] } });
+                        '(keydown)': 'handleKeydown($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\n    class=\"kbq-dropdown-item-overlay\"\n    [class.kbq-animations-disabled]=\"animationsDisabled\"\n    (click)=\"haltDisabledEvents($event)\"\n></div>\n", styles: ["@charset \"UTF-8\";.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius)}@supports (corner-shape: squircle){.kbq-dropdown-item{corner-shape:squircle;border-radius:clamp(var(--kbq-dropdown-item-border-radius) * 1.85,var(--kbq-dropdown-item-border-radius) * 2.3 - 3.6px,var(--kbq-dropdown-item-border-radius) * 2)}}.kbq-dropdown-item{-webkit-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;corner-shape: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;corner-shape: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))}.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{animation:none;transition:none}}.kbq-dropdown__group-header{-webkit-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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textElementQuery: [{ type: i0.ViewChild, args: ['kbqTitleText', { isSignal: true }] }], icon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], itemAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownItemAction), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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.
@@ -460,6 +498,7 @@ class KbqDropdownSearch {
         /**
          * 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 });
@@ -486,7 +525,7 @@ class KbqDropdownSearch {
     }
     /** The current search query. */
     value() {
-        return this.formField.control().value;
+        return this.formField.control().value();
     }
     /** @docs-private */
     handleClick(event) {
@@ -520,8 +559,8 @@ class KbqDropdownSearch {
         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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", 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,
@@ -533,7 +572,7 @@ class KbqDropdownSearch {
             }
         ], exportAs: ["kbqDropdownSearch"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownSearch, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDropdownSearch]',
@@ -567,10 +606,10 @@ 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.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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownStaticContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqDropdownStaticContent, isStandalone: true, selector: "[kbqDropdownStaticContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownStaticContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownStaticContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDropdownStaticContent]'
@@ -578,163 +617,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /** 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDropdownFooter], kbq-dropdown-footer',
                     host: { class: 'kbq-dropdown-footer' }
                 }]
         }] });
+/** Header of a group of items in the dropdown panel. */
+class KbqDropdownGroupHeader {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqDropdownGroupHeader, isStandalone: true, selector: "[kbqDropdownGroupHeader]", host: { classAttribute: "kbq-dropdown__group-header" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownGroupHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownGroupHeader]',
+                    host: { class: 'kbq-dropdown__group-header' }
+                }]
+        }] });
 class KbqDropdown {
-    /** Position of the dropdown in the X axis. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get xPosition() {
-        return this._xPosition;
-    }
-    set xPosition(value) {
-        if (value !== 'before' && value !== 'after' && value !== 'center') {
-            throwKbqDropdownInvalidPositionX();
-        }
-        this._xPosition = value;
-        this.setPositionClasses();
-    }
-    /** Position of the dropdown in the Y axis. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get yPosition() {
-        return this._yPosition;
-    }
-    set yPosition(value) {
-        if (value !== 'above' && value !== 'below') {
-            throwKbqDropdownInvalidPositionY();
-        }
-        this._yPosition = value;
-        this.setPositionClasses();
-    }
-    /** Whether the dropdown should overlap its trigger vertically. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get overlapTriggerY() {
-        return this._overlapTriggerY;
-    }
-    set overlapTriggerY(value) {
-        this._overlapTriggerY = coerceBooleanProperty(value);
-    }
-    /** Whether the dropdown should overlap its trigger horizontally. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get overlapTriggerX() {
-        return this._overlapTriggerX;
-    }
-    set overlapTriggerX(value) {
-        this._overlapTriggerX = coerceBooleanProperty(value);
-    }
-    /** Whether the dropdown has a backdrop. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hasBackdrop() {
-        return this._hasBackdrop;
-    }
-    set hasBackdrop(value) {
-        this._hasBackdrop = coerceBooleanProperty(value);
-    }
-    /**
-     * This method takes classes set on the host kbq-dropdown element and applies them on the
-     * dropdown template that displays in the overlay container.  Otherwise, it's difficult
-     * to style the containing dropdown from outside the component.
-     * @param classes list of class names
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set panelClass(classes) {
-        const previousPanelClass = this.previousPanelClass;
-        const classList = { ...this.classList };
-        if (previousPanelClass && previousPanelClass.length) {
-            previousPanelClass.split(' ').forEach((className) => (classList[className] = false));
-        }
-        this.previousPanelClass = classes;
-        if (classes?.length) {
-            classes.split(' ').forEach((className) => (classList[className] = true));
-            this.elementRef.nativeElement.className = '';
-        }
-        // 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.injector = inject(Injector);
+        /** The pending deferred initial focus, see `focusFirstItem`. */
+        this.initialFocusRef = null;
         this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
         this.defaultOptions = inject(KBQ_DROPDOWN_DEFAULT_OPTIONS);
         this.destroyRef = inject(DestroyRef);
-        this.panelFormField = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "panelFormField" }] : []));
+        this.panelFormField = contentChild(KbqFormField, ...(ngDevMode ? [{ debugName: "panelFormField" }] : /* istanbul ignore next */ []));
         /**
          * 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.
+         * the way `syncDirectDescendants` 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" }] : []));
+        this.searches = contentChildren(KbqDropdownSearch, { ...(ngDevMode ? { debugName: "searches" } : /* istanbul ignore next */ {}), descendants: true });
+        this.search = computed(() => this.searches().find((search) => search.panel === this), ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
         /** Whether the dropdown projects a search form-field. @docs-private */
-        this.hasSearch = computed(() => !!this.panelFormField(), ...(ngDevMode ? [{ debugName: "hasSearch" }] : []));
+        this.hasSearch = computed(() => !!this.panelFormField(), ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the arrow keys move a highlight instead of the DOM focus. Turn it on when the keyboard belongs to
+         * something outside the panel — an editor whose caret the panel is anchored to, for instance — and forward
+         * the keys with {@link handleKeydown}.
+         */
+        this.activeDescendantNavigation = input(false, { ...(ngDevMode ? { debugName: "activeDescendantNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** 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();
+        this.inSearchMode = computed(() => !!this.search() || this.activeDescendantNavigation(), ...(ngDevMode ? [{ debugName: "inSearchMode" }] : /* istanbul ignore next */ []));
+        this.navigationWithWrap = input(false, ...(ngDevMode ? [{ debugName: "navigationWithWrap" }] : /* istanbul ignore next */ []));
+        // The position members are `model()`s because `kbq-split-button` and `kbq-navbar-item` write them.
+        /** Position of the dropdown in the X axis. */
+        this.xPosition = model(this.defaultOptions.xPosition, ...(ngDevMode ? [{ debugName: "xPosition" }] : /* istanbul ignore next */ []));
+        /** Position of the dropdown in the Y axis. */
+        this.yPosition = model(this.defaultOptions.yPosition, ...(ngDevMode ? [{ debugName: "yPosition" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown should overlap its trigger vertically. */
+        this.overlapTriggerY = model(this.defaultOptions.overlapTriggerY, ...(ngDevMode ? [{ debugName: "overlapTriggerY" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown should overlap its trigger horizontally. */
+        this.overlapTriggerX = model(this.defaultOptions.overlapTriggerX, ...(ngDevMode ? [{ debugName: "overlapTriggerX" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown has a backdrop. */
+        this.hasBackdrop = input(this.defaultOptions.hasBackdrop, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Classes set on the host `kbq-dropdown` element, transferred onto the panel in the overlay container. */
+        this.panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        /** The position the trigger resolved; supersedes the inputs until one of them changes. */
+        this.positionOverride = signal(null, ...(ngDevMode ? [{ debugName: "positionOverride" }] : /* istanbul ignore next */ []));
+        /** Whether a safe area is protecting an open submenu, see `activateSafeArea`. */
+        this.safeAreaActive = signal(false, ...(ngDevMode ? [{ debugName: "safeAreaActive" }] : /* istanbul ignore next */ []));
+        /** Config object passed into the dropdown panel's `[class]` binding. */
+        this.classList = computed(() => {
+            const { posX, posY } = this.positionOverride() ?? { posX: this.xPosition(), posY: this.yPosition() };
+            const classes = {
+                'kbq-dropdown-before': posX === 'before',
+                'kbq-dropdown-after': posX === 'after',
+                'kbq-dropdown-center': posX === 'center',
+                'kbq-dropdown-above': posY === 'above',
+                'kbq-dropdown-below': posY === 'below',
+                [SAFE_AREA_ACTIVE_CLASS]: this.safeAreaActive()
+            };
+            for (const className of this.panelClass().split(' ')) {
+                if (className)
+                    classes[className] = true;
+            }
+            return classes;
+        }, ...(ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []));
+        /** Whether a trigger has the panel attached, see `setOpened`. */
+        this.opened = false;
         /** 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;
+        this.backdropClass = input(this.defaultOptions.backdropClass, ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
         /**
          * 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" }] : []));
+        this.panelWidth = input(this.defaultOptions.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
         /**
          * 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 }]));
+            : this.defaultOptions.panelMinWidth, { ...(ngDevMode ? { debugName: "panelMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
          * the panel narrower than 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 }]));
+        this.panelMaxWidth = input(this.defaultOptions.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, { ...(ngDevMode ? { debugName: "panelMaxWidth" } : /* istanbul ignore next */ {}), 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.
+         * don't prematurely close the submenu. Set on the panel that contains the nested triggers.
          */
-        this.safeArea = input(this.defaultOptions.safeArea ?? true, ...(ngDevMode ? [{ debugName: "safeArea", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.safeArea = input(this.defaultOptions.safeArea ?? true, { ...(ngDevMode ? { debugName: "safeArea" } : /* istanbul ignore next */ {}), 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.
+         * `panelMinWidth` as a CSS length for `--kbq-dropdown-size-container-width-min`.
+         *
          * @docs-private
          */
         this.panelMinWidthToken = computed(() => {
             const minWidth = this.panelMinWidth();
-            return Number.isFinite(minWidth) ? `${minWidth}px` : null;
-        }, ...(ngDevMode ? [{ debugName: "panelMinWidthToken" }] : []));
+            // Always a length: dropping the token would fall back to the static 200px floor. It collapses
+            // wherever `kbqResolvePanelWidth` applies no minimum, or the panel would overflow its pane.
+            if (isExplicitPanelWidth(this.panelWidth()) || !Number.isFinite(minWidth))
+                return '0px';
+            return `${minWidth}px`;
+        }, ...(ngDevMode ? [{ debugName: "panelMinWidthToken" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.templateRef = viewChild.required(TemplateRef);
+        this.scrollbarViewport = viewChild(KbqScrollbarViewport, ...(ngDevMode ? [{ debugName: "scrollbarViewport" }] : /* istanbul ignore next */ []));
+        this.queriedItems = contentChildren(KbqDropdownItem, { ...(ngDevMode ? { debugName: "queriedItems" } : /* istanbul ignore next */ {}), descendants: true });
+        /** Items borrowed from the parent panel, see `adoptItems`. Used only while this panel has none of its own. */
+        this.adoptedItems = signal(null, ...(ngDevMode ? [{ debugName: "adoptedItems" }] : /* istanbul ignore next */ []));
+        /**
+         * List of the items inside of a dropdown.
+         */
+        this.items = computed(() => {
+            const queried = this.queriedItems();
+            return queried.length > 0 ? queried : (this.adoptedItems() ?? queried);
+        }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * Dropdown content that will be rendered lazily.
+         *
+         * @docs-private
+         */
+        this.lazyContent = contentChild(KbqDropdownContent, ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
         /** Event emitted when the dropdown is closed. */
-        this.closed = new EventEmitter();
+        this.closed = output();
+        /**
+         * Whether the `closed` being emitted closes the panels this one is nested in too, see `closeChain`.
+         *
+         * @internal
+         */
+        this.closingChain = false;
         this.focusOrigin = 'program';
         /** Only the direct descendant menu items. */
         this.directDescendantItems = new QueryList();
@@ -767,16 +803,42 @@ class KbqDropdown {
             // 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));
+            if (this.opened) {
+                this.applyInitialFocusAfterRender(this.focusOrigin);
             }
         });
-    }
-    ngOnInit() {
-        this.setPositionClasses();
+        effect(() => this.syncDirectDescendants(this.items()));
+        // A partial `KBQ_DROPDOWN_DEFAULT_OPTIONS` can leave these undefined, so the default is not validated.
+        const defaultPosX = untracked(this.xPosition);
+        const defaultPosY = untracked(this.yPosition);
+        // Validates the position (`model()` has no `transform`) and drops the trigger's resolved override.
+        effect(() => {
+            const posX = this.xPosition();
+            const posY = this.yPosition();
+            if (posX !== defaultPosX && posX !== 'before' && posX !== 'after' && posX !== 'center') {
+                throwKbqDropdownInvalidPositionX();
+            }
+            if (posY !== defaultPosY && posY !== 'above' && posY !== 'below') {
+                throwKbqDropdownInvalidPositionY();
+            }
+            untracked(() => this.positionOverride.set(null));
+        });
+        // `class` also lands on the host as an attribute. Strip only the transferred names, so classes
+        // other directives put on `<kbq-dropdown>` survive.
+        let previousPanelClass = '';
+        effect(() => {
+            const classes = this.panelClass();
+            for (const className of `${previousPanelClass} ${classes}`.split(' ')) {
+                if (className) {
+                    this.renderer.removeClass(this.elementRef.nativeElement, className);
+                }
+            }
+            previousPanelClass = classes;
+        });
     }
     ngAfterContentInit() {
-        this.updateDirectDescendants();
+        // Not waiting for the effect: `initKeyManager` and `focusFirstItem` need the descendants now.
+        this.syncDirectDescendants(untracked(this.items));
         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
@@ -806,7 +868,7 @@ class KbqDropdown {
             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) {
+            if (this.inSearchMode() && !item.disabled()) {
                 this.keyManager.setActiveItem(item);
             }
         });
@@ -814,7 +876,6 @@ class KbqDropdown {
     ngOnDestroy() {
         this.directDescendantItems.destroy();
         this.tabSubscription.unsubscribe();
-        this.closed.complete();
         this.deactivateSafeArea();
         this.panelReached.complete();
         this.switchTarget.complete();
@@ -825,27 +886,31 @@ class KbqDropdown {
         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.
+     * Tracks the pointer against the triangle spanned by `origin` and the protected submenu, closing
+     * `owner`'s submenu via `onExit` if the pointer leaves the triangle without first reaching the
+     * panel. 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) {
+    activateSafeArea(owner, origin, getPanelRect, onExit) {
         this.deactivateSafeArea();
         this.safeAreaOwner = owner;
-        this.classList = { ...this.classList, [SAFE_AREA_ACTIVE_CLASS]: true };
+        this.safeAreaActive.set(true);
         this.safeAreaCleanup = this.ngZone.runOutsideAngular(() => {
             const listener = (event) => {
                 const point = { x: event.clientX, y: event.clientY };
+                const panelRect = getPanelRect();
                 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
+                if (!isPointInTriangle(point, getSafeTriangleVertices(origin, panelRect))) {
+                    const switchTo = this.currentHovered?.isNested &&
+                        this.currentHovered !== owner &&
+                        !this.currentHovered.disabled()
                         ? this.currentHovered
                         : null;
                     this.deactivateSafeArea();
@@ -861,7 +926,7 @@ class KbqDropdown {
             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))))
+            .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();
@@ -870,6 +935,7 @@ class KbqDropdown {
     }
     /**
      * Stops tracking the current safe area, if any.
+     *
      * @docs-private
      */
     deactivateSafeArea() {
@@ -878,16 +944,15 @@ class KbqDropdown {
         this.safeAreaOwner = null;
         this.switchTargetSubscription.unsubscribe();
         this.switchTargetSubscription = Subscription.EMPTY;
-        if (this.classList[SAFE_AREA_ACTIVE_CLASS]) {
+        if (untracked(this.safeAreaActive)) {
             // 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 };
-            });
+            // to make sure the class update is picked up by change detection.
+            this.ngZone.run(() => this.safeAreaActive.set(false));
         }
     }
     /**
      * Whether a safe area is currently being tracked.
+     *
      * @docs-private
      */
     isSafeAreaActive() {
@@ -895,22 +960,16 @@ class KbqDropdown {
     }
     /**
      * 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() {
@@ -921,7 +980,10 @@ class KbqDropdown {
         const keyCode = event.keyCode;
         switch (keyCode) {
             case ESCAPE:
-                this.closed.emit('keydown');
+                // Spent by a pop-up inside the panel, such as the tooltip of a truncated item, which closes alone.
+                if (!event.defaultPrevented) {
+                    this.closed.emit('keydown');
+                }
                 break;
             case LEFT_ARROW:
                 if (this.parent && this.direction === 'ltr') {
@@ -946,12 +1008,14 @@ class KbqDropdown {
                 }
                 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) {
+                // Home/End too: with a stale `mouse` origin the item they move to is not scrolled into view.
+                if (isVerticalMovement(event)) {
                     this.setFocusOrigin('keyboard');
                     this.keyManager.onKeydown(event);
-                    this.revealActiveItem();
+                    // Only the arrows reveal: other keys would scroll the list back on each keystroke.
+                    if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
+                        this.revealActiveItem();
+                    }
                 }
                 else {
                     this.keyManager.onKeydown(event);
@@ -964,16 +1028,25 @@ class KbqDropdown {
     }
     /**
      * 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') {
-        // When the content is rendered lazily, it takes a bit before the items are inside the DOM.
-        if (this.lazyContent) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => this.applyInitialFocus(origin));
-        }
-        else {
-            this.applyInitialFocus(origin);
-        }
+        // Untracked: called from a consumer's `effect()`, the state read on the way — the content and search field
+        // queries, the `disabled` of the items — would make the effect run again whenever it changes.
+        untracked(() => {
+            // When the content is rendered lazily, it takes a bit before the items are inside the DOM.
+            if (this.lazyContent()) {
+                this.applyInitialFocusAfterRender(origin);
+            }
+            else {
+                this.applyInitialFocus(origin);
+            }
+        });
+    }
+    applyInitialFocusAfterRender(origin) {
+        this.initialFocusRef?.destroy();
+        this.initialFocusRef = afterNextRender(() => this.applyInitialFocus(origin), { injector: this.injector });
     }
     /**
      * Applies focus when the dropdown is opened.
@@ -1006,6 +1079,7 @@ class KbqDropdown {
      * 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() {
@@ -1029,51 +1103,59 @@ class KbqDropdown {
         this.keyManager.activeItem?.resetStyles();
         this.keyManager.setActiveItem(-1);
     }
+    /**
+     * Lends this panel the parent's items, for a submenu whose own items were initialised as children of
+     * the root panel. Ignored once the panel has items of its own.
+     *
+     * @docs-private
+     */
+    adoptItems(items) {
+        this.adoptedItems.set(items);
+    }
     /**
      * Adds classes to the dropdown panel based on its position. Can be used by
      * consumers to add specific styling based on the position.
+     *
      * @param posX Position of the dropdown along the x axis.
      * @param posY Position of the dropdown along the y axis.
+     *
      * @docs-private
      */
-    setPositionClasses(posX = this.xPosition, posY = this.yPosition) {
-        // Reassign a new object reference so the native `[class]` binding picks up the change.
-        this.classList = {
-            ...this.classList,
-            'kbq-dropdown-before': posX === 'before',
-            'kbq-dropdown-after': posX === 'after',
-            'kbq-dropdown-center': posX === 'center',
-            'kbq-dropdown-above': posY === 'above',
-            'kbq-dropdown-below': posY === 'below'
-        };
+    setPositionClasses(posX = untracked(this.xPosition), posY = untracked(this.yPosition)) {
+        this.positionOverride.set({ posX, posY });
     }
-    /** Starts the enter animation. */
-    startAnimation() {
-        this.panelAnimationState = 'enter';
-    }
-    /** Resets the panel animation to its initial state. */
-    resetAnimation() {
-        this.panelAnimationState = 'void';
-    }
-    /** Callback that is invoked when the panel animation completes. */
-    onAnimationDone(event) {
-        this.animationDone.next(event);
-        this.isAnimating = false;
-    }
-    onAnimationStart(event) {
-        this.isAnimating = true;
-        // Scroll the content element to the top as soon as the animation starts. This is necessary,
-        // because we move focus to the first item while it's still being animated, which can throw
-        // the browser off when it determines the scroll position. Alternatively we can move focus
-        // when the animation is done, however moving focus asynchronously will interrupt screen
-        // readers which are in the process of reading out the dropdown already. We take the `element`
-        // from the `event` since we can't use a `ViewChild` to access the pane.
-        if (event.toState === 'enter' && this.keyManager.activeItemIndex <= 0) {
-            event.element.scrollTop = 0;
-        }
+    /**
+     * Called by the trigger when it attaches the panel and when it detaches it.
+     *
+     * @docs-private
+     */
+    setOpened(opened) {
+        this.opened = opened;
+        this.openedRender?.destroy();
+        if (!opened)
+            return;
+        this.openedRender = afterNextRender(() => {
+            // Focus moves to the first item before the panel has rendered, which can throw the browser off
+            // when it determines the scroll position.
+            if (this.keyManager.activeItemIndex <= 0) {
+                this.scrollbarViewport()?.scrollToTop();
+            }
+            this.scrollbarViewport()?.flashScrollIndicators();
+        }, { injector: this.injector });
     }
     close() {
-        this.closed.emit(this.focusOrigin === 'keyboard' ? 'keydown' : 'click');
+        this.closeChain(this.focusOrigin === 'keyboard' ? 'keydown' : 'click');
+    }
+    /**
+     * Emits `closed` for an activated item, which closes every panel up to the root. Its reason follows the focus
+     * origin, so after keyboard navigation it is the `'keydown'` that Escape reports for closing one panel alone.
+     *
+     * @internal
+     */
+    closeChain(reason) {
+        this.closingChain = true;
+        this.closed.emit(reason);
+        this.closingChain = false;
     }
     /**
      * With a search field the caret has to stay in the input, so the active item is only highlighted and
@@ -1093,7 +1175,8 @@ class KbqDropdown {
             this.keyManager = this.activeDescendantKeyManager;
         }
         else {
-            this.focusKeyManager ??= this.configureKeyManager(new FocusKeyManager(this.directDescendantItems).withTypeAhead());
+            // Home/End only without a search field, where they belong to the caret.
+            this.focusKeyManager ??= this.configureKeyManager(new FocusKeyManager(this.directDescendantItems).withTypeAhead().withHomeAndEnd());
             this.keyManager = this.focusKeyManager;
         }
         this.tabSubscription.unsubscribe();
@@ -1126,63 +1209,33 @@ class KbqDropdown {
         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
-     * of direct descendants. We collect the descendants this way, because `items` can include
-     * items that are part of child menus, and using a custom way of registering items is unreliable
-     * when it comes to maintaining the item order.
+     * Narrows `items` down to the ones this panel owns. We collect the descendants this way, because
+     * `items` can include items that are part of child menus, and using a custom way of registering
+     * items is unreliable when it comes to maintaining the item order.
      */
-    updateDirectDescendants() {
-        this.items.changes.pipe(startWith(this.items)).subscribe((items) => {
-            this.directDescendantItems.reset(items.filter((item) => item.parentDropdownPanel === this));
-            this.directDescendantItems.notifyOnChanges();
-        });
+    syncDirectDescendants(items) {
+        const owned = items.filter((item) => item.parentDropdownPanel === this);
+        const current = this.directDescendantItems.toArray();
+        // Re-notifying an unchanged list would restart every stream keyed on `changes`.
+        if (owned.length === current.length && owned.every((item, index) => item === current[index]))
+            return;
+        this.directDescendantItems.reset(owned);
+        this.directDescendantItems.notifyOnChanges();
     }
-    /** @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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqDropdown, isStandalone: true, selector: "kbq-dropdown", inputs: { activeDescendantNavigation: { classPropertyName: "activeDescendantNavigation", publicName: "activeDescendantNavigation", isSignal: true, isRequired: false, transformFunction: null }, navigationWithWrap: { classPropertyName: "navigationWithWrap", publicName: "navigationWithWrap", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, overlapTriggerY: { classPropertyName: "overlapTriggerY", publicName: "overlapTriggerY", isSignal: true, isRequired: false, transformFunction: null }, overlapTriggerX: { classPropertyName: "overlapTriggerX", publicName: "overlapTriggerX", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { xPosition: "xPositionChange", yPosition: "yPositionChange", overlapTriggerY: "overlapTriggerYChange", overlapTriggerX: "overlapTriggerXChange", closed: "closed" }, host: { styleAttribute: "display: contents" }, providers: [
             { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-        ], 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:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-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 }); }
+        ], queries: [{ propertyName: "panelFormField", first: true, predicate: KbqFormField, descendants: true, isSignal: true }, { propertyName: "searches", predicate: KbqDropdownSearch, descendants: true, isSignal: true }, { propertyName: "queriedItems", predicate: KbqDropdownItem, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: KbqDropdownContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }], exportAs: ["kbqDropdown"], ngImport: i0, template: "<ng-template>\n    <div\n        kbqScrollbarViewport\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        (keydown)=\"handleKeydown($event)\"\n    >\n        <!-- Scoped to the options content: a click on a footer control must not close the panel. -->\n        <div class=\"kbq-dropdown__content\" (click)=\"close()\">\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;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-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)}@supports (corner-shape: squircle){.kbq-dropdown__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-dropdown-size-container-border-radius) * 1.85,var(--kbq-dropdown-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-dropdown-size-container-border-radius) * 2)}}.kbq-dropdown__panel{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__panel_safe-area-active .kbq-dropdown-item.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__panel_safe-area-active .kbq-dropdown-item.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-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)}\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"], dependencies: [{ kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-dropdown', imports: [], providers: [
+            args: [{ selector: 'kbq-dropdown', imports: [KbqScrollbarViewport], providers: [
                         { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
                     ], 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        [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:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-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
-            }], overlapTriggerY: [{
-                type: Input
-            }], overlapTriggerX: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input
-            }], panelClass: [{
-                type: Input,
-                args: ['class']
-            }], backdropClass: [{
-                type: Input
-            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: false }]
-            }], items: [{
-                type: ContentChildren,
-                args: [KbqDropdownItem, { descendants: true }]
-            }], lazyContent: [{
-                type: ContentChild,
-                args: [KbqDropdownContent, { static: false }]
-            }], closed: [{
-                type: Output
-            }] } });
+                    }, exportAs: 'kbqDropdown', template: "<ng-template>\n    <div\n        kbqScrollbarViewport\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        (keydown)=\"handleKeydown($event)\"\n    >\n        <!-- Scoped to the options content: a click on a footer control must not close the panel. -->\n        <div class=\"kbq-dropdown__content\" (click)=\"close()\">\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;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-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)}@supports (corner-shape: squircle){.kbq-dropdown__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-dropdown-size-container-border-radius) * 1.85,var(--kbq-dropdown-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-dropdown-size-container-border-radius) * 2)}}.kbq-dropdown__panel{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__panel_safe-area-active .kbq-dropdown-item.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__panel_safe-area-active .kbq-dropdown-item.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-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)}\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 }] }], activeDescendantNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDescendantNavigation", required: false }] }], navigationWithWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationWithWrap", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }, { type: i0.Output, args: ["xPositionChange"] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }, { type: i0.Output, args: ["yPositionChange"] }], overlapTriggerY: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlapTriggerY", required: false }] }, { type: i0.Output, args: ["overlapTriggerYChange"] }], overlapTriggerX: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlapTriggerX", required: false }] }, { type: i0.Output, args: ["overlapTriggerXChange"] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], scrollbarViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], queriedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqDropdownItem), { ...{ descendants: true }, isSignal: true }] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownContent), { isSignal: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Injection token that determines the scroll handling while the dropdown is open. The root default keeps the
@@ -1190,33 +1243,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy', {
     providedIn: 'root',
-    factory: () => KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+    factory: () => KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(inject(ScrollDispatcher))
 });
 /** @docs-private */
-function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
+function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(scrollDispatcher) {
+    return kbqRepositionScrollStrategyFactory(scrollDispatcher);
 }
-/** @docs-private */
+/**
+ * Redundant to the root factory of the token; kept so an app can restore the default under its own override (#DS-2196).
+ *
+ * @docs-private
+ */
 const KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: KBQ_DROPDOWN_SCROLL_STRATEGY,
-    deps: [Overlay],
+    deps: [ScrollDispatcher],
     useFactory: KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY
 };
-/**
- * Marker provided by host components that create their own stacking context at
- * the default overlay z-index (e.g. `KbqTopBar`, `KbqNavbar` use
- * `position: sticky` + `z-index: $overlay-z-index`). When this token is
- * available in the injector tree, `KbqDropdownTrigger` defaults `demoteOverlay`
- * to `false` so the dropdown overlay is not lowered below the host.
- *
- * An explicit `[demoteOverlay]` binding on the trigger still wins.
- */
-const KBQ_DROPDOWN_HOST = new InjectionToken('kbq-dropdown-host');
 /** Default top padding of the nested dropdown panel. */
 const NESTED_PANEL_TOP_PADDING = 4;
 const NESTED_PANEL_LEFT_PADDING = 8;
 /** Options for binding a passive event listener. */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
+/** Tags whose implicit role always allows `aria-expanded`; `a[href]` is checked separately. */
+const NATIVELY_EXPANDABLE_TAGS = new Set(['BUTTON', 'SUMMARY']);
+/** The triggers bound to a panel and their one subscription to its `closed`, see `KbqDropdownTrigger.bindToPanel`. */
+const panelBindings = new WeakMap();
 const positionMap = {
     /** Maps CDK overlay x-anchor back to a dropdown x-position label. */
     overlayXToPosX: {
@@ -1242,96 +1293,96 @@ const positionMap = {
  * responsible for toggling the display of the provided dropdown instance.
  */
 class KbqDropdownTrigger {
-    /** References the dropdown instance that the trigger is associated with. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get dropdown() {
-        return this._dropdown;
-    }
-    set dropdown(dropdown) {
-        if (dropdown === this._dropdown) {
-            return;
-        }
-        this._dropdown = dropdown;
-        this.closeSubscription.unsubscribe();
-        if (dropdown) {
-            this.closeSubscription = dropdown.closed.asObservable().subscribe((reason) => {
-                this.destroy(reason);
-                // If a click closed the dropdown, we should close the entire chain of nested dropdowns.
-                if (['click', 'tab'].includes(reason) && this.parent) {
-                    this.parent.closed.emit(reason);
-                }
-            });
-        }
-    }
     /** The text direction of the containing app. */
     get dir() {
         return this._dir?.value === 'rtl' ? 'rtl' : 'ltr';
     }
     /** Whether the dropdown is open. */
     get opened() {
-        return this._opened;
+        return this.openedState();
+    }
+    /**
+     * `aria-expanded` only where a role allows it: on a generic `<div>`/`<span>` it fails `aria-allowed-attr`.
+     *
+     * @docs-private
+     */
+    get ariaExpanded() {
+        return this.hasExpandableRole ? this.opened : null;
+    }
+    // Not cached: a co-located `[attr.role]` binding (e.g. `KbqNavbarItem`) lands during change detection.
+    get hasExpandableRole() {
+        const element = this.elementRef.nativeElement;
+        return (NATIVELY_EXPANDABLE_TAGS.has(element.tagName) ||
+            (element.tagName === 'A' && element.hasAttribute('href')) ||
+            element.hasAttribute('role'));
     }
     /**
      * 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.
+     * Set right after the overlay is attached and cleared right after it is detached, once `destroy()` has
+     * restored focus to the trigger, so a tooltip on the trigger stays muted for that focus.
      */
     get isAttached() {
-        return this._opened;
+        return this.openedState();
     }
     constructor() {
         this.overlay = inject(Overlay);
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.scrollStrategy = inject(KBQ_DROPDOWN_SCROLL_STRATEGY);
         this.parent = inject(KbqDropdown, { optional: true });
         this.dropdownItemInstance = inject(KbqDropdownItem, { optional: true, self: true });
         this._dir = inject(Directionality, { optional: true });
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.focusMonitor = inject(FocusMonitor);
-        this.overlayContainer = inject(OverlayContainer);
-        this.renderer = inject(Renderer2);
-        this.ngZone = inject(NgZone);
+        this.document = inject(DOCUMENT);
+        this.injector = inject(Injector);
         this.isBrowser = inject(Platform).isBrowser;
-        this.host = inject(KBQ_DROPDOWN_HOST, { optional: true });
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.openByArrowDown = true;
+        /** Position offset of the dropdown in the X axis. */
+        // `model()` because `kbq-navbar-item` writes it.
+        this.offsetX = model(undefined, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
+        /** Position offset of the dropdown in the Y axis. */
+        // `undefined` means "use the computed offset", so it must not be coerced to `NaN`.
+        this.offsetY = input(undefined, { ...(ngDevMode ? { debugName: "offsetY" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
+        /** Data to be passed along to any lazily-rendered content. */
+        this.data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'kbqDropdownTriggerData' });
+        /** Whether the Down Arrow opens the dropdown when the trigger is focused. Written by `kbq-navbar-item`. */
+        this.openByArrowDown = model(true, ...(ngDevMode ? [{ debugName: "openByArrowDown" }] : /* istanbul ignore next */ []));
+        /**
+         * What the panel is positioned against: an element, or a rectangle in viewport coordinates such as the one
+         * `kbqCreateCaretOrigin` keeps on the caret. `null` anchors the panel to the trigger element.
+         *
+         * Call {@link updatePosition} to move an open panel to a new origin.
+         */
+        this.origin = input(null, { ...(ngDevMode ? { debugName: "origin" } : /* istanbul ignore next */ {}), alias: 'kbqDropdownTriggerOrigin' });
         /**
-         * Whether to demote the overlay container z-index so that dropdown overlays
-         * sit below sibling overlays (tooltips, modals, etc.). Set to `false` to
-         * keep the dropdown overlay at the default overlay container z-index.
+         * Whether opening the dropdown moves the keyboard focus into the panel. Turn it off to leave focus where it
+         * is — in the editor the panel is anchored to, for instance — and pair it with `activeDescendantNavigation`
+         * on the panel so the arrow keys still work.
          */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.demoteOverlay = true;
+        this.autoFocus = input(true, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), alias: 'kbqDropdownTriggerAutoFocus', transform: booleanAttribute });
         /**
          * Whether focus should be restored when the menu is closed.
          * Note that disabling this option can have accessibility implications
          * and it's up to you to manage focus, if you decide to turn it off.
          */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
-        this.restoreFocus = true;
+        // `model()` because `KbqOptionActionComponent` writes it.
+        this.restoreFocus = model(true, { ...(ngDevMode ? { debugName: "restoreFocus" } : /* istanbul ignore next */ {}), alias: 'kbqDropdownTriggerRestoreFocus' });
+        /** References the dropdown instance that the trigger is associated with. */
+        // Not `input.required`, so that `throwKbqDropdownMissingError` reports a missing panel.
+        this.dropdown = input(undefined, { ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), alias: 'kbqDropdownTriggerFor' });
         /** Event emitted when the associated dropdown is opened. */
         this.dropdownOpened = output();
-        /**
-         * Event emitted when the associated dropdown is closed. Kept as an `@Output()` EventEmitter
-         * (not `output()`): `KbqOptionActionComponent` subscribes to it via `.pipe()` through the
-         * KBQ_OPTION_ACTION_PARENT contract, which an `OutputEmitterRef` does not support — see #DS-5079.
-         */
-        this.dropdownClosed = new EventEmitter();
+        /** Event emitted when the associated dropdown is closed. */
+        this.dropdownClosed = output();
         /** 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.openedChange = merge(outputToObservable(this.dropdownOpened).pipe(map(() => true)), outputToObservable(this.dropdownClosed).pipe(map(() => false)));
+        this.openedState = signal(false, ...(ngDevMode ? [{ debugName: "openedState" }] : /* istanbul ignore next */ []));
         this.overlayRef = null;
-        this.closeSubscription = Subscription.EMPTY;
+        /** Per-session subscription to `closingActions()`; torn down on every close. */
+        this.closingActionsSubscription = Subscription.EMPTY;
         this.hoverSubscription = Subscription.EMPTY;
-        this.widthLockSubscription = Subscription.EMPTY;
-        this.classAddedToOverlayContainer = false;
+        this.widthLockRef = null;
         /**
          * Handles touch start events on the trigger.
          * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
@@ -1343,8 +1394,51 @@ class KbqDropdownTrigger {
         if (dropdownItemInstance) {
             dropdownItemInstance.isNested = this.isNested();
         }
-        if (this.host) {
-            this.demoteOverlay = false;
+        effect((onCleanup) => {
+            const dropdown = this.dropdown();
+            if (!dropdown)
+                return;
+            onCleanup(KbqDropdownTrigger.bindToPanel(dropdown, this));
+        });
+    }
+    /**
+     * Subscribes the triggers of a panel to its `closed` once, so that an emission closes the triggers that had the
+     * panel open when it began: a trigger that a `dropdownClosed` handler opens on the way stays open.
+     *
+     * @returns Teardown that unbinds the trigger.
+     */
+    static bindToPanel(dropdown, trigger) {
+        let binding = panelBindings.get(dropdown);
+        if (!binding) {
+            const triggers = new Set();
+            const subscription = outputToObservable(dropdown.closed).subscribe((reason) => {
+                const open = [...triggers].filter((candidate) => candidate.openedState());
+                for (const candidate of open) {
+                    // Checked again: closing the chain of one trigger can close another one first.
+                    if (candidate.openedState())
+                        candidate.closeFromPanel(dropdown, reason);
+                }
+            });
+            binding = { triggers, subscription };
+            panelBindings.set(dropdown, binding);
+        }
+        const { triggers, subscription } = binding;
+        triggers.add(trigger);
+        return () => {
+            triggers.delete(trigger);
+            if (triggers.size)
+                return;
+            subscription.unsubscribe();
+            panelBindings.delete(dropdown);
+        };
+    }
+    /** Closes the panel this trigger has open on its `closed`, and the chain of panels it is nested in. */
+    closeFromPanel(dropdown, reason) {
+        // A click, Tab or an activated item closes the entire chain of nested dropdowns.
+        const closesChain = reason === 'click' || reason === 'tab' || (dropdown instanceof KbqDropdown && dropdown.closingChain);
+        this.destroy(reason, closesChain);
+        if (closesChain && this.parent) {
+            untracked(() => this.parent.closeChain(reason));
         }
     }
     ngAfterContentInit() {
@@ -1365,54 +1459,96 @@ class KbqDropdownTrigger {
     }
     /** Toggles the dropdown between the open and closed states. */
     toggle() {
-        return this._opened ? this.close() : this.open();
+        return untracked(this.openedState) ? this.close() : this.open();
+    }
+    /** Moves an open panel to the current origin and re-applies its position. */
+    updatePosition() {
+        untracked(() => {
+            if (!this.openedState() || !this.overlayRef)
+                return;
+            this.setPosition(this.overlayRef.getConfig().positionStrategy);
+            this.overlayRef.updatePosition();
+        });
     }
     /** Opens the dropdown. */
     open() {
-        if (this._opened) {
+        // Untracked, as `close()`, `toggle()`, `updatePosition()` and `focus()`: called from a consumer's `effect()`,
+        // the state read on the way — `opened`, the inputs of the trigger and of the panel — would make the effect run
+        // again on every open and close.
+        untracked(() => this.openPanel());
+    }
+    /** Body of `open()`. */
+    openPanel() {
+        if (this.openedState()) {
             return;
         }
         this.check();
         const overlayRef = this.createOverlay();
         const overlayConfig = overlayRef.getConfig();
         this.setPosition(overlayConfig.positionStrategy);
-        overlayConfig.hasBackdrop = this.dropdown.hasBackdrop ? !this.isNested() : this.dropdown.hasBackdrop;
+        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();
-            this.dropdown.lazyContent.attach(this.data);
-        }
-        this.closeSubscription = this.closingActions().subscribe(() => this.close());
+        const lazyContent = this.dropdown().lazyContent?.();
+        if (lazyContent) {
+            lazyContent.detach();
+            lazyContent.attach(this.data());
+        }
+        // The overlay positions the pane once its content has rendered, which without zone.js happens in a later
+        // task: the browser can paint a frame in between with the pane at the viewport origin, where the item
+        // under the pointer takes the hover and focus. Placed now, it is re-placed after the render.
+        overlayRef.updatePosition();
+        this.closingActionsSubscription.unsubscribe();
+        this.closingActionsSubscription = this.closingActions().subscribe(() => this.close());
         this.init();
-        if (this.dropdown instanceof KbqDropdown) {
-            this.dropdown.startAnimation();
+        if (this.dropdown() instanceof KbqDropdown) {
+            this.dropdown().setOpened(true);
         }
-        this.addClassToOverlayContainer();
         this.lockOverlayWidthForSearch();
     }
     /** Closes the dropdown. */
     close() {
-        this.dropdown.closed.emit();
-        this.removeClassFromOverlayContainer();
+        untracked(() => this.dropdown().closed.emit());
     }
     /**
      * 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);
-        }
-        else {
-            this.elementRef.nativeElement.focus();
+        untracked(() => {
+            // 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;
+            // A programmatic open leaves `openedBy` unset; the host still gets `cdk-program-focused`.
+            this.focusMonitor.focusVia(this.elementRef.nativeElement, origin ?? 'program', options);
+        });
+    }
+    /** Whether focus is still the overlay's to give back, i.e. an outside click hasn't moved it elsewhere. */
+    overlayHoldsFocus() {
+        const activeElement = this.document.activeElement;
+        // Reads `null` when the overlay is being disposed, e.g. while the trigger itself is destroyed.
+        const overlayElement = this.overlayRef?.overlayElement;
+        return (!activeElement ||
+            activeElement === this.document.body ||
+            !!overlayElement?.contains(activeElement) ||
+            this.elementRef.nativeElement.contains(activeElement));
+    }
+    /**
+     * Takes the focus off the detached panel. A renderer can keep its view in the document for a while
+     * (`provideAnimations()` does, until its engine flushes), and the panel this one is nested in would not count
+     * the focus left there as its own to restore.
+     */
+    releaseFocus() {
+        const activeElement = this.document.activeElement;
+        const overlayElement = this.overlayRef?.overlayElement;
+        if (activeElement && overlayElement?.contains(activeElement)) {
+            activeElement.blur();
         }
     }
     /** Handles mouse presses on the trigger. */
@@ -1432,17 +1568,17 @@ class KbqDropdownTrigger {
      * 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) {
+        if (!this.isNested() || !this.openedState() || !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());
+        const overlayElement = this.overlayRef.overlayElement;
+        // Measured on each move: the panel can be repositioned by a scroll or resize mid-transit.
+        this.parent.activateSafeArea(this.dropdownItemInstance, { x: event.clientX, y: event.clientY }, () => overlayElement.getBoundingClientRect(), () => this.close());
     }
     /** Handles key presses on the trigger. */
     handleKeydown(event) {
         const keyCode = event.keyCode;
-        if (keyCode === ENTER$1 || keyCode === SPACE) {
+        if (keyCode === ENTER$1 || keyCode === SPACE$1) {
             this.openedBy = 'keyboard';
             event.preventDefault();
             if (this.isNested()) {
@@ -1456,7 +1592,7 @@ class KbqDropdownTrigger {
         }
         if ((this.isNested() &&
             ((keyCode === RIGHT_ARROW && this.dir === 'ltr') || (keyCode === LEFT_ARROW && this.dir === 'rtl'))) ||
-            (!this.isNested() && keyCode === DOWN_ARROW$1 && this.openByArrowDown)) {
+            (!this.isNested() && keyCode === DOWN_ARROW$1 && this.openByArrowDown())) {
             event.preventDefault();
             this.openedBy = 'keyboard';
             this.open();
@@ -1474,7 +1610,7 @@ class KbqDropdownTrigger {
         }
     }
     /** Closes the dropdown and does the necessary cleanup. */
-    destroy(reason) {
+    destroy(reason, closesChain = false) {
         if (!this.overlayRef || !this.opened) {
             return;
         }
@@ -1482,79 +1618,67 @@ class KbqDropdownTrigger {
         if (this.isNested()) {
             this.parent.deactivateSafeArea();
         }
-        this.dropdown.resetActiveItem();
-        this.closeSubscription.unsubscribe();
-        this.widthLockSubscription.unsubscribe();
+        this.dropdown().resetActiveItem();
+        this.closingActionsSubscription.unsubscribe();
+        this.widthLockRef?.destroy();
+        // Read before detaching the overlay.
+        const focusIsOurs = this.overlayHoldsFocus();
         this.overlayRef.detach();
-        if (this.restoreFocus && (reason === 'keydown' || !this.openedBy || !this.isNested())) {
+        // A nested panel closing with the whole chain leaves the focus to the root trigger.
+        const ownsFocus = (reason === 'keydown' && !closesChain) || !this.openedBy || !this.isNested();
+        if (this.restoreFocus() && focusIsOurs && ownsFocus) {
             this.focus(this.openedBy);
         }
+        this.releaseFocus();
         this.openedBy = undefined;
-        if (this.dropdown instanceof KbqDropdown) {
-            this.dropdown.resetAnimation();
-            const animationSubscription = this.dropdown.animationDone.pipe(filter((event) => event.toState === 'void'), take(1));
-            if (this.dropdown.lazyContent) {
-                // Wait for the exit animation to finish before detaching the content.
-                animationSubscription
-                    .pipe(
-                // Interrupt if the content got re-attached.
-                takeUntil(this.dropdown.lazyContent.attached))
-                    .subscribe({
-                    next: () => this.dropdown.lazyContent.detach(),
-                    // No matter whether the content got re-attached, reset the this.dropdown.
-                    complete: () => this.setIsOpened(false)
-                });
-            }
-            else {
-                animationSubscription.subscribe(() => this.setIsOpened(false));
-            }
-        }
-        else {
-            this.setIsOpened(false);
-            if (this.dropdown.lazyContent) {
-                this.dropdown.lazyContent.detach();
-            }
+        const dropdown = this.dropdown();
+        if (dropdown instanceof KbqDropdown) {
+            dropdown.setOpened(false);
         }
+        dropdown.lazyContent?.()?.detach();
+        // Last: a `dropdownClosed` handler can open the panel again, with this trigger or another one.
+        this.setIsOpened(false);
     }
     /**
      * This method sets the dropdown state to open and focuses the first item if
      * the dropdown was opened via the keyboard.
      */
     init() {
-        this.dropdown.parent = this.isNested() ? this.parent : undefined;
-        this.dropdown.direction = this.dir;
+        const dropdown = this.dropdown();
+        dropdown.parent = this.isNested() ? this.parent : undefined;
+        dropdown.direction = this.dir;
         // reset submenu items since they can be initialized as children of root menu
-        if (this.parent && !this.dropdown.items.length) {
-            this.dropdown.items.reset(Array.from(this.parent.items));
-            this.dropdown.items.notifyOnChanges();
+        if (this.parent && !dropdown.items().length) {
+            dropdown.adoptItems?.(this.parent.items());
+        }
+        if (this.autoFocus()) {
+            dropdown.focusFirstItem(this.openedBy || 'program');
+        }
+        else {
+            dropdown.resetActiveItem();
         }
-        this.dropdown.focusFirstItem(this.openedBy || 'program');
         this.setIsOpened(true);
     }
     // set state rather than toggle to support triggers sharing a dropdown
     setIsOpened(isOpen) {
-        if (isOpen !== this._opened) {
-            this.changeDetectorRef.markForCheck();
+        this.openedState.set(isOpen);
+        if (this.isNested()) {
+            this.dropdownItemInstance.highlighted = isOpen;
         }
-        this._opened = isOpen;
-        if (this._opened) {
-            // TODO: The 'emit' function requires a mandatory void argument
+        // Last, for the same reason as in `destroy()`.
+        if (isOpen) {
             this.dropdownOpened.emit();
         }
         else {
-            // TODO: The 'emit' function requires a mandatory void argument
             this.dropdownClosed.emit();
         }
-        if (this.isNested()) {
-            this.dropdownItemInstance.highlighted = isOpen;
-        }
     }
     /**
      * This method checks that a valid instance of KbqDropdown has been passed into
      * kbqDropdownTriggerFor. If not, an exception is thrown.
      */
     check() {
-        if (!this.dropdown) {
+        if (!this.dropdown()) {
             throwKbqDropdownMissingError();
         }
     }
@@ -1567,6 +1691,8 @@ class KbqDropdownTrigger {
             const config = this.getOverlayConfig();
             this.subscribeToPositions(config.positionStrategy);
             this.overlayRef = this.overlay.create(config);
+            // The trigger, not `origin`: a point origin has no place in the DOM.
+            this.overlayLayers.adopt(this.overlayRef, this.elementRef.nativeElement);
             // Consume the `keydownEvents` in order to prevent them from going to another overlay.
             // Ideally we'd also have our keyboard event logic in here, however doing so will
             // break anybody that may have implemented the `KbqDropdownPanel` themselves.
@@ -1574,51 +1700,65 @@ class KbqDropdownTrigger {
         }
         return this.overlayRef;
     }
+    /** Whether the panel is anchored to a rectangle in viewport coordinates rather than to an element. */
+    get hasPointOrigin() {
+        const origin = this.origin();
+        return !!origin && !kbqIsElementOrigin(origin);
+    }
+    /** The origin the position strategy is connected to. */
+    getResolvedOrigin() {
+        const origin = this.origin();
+        return origin ? kbqResolveOverlayOrigin(origin) : this.elementRef;
+    }
     /** Whether the panel should be at least as wide as its trigger. */
     get shouldMatchTriggerWidth() {
-        const isVerticalTrigger = this.dropdown.overlapTriggerY && !this.dropdown.overlapTriggerX;
+        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() {
         return new OverlayConfig({
             positionStrategy: this.overlay
                 .position()
-                .flexibleConnectedTo(this.elementRef)
+                .flexibleConnectedTo(this.getResolvedOrigin())
                 .withTransformOriginOn('.kbq-dropdown__panel')
                 .withPush(false),
-            backdropClass: this.dropdown.backdropClass || 'cdk-overlay-transparent-backdrop',
+            backdropClass: this.dropdown().backdropClass?.() || 'cdk-overlay-transparent-backdrop',
             scrollStrategy: this.scrollStrategy(),
             direction: this.dir,
             ...(this.shouldMatchTriggerWidth && this.getOverlaySize())
         });
     }
     /**
-     * Listens to changes in the position of the overlay and sets the correct classes
-     * on the dropdown based on the new position. This ensures the animation origin is always
-     * correct, even if a fallback position is used for the overlay.
+     * Listens to changes in the position of the overlay and sets the matching position classes on the dropdown,
+     * so they follow a fallback position too.
      */
     subscribeToPositions(position) {
-        if (this.dropdown.setPositionClasses) {
+        if (this.dropdown().setPositionClasses) {
             position.positionChanges.subscribe((change) => {
                 const posX = positionMap.overlayXToPosX[change.connectionPair.overlayX];
                 const posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
-                this.dropdown.setPositionClasses(posX, posY);
+                this.dropdown().setPositionClasses(posX, posY);
             });
         }
     }
     /**
      * Sets the appropriate positions on a position strategy
      * so the overlay connects with the trigger correctly.
+     *
      * @param positionStrategy Strategy whose position to update.
      */
     setPosition(positionStrategy) {
-        let [originX, originFallbackX, overlayX, overlayFallbackX] = positionMap.xPositions[this.dropdown.xPosition];
+        // The overlay is created once and reused, so the origin is applied again on every open. A panel anchored
+        // to a point has no trigger box to fall back on, so it is pushed back into the viewport near its edges.
+        positionStrategy.setOrigin(this.getResolvedOrigin()).withPush(this.hasPointOrigin);
+        let [originX, originFallbackX, overlayX, overlayFallbackX] = positionMap.xPositions[this.dropdown().xPosition()];
         // eslint-disable-next-line prefer-const
-        let [overlayY, overlayFallbackY, originY, originFallbackY] = this.dropdown.yPosition === 'above'
+        let [overlayY, overlayFallbackY, originY, originFallbackY] = this.dropdown().yPosition() === 'above'
             ? ['bottom', 'top', 'bottom', 'top']
             : ['top', 'bottom', 'top', 'bottom'];
         let offsetY = 0;
@@ -1627,33 +1767,33 @@ class KbqDropdownTrigger {
             // When the dropdown is nested, it should always align itself
             // to the edges of the trigger, instead of overlapping it,
             // so 'center' is not applicable for nested panels — falls back to 'after'.
-            const xPosition = this.dropdown.xPosition === 'center' ? 'after' : this.dropdown.xPosition;
+            const xPosition = this.dropdown().xPosition() === 'center' ? 'after' : this.dropdown().xPosition();
             [originX, originFallbackX, overlayX, overlayFallbackX] = positionMap.nonOverlapXPositions[xPosition];
             offsetY = overlayY === 'bottom' ? NESTED_PANEL_TOP_PADDING : -NESTED_PANEL_TOP_PADDING;
             offsetX = NESTED_PANEL_LEFT_PADDING;
         }
         else {
-            if (!this.dropdown.overlapTriggerY) {
+            if (!this.dropdown().overlapTriggerY()) {
                 offsetY = defaultOffsetY;
                 originY = overlayY === 'top' ? 'bottom' : 'top';
                 originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
             }
-            if (!this.dropdown.overlapTriggerX) {
+            if (!this.dropdown().overlapTriggerX()) {
                 [originX, originFallbackX, overlayX, overlayFallbackX] =
-                    positionMap.nonOverlapXPositions[this.dropdown.xPosition];
+                    positionMap.nonOverlapXPositions[this.dropdown().xPosition()];
             }
         }
-        const resolvedOffsetY = this.offsetY ?? (overlayY === 'top' ? offsetY : -offsetY);
-        const resolvedFallbackOffsetY = this.offsetY ?? (overlayFallbackY === 'top' ? offsetY : -offsetY);
+        const resolvedOffsetY = this.offsetY() ?? (overlayY === 'top' ? offsetY : -offsetY);
+        const resolvedFallbackOffsetY = this.offsetY() ?? (overlayFallbackY === 'top' ? offsetY : -offsetY);
         positionStrategy.withPositions([
-            { originX, originY, overlayX, overlayY, offsetY: resolvedOffsetY, offsetX: this.offsetX ?? -offsetX },
+            { originX, originY, overlayX, overlayY, offsetY: resolvedOffsetY, offsetX: this.offsetX() ?? -offsetX },
             {
                 originX: originFallbackX,
                 originY,
                 overlayX: overlayFallbackX,
                 overlayY,
                 offsetY: resolvedOffsetY,
-                offsetX: this.offsetX ?? offsetX
+                offsetX: this.offsetX() ?? offsetX
             },
             {
                 originX,
@@ -1661,7 +1801,7 @@ class KbqDropdownTrigger {
                 overlayX,
                 overlayY: overlayFallbackY,
                 offsetY: resolvedFallbackOffsetY,
-                offsetX: this.offsetX ?? -offsetX
+                offsetX: this.offsetX() ?? -offsetX
             },
             {
                 originX: originFallbackX,
@@ -1669,29 +1809,32 @@ class KbqDropdownTrigger {
                 overlayX: overlayFallbackX,
                 overlayY: overlayFallbackY,
                 offsetY: resolvedFallbackOffsetY,
-                offsetX: this.offsetX ?? -offsetX
+                offsetX: this.offsetX() ?? -offsetX
             }
         ]);
     }
     /** Cleans up the active subscriptions. */
     cleanUpSubscriptions() {
-        this.closeSubscription.unsubscribe();
+        this.closingActionsSubscription.unsubscribe();
         this.hoverSubscription.unsubscribe();
-        this.widthLockSubscription.unsubscribe();
+        this.widthLockRef?.destroy();
     }
     /** Returns a stream that emits whenever an action that should close the dropdown occurs. */
     closingActions() {
         const backdrop = this.overlayRef.backdropClick();
-        const outsidePointerEvents = this.overlayRef.outsidePointerEvents();
+        // A click on the trigger is the trigger's own: it toggles a top-level panel and keeps a nested one open. Taken for
+        // an outside click, it closed the nested panel before the click reached the trigger. The trigger does not handle
+        // `contextmenu` and `auxclick`, so those close the panel as they do anywhere else.
+        const outsidePointerEvents = this.overlayRef.outsidePointerEvents().pipe(filter((event) => event.type !== 'click' || !this.elementRef.nativeElement.contains(_getEventTarget(event))));
         const detachments = this.overlayRef.detachments();
-        const parentClose = this.parent ? this.parent.closed : of();
+        const parentClose = this.parent ? outputToObservable(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.openedState()), 
             // 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()`).
+            // before the new trigger opens, so the two don't race over the state of a dropdown shared by
+            // both triggers (see `KbqDropdown.activateSafeArea()`).
             filter(() => !this.parent.isSafeAreaActive()))
             : of();
         return merge(backdrop, outsidePointerEvents, parentClose, hover, detachments);
@@ -1702,7 +1845,7 @@ class KbqDropdownTrigger {
         if (!this.isNested()) {
             return;
         }
-        this.hoverSubscription = merge(this.parent.hovered().pipe(filter((active) => active === this.dropdownItemInstance && !active.disabled), 
+        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
@@ -1718,20 +1861,7 @@ class KbqDropdownTrigger {
             // 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
-            // before doing so. Also interrupt if the user moves to another item.
-            if (this.dropdown instanceof KbqDropdown && this.dropdown.isAnimating) {
-                // We need the `delay(0)` here in order to avoid
-                // 'changed after checked' errors in some cases. See #12194.
-                this.dropdown.animationDone
-                    .pipe(take(1), delay(0, asapScheduler), takeUntil(this.parent.hovered()))
-                    // eslint-disable-next-line rxjs-x/no-nested-subscribe
-                    .subscribe(() => this.open());
-            }
-            else {
-                this.open();
-            }
+            this.open();
         });
     }
     /** Gets the portal that should be attached to the overlay. */
@@ -1739,13 +1869,16 @@ class KbqDropdownTrigger {
         // Note that we can avoid this check by keeping the portal on the dropdown panel.
         // While it would be cleaner, we'd have to introduce another required method on
         // `KbqDropdownPanel`, making it harder to consume.
-        if (!this.portal || this.portal.templateRef !== this.dropdown.templateRef) {
-            this.portal = new TemplatePortal(this.dropdown.templateRef, this.viewContainerRef);
+        if (!this.portal || this.portal.templateRef !== this.dropdown().templateRef()) {
+            this.portal = new TemplatePortal(this.dropdown().templateRef(), this.viewContainerRef);
         }
         return this.portal;
     }
     getOverlaySize() {
-        return kbqResolvePanelWidth(this.dropdown.panelWidth?.(), this.dropdown.panelMinWidth?.(), this.isBrowser ? kbqGetPanelWidthOrigin(this.widthOrigin ?? this.elementRef) : 0);
+        // A caret has no width to match, and the hidden element such a trigger usually sits on has none either;
+        // an explicit `panelWidth` still applies.
+        const triggerWidth = this.isBrowser && !this.hasPointOrigin ? kbqGetPanelWidthOrigin(this.widthOrigin ?? this.elementRef) : 0;
+        return kbqResolvePanelWidth(this.dropdown().panelWidth?.(), this.dropdown().panelMinWidth?.(), triggerWidth);
     }
     /**
      * When the panel hosts a search field, its content-sized width would jump as the field's cleaner
@@ -1755,48 +1888,28 @@ class KbqDropdownTrigger {
     lockOverlayWidthForSearch() {
         if (!this.isBrowser ||
             !this.shouldMatchTriggerWidth ||
-            !(this.dropdown instanceof KbqDropdown) ||
-            !this.dropdown.hasSearch()) {
+            !(this.dropdown() instanceof KbqDropdown) ||
+            !this.dropdown().hasSearch()) {
             return;
         }
-        this.widthLockSubscription = this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => this.pinOverlayWidth());
+        this.widthLockRef = afterNextRender(() => this.pinOverlayWidth(), { injector: this.injector });
     }
     /** Freezes the overlay pane at its rendered width. */
     pinOverlayWidth() {
-        if (!this._opened || !this.overlayRef)
+        if (!this.openedState() || !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)
-            return;
-        const overlayContainer = this.overlayContainer?.getContainerElement();
-        if (overlayContainer.childNodes.length === 1) {
-            this.classAddedToOverlayContainer = true;
-            this.renderer.addClass(overlayContainer, 'cdk-overlay-container_dropdown');
-        }
-    }
-    removeClassFromOverlayContainer() {
-        if (this.classAddedToOverlayContainer) {
-            this.renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
-        }
-    }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqDropdownTrigger, isStandalone: true, selector: "[kbqDropdownTriggerFor]", inputs: { offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "kbqDropdownTriggerData", isSignal: true, isRequired: false, transformFunction: null }, openByArrowDown: { classPropertyName: "openByArrowDown", publicName: "openByArrowDown", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "kbqDropdownTriggerOrigin", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "kbqDropdownTriggerAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "kbqDropdownTriggerRestoreFocus", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "kbqDropdownTriggerFor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { offsetX: "offsetXChange", openByArrowDown: "openByArrowDownChange", restoreFocus: "kbqDropdownTriggerRestoreFocusChange", dropdownOpened: "dropdownOpened", dropdownClosed: "dropdownClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "mouseleave": "handleMouseLeave($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "class.kbq-pressed": "opened", "attr.aria-expanded": "ariaExpanded" }, classAttribute: "kbq-dropdown-trigger" }, providers: [kbqSiblingPopupProvider(KbqDropdownTrigger)], exportAs: ["kbqDropdownTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbqDropdownTriggerFor]`,
@@ -1804,6 +1917,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     host: {
                         class: 'kbq-dropdown-trigger',
                         '[class.kbq-pressed]': 'opened',
+                        // No `aria-haspopup` here: the panel carries neither `role="menu"` nor `role="menuitem"`, and
+                        // `aria-haspopup="true"` is a synonym for `menu` — it would announce a menu that does not
+                        // exist. Hosts that do build menu semantics on top (e.g. `KbqAppSwitcherDropdownSite`) set the
+                        // attribute themselves.
+                        '[attr.aria-expanded]': 'ariaExpanded',
                         '(mousedown)': 'handleMousedown($event)',
                         '(mouseleave)': 'handleMouseLeave($event)',
                         '(keydown)': 'handleKeydown($event)',
@@ -1811,54 +1929,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     },
                     exportAs: 'kbqDropdownTrigger'
                 }]
-        }], ctorParameters: () => [], propDecorators: { offsetX: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], offsetY: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], data: [{
-                type: Input,
-                args: ['kbqDropdownTriggerData']
-            }], openByArrowDown: [{
-                type: Input
-            }], demoteOverlay: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], restoreFocus: [{
-                type: Input,
-                args: ['kbqDropdownTriggerRestoreFocus']
-            }], dropdown: [{
-                type: Input,
-                args: ['kbqDropdownTriggerFor']
-            }], dropdownOpened: [{ type: i0.Output, args: ["dropdownOpened"] }], dropdownClosed: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }, { type: i0.Output, args: ["offsetXChange"] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetY", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDropdownTriggerData", required: false }] }], openByArrowDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "openByArrowDown", required: false }] }, { type: i0.Output, args: ["openByArrowDownChange"] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDropdownTriggerOrigin", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDropdownTriggerAutoFocus", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDropdownTriggerRestoreFocus", required: false }] }, { type: i0.Output, args: ["kbqDropdownTriggerRestoreFocusChange"] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDropdownTriggerFor", required: false }] }], dropdownOpened: [{ type: i0.Output, args: ["dropdownOpened"] }], dropdownClosed: [{ type: i0.Output, args: ["dropdownClosed"] }] } });
 
 class KbqDropdownModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
             KbqIconModule,
             KbqDropdownStaticContent,
             KbqDropdown,
             KbqDropdownItem,
+            KbqDropdownItemCaption,
             KbqDropdownItemAction,
             KbqDropdownTrigger,
             KbqDropdownContent,
             KbqDropdownFooter,
+            KbqDropdownGroupHeader,
             KbqDropdownSearch], exports: [KbqDropdown,
             KbqDropdownItem,
+            KbqDropdownItemCaption,
             KbqDropdownItemAction,
             KbqDropdownTrigger,
             KbqDropdownContent,
             KbqDropdownStaticContent,
             KbqDropdownFooter,
+            KbqDropdownGroupHeader,
             KbqDropdownSearch] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownModule, imports: [OverlayModule,
             KbqIconModule,
             KbqDropdownItem] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1867,20 +1967,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqDropdownStaticContent,
                         KbqDropdown,
                         KbqDropdownItem,
+                        KbqDropdownItemCaption,
                         KbqDropdownItemAction,
                         KbqDropdownTrigger,
                         KbqDropdownContent,
                         KbqDropdownFooter,
+                        KbqDropdownGroupHeader,
                         KbqDropdownSearch
                     ],
                     exports: [
                         KbqDropdown,
                         KbqDropdownItem,
+                        KbqDropdownItemCaption,
                         KbqDropdownItemAction,
                         KbqDropdownTrigger,
                         KbqDropdownContent,
                         KbqDropdownStaticContent,
                         KbqDropdownFooter,
+                        KbqDropdownGroupHeader,
                         KbqDropdownSearch
                     ]
                 }]
@@ -1890,5 +1994,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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, 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 };
+export { KBQ_DROPDOWN_DEFAULT_OPTIONS, KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY, KBQ_DROPDOWN_ITEM_ACTION_HOST, KBQ_DROPDOWN_PANEL, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqDropdown, KbqDropdownContent, KbqDropdownFooter, KbqDropdownGroupHeader, KbqDropdownItem, KbqDropdownItemAction, KbqDropdownItemCaption, KbqDropdownModule, KbqDropdownSearch, KbqDropdownStaticContent, KbqDropdownTrigger, NESTED_HOVER_SWITCH_DELAY, NESTED_PANEL_LEFT_PADDING, NESTED_PANEL_TOP_PADDING, throwKbqDropdownInvalidPositionX, throwKbqDropdownInvalidPositionY, throwKbqDropdownMissingError, throwKbqDropdownSearchMissingInputError, throwKbqDropdownSearchMissingNgControlError };
 //# sourceMappingURL=koobiq-components-dropdown.mjs.map