@koobiq/components 19.8.5 → 19.8.7

package/fesm2022/koobiq-components-dl.mjs

@@ -1,9 +1,9 @@
+import { Platform, PlatformModule } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, ChangeDetectorRef, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { startWith, debounceTime } from 'rxjs/operators';
 import { A11yModule } from '@angular/cdk/a11y';
-import { PlatformModule } from '@angular/cdk/platform';
 
 class KbqDlComponent {
     constructor() {
@@ -15,6 +15,7 @@ class KbqDlComponent {
         this.resizeSubscription = Subscription.EMPTY;
         this.elementRef = inject(ElementRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.platform = inject(Platform);
         this.updateState = () => {
             const domRect = this.elementRef.nativeElement.getClientRects()[0];
             const width = domRect?.width || 0;
@@ -23,7 +24,7 @@ class KbqDlComponent {
         };
     }
     ngAfterContentInit() {
-        if (this.vertical !== null) {
+        if (this.vertical !== null || !this.platform.isBrowser) {
             return;
         }
         this.resizeSubscription = this.resizeStream
@@ -34,7 +35,7 @@ class KbqDlComponent {
         this.resizeSubscription.unsubscribe();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDlComponent, isStandalone: true, selector: "kbq-dl", inputs: { minWidth: "minWidth", wide: "wide", vertical: "vertical" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-dl_vertical": "vertical", "class.kbq-dl_wide": "wide" }, classAttribute: "kbq-dl" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{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)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDlComponent, isStandalone: true, selector: "kbq-dl", inputs: { minWidth: "minWidth", wide: "wide", vertical: "vertical" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-dl_vertical": "vertical", "class.kbq-dl_wide": "wide" }, classAttribute: "kbq-dl" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{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)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDlComponent, decorators: [{
             type: Component,
@@ -43,7 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-dl_vertical]': 'vertical',
                         '[class.kbq-dl_wide]': 'wide',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, encapsulation: ViewEncapsulation.None, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{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)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-horizontal-content-gap-horizontal);row-gap:var(--kbq-description-list-size-horizontal-gap-vertical);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{min-width:0;overflow-wrap:break-word}.kbq-dl .kbq-dt{grid-column:1}.kbq-dl .kbq-dd{grid-column:2/span 3}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);row-gap:var(--kbq-description-list-size-vertical-content-gap-vertical)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd:not(:last-child){margin-bottom:var(--kbq-description-list-size-vertical-gap-vertical)}.kbq-dt{color:var(--kbq-description-list-term-color)}.kbq-dd{color:var(--kbq-description-list-description-color)}.kbq-dl .kbq-dt,.kbq-dl .kbq-dd{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)}\n", ".kbq-dl{--kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);--kbq-description-list-description-color: var(--kbq-foreground-contrast)}\n"] }]
         }], propDecorators: { minWidth: [{
                 type: Input
             }], wide: [{

package/fesm2022/koobiq-components-dl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-dl.mjs","sources":["../../../packages/components/dl/dl.component.ts","../../../packages/components/dl/dl.module.ts","../../../packages/components/dl/koobiq-components-dl.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    inject,\n    Input,\n    OnDestroy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime, startWith } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-dl',\n    template: '<ng-content />',\n    styleUrls: ['dl.scss', 'dl-tokens.scss'],\n    host: {\n        class: 'kbq-dl',\n        '[class.kbq-dl_vertical]': 'vertical',\n        '[class.kbq-dl_wide]': 'wide',\n        '(window:resize)': 'resizeStream.next($event)'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDlComponent implements AfterContentInit, OnDestroy {\n    @Input() minWidth: number = 400;\n    @Input() wide = false;\n    @Input() vertical: boolean | null = null;\n\n    readonly resizeStream = new Subject<Event>();\n    private readonly resizeDebounceInterval: number = 100;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n    ngAfterContentInit(): void {\n        if (this.vertical !== null) {\n            return;\n        }\n\n        this.resizeSubscription = this.resizeStream\n            .pipe(startWith(null), debounceTime(this.resizeDebounceInterval))\n            .subscribe(this.updateState);\n    }\n\n    ngOnDestroy() {\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private readonly updateState = (): void => {\n        const domRect = this.elementRef.nativeElement.getClientRects()[0];\n        const width = domRect?.width || 0;\n\n        this.vertical = width <= this.minWidth;\n\n        this.changeDetectorRef.markForCheck();\n    };\n}\n\n@Component({\n    selector: 'kbq-dt',\n    template: '<ng-content />',\n    host: {\n        class: 'kbq-dt'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDtComponent {}\n\n@Component({\n    selector: 'kbq-dd',\n    template: '<ng-content />',\n    host: {\n        class: 'kbq-dd'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDdComponent {}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqDdComponent, KbqDlComponent, KbqDtComponent } from './dl.component';\n\n@NgModule({\n    imports: [\n        A11yModule,\n        PlatformModule,\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ],\n    exports: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ]\n})\nexport class KbqDlModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-dl.mjs","sources":["../../../packages/components/dl/dl.component.ts","../../../packages/components/dl/dl.module.ts","../../../packages/components/dl/koobiq-components-dl.ts"],"sourcesContent":["import { Platform } from '@angular/cdk/platform';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    inject,\n    Input,\n    OnDestroy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime, startWith } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-dl',\n    template: '<ng-content />',\n    styleUrls: ['dl.scss', 'dl-tokens.scss'],\n    host: {\n        class: 'kbq-dl',\n        '[class.kbq-dl_vertical]': 'vertical',\n        '[class.kbq-dl_wide]': 'wide',\n        '(window:resize)': 'resizeStream.next($event)'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDlComponent implements AfterContentInit, OnDestroy {\n    @Input() minWidth: number = 400;\n    @Input() wide = false;\n    @Input() vertical: boolean | null = null;\n\n    readonly resizeStream = new Subject<Event>();\n    private readonly resizeDebounceInterval: number = 100;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n    private readonly platform = inject(Platform);\n\n    ngAfterContentInit(): void {\n        if (this.vertical !== null || !this.platform.isBrowser) {\n            return;\n        }\n\n        this.resizeSubscription = this.resizeStream\n            .pipe(startWith(null), debounceTime(this.resizeDebounceInterval))\n            .subscribe(this.updateState);\n    }\n\n    ngOnDestroy() {\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private readonly updateState = (): void => {\n        const domRect = this.elementRef.nativeElement.getClientRects()[0];\n        const width = domRect?.width || 0;\n\n        this.vertical = width <= this.minWidth;\n\n        this.changeDetectorRef.markForCheck();\n    };\n}\n\n@Component({\n    selector: 'kbq-dt',\n    template: '<ng-content />',\n    host: {\n        class: 'kbq-dt'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDtComponent {}\n\n@Component({\n    selector: 'kbq-dd',\n    template: '<ng-content />',\n    host: {\n        class: 'kbq-dd'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDdComponent {}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqDdComponent, KbqDlComponent, KbqDtComponent } from './dl.component';\n\n@NgModule({\n    imports: [\n        A11yModule,\n        PlatformModule,\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ],\n    exports: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ]\n})\nexport class KbqDlModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-dropdown.mjs

@@ -2,7 +2,7 @@ import { trigger, state, transition, style, animate, group, query } from '@angul
 import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { DOCUMENT, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Directive, InjectionToken, booleanAttribute, HostListener, Input, ContentChild, ViewChild, Inject, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, QueryList, TemplateRef, Output, ContentChildren, Renderer2, numberAttribute, Self, NgModule } from '@angular/core';
+import { inject, Directive, InjectionToken, input, booleanAttribute, HostListener, Input, ContentChild, ViewChild, Inject, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, QueryList, TemplateRef, Output, ContentChildren, Renderer2, numberAttribute, Self, NgModule } from '@angular/core';
 import { Subject, Subscription, merge, of, asapScheduler } from 'rxjs';
 import * as i1 from '@angular/cdk/a11y';
 import { KbqComponentColors, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, defaultOffsetY } from '@koobiq/components/core';
@@ -183,6 +183,8 @@ class KbqDropdownItem {
         this.focusMonitor = focusMonitor;
         this.parentDropdownPanel = parentDropdownPanel;
         this._disabled = false;
+        /** Whether the dropdown item is in a loading state. */
+        this.progress = input(false, { transform: booleanAttribute });
         /** Stream that emits when the dropdown item is hovered. */
         this.hovered = new Subject();
         /** Stream that emits when the menu item is focused. */
@@ -212,15 +214,27 @@ class KbqDropdownItem {
     resetStyles() {
         this.getHostElement().classList.remove('cdk-keyboard-focused');
     }
-    /** Focuses the dropdown item. */
+    /**
+     * Focuses the dropdown item and reveals it.
+     *
+     * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers
+     * it to a later rendering update, where it lands after — and undoes — any scrolling the reader did in
+     * the meantime. `preventScroll` is therefore always forced on, overriding `options`.
+     */
     focus(origin, options) {
         if (this.disabled)
             return;
+        const element = this.getHostElement();
+        const focusOptions = { ...options, preventScroll: true };
         if (this.focusMonitor && origin) {
-            this.focusMonitor.focusVia(this.getHostElement(), origin, options);
+            this.focusMonitor.focusVia(element, origin, focusOptions);
         }
         else {
-            this.getHostElement().focus(options);
+            element.focus(focusOptions);
+        }
+        // With the pointer already on this item, revealing it would shift the list out from under it.
+        if (origin !== 'mouse') {
+            element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
         }
         this.focused.next(this);
     }
@@ -271,9 +285,9 @@ class KbqDropdownItem {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdownItem, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: KBQ_DROPDOWN_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqDropdownItem, isStandalone: true, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "checkDisabled($event)", "mouseenter": "handleMouseEnter()" }, properties: { "class.kbq-dropdown-item_with-icon": "icon", "class.kbq-dropdown-item_highlighted": "highlighted", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabindex": "getTabIndex()" }, classAttribute: "kbq-dropdown-item" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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()" }, properties: { "class.kbq-dropdown-item_with-icon": "icon", "class.kbq-dropdown-item_highlighted": "highlighted", "class.kbq-disabled": "disabled", "class.kbq-progress": "progress()", "attr.disabled": "disabled || null", "attr.tabindex": "getTabIndex()" }, classAttribute: "kbq-dropdown-item" }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
-        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true, static: true }], exportAs: ["kbqDropdownItem"], ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true, static: true }], exportAs: ["kbqDropdownItem"], ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@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.kbq-progress .kbq-dropdown-item-overlay{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite;inset:calc(-1 * var(--kbq-size-3xs))}@media(prefers-reduced-motion:reduce){.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay{animation:none}}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdownItem, decorators: [{
             type: Component,
@@ -284,11 +298,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-dropdown-item_with-icon]': 'icon',
                         '[class.kbq-dropdown-item_highlighted]': 'highlighted',
                         '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-progress]': 'progress()',
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'getTabIndex()'
                     }, providers: [
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqDropdownItem }
-                    ], template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-dropdown-item{width:100%;border-radius:var(--kbq-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-dropdown-item .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item .kbq-list-text:empty{display:none}.kbq-dropdown-item .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item:not(.kbq-disabled){cursor:pointer}.kbq-dropdown-item{text-align:left;align-items:flex-start;text-decoration:none}.kbq-dropdown-item>.kbq-icon:first-child:before,.kbq-dropdown-item>.kbq-icon:first-child>svg{align-self:center;display:flex;height:var(--kbq-size-xl);width:16px;align-items:center}.kbq-dropdown-item .kbq-dropdown-item__caption{padding-top:var(--kbq-size-3xs)}.kbq-dropdown-item__text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown-item__text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown-item__text:empty{display:none}.kbq-dropdown-item__text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown-item-overlay{position:absolute;inset:-1px;border-radius:inherit}.kbq-dropdown__group-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-xs);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-3xs)}.kbq-dropdown__group-header .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header .kbq-list-text:empty{display:none}.kbq-dropdown__group-header .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:32px;border-left:var(--kbq-size-3xs) solid transparent;border-right:var(--kbq-size-3xs) solid transparent;padding-top:var(--kbq-size-m);padding-left:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-right:calc(var(--kbq-size-m) - var(--kbq-size-3xs));padding-bottom:var(--kbq-size-xxs)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text:empty{display:none}.kbq-dropdown__group-header.kbq-dropdown__group-header_small .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+                    ], template: "<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText class=\"kbq-dropdown-item__text\">\n    <ng-content />\n</div>\n\n@if (isNested) {\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-dropdown-trigger__icon\" [color]=\"componentColors.ContrastFade\"></i>\n}\n\n<div class=\"kbq-dropdown-item-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: ["@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.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: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_DROPDOWN_PANEL]
@@ -321,6 +336,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     selector: '[kbqDropdownStaticContent]'
                 }]
         }] });
+/** Footer that is rendered below the dropdown options panel. */
+class KbqDropdownFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdownFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqDropdownFooter, isStandalone: true, selector: "[kbqDropdownFooter], kbq-dropdown-footer", host: { classAttribute: "kbq-dropdown-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdownFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDropdownFooter], kbq-dropdown-footer',
+                    host: { class: 'kbq-dropdown-footer' }
+                }]
+        }] });
 class KbqDropdown {
     /** Position of the dropdown in the X axis. */
     get xPosition() {
@@ -498,7 +525,7 @@ class KbqDropdown {
         // queried with a `ViewChild`. If there are no rendered items, focus stays on the trigger,
         // same as `setFirstItemActive` no-ops in that case.
         const panel = this.directDescendantItems.first?.getHostElement().closest('.kbq-dropdown__panel');
-        panel?.focus();
+        panel?.focus({ preventScroll: true });
     }
     /**
      * Resets the active item in the dropdown. This is used when the dropdown is opened, allowing
@@ -565,9 +592,9 @@ class KbqDropdown {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdown, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: KBQ_DROPDOWN_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDropdown, isStandalone: true, selector: "kbq-dropdown", inputs: { navigationWithWrap: "navigationWithWrap", xPosition: "xPosition", yPosition: "yPosition", overlapTriggerY: "overlapTriggerY", overlapTriggerX: "overlapTriggerX", hasBackdrop: "hasBackdrop", panelClass: ["class", "panelClass"], backdropClass: "backdropClass" }, outputs: { closed: "closed" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDropdown, isStandalone: true, selector: "kbq-dropdown", inputs: { navigationWithWrap: "navigationWithWrap", xPosition: "xPosition", yPosition: "yPosition", overlapTriggerY: "overlapTriggerY", overlapTriggerX: "overlapTriggerX", hasBackdrop: "hasBackdrop", panelClass: ["class", "panelClass"], backdropClass: "backdropClass" }, outputs: { closed: "closed" }, host: { styleAttribute: "display: contents" }, providers: [
             { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-        ], queries: [{ propertyName: "search", first: true, predicate: KbqFormField, descendants: 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        [ngClass]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-trigger.kbq-button{padding-left:calc(10px - var(--kbq-size-border-width));padding-right:calc(10px - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box;padding:var(--kbq-size-xxs)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        ], queries: [{ propertyName: "search", first: true, predicate: KbqFormField, descendants: 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        [ngClass]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqDropdownFooter], kbq-dropdown-footer\" />\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item.kbq-progress:after{background:none;animation:none}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column;padding:var(--kbq-size-xxs)}.kbq-dropdown-footer{border-color:var(--kbq-line-contrast-less)}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             kbqDropdownAnimations.transformDropdown,
             kbqDropdownAnimations.fadeInItems
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -576,12 +603,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             type: Component,
             args: [{ selector: 'kbq-dropdown', imports: [
                         NgClass
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqDropdown', animations: [
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqDropdown', host: {
+                        // Remove the TemplatePortal host box from layout while keeping kbqDropdownStaticContent in the document flow.
+                        style: 'display: contents'
+                    }, animations: [
                         kbqDropdownAnimations.transformDropdown,
                         kbqDropdownAnimations.fadeInItems
                     ], providers: [
                         { provide: KBQ_DROPDOWN_PANEL, useExisting: KbqDropdown }
-                    ], template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [ngClass]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-trigger.kbq-button{padding-left:calc(10px - var(--kbq-size-border-width));padding-right:calc(10px - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box;padding:var(--kbq-size-xxs)}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+                    ], template: "<ng-template>\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-dropdown__panel\"\n        [class.kbq-dropdown__panel_nested]=\"parent\"\n        [ngClass]=\"classList\"\n        [@transformDropdown]=\"panelAnimationState\"\n        (@transformDropdown.done)=\"onAnimationDone($event)\"\n        (@transformDropdown.start)=\"onAnimationStart($event)\"\n        (click)=\"close()\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        <div class=\"kbq-dropdown__content\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqDropdownFooter], kbq-dropdown-footer\" />\n    </div>\n</ng-template>\n\n<ng-content select=\"[kbqDropdownStaticContent]\" />\n", styles: [".kbq-dropdown-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-dropdown-trigger.kbq-button{padding-left:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));padding-right:calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width))}.kbq-dropdown-trigger.kbq-button .kbq-icon_left{margin-right:var(--kbq-size-xs)}.kbq-dropdown-trigger.kbq-button .kbq-icon_right{margin-left:var(--kbq-size-3xs)}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_left{margin-right:0}.kbq-dropdown-trigger.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left .kbq-icon_right{margin-left:0}.kbq-dropdown-trigger__icon{margin-left:auto;align-self:center}.kbq-dropdown__panel{outline:none;overflow-x:hidden;overflow-y:auto;min-width:max(var(--kbq-dropdown-size-container-width-min),100%);max-width:var(--kbq-dropdown-size-container-width-max);border-radius:var(--kbq-dropdown-size-container-border-radius);box-sizing:border-box}.kbq-dropdown__panel.ng-animating{pointer-events:none}.kbq-dropdown__panel .kbq-dropdown-item{position:relative}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-dropdown__panel .kbq-dropdown-item:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item:before,.kbq-dropdown__panel .kbq-dropdown-item:after{top:calc(-1 * var(--kbq-size-3xs));bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-dropdown__panel .kbq-dropdown-item.kbq-progress:after{background:none;animation:none}.kbq-dropdown__panel .kbq-divider{margin-left:calc(var(--kbq-size-xxs) * -1);margin-right:calc(var(--kbq-size-xxs) * -1)}.kbq-dropdown__content{display:flex;flex-direction:column;padding:var(--kbq-size-xxs)}.kbq-dropdown-footer{border-color:var(--kbq-line-contrast-less)}.kbq-dropdown__panel{box-shadow:var(--kbq-dropdown-container-shadow);background:var(--kbq-dropdown-container-background)}.kbq-dropdown-item{background:var(--kbq-list-default-container-background);color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-default-text-color)}.kbq-dropdown-item .kbq-dropdown-item__caption{color:var(--kbq-dropdown-item-caption-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted,.kbq-dropdown-item.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background);color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-dropdown-item_highlighted .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-dropdown-item.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-hover-text-color)}.kbq-dropdown-item.kbq-selected{background:var(--kbq-list-states-selected-container-background);color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled){background:var(--kbq-list-states-selected-hover-container-background);color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-selected.cdk-focused:not(.kbq-disabled) .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-selected-hover-text-color)}.kbq-dropdown-item.kbq-disabled{background:var(--kbq-list-states-disabled-container-background);color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-list-states-disabled-text-color)}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused):has(+:is(.kbq-selected,.cdk-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-dropdown-item:is(.kbq-selected,.cdk-focused)+:is(.kbq-selected,.cdk-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{color:var(--kbq-foreground-contrast-secondary)}.kbq-dropdown-item-overlay{background:transparent}.kbq-dropdown-item,.kbq-dropdown__content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-dropdown-item .kbq-dropdown-item__caption,.kbq-dropdown__content .kbq-dropdown-item__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-dropdown__group-header{font-size:var(--kbq-typography-big-strong-font-size);font-style:var(--kbq-typography-big-strong-font-style);font-weight:var(--kbq-typography-big-strong-font-weight);line-height:var(--kbq-typography-big-strong-line-height);font-family:var(--kbq-typography-big-strong-font-family);text-transform:var(--kbq-typography-big-strong-text-transform);font-feature-settings:var(--kbq-typography-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-big-strong-letter-spacing)}.kbq-dropdown__group-header.kbq-dropdown__group-header_small{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-dropdown__panel{--kbq-dropdown-size-container-width-min: 200px;--kbq-dropdown-size-container-width-max: 640px;--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);--kbq-dropdown-container-background: var(--kbq-background-card);--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);--kbq-dropdown-item-border-radius: var(--kbq-size-xs);--kbq-dropdown-item-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_DROPDOWN_DEFAULT_OPTIONS]
@@ -618,8 +648,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Output
             }] } });
 
-/** Injection token that determines the scroll handling while the dropdown is open. */
-const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while the dropdown is open. The root default keeps the
+ * trigger usable outside `KbqDropdownModule`'s injector; providing the token anywhere still wins over it.
+ */
+const KBQ_DROPDOWN_SCROLL_STRATEGY = new InjectionToken('kbq-dropdown-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+});
 /** @docs-private */
 function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
@@ -734,6 +770,8 @@ class KbqDropdownTrigger {
         this.overlayRef = null;
         this.closeSubscription = Subscription.EMPTY;
         this.hoverSubscription = Subscription.EMPTY;
+        /** Waits for the exit animation to finish a close; must not outlive the trigger, or it emits once destroyed. */
+        this.closeAnimationSubscriptions = new Subscription();
         this.classAddedToOverlayContainer = false;
         /**
          * Handles touch start events on the trigger.
@@ -753,6 +791,7 @@ class KbqDropdownTrigger {
         this.handleHover();
     }
     ngOnDestroy() {
+        this.closeAnimationSubscriptions.unsubscribe();
         if (this.overlayRef) {
             this.overlayRef.dispose();
             this.overlayRef = null;
@@ -870,7 +909,7 @@ class KbqDropdownTrigger {
             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
+                this.closeAnimationSubscriptions.add(animationSubscription
                     .pipe(
                 // Interrupt if the content got re-attached.
                 takeUntil(this.dropdown.lazyContent.attached))
@@ -878,10 +917,10 @@ class KbqDropdownTrigger {
                     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));
+                this.closeAnimationSubscriptions.add(animationSubscription.subscribe(() => this.setIsOpened(false)));
             }
         }
         else {
@@ -1176,11 +1215,13 @@ class KbqDropdownModule {
             KbqDropdown,
             KbqDropdownItem,
             KbqDropdownTrigger,
-            KbqDropdownContent], exports: [KbqDropdown,
+            KbqDropdownContent,
+            KbqDropdownFooter], exports: [KbqDropdown,
             KbqDropdownItem,
             KbqDropdownTrigger,
             KbqDropdownContent,
-            KbqDropdownStaticContent] }); }
+            KbqDropdownStaticContent,
+            KbqDropdownFooter] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDropdownModule, providers: [KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
             KbqIconModule,
             KbqDropdownItem] }); }
@@ -1196,14 +1237,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqDropdown,
                         KbqDropdownItem,
                         KbqDropdownTrigger,
-                        KbqDropdownContent
+                        KbqDropdownContent,
+                        KbqDropdownFooter
                     ],
                     exports: [
                         KbqDropdown,
                         KbqDropdownItem,
                         KbqDropdownTrigger,
                         KbqDropdownContent,
-                        KbqDropdownStaticContent
+                        KbqDropdownStaticContent,
+                        KbqDropdownFooter
                     ],
                     providers: [KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER]
                 }]
@@ -1213,5 +1256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_DROPDOWN_DEFAULT_OPTIONS, KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY, KBQ_DROPDOWN_HOST, KBQ_DROPDOWN_PANEL, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqDropdown, KbqDropdownContent, KbqDropdownItem, KbqDropdownModule, KbqDropdownStaticContent, KbqDropdownTrigger, NESTED_PANEL_LEFT_PADDING, NESTED_PANEL_TOP_PADDING, fadeInItems, kbqDropdownAnimations, throwKbqDropdownInvalidPositionX, throwKbqDropdownInvalidPositionY, throwKbqDropdownMissingError, transformDropdown };
+export { KBQ_DROPDOWN_DEFAULT_OPTIONS, KBQ_DROPDOWN_DEFAULT_OPTIONS_FACTORY, KBQ_DROPDOWN_HOST, KBQ_DROPDOWN_PANEL, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY, KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqDropdown, KbqDropdownContent, KbqDropdownFooter, KbqDropdownItem, KbqDropdownModule, KbqDropdownStaticContent, KbqDropdownTrigger, NESTED_PANEL_LEFT_PADDING, NESTED_PANEL_TOP_PADDING, fadeInItems, kbqDropdownAnimations, throwKbqDropdownInvalidPositionX, throwKbqDropdownInvalidPositionY, throwKbqDropdownMissingError, transformDropdown };
 //# sourceMappingURL=koobiq-components-dropdown.mjs.map